var limit = 30;
var shownpics = 0;

var isIE = false;
var myWidth = 800, myHeight = 600;
if (typeof(window.innerWidth) == 'number') {
  // Non-IE
  myWidth = window.innerWidth;
  myHeight = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
  // IE 6+ in 'standards compliant mode'
  myWidth = document.documentElement.clientWidth;
  myHeight = document.documentElement.clientHeight;
  isIE = true;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
  // IE 4 compatible
  myWidth = document.body.clientWidth;
  myHeight = document.body.clientHeight;
  isIE = true;
}

function positionPic(pic, id, visible) {
   
  var style = 'position: absolute;';

  var maxRight = myWidth - pic[1] - 10;
  var left = Math.floor(Math.random()*(maxRight+1));
  style = style + 'left: ' + left + 'px;';
  var maxBottom = myHeight - pic[2] - 10;
  var top = Math.floor(Math.random()*(maxBottom+1)+20); // +20, lai neaizsegtu menu
  style = style + 'top: ' + top + 'px;';
  style = style + 'width: ' + pic[1] + 'px;';
  style = style + 'height: ' + pic[2] + 'px;';

  if (!isIE) {
    style = style + 'background-image: url(\'' + pic[0] + '\'); background-repeat: no-repeat;';
  } else {
    style = style + 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + pic[0] + '\');';
  }
  if (visible) {
    style = style + 'display: block;';
  } else {
    style = style + 'display: none;';
  }

  return '<div style="' + style + '" id="p' + id + '" class="puzzle-pic"><' + '/div>';
}

window.onload = function() {
  if (document.getElementById && document.createElement) {
    var puzzle = document.getElementById('puzzle');
    var divs = '';
    for (var i = 0; i < pics.length; i++) {
      var pic = pics[i];
      divs = divs + positionPic(pic, i, true);
    }
    puzzle.innerHTML = divs;
  }
  $(".puzzle-pic").Draggable({ghosting: false, opacity: 1});
}

function changepics_hide() {

  var min = 0;
  var max = pics.length - 1;
  var picid_hide = Math.floor(Math.random() * (max - min + 1) + min);
  if (document.getElementById('p' + picid_hide)) {
    $("#p" + picid_hide).animate({ opacity: 'hide' }, 'slow');
  }
}

function changepics_show() {

  if (shownpics < limit) {
    var min = limit;
    var max = pics_hidden.length - 1;
    var picid_show = Math.floor(Math.random() * (max - min + 1) + min);
    if (document.getElementById('puzzle')) {
      var puzzle = document.getElementById('puzzle');
      var pic = pics_hidden[picid_show];
      puzzle.innerHTML = puzzle.innerHTML + positionPic(pic, picid_show, false);
      $("#" + "p" + picid_show).animate({ opacity: 'show' }, 'slow');
    }
    $("." + "puzzle-pic").Draggable({ghosting: false, opacity: 1})

    shownpics++;
  } else {
    clearTimeout(iS);
  }
}

var iH = setInterval("changepics_hide()", 4000);
var iS = setInterval("changepics_show()", 3000);