var curimg = 4;
jses_addEvent(window, "load", pageLoaded);

var curprop = [{},{},{},{},{},{},{},{},{}];
var imgprop = [
  {
    top: 148,
    left: 0,
    width: 133,
    height: 92,
    opacity: 0,
    zindex: 6
  },{
    top: 148,
    left: 0,
    width: 133,
    height: 92,
    opacity: 40,
    zindex: 7
  },{
    top: 174,
    left: 48,
    width: 144,
    height: 98,
    opacity: 60,
    zindex: 8
  },{
    top: 198,
    left: 116,
    width: 232,
    height: 156,
    opacity: 80,
    zindex: 9
  },{
    top: 204,
    left: 230,
    width: 300,
    height: 220,
    opacity: 100,
    zindex: 10
  },{
    top: 198,
    left: 405,
    width: 232,
    height: 156,
    opacity: 80,
    zindex: 9
  },{
    top: 174,
    left: 565,
    width: 144,
    height: 98,
    opacity: 60,
    zindex: 8
  },{
    top: 148,
    left: 621,
    width: 133,
    height: 92,
    opacity: 40,
    zindex: 7
  },{
    top: 148,
    left: 621,
    width: 133,
    height: 92,
    opacity: 0,
    zindex: 6
  }
];

function pageLoaded(e) {
  var pboxobj = getElement("photobox");
  if (pboxobj) {
    var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel";
    jses_addEvent(pboxobj, mousewheelevt, mwheel);
    jses_addEvent(pboxobj, "mousedown", mgrab);
    jses_addEvent(pboxobj, "mouseup", mdrop);
    var imglbl = getElement("limg4");
    imglbl.style.display = "block";
  } else {
    alert("Couldn't attach");
  }
}

var animRunning = 0;
var stepincr = 3;

var grabbed = 0;
var offset = 0;
var grabtarget;
function mgrab(e) {
  if (!e) { e = window.event; }
  grabbed = e.clientX;
  grabtarget = e.target != null ? e.target : e.srcElement;
  document.onmousemove = mmove;
  document.body.focus();
  document.onselectstart = function () { return false; };
  grabtarget.ondragstart = function() { return false; };
  return false;
}
function mdrop(e) {
  if (!e) { e = window.event; }
  grabbed = 0;
  document.onmousemove = null;
  document.onselectstart = null;
  grabtarget.ondragstart = null;
}
function mmove(e) {
  if (!e) { e = window.event; }
  if (!grabbed) { return; }
  offset = e.clientX - grabbed;

  // the offset will determine how far (+ or -) the current image should be moved
  // Only as far as image 1 or 7 - NOT 0 or 8.
  // Current image should be #4.
  // Take the fraction how far between the two areas the current image is, and scale all other values accordingly

  if (e.stopPropagation)
    e.stopPropagation();
  e.cancelBubble = true;
  e.returnValue = false;
  if (e.preventDefault)
    e.preventDefault();
  return false;
}

function mwheel(e) {
  if (!e) { e = window.event; }
  if (animRunning != 0) { return false; } else { animRunning = 1; }
  var step = 0;
  if (typeof e.detail != "undefined") {
    if (e.detail < 0) { step = -1; animRunning = -1; } else { step = 1; }
  } else if (e.wheelDelta) {
    if (e.wheelDelta < 0) { step = 1; } else { step = -1; animRunning = -1; }
  }

  for (var i=0; i<9; i++) {
    var nimg = curimg - 4 + i;
    if (nimg < 1) { nimg = numimgs+nimg; }
    if (nimg > numimgs) { nimg = nimg-numimgs; }
    timg = getElement("rimg"+nimg);
    if (timg) {
      timg.style.top    = imgprop[i].top + "px";
      timg.style.left   = imgprop[i].left + "px";
      timg.style.width  = imgprop[i].width + "px";
      timg.style.height = imgprop[i].height + "px";
      timg.style.zIndex = imgprop[i].zindex;
      curprop[i].top    = imgprop[i].top;
      curprop[i].left   = imgprop[i].left;
      curprop[i].width  = imgprop[i].width;
      curprop[i].height = imgprop[i].height;
      curprop[i].zindex = imgprop[i].zindex;
      curprop[i].opacity = imgprop[i].opacity;
      setOpacity(timg, imgprop[i].opacity);
      timg.className='imgpa';
    }
  }
  stepincr = 3;
  setTimeout(pbox_anim, 40);
  if (e.stopPropagation)
    e.stopPropagation();
  e.cancelBubble = true;
  e.returnValue = false;
  if (e.preventDefault)
    e.preventDefault();
  return false;
}

function pbox_anim() {
  // Move images according to last - this / stepincr.
  // Make sure that last set of images are out of the way before next set of images move
  // Only once all the images are in place can you call finalize
  var changeMade = 0;
  if (animRunning > 0) { // going left
    for (var i=1; i<9; i++) {
      var nimg = curimg - 4 + i;
      if (nimg < 1) { nimg = numimgs+nimg; }
      if (nimg > numimgs) { nimg = nimg-numimgs; }
      timg = getElement("rimg"+nimg);
      if (timg) {
        for (var j in imgprop[i]) {
          if (j == 'zindex') {
          } else {
            var prevpos = curprop[i][j];
            if (curprop[i][j] != imgprop[i-1][j]) { curprop[i][j] = curprop[i][j] + ((imgprop[i-1][j] - imgprop[i][j]) / stepincr); changeMade = 1; }
            if ((curprop[i][j] < imgprop[i-1][j] && imgprop[i-1][j] < prevpos) || (curprop[i][j] > imgprop[i-1][j] && imgprop[i-1][j] > prevpos)) {
              curprop[i][j] = imgprop[i-1][j];
            }
          }
        }
        var halfway = imgprop[i].left + ((imgprop[i-1].left - imgprop[i].left) / 2);
        if (curprop[i].left < halfway) { curprop[i].zindex = imgprop[i-1].zindex; }
        timg.style.top    = curprop[i].top + "px";
        timg.style.left   = curprop[i].left + "px";
        timg.style.width  = curprop[i].width + "px";
        timg.style.height = curprop[i].height + "px";
        timg.style.zIndex = curprop[i].zindex;
        setOpacity(timg, curprop[i].opacity);
      }
    }
  } else {
    for (var i=0; i<8; i++) {
      var nimg = curimg - 4 + i;
      if (nimg < 1) { nimg = numimgs+nimg; }
      if (nimg > numimgs) { nimg = nimg-numimgs; }
      timg = getElement("rimg"+nimg);
      if (timg) {
        for (var j in imgprop[i]) {
          if (j == 'zindex') {
          } else {
            var prevpos = curprop[i][j];
            if (curprop[i][j] != imgprop[i+1][j]) { curprop[i][j] = curprop[i][j] + ((imgprop[i+1][j] - imgprop[i][j]) / stepincr); changeMade = 1; }
            if ((curprop[i][j] < imgprop[i+1][j] && imgprop[i+1][j] < prevpos) || (curprop[i][j] > imgprop[i+1][j] && imgprop[i+1][j] > prevpos)) {
              curprop[i][j] = imgprop[i+1][j];
            }
          }
        }
        var halfway = imgprop[i].left + ((imgprop[i+1].left - imgprop[i].left) / 2);
        if (curprop[i].left > halfway) { curprop[i].zindex = imgprop[i+1].zindex; }
        timg.style.top    = curprop[i].top + "px";
        timg.style.left   = curprop[i].left + "px";
        timg.style.width  = curprop[i].width + "px";
        timg.style.height = curprop[i].height + "px";
        timg.style.zIndex = curprop[i].zindex;
        setOpacity(timg, curprop[i].opacity);
      }
    }
  }
  if (stepincr < 10) { stepincr+=2; }
  if (!changeMade) {
    pbox_finalize();
  } else {
    setTimeout(pbox_anim, 40);
  }
}

function pbox_finalize() {
  curimg += animRunning;
  animRunning = 0;

  if (curimg < 1) { curimg = numimgs+curimg; }
  if (curimg > numimgs) { curimg = curimg-numimgs; }

  var touched = [];
  for (var i=1; i<=numimgs; i++) {
    touched[i] = 0;
  }
  var timg = getElement("rimg"+curimg);
  if (timg) { timg.className="imgfront"; }
  timg = getElement("limg"+curimg);
  if (timg) { timg.style.display = "block"; }
  touched[curimg]=1;
  for (var i=1; i<4; i++) {
    var nimg = curimg - i;
    if (nimg < 1) { nimg = numimgs+nimg; }
    if (nimg > numimgs) { nimg = nimg-numimgs; }
    timg = getElement("rimg"+nimg);
    if (timg) { timg.className="imgl"+(4-i); clearImgStyle(timg); }
    timg = getElement("limg"+nimg);
    if (timg) { timg.style.display = "none"; }
    touched[nimg]=1;
  }
  for (var i=1; i<4; i++) {
    var nimg = curimg + i;
    if (nimg < 1) { nimg = numimgs+nimg; }
    if (nimg > numimgs) { nimg = nimg-numimgs; }
    timg = getElement("rimg"+nimg);
    if (timg) { timg.className="imgr"+(4-i); clearImgStyle(timg);}
    timg = getElement("limg"+nimg);
    if (timg) { timg.style.display = "none"; }
    touched[nimg]=1;
  }
  for (var i=1; i<=numimgs; i++) {
    if (!touched[i]) {
      timg = getElement("rimg"+i);
      timg.className="imginv";
      clearImgStyle(timg);
    }
  }
}
function clearImgStyle(obj) {
  obj.style.top = '';
  obj.style.left = '';
  obj.style.width = '';
  obj.style.height = '';
  obj.style.zIndex = '';
}