var SLIDE_WIDTH = 756;
var SLIDE_SPACING = 4;
var NUM_OF_SLIDES = 80; //number is slides in the gallery
var gMotionLock = false;
var gCurrentSlide = 0;

YAHOO.util.Event.addListener(window, "load", renderOverviewBar);

function moveBy(id, number) {
   //check bounds
   if( gCurrentSlide - number < 0 ) {
		number = 0 - gCurrentSlide;
   } else if( gCurrentSlide - number >= NUM_OF_SLIDES ) {
		number = NUM_OF_SLIDES - gCurrentSlide - 1;
   }
   
   if( ! gMotionLock  && number != 0) {
	  lockMotion();
      var attributes = {
		points: { by: [ (SLIDE_WIDTH + SLIDE_SPACING) * number, 0] }
	  }
	  gCurrentSlide = gCurrentSlide - number;
      var anim = new YAHOO.util.Motion(id, attributes, 1.5, YAHOO.util.Easing.easeOut);
      anim.onComplete.subscribe( unlockMotion );
      anim.animate();
   };
}

function moveTo(id, number) {
	moveBy(id, gCurrentSlide - number);
}

function unlockMotion() {
	renderOverviewBar();
	gMotionLock = false;
}

function lockMotion() {
	gMotionLock = true;
}

function renderOverviewBar() {
	var overview = document.getElementById('galleryOverview');
	var html = "<center><table id=\"galleryOverviewTable\"><tr><td class=\"galleryOverviewHeaderCell\" colspan=\"10\"> please click on an exhibit number, or use navigation buttons above to browse our gallery<td></tr><tr>";
	for(var i=0; i < NUM_OF_SLIDES; i++) {
	  if( i != gCurrentSlide ) {
	  	  html = html + "<td class=\"gallerySlideItemCell\" onmouseover=\"this.style.backgroundColor='#DDDDDD';this.style.cursor='hand';\" onmouseout=\"this.style.backgroundColor=''\" onclick=\"moveTo('gallerySlideDiv'," + i + ")\"><a href=\"javascript:moveTo('gallerySlideDiv'," + i + ")\">" + (i+1) + "</a></td>";
	  } else {
		  html = html + "<td class=\"galleryCurrentSlideItemCell\"> " + (i+1) + " </td>";
	  }
	  if( (i+1) % 10 == 0 && (i+1)!=NUM_OF_SLIDES) {
		html = html + "</tr><tr>";
	  }
	}
	
	overview.innerHTML = html + "</tr></table></center>";
	
	//show gallery when everything is ready
	showGallery();
}

function showGallery() {
	var hidePleaseWait = function() {
		var pleaseWait = document.getElementById("pleaseWaitDiv");
		pleaseWait.innerHTML = "";
		if( pleaseWait != null ) {
			pleaseWait.style.display = 'none';
			pleaseWait.style.visibility = 'hidden';
		}
		
	}

	//fade out please wait
	var fadeOut = new YAHOO.util.Anim( "pleaseWaitDiv", {opacity: {to: 0}, height: {to: 0}}, 1);
	fadeOut.onComplete.subscribe(hidePleaseWait);
	fadeOut.animate();

	//show gallery
	var gallery = document.getElementById("galleryDiv");		
	if( gallery != null ) {
		gallery.style.display = 'block';
		gallery.style.visibility = 'visible';
	}

	
}