var scrollingAreas = new Array();

HorizontalScrollingArea = function(ownerID, ownerContentID, leftID, rightID) {

  this.index = scrollingAreas.length;
  this.ownerID = ownerID;
  this.ownerContentID = ownerContentID;
  this.leftButton = document.getElementById(leftID);
  this.leftButton.index = this.index;
  this.rightButton = document.getElementById(rightID);
  this.rightButton.index = this.index;
  this.scrollEngaged = false;
  this.scrollInterval = null;
  this.initialLeft = DHTMLAPI.getElementLeft(ownerContentID);
  this.initialTop = DHTMLAPI.getElementTop(ownerContentID);
  
  this.setScrollEvents = function(leftButton, rightButton) {
    addEvent(leftButton, 'mousedown', handleHorizontalScrollClick, false);
    addEvent(leftButton, 'mouseup', handleScrollStop, false);
    addEvent(leftButton, 'contextmenu', blockEvent, false);

    addEvent(rightButton, 'mousedown', handleHorizontalScrollClick, false);
    addEvent(rightButton, 'mouseup', handleScrollStop, false);
    addEvent(rightButton, 'contextmenu', blockEvent, false);
  };

  this.setScrollEvents(this.leftButton, this.rightButton);
  scrollingAreas[this.index] = this;

  this.reset = function() {
    var contentElem = document.getElementById(ownerContentID);
    this.ownerWidth = parseInt(DHTMLAPI.getComputedStyle(this.ownerID, 'width'));
    this.contentScrollWidth = (contentElem.scrollWidth) ? 
          contentElem.scrollWidth : contentElem.offsetWidth;
    DHTMLAPI.moveTo(this.ownerContentID, this.initialLeft, this.initialTop);
  };
  
  this.reset();
}

VerticalScrollingArea = function(ownerID, ownerContentID, upID, downID) {

  this.index = scrollingAreas.length;
  this.ownerID = ownerID;
  this.ownerContentID = ownerContentID;
  this.upButton = document.getElementById(upID);
  this.upButton.index = this.index;
  this.downButton = document.getElementById(downID);
  this.downButton.index = this.index;
  this.scrollEngaged = false;
  this.scrollInterval = null;
  this.initialLeft = DHTMLAPI.getElementLeft(ownerContentID);
  this.initialTop = DHTMLAPI.getElementTop(ownerContentID);
  
  this.setScrollEvents = function(upButton, downButton) {
    addEvent(upButton, 'mousedown', handleVerticalScrollClick, false);
    addEvent(upButton, 'mouseup', handleScrollStop, false);
    addEvent(upButton, 'contextmenu', blockEvent, false);

    addEvent(downButton, 'mousedown', handleVerticalScrollClick, false);
    addEvent(downButton, 'mouseup', handleScrollStop, false);
    addEvent(downButton, 'contextmenu', blockEvent, false);
  };

  this.setScrollEvents(this.upButton, this.downButton);
  scrollingAreas[this.index] = this;
  
  this.reset = function() {
    var contentElem = document.getElementById(ownerContentID);
    this.ownerHeight = parseInt(DHTMLAPI.getComputedStyle(this.ownerID, 'height'));
    this.contentScrollHeight = (contentElem.scrollHeight) ? 
      contentElem.scrollHeight : contentElem.offsetHeight;
    DHTMLAPI.moveTo(this.ownerContentID, this.initialLeft, this.initialTop);
  };
  
  this.reset();
}

function handleScrollStop(evt) {
  // The scroll button is the object that actually receives these events
  evt = (evt) ? evt : event;
  var target = (evt.target) ? evt.target : evt.srcElement;
  scrollingAreas[target.index].scrollEngaged = false;
}

function blockEvent(evt) {
    evt = (evt) ? evt : event;
    evt.cancelBubble = true;
    return false;
}

function hasElement(arr, elem) {
  if (arr && arr.length) {
    for (var i = 0; i < arr.length; i++) {
      if (arr[i] == elem) {
        return true;
      }
    }
    return false;
  }
  else {
    return false;
  }
}

function handleHorizontalScrollClick(evt) {
  evt = (evt) ? evt : event;
  var target = (evt.target) ? evt.target : evt.srcElement;
  var index = target.index;
  var classes = target.className.split(' ');
  var px = (hasElement(classes, 'scrollLeft')) ? 20 : -20;
  scrollingAreas[index].scrollEngaged = true;
  scrollHorizontally(index, px);
  scrollingAreas[index].scrollInterval = setInterval('scrollHorizontally(' + index + ',' + px + ')', 100);
  evt.cancelBubble = true;
  return false;
}

function handleVerticalScrollClick(evt) {
    evt = (evt) ? evt : event;
    var target = (evt.target) ? evt.target : evt.srcElement;
    var index = target.index;
    var classes = target.className.split(' ');
    var px = (hasElement(classes, 'scrollUp')) ? 10 : -10;
    scrollingAreas[index].scrollEngaged = true;
    scrollVertically(index, px);
    scrollingAreas[index].scrollInterval = setInterval('scrollVertically(' + index + ', ' + px + ')', 100);
    evt.cancelBubble = true;
    return false;
}

function scrollHorizontally(index, px) {
  var scrollingArea = scrollingAreas[index];
  var elem = document.getElementById(scrollingArea.ownerContentID);
  var left = parseInt(DHTMLAPI.getComputedStyle(elem, 'left'));
  var scrollWidth = parseInt(scrollingArea.contentScrollWidth);
  var width = scrollingArea.ownerWidth;

  if (scrollingArea.scrollEngaged && left + px >= -scrollWidth + width && left + px <= 0) {
      DHTMLAPI.moveBy(elem, px, 0);
  }
  else {
      clearInterval(scrollingArea.scrollInterval);
  }
}

function scrollVertically(index, px) {
    var scrollingArea = scrollingAreas[index];
    var elem = document.getElementById(scrollingArea.ownerContentID);
    var top = parseInt(DHTMLAPI.getComputedStyle(elem, 'top'));
    var scrollHeight = parseInt(scrollingArea.contentScrollHeight);
    var height = scrollingArea.ownerHeight;
    if (scrollingArea.scrollEngaged && top + px >= -scrollHeight + height && top + px <= 0) {
        DHTMLAPI.moveBy(elem, 0, px);
    }
    else {
        clearInterval(scrollingArea.scrollInterval);
    }
}