// settings
var numberofimages = numberofimages || 18;
var totheleft = totheleft || Math.round(7.5); // number of images to the left of mainwidth
var leftstart = 13 + 1; // compensate for the width of the vertical scrollbar
var mainwidth = 950;
var imagewidth = 230;
var imagemargin = 70;
var leftrightmargin = 100;
var leftrightmarginorig = 100;

// auxiliary
var totwidth = numberofimages*imagewidth + (numberofimages+1)*imagemargin;
var startx = 0;
var offsetx = 0;
var dragging = 0;
var dragelement;
var mdrag = 0;
var dragstartx = 0;
var dragstarty = 0;
var target;
var target2;
var isover = 0;
var startdrag = 0;
var enddrag = 0;
var lastmove = 0;
var lastpos = 0;
var lastdt = 0;
var poshist = new Array();
var poshisttime = new Array();
var poshistmax = 5;
var poshistcurrent = 0;
var poshistcnt = 0;
var currentspeed = 0;
var currentvel = 0;
var slowtime;
var widthover2;
var havedragged = 0;
var leftmargin;
var apis;
var leftk;
var rightk;

// general
function show(x) {
  if (document.all)
    eval( "document.all." + x + ".style.display = 'block'");
  if (document.layers)
    document.layers[x].display = 'block';
  if (document.getElementById &&!document.all) {
    hza = document.getElementById(x);
    hza.style.display = 'block';
  }
}

function hide(x) {
  if (document.all)
    eval( "document.all." + x + ".style.display = 'none'");
  if (document.layers)
    document.layers[x].display = 'none';
  if (document.getElementById &&!document.all) {
    hza = document.getElementById(x);
    hza.style.display = 'none';
  }
}

function px(x) {
  return x + 'px';
}

function nopx(x) {
  var n = parseInt(x);
  return n == null || isNaN(n) ? 0 : n;
}

function sign(x) {
  return x < 0 ? -1 : 1;
}

function getWindowWidth() {
  return window.innerWidth || document.body.clientWidth;
}

function getE(id) {
  return document.getElementById(id);
}

// layout
function setleftrightmargin() {
  var windowwidth = getWindowWidth();
  var halfwidth = Math.round((windowwidth - mainwidth)/2); 
  var margin = halfwidth < leftrightmarginorig ? halfwidth : leftrightmargin;
  if (margin < 0)
    margin = 0;
  widthover2 = totwidth - windowwidth + margin;
  leftmargin = margin - leftstart > 0 ? margin - leftstart : 0; 
}

function resetleft() {
  apis.style.left = px(Math.round((getWindowWidth() - mainwidth)/2) - totheleft*(imagewidth + imagemargin) - leftstart);
}

// mouse tracking
function slowdown(speed) {
  aspeed = Math.abs(speed);
  if (aspeed > 0) {
    if (aspeed > 50)
      newspeed = speed - 50*sign(speed);
    else
      newspeed = 0;
    var newleft = nopx(apis.style.left) + Math.round(0.01*speed);
    setleftrightmargin();
    if (newleft < -widthover2) {
      newleft = -widthover2;
      newspeed = 0;
    } else if (newleft > leftmargin) {
      newleft = leftmargin;
      newspeed = 0;
    }
    apis.style.left = px(newleft);
    slowtime = setTimeout("slowdown(" + newspeed + ");", 20);
  }
}

function mousetrack(e) {
  poshistcurrent++;
  poshistcnt++;
  if (poshistcurrent > poshistmax) {
    poshistcurrent = 1;
  }
  poshist[poshistcurrent-1] = e.clientX;
  var d = new Date();
  var currentt = d.getTime();
  lastdt = currentt - lastmove;
  lastmove = currentt;
  poshisttime[poshistcurrent-1] = lastmove;
  lastpos = e.clientX;
  var tmp = (poshistcurrent-1) + ' : ';
  var idx = poshistmax;
  if (idx > poshistcnt)
    idx = poshistcnt;
  var startidx;
  var endidx;
  if (poshistcnt <= poshistmax)
    startidx = 0;
  else if (poshistcurrent == poshistmax)
    startidx = poshistcurrent - 2;
  else
    startidx = poshistcurrent;
  endidx = poshistcurrent - 1;
  for (var i = 0; i<poshistmax; i++) {
    tmp = tmp + ' ' + poshist[i];
  }
  currentdt = poshisttime[endidx] - poshisttime[startidx];
  if (lastdt > 50)
    currentspeed = 0;
  else
    currentspeed = poshist[endidx] - poshist[startidx];
  currentvel = 1000*currentspeed/currentdt;
}

// events
function OnMouseOver(e) {
  if (e == null)
    e = window.event;
  if (e != null) {
    target2 = e.target != null ? e.target : e.srcElement;
    if (target2.className == 'drag' || target2.className == 'colum drag')
    {
      isover = 1;
    }
  }
}

function OnMouseOut(e) {
  if (e == null)
   e = window.event;
  target2 = e.target != null ? e.target : e.srcElement;
  if (window.event != null && (target2.className == 'drag'  || target2.className == 'colum drag' ))
  {
    isover = 0;
  }
}

function OnMouseDown(e) {
  if (e == null)
    e = window.event;
  target = e.target != null ? e.target : e.srcElement;
  if ((e.button == 1 && window.event != null || e.button == 0) && (target.className == 'drag' || target.className == 'colum drag'))
  {
    clearTimeout(slowtime);
    startx = e.clientX;
    var d = new Date();
    startdrag = d.getTime();
    offsetx = nopx(apis.style.left);
    dragelement = target;
    document.onmousemove = OnMouseMove;
    document.body.focus();
    document.onselectstart = function () { return false; };
    target.ondragstart = function() { return false; };
    dragging = 1;
    return false;
  }
  else if (target.className == 'nodrag')
    return false;
}

function OnMouseMove(e) {
  if (e == null)
    var e = window.event;
  if (mdrag == 0) {
    mdrag = 1;
    dragstartx = e.clientX;
    dragstarty = e.clientY;
  }
  if (dragging == 1) {
    havedragged = 1;
    var newleft;
    setleftrightmargin();
    if (offsetx + e.clientX - startx < -widthover2) {
      newleft = -widthover2;
    } else if (offsetx + e.clientX - startx > leftmargin) {
      newleft = leftmargin;
    } else {
      newleft = offsetx + e.clientX - startx;
    }
    apis.style.left = px(newleft);
    mousetrack(e);
  }
}

function OnMouseUp(e) {
  if (e == null)
    e = window.event;
  if (e != null) {
    if (dragelement != null) {
      document.onmousemove = null;
      document.onselectstart = null;
      dragelement.ondragstart = null;
      dragelement = null;
    }
    if (mdrag == 1 && (  (e.clientX - dragstartx) > 10 || (e.clientX - dragstartx) < -10 || (e.clientY - dragstarty) > 10 || (e.clientY - dragstarty) < -10 ) ) {
      var d = new Date();
      enddrag = d.getTime();
      dt = enddrag - startdrag;
      var speed = 1000*(e.clientX - dragstartx)/dt;
      mousetrack(e);
      slowdown(Math.round(currentvel));
    }
  }
  else if (dragelement != null)
  {
    document.onmousemove = null;
    document.onselectstart = null;
    dragelement.ondragstart = null;
    dragelement = null;
  }
  mdrag = 0;
}

function OnResize() {
  if (havedragged == 0)
    resetleft();
  setleftrightmargin();
  var aleft = nopx(apis.style.left);
  if (aleft < -widthover2) {
    apis.style.left = px(-widthover2);
  } else if (aleft > leftmargin) {
    apis.style.left = px(leftmargin);
  }
}

function scrollleft() {
  slowdown(1695);
}

function scrollright() {
  slowdown(-1695);
}

function ljusr() {
  rightk.style.opacity = 0.8;
  rightk.style.filter = "alpha(opacity=80)";
}

function morkr() {
  rightk.style.opacity = 0.6;
  rightk.style.filter = "alpha(opacity=60)";
}

function ljusl() {
  leftk.style.opacity = 0.8;
  leftk.style.filter = "alpha(opacity=80)";
}

function morkl() {
  leftk.style.opacity = 0.6;
  leftk.style.filter = "alpha(opacity=60)";
}

// run first
function initgry() {
  apis = getE('apis');
  leftk = getE('gallerinav_left');
  rightk = getE('gallerinav_right');
  resetleft();
  document.onmousedown = OnMouseDown;
  document.onmouseup = OnMouseUp;
  document.onmouseover = OnMouseOver;
  document.onmouseout = OnMouseOut;
  window.onresize = document.onresize = OnResize;
  if (window.addEventListener) {
    window.addEventListener('onmouseover', OnMouseOver);
    window.addEventListener('resize', OnResize, false);
  }
}

// start
initgry();