var sb = new Object();

function Scrollbar(id, width)
{
  this._id = id;
  this._target = 0;
  this._oldPos = 0;
  this._width = width;
  this._fullyLoaded = false;
  this._scrollWidth = 0;
  this._velocity = 0;
  this._momentum = 0;
  this._dragging = false;
  this._tID = 0;
  document.getElementById(id).scrollLeft = 0;
  document.getElementById(id).style.MozUserSelect = 'none';
  makeDraggable(id);
  makeClickableArrow(id+'left');
  makeClickableArrow(id+'right');
  this._tID = setInterval('spulse("'+id+'")', 30);
}

Scrollbar.prototype.scroll = function(dist)
{
  if(this._fullyLoaded && dist > 0)
    this._target = this._width * Math.min(this._scrollWidth, Math.floor((this._target + dist * this._width) / this._width));
  else if(dist > 0)
    this._target = this._width * Math.floor((this._target + dist * this._width) / this._width);
  else
    this._target = this._width * Math.max(0, Math.ceil((this._target + dist * this._width) / this._width));
}

var dragID     = null;
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;

function mouseMove(ev) {
  if(dragID) {
    ev = ev || window.event;
    var pos = mouseCoords(ev);
    if(sb[dragID]._mousePos) {
      var div = document.getElementById(dragID);
      var offset = sb[dragID]._mousePos.x - pos.x;
      if(sb[dragID]._dragging || Math.abs(offset) >= 10) {
        sb[dragID]._target = div.scrollLeft += offset;
        sb[dragID]._mousePos = pos;
        sb[dragID]._dragging = true;
      }
    } else
      sb[dragID]._mousePos = pos;
  }
}

function mouseCoords(ev) {
  if(ev.pageX || ev.pageY){
    return {x:ev.pageX, y:ev.pageY};
  }
  return {
    x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
    y:ev.clientY + document.body.scrollTop  - document.body.clientTop
  };
}

function makeDraggable(id){
  var div = document.getElementById(id);
  div.onmousedown = function() {
    document.onselectstart = function () { return false; }
    document.body.style.MozUserSelect = 'none';
    dragID = id;
  }
}

var arrowID;
var arrowTID = 0;

function arrowDown() {
  if(arrowID) {
    var id = arrowID;
    if(id.substring(id.length-4, id.length) == 'left') {
      var parent = id.substring(0, id.length-4);
      sb[parent].scroll(-1);
    }
    else if(id.substring(id.length-5, id.length) == 'right') {
      var parent = id.substring(0, id.length-5);
      sb[parent].scroll(1);
    }
  }
}

function makeClickableArrow(id) {
  var div = document.getElementById(id);
  div.onmousedown = function() {
    arrowID = id;
    arrowDown();
    arrowTID = setInterval('arrowDown()', 250);
  }
}

function mouseUp(ev){
  if(dragID) {
    sb[dragID]._momentum = sb[dragID]._velocity / 2;
    sb[dragID]._mousePos = null;
    sb[dragID]._dragging = false;
    dragID = null;
    document.onselectstart = null;
    document.body.style.MozUserSelect = null;
  }
  if(arrowID) {
    arrowID = null;
  }
  if(arrowTID) {
    clearInterval(arrowTID);
    arrowTID = null;
  }
}

function init() {
  document.getElementById('container').style.background = "#ffffff url(/images/pagenotes.png) 0 0 no-repeat";
  sb['scroll0'] = new Scrollbar('scroll0', 240);
  sb['scroll1'] = new Scrollbar('scroll1', 240);
  sb['scroll2'] = new Scrollbar('scroll2', 240);
  sb['scroll3'] = new Scrollbar('scroll3', 240);
  if(document.getElementById('scroll4'))
    sb['scroll4'] = new Scrollbar('scroll4', 240);
  if(document.getElementById('scroll5'))
    sb['scroll5'] = new Scrollbar('scroll5', 240);

/*
  var width = 640;
  if (document.all)
    width = document.body.clientWidth;
  else
    width = window.innerWidth;

  if(width >= 1010)
  {
    document.getElementById('container').style.width = 1100;
    document.getElementById('bar0').style.width = 1010;
    document.getElementById('bar1').style.width = 1010;
    document.getElementById('bar2').style.width = 1010;
    document.getElementById('bar3').style.width = 1010;
    document.getElementById('scroll0').style.width = 960;
    document.getElementById('scroll1').style.width = 960;
    document.getElementById('scroll2').style.width = 960;
    document.getElementById('scroll3').style.width = 960;
  }
*/
}

window.onload = init;

function scroll(id, direction, width) {
//  sb[id].scroll(direction);
}

function load(id) {
  var div = document.getElementById(id);
  if(div) {
    var s = div.innerHTML;
    if(s.substr(0,4) == "\<\!\-\-") {
      div.innerHTML = s.substr(4, s.length - 7);
      return true;
    }
  }
  return false;
}

function spulse(id) {
  var div = document.getElementById(id);

  var s = sb[id];

  if(!s._fullyLoaded && div.scrollLeft > div.scrollWidth - div.offsetWidth * 2)
  {
    if(!load(id + Math.floor(div.scrollWidth / s._width)))
    {
      s._fullyLoaded = true;
      s._scrollWidth = div.scrollWidth;
    }
  }

  s._velocity = div.scrollLeft - s._oldPos;

  if(s._target != div.scrollLeft) {
    var offset = s._target - div.scrollLeft;
    if(offset > 0 && offset < 40) {
      div.scrollLeft += offset / 2 + 1;
    }
    else if(offset > -40 && offset < 0) {
      div.scrollLeft += offset / 2 - 1;
    }
    else if(offset > 0) {
      div.scrollLeft += 20 * Math.floor(offset / s._width + 1);
    }
    else if(offset < 0) {
      div.scrollLeft += 20 * Math.ceil(offset / s._width - 1);
    }
    s._momentum = 0;
  } else if(s._momentum != 0) {
//    s._target = div.scrollLeft += s._momentum;
    s._momentum -= s._momentum / Math.abs(s._momentum);
    // s._momentum -= s._momentum % 2;
  }

  s._oldPos = div.scrollLeft;

  if(div.scrollLeft == 0)
  {
    document.getElementById(id + "leftarrow").style.display = "none";
  }
  else
  {
    document.getElementById(id + "leftarrow").style.display = "inline";
  }
  if(div.scrollLeft >= div.scrollWidth - div.offsetWidth)
  {
    document.getElementById(id + "rightarrow").style.display = "none";
  }
  else
  {
    document.getElementById(id + "rightarrow").style.display = "inline";
  }

//  if(s._target >= div.scrollWidth - div.style.width - div.scrollWidth % s._width) {
//    s._target = div.scrollLeft = div.scrollWidth - div.style.width - div.scrollWidth % s._width;
//  }
/*  var W = 240;
  var S = 20;
  var offset = (div.scrollLeft + W/2) % W - W/2;
  if(Math.abs(dist) <= 0.5) {
    if(Math.abs(offset) < 40)
      div.scrollLeft += (Math.abs(offset) * dist / 2) - offset/Math.abs(offset);
    else
      div.scrollLeft += S * dist;
    offset = (div.scrollLeft + W/2) % W - W/2;
    if(offset == 0) {
      dist = 0;
      load(id + Math.floor(div.scrollWidth / W));
    }
  } else {
    div.scrollLeft += S * dist;
    var newhalf = ((div.scrollLeft % W) > W/2) ? 1 : 0;
    if(newhalf != oldhalf) {
      oldhalf = newhalf;
      dist -= 0.5 * dist / Math.abs(dist);
      load(id + Math.floor(div.scrollWidth / W));
    }
  }

  if(dist == 0) {
    clearInterval(tID);
    tID = 0;
  }

  if(div.scrollLeft >= div.scrollWidth - 720 - div.scrollWidth % W) {
    load(id + Math.floor(div.scrollWidth / W));
    div.scrollLeft = div.scrollWidth - 720 - div.scrollWidth % W;
  }
  if(div.scrollLeft == 0 || div.scrollLeft == div.scrollWidth - 720 - div.scrollWidth % W) {
    dist = 0;
    clearInterval(tID);
    tID = 0;
  }*/ 
}