var images;
var scrollInterval;
var paused = false;

var hImageOverlay;
var hImageWindow;
var hImageFullSize;
var hImageDescription;

function $(x){return document.getElementById(x);}
function init()
{
  // Get handles
  hImageOverlay  = $('imageOverlay' );
  hImageWindow   = $('imageWindow' );
  hImageFullSize = $('imageFullSize' );
  hImageDescription = $('imageDescription' );
  hImageFullSize.onclick = hideImage;
  
  // Set left column to same height as longest colum (main or right)
  var mainHeight  = $('main').offsetHeight;
  var rightHeight = $('right').offsetHeight;
  var scrollerHeight = ( mainHeight > rightHeight ? mainHeight : rightHeight );
  
  $('left').style.height = scrollerHeight + 'px';
  
  // IE fix for imageScroller
  $('imageScroller').style.height = scrollerHeight + 'px';
  $('imageScroller').style.overflow = 'hidden';

  // Collect images inside imageScroller
  images = $('imageScroller').getElementsByTagName('img');
  
  // Get initial image positions
  var pos = Array();
  for ( i = 0; i < images.length; i++ )
    pos[i] = images[i].offsetTop;
  
  // Set image positions to "absolute" and attach mouse handler
  for ( i = 0; i < images.length; i++ )
  {
    images[i].style.position = 'absolute';
    images[i].style.top = pos[i] + 'px';
    
    images[i].onmouseover = pause;
    images[i].onmouseout = resume;
    images[i].onclick = imageClick;
  }
    
  // Start moving images
  scrollInterval = setInterval( moveImages, 80 );   // 25fps = 40ms
}

function moveImages()
{
  if ( paused )
    return; 
    
  for ( i = 0; i < images.length; i++ )
  {
    images[i].style.top = ( images[i].offsetTop - 2 ) + 'px';

    if ( images[i].offsetTop < -images[i].offsetHeight )
    {
      var lastIndex = ( i ? i - 1 : images.length - 1 );
      images[i].style.top = ( images[lastIndex].offsetTop + images[lastIndex].offsetHeight + 10 ) + 'px';
    }
  }
}

function pause()  { paused = true; }
function resume() { paused = false; }

function imageClick() 
{ 
  hImageOverlay.style.width  = document.body.scrollWidth  + 'px';
  hImageOverlay.style.height = document.body.scrollHeight + 'px';
  pause();

  hImageOverlay.style.display = 'block';

  hImageDescription.innerHTML = this.title;
  
  hImageFullSize.onload = showImage;
  hImageFullSize.alt = this.alt;
  hImageFullSize.description = this.getAttribute('description');
  hImageFullSize.src = this.src + '-big.jpg';
}

function showImage()
{
  hImageWindow.style.left = '50%';
  
  if ( document.all )
  {
    hImageWindow.style.display = 'block';
    hImageWindow.style.marginLeft = '-' + parseInt( ( hImageFullSize.width / 2 ) + 13 ) + 'px';
    hImageWindow.style.width = ( hImageFullSize.width + 4 ) + 'px';
  }
  else
  {
    hImageWindow.style.marginLeft = '-' + parseInt( ( hImageFullSize.width / 2 ) + 13 ) + 'px';
    hImageWindow.style.width = ( hImageFullSize.width + 4 ) + 'px';  
    hImageWindow.style.display = 'block';
  }
}

function hideImage()
{
  hImageOverlay.style.display = 'none';
  hImageWindow.style.display = 'none';
}