// ====================================================================================================
// This Project Comp Gallery written by Courts Carter, pizzabytheslice.com,	(1999-2007)
// Use, distribute, modify (improve?) as you will.
// ====================================================================================================
// Oct	5, 2003 v.1.0
// Dec 10, 2004 v.1.1 capture keyboards
// July 5, 2005 v.1.2 copied gallery keyboard event code to handle Firefox, too.
// Oct 3, 2007 v.1.3 object cleanup, css uses sprites (icon sheets), added popup menu and Help

$ = function(id){
	return document.getElementById(id);
}

projPage = function(){
	this.code="";
	this.title="";
	this.image="";
	this.bgColor="";
	this.bgImage="";
}

var ProjectGallery = {
	swapperIdx: 0,	// used to stop the timer
	isSlideshow: false, // boolean
	slideshowLoopIdx: 0, // number of times through the slideshow
	pageNbr: 0, // track the design being viewed
	slideDelay: 4000, // delay in miliseconds
	isDirFwd: true,

	aryPages: [], // an array of progPage objects
	title	: "mockup"
}

ProjectGallery.loadFinished = function(){
	//var gv_isNS4 = (navigator.appName=="Netscape")?1:0;
	document.onkeyup = this.handleKeyEvent;
	this.showFirstPage();
	this.setVCRBtns();
	// not available: this.readURLParam();
	this._loadPopUp();
}

ProjectGallery.readURLParam = function() {
	var strImage = new String(window.location.search);
	// check whether it's the delay or the design code
	if (strImage.substr( 1, 1 ) != "C") {
		strImage = strImage.substr( 1, strImage.length-1 );
	} else {
		strImage = this.findIndex( strImage.substr( 2, strImage.length-1 ) );
	}

	if (strImage.length < 0)
		strImage= "0";
	strImage= Number(strImage);

	// if the param is 1000 or better turn on the slide show
	this.slideshowLoopIdx = 0;
	this.isSlideshow = (strImage > 999);
	if (this.isSlideshow) {
		this.slideDelay= strImage;
		this.swapperIdx= window.setInterval( "ProjectGallery.nextPage()", this.slideDelay );
	}

	// validate image number
	this.pageNbr=(strImage <= (this.aryPages.length-1))?strImage:this.pageNbr=0;

} // readURLParam

ProjectGallery._loadPopUp = function(){
	var s="";
	for (var i=0; i < this.aryPages.length;i++){
		s+="<li id=\"pop"+i+"\" class=\"\"><a href=\"javascript: ProjectGallery.popUpClick("+i+")\">"+this.aryPages[i].title+"</a></li>";
	}
	var popUp=$("popUp");
	var h;
	var maxToShow = 9;
	var lineHeight = 18; // guessing that height of each is about npx; probably wrong on this
	if (i < maxToShow)
		h = i * lineHeight;
	else
		h = maxToShow * lineHeight
	popUp.style.height = h+"px";
	//popUp.style.top = "-"+h+"px";
	popUp.style.top = 26+"px";
	popUp.innerHTML = "<ol>"+s+"</ol>";
	popUp.style.display = "none";
}

ProjectGallery.popUpClick = function(idx){
	$("popUp").style.display = "none";
	this.goTo(idx);
	this._loadPopUp();
}


ProjectGallery.showPopUp = function(){
	var popUp=$("popUp");
	// gotta set the "current" (you are here) indicator, and show/hide div
	if (popUp.style.display == "none"){
		for (var i=0; i < this.aryPages.length;i++)
			$("pop"+i).className = (i == this.pageNbr)?"current":"";
		popUp.style.display = "block";
	} else {
		popUp.style.display = "none";
	}
}


ProjectGallery.addPage = function( code, title, image, bgColor, bgImage ) {
	var p = new projPage();
	p.code = (arguments.length > 0)?arguments[0]:"";
	p.title = (arguments.length > 1)?arguments[1]:"";
	p.image = (arguments.length > 2)?arguments[2]:"";
	p.bgColor = (arguments.length > 3)?arguments[3]:"";
	p.bgImage = (arguments.length > 4)?arguments[4]:"";
	this.aryPages[this.aryPages.length] = p;
} 

ProjectGallery.nextPage = function() {
	if (this.isDirFwd) {
		if (this.pageNbr < (this.aryPages.length-1)) {
			this.pageNbr++;
		} else {
			this.pageNbr= 0;
			if (this.isSlideshow)
				this.slideshowLoopIdx++;
		}
	} else {
		if (this.pageNbr > 0) {
			this.pageNbr--;
		} else {
			this.pageNbr= (this.aryPages.length-1);
			if (this.isSlideshow)
				this.slideshowLoopIdx++;
		}
	}
	
	this.swapPage(this.aryPages[this.pageNbr]);

	if (this.isSlideshow) {
		if (this.slideshowLoopIdx > 5) {
			//isSlideshow= false;
			//clearInterval(swapperIdx);
			this.stopSlideshow();
			alert( "Slideshow is over. Restart by clicking the Play button at the bottom of the page." );
			}
		}
} // nextPage

ProjectGallery.firstSlide = function() {
	this.pageNbr= 0;
	this.swapPage( this.aryPages[this.pageNbr]);
}

ProjectGallery.lastSlide = function() {
	this.pageNbr= (this.aryPages.length-1);
	this.swapPage( this.aryPages[this.pageNbr] );
}

ProjectGallery.swapPage = function( projPage ) {
	//
	document.title = this.title+ ", slide: "+ projPage.title;
	document.body.style.backgroundColor = projPage.bgColor;
	document.body.background = projPage.bgImage;

	$("theImage").src = projPage.image;
	$("pageTitle").innerHTML= projPage.title;
}

ProjectGallery.startSlideshow = function() {
	this.stopSlideshow();
	this.swapperIdx= window.setInterval( "ProjectGallery.nextPage()", this.slideDelay );
	this.isSlideshow= true;
	this.slideshowLoopIdx= 0;
	this.setVCRBtns();
}

ProjectGallery.stopSlideshow = function() {
	if (this.isSlideshow) {
		this.isSlideshow= false;
		window.clearInterval(this.swapperIdx);
	}
	this.setVCRBtns();
}

ProjectGallery.setVCRBtns = function(){
	if (this.isSlideshow) {
		$("start").className = "off";
		$("stop").className = "on";
	} else {
		$("start").className = "on";
		$("stop").className = "off";
	}
}

ProjectGallery.findIndex = function( code ) {
	var i=0;
	for (; i < this.aryPages.length; i++) {
		if (this.aryPages[i].code == code)
			break;
	} // for
	return i; 
}

ProjectGallery.handleImgClick = function() {
	this.stopSlideshow(); 
	this.nextPage(); 
	//return false;
}

ProjectGallery.showFirstPage = function() {
	this.pageNbr=-1;
	this.nextPage();
}

ProjectGallery.previousSlide = function() {
	this.isDirFwd = false;
	this.nextPage();
}

ProjectGallery.nextSlide = function() {
	this.isDirFwd = true;
	this.nextPage();
}

ProjectGallery.goTo = function(idx){
	 // make sure we're inbounds
	if (idx < this.aryPages.length) {
		this.stopSlideshow(); 
		this.pageNbr= idx;
		this.swapPage( this.aryPages[this.pageNbr] );
	}
}

ProjectGallery.setTitle = function( title ){
	this.title= title;
}

ProjectGallery.showHelp = function(){
	alert("Project Gallery v1.3 Help\n\nKeyboard navigation\n\nP: Previous Page\nN: Next Page\nF: First (also Home key)\nL: Last (also End key)\nS: Start/Stop slideshow (toggle)\n1-9,0: Jump directly to Page 1-10\nspacebar: next in current direction\n\nC: show/hide top nav Controls\n\nNote: slideshow and spacebar move you one more in the direction you were already going (this direction is changed by the Previous and Next keys)");
	// \n\nYou may also call this page with query params.\n\nC={code}: starts on page with that code\n0000: slideshow delay in miliseconds
}

ProjectGallery.handleKeyEvent = function(e) {
	var action = 0;
	var idx = 0;
	var me = ProjectGallery;

	if (typeof(e) == "undefined") // IE likes to use omnipresent "event"
		e=event; 

	if( typeof( e.which ) == "number") { //NS 4, NS 6+, Mozilla 0.9+, Opera
		action = e.which;
	} else if( typeof( e.keyCode ) == "number") { //IE, NS 6+, Mozilla 0.9+
		action = e.keyCode;
	} else if( typeof( e.charCode ) == "number") {	//also NS 6+, Mozilla 0.9+
		action = e.charCode;
	} else {
		action="";
	}

	switch (action) { 

		case 32: // change: Space (32)
			me.stopSlideshow(); 
			me.nextPage();
			break;

		case	72://	Help: H
		case 104:
			me.showHelp();
			break;

		case	80: //	Previous: P
		case 112:
			me.stopSlideshow(); 
			me.isDirFwd = false; 
			me.nextPage();
			break;

		case	78: //	Next:	N
		case 110:
			me.stopSlideshow(); 
			me.isDirFwd = true; 
			me.nextPage();
			break;

		case	83: //	Start/Stop Slideshow: S
		case 115:
			if (me.isSlideshow)
				me.stopSlideshow(); 
			else
				me.startSlideshow(); 
			break; 

		case	76: // Last/End: "L" 
		case 108: // "l"
		case	35: // End
			me.lastSlide();
			break;
		
		case	70: // First/Home: "F"
		case 102: // "f"
		case	36: // Home
			me.firstSlide();
			break;

		case 67: // C
		case 99:
			$("pageInfo").style.display = ($("pageInfo").style.display != "none")?"none":"block";
			break;
			
		default: 
			// any number 0-9, 1-9 and 0=10
			if ((action >= 48) && (action<=57)){
				idx=action-48;
				if (idx > 0)
					idx--;
				else
					idx=9; // press 0 for tenth (index 9) image
				me.goTo(idx);
			} // 0-9 pressed
		} // switch

	return true;

} //handleKeyEvent
