function horizontalSlider(id, portWidth, contentWidth, stopLength)
{
  this.id = id;
  this.contentWidth = contentWidth;
  this.portWidth = portWidth;
  this.stopLength = stopLength;
  
  this.divInner = document.getElementById(id);
  
  this.divOuter = this.divInner.cloneNode(false);
  this.divInner.parentNode.replaceChild(this.divOuter, this.divInner);
  this.divOuter.appendChild(this.divInner);
  

  // check to see if this div is already a scroller
  /*
  if (this.divOuter.getAttribute('scoller')) {
    alert('skipping');
    return false;
  }
  this.divOuter.setAttribute('scoller', true);*/

  this.divOuter.style.overflowX = 'hidden'; 
  this.divOuter.style.overflowY = 'hidden'; 
  this.divOuter.style.position = 'relative';
  
  this.divInner.setAttribute('id', id + '-inner');
  this.divInner.style.position = 'absolute';
  this.divInner.style.height = this.divOuter.style.height;
  this.divInner.style.width = contentWidth + 'px';
  this.divInner.style.left = '0';
  this.divInner.style.top = '0';
  this.divInner.style.marginLeft = '0';
  this.divInner.style.marginRight = '0';
  
  this.goRight = document.createElement('img');
  this.goRight.style.position = 'absolute';
  this.goRight.style.height = this.divOuter.style.height;
  this.goRight.style.width = '30px';
  this.goRight.style.right = '0';
  this.goRight.style.top = '0';
  this.goRight.src = '/images/hl-right-arrow.png';
  this.goRight.style.cursor = 'pointer';
  this.divOuter.appendChild(this.goRight);
  
  this.goLeft = document.createElement('img');
  this.goLeft.style.position = 'absolute';
  this.goLeft.style.height = this.divOuter.style.height;
  this.goLeft.style.width = '31px';
  this.goLeft.style.left = '0';
  this.goLeft.style.top = '0';
  this.goLeft.src = '/images/hl-left-arrow.png';
  this.goLeft.style.cursor = 'pointer';
  this.divOuter.appendChild(this.goLeft);
  
  this.goRight.onmousedown = new Function('hSliders[\'' + id + '\'].slideRight(); hSliders[\'' + id + '\'].disableAutoScroll(); return false;');
  this.goRight.onclick = new Function('return false;');
  this.goLeft.onmousedown = new Function('hSliders[\'' + id + '\'].slideLeft(); hSliders[\'' + id + '\'].disableAutoScroll(); return false;');
  this.goLeft.onclick = new Function('return false;');
  this.ss = new StyleSlider(id + '-inner', 'left');
  this.ss.slideMode = 'easeOut';
  this.ss.startValue = 0;
  this.ss.endValue = 0;
  this.ss.steps = 20;
  this.ss.length = 250;
  
  this.autoScroller = null;
  this.autoScrollDirection = 'right';
}

horizontalSlider.prototype.slideLeft = function()
{
  if (this.ss.endValue < 0)
  {
    this.ss.endValue = this.ss.startValue + this.stopLength;
    this.ss.startSlide();
    this.ss.startValue = this.ss.startValue + this.stopLength;
  }
  else
    this.autoScrollDirection = 'right';
}

horizontalSlider.prototype.slideRight = function()
{
  if (this.portWidth - this.ss.endValue < this.contentWidth)
  {
    this.ss.endValue = this.ss.startValue - this.stopLength;
//    if (this.ss.endValue < -1 * (this.contentWidth + this.portWidth))
//      this.ss.endValue = -1 * (this.contentWidth + this.portWidth);
    this.ss.startSlide();
    this.ss.startValue = this.ss.startValue - this.stopLength;
  }
  else
    this.autoScrollDirection = 'left';
}

horizontalSlider.prototype.enableAutoScroll = function(speed)
{
  if (!speed) speed = 2000;
  this.disableAutoScroll();
  this.autoScroller = setInterval('hSliders[\'' + this.id + '\'].executeAutoScroll()', speed);
}

horizontalSlider.prototype.executeAutoScroll = function()
{
  if (this.divInner.clientHeight == 0)
  {
    return;
  }
  if (this.autoScrollDirection == 'left')
    hSliders[this.id].slideLeft();
  else
    hSliders[this.id].slideRight();
}

horizontalSlider.prototype.disableAutoScroll = function()
{
  if (this.autoScroller)
    window.clearInterval(this.autoScroller);
}

var hSliders = new Object();

function createHSlider(id, portWidth, contentWidth, stopLength)
{
  if (!hSliders[id])
    hSliders[id] = new horizontalSlider(id, portWidth, contentWidth, stopLength);
}

function clearHSlider(id)
{
  if (hSliders[id])
  {
    hSliders[id].divOuter.setAttribute('scoller', false);
    hSliders[id].disableAutoScroll();
    hSliders[id] = null;
  }
}

function showAlert()
{
  alert('onclick');
}