var thumbW = 75;
var thumbH = 56;

var cutoffX=400;
var deadZone = 40;
var cutoffRatio = 1  / (cutoffX - deadZone);
var thumb;
var dbg;
 
 function debug(s) { dbg.innerHTML = s; }
  
function load()
{
  dbg = document.getElementById("debug");
  thumb =  document.getElementById("thumb");
  thumb.onmousemove = bla;
  var n = 1;
  while (i = document.getElementById("t" + n))
  {
  	i.onclick = showPhoto;
  	n++;
  }
}


function bla(sourceEvent)
{
     var x = (document.all) ?  event.x - 12 + thumb.scrollLeft : sourceEvent.layerX;
     var realx = (document.all) ?  event.x : sourceEvent.pageX;
		 resizephotos(x);
     scrollify(x, realx);
}    

function resizephotos(x)
{
     var i, dx, dist;
     
     var n = 1;
     while (i = document.getElementById("t" + n))
     {
       dx = (x - i.offsetLeft - (i.width / 2));
       dx = (dx < 0) ? -dx : dx;
     
       if (dx <= cutoffX)
       {
       	 // Ratio of enlargement
       	 // Work it out on paper
       	 var R = 1 + ((cutoffX - dx) * cutoffRatio); 
     	   R = (R > 2) ? 2 : R;

     	   i.style.height = Math.floor(thumbH * R) + "px";
     	   i.style.width =  Math.floor(thumbW * R) + "px";
       }
       else
       {
     	   i.style.height = (thumbH) + "px";
     	   i.style.width =  (thumbW) + "px";
       }
       n++;
     }

}

var scrollBy = 0;
var scrollSize = 0.35;
var scrollSpeed = 30;
var scrollTimeout = 8;
var scrollRunning = false;
var cursorX;

function scrollify(cursor, x)
{

	cursorX = cursor;
	
	var w = (document.all) ? thumb.clientWidth :  thumb.offsetWidth;

	var scrollWidth = w*scrollSize;

	if (x < scrollWidth)
	{
		// scroll left some amount..
		scrollBy = -Math.floor((scrollSpeed * (1 - (x / scrollWidth))));
	} else if (x > (w - scrollWidth)) {
		// scroll right some amount..
		scrollBy = Math.floor(scrollSpeed * (1-((w - x) / scrollWidth)));
	} else {
		scrollBy = 0;
	}

	actuallyDoScroll();
	
 	if (!scrollRunning)
  {
  	window.setTimeout("scrollOnTimeout()", scrollTimeout);
  	scrollRunning = true;
  }

}

function scrollOnTimeout() {
		actuallyDoScroll();
		if (scrollBy != 0) 
		{  window.setTimeout("scrollOnTimeout()", scrollTimeout); }
		else
		{  scrollRunning = false;			}
}

function actuallyDoScroll()
{
	thumb = document.getElementById("thumb");

	left = thumb.scrollLeft;
	right = thumb.scrollWidth - thumb.scrollLeft - thumb.offsetWidth; 
	
	if ((left > 0 && scrollBy < 0) || (right > 0 && scrollBy > 0))
  {	  thumb.scrollLeft += scrollBy;
 	    cursorX += scrollBy;
      resizephotos(cursorX);
  } else {
  	scrollBy = 0;
  }
  moveScrollDot(thumb.scrollLeft / (thumb.scrollWidth - thumb.offsetWidth));
}

scrollbarMin = 20;
scrollbarMax = 360 - 19;

function moveScrollDot(position)
{
	document.getElementById("dot").style.left = (scrollbarMin + ((scrollbarMax) * position)) + "px";
}



function hidePhoto()
{
	document.getElementById("overlay").style.display = "none";
	document.getElementById("divphoto").style.display = "none";
}

function showPhoto(sourceEvent)
{
  e = (document.all) ? event.srcElement : sourceEvent.target;
  
	var overlay =	document.getElementById("overlay");
	var divphoto = document.getElementById("divphoto");
	overlay.style.display = "block";
	divphoto.innerHTML = "<img src=\""+e.alt+"\" id=\"photo\" />";
  var photo = document.getElementById("photo")
  photo.onclick = hidePhoto;
  photo.onload = updateOverlay;
	divphoto.style.display = "block";
	
  
	scrollBy = 0;
}

function updateOverlay(sourceEvent) {
	document.getElementById("overlay").style.height = (60+window.screen.height) + "px";
}