g_oScroller = null;

window.onload = function(){
}

function initJS(){
  g_oScroller = new Scroller;
  setImageOnclicks();
  fixHeight();
}

function setImageOnclicks(){
  var ndHscroll= document.getElementById('hscroll');
  if( !ndHscroll ){
    return;
  }
  var aImg = ndHscroll.getElementsByTagName('img');
  for( var i=0; i<aImg.length; ++i ){
    // only make images that are >= scroller viewport clickable
    if( aImg[i].width > ndHscroll.clientWidth ){
      if( aImg[i].parentNode.nodeName.toLowerCase() != 'a' ){
        aImg[i].onclick = imgOnclick;
        aImg[i].title = 'Click to view in new window';
      }
      aImg[i].onmouseover = imgOver;
      aImg[i].onmouseout = imgOut;
    }
  }
}

function imgOnclick(){
  centrePopup( this.src, 'Image', this.offsetWidth+35, this.offsetHeight+45, 'scrollbars=yes,resizable=yes' );
}

function imgOver(){
  this.style.border = '1px solid #4040a0';
  this.style.opacity = 0.75;
  this.style.filter = 'alpha(opacity=75)';
}
function imgOut(){
  this.style.border = '1px solid #ffffff';
  this.style.opacity = 1.0;
  this.style.filter = 'alpha(opacity=100)';
}

function centrePopup( sUrl, sTitle, nWidth, nHeight, sSettings ){

  var nTop = (screen.height - nHeight) / 2;
  var nLeft = (screen.width - nWidth) / 2;
  var wHandle = window.open( sUrl, sTitle, 'width=' + nWidth + ',height=' + nHeight +
                             ',top=' + nTop + ',left=' + nLeft + ',' + sSettings );
  return wHandle;
}

function fixHeight(){
  var ndHscroll = document.getElementById('hscroll');
  if( ndHscroll && navigator.appName == 'Microsoft Internet Explorer' ){
    ndHscroll.style.height = (ndHscroll.offsetHeight + 10) + 'px';
  }
}

function Scroller(){
  this.nCurrent = 0;
  this.ndHscroll = document.getElementById('hscroll');
  this.nSpeed = 45;

  if( this.ndHscroll ){
    this.ndHscroll.scrollLeft = 0;
  }

  this.move = function( sDirection ){
    var aImages = this.ndHscroll.getElementsByTagName('img');

    // find image closest to current scroll position
    var nStartX = getAbsLeft(aImages[0]);
    for( var i=0; i<aImages.length; ++i ){
      if( Math.abs(this.ndHscroll.scrollLeft - (getAbsLeft(aImages[this.nCurrent]) - nStartX)) > 
          Math.abs(this.ndHscroll.scrollLeft - (getAbsLeft(aImages[i]) - nStartX)) ){
        this.nCurrent = i;
      } 
    }

    if( sDirection == 'next' ){
      if( this.nCurrent == aImages.length-1 ){
        return;
      }
      ++this.nCurrent;
    }else{
      if( this.nCurrent == 0 ){
        return;
      }
      --this.nCurrent;
    }
    ndScrollToImg = aImages[this.nCurrent];

    var ndX = getAbsLeft( aImages[this.nCurrent] ) -
              getAbsLeft( aImages[0] );

    // we can only scroll as far as (scrollwidth - viewport width)
    if( ndX > this.ndHscroll.scrollWidth - this.ndHscroll.clientWidth ){
      ndX = this.ndHscroll.scrollWidth - this.ndHscroll.clientWidth;
    }
    this.scrollTo = ndX;
    sDirection == 'next' ? this.scrollRight() : this.scrollLeft();
  }

  this.scrollLeft = function(){
    var _this = g_oScroller;
    if( _this.ndHscroll.scrollLeft > _this.scrollTo ){
      _this.ndHscroll.scrollLeft -= _this.nSpeed;
      if( _this.ndHscroll.scrollLeft <= _this.scrollTo ){
        _this.ndHscroll.scrollLeft = _this.scrollTo;
      }else{
        window.setTimeout( _this.scrollLeft, 10 );
      }
    }
  }

  this.scrollRight = function(){
    var _this = g_oScroller;
    if( _this.ndHscroll.scrollLeft < _this.scrollTo ){
      _this.ndHscroll.scrollLeft += _this.nSpeed;
      if( _this.ndHscroll.scrollLeft >= _this.scrollTo ){
        _this.ndHscroll.scrollLeft = _this.scrollTo;
      }else{
        window.setTimeout( _this.scrollRight, 10 );
      }
    }
  }
}


function getAbsLeft(el){
  var left = 0;
  var p;
  for( p = el; p.offsetParent; p=p.offsetParent ){
    left += p.offsetLeft;
  }
  return left;
}

function getWindowHeight(){
  var windowHeight = 0;
  if( typeof(window.innerHeight) == 'number' ){
    windowHeight=window.innerHeight;
  }
  else{
    if( document.documentElement&&
        document.documentElement.clientHeight ){
      windowHeight = document.documentElement.clientHeight;
    }
    else{
      if( document.body&&document.body.clientHeight ){
        windowHeight = document.body.clientHeight;
      }
    }
  }
  return windowHeight;
}