/* --------------------------------------------------------------------------------  */
/*                  	 � Copyright 2010 Garvey Consulting, Ltd                     */
/* --------------------------------------------------------------------------------  */
 


	/*------------------------ local variables --------------------------- */
	
	var debugCount = 0;

	var _Q4StartPage;
	var _Q4Slideshow;
	var _Q4Thumbnail;
	var _ssImage;
	var _ssCaption;
	
	var projects = [];		// collection of project objects
	var titles = [];		// collection of titles
	
	var timerSlideshow;
	var nowShowing = 0;

	var slideshow;			// slideshow control object
	var browser = new Browser;

	var me = this;
	var _frmMain;

	var dirty = false;

	
	
	/*---------------------- classes ------------------------- */

	
	String.prototype.unpack = function() {
		var i = this.indexOf("~",0);
		var ix = this.substring(i+1);
		if (isNaN(ix)) { 
			return  { "projkey": this.substring(0,i), "index": ix };
		} else {
			return  { "projkey": this.substring(0,i), "index": +ix };
		} 
	};

	function XBrowserAddHandler(target,eventName,handlerName) {
	    if ( target.addEventListener ) {
//	    	target.addEventListener(eventName, handlerName, false);	
	    	target[eventName] = handlerName;
	    } else if ( target.attachEvent ) {
	    	target.attachEvent(eventName, handlerName);
	    } else {
	    	target[eventName] = handlerName;
	    }
	}

	function Project(tn, imgs, descripts, cat) {		
		// project object constructor
		this.thumbnail = tn;			// an <img> object
		this.images = imgs;				// array of <img> 
		this.descriptions = descripts;	// text
		this.category = cat;			// array of <p> objects
	}
	
	function Slideshow(eleImage, eleCaption, eleControl, eleClosebtn, onclose) {
		/* sets up a slides show
		 *		eleImage, eleCaption	elements <img> & <p> where image and caption are to be shown
		 * 		eleControl				<div> element where slideshow control is to be built
		 * 		eleClosebtn		<img> of the close buttion
		 * */ 		
		 
		var me = this;
		this._slideshow_image 	= eleImage;
		this._slideshow_caption = eleCaption;
		this._slideshow_control = eleControl;
		this._slideshow_close 	= eleClosebtn;
		this._slideshow_onclose = onclose;
		
		var _slideshow_container = this._slideshow_image.parentNode;	
		
		var ssImageSrcs;			// array of strings: img src value for the image
		var ssCaptions; 			// array of strings: caption
		var ssIconPlayPause;		// ref to play/pause icon (<img>)
		var ssIconImages; 			// array of refs to image icons (<img>)
		var timerSlideshow;
		
		var SRC_PLAY_ICON 		= "images/icon16_play3.png";
		var SRC_PAUSE_ICON 		= "images/icon16_pause3.png";
		var SRC_SHOWING_ICON 	= "images/icon16_playing.png";
		var SRC_NOTSHOWING_ICON = "images/icon16_notplaying.png";
		var SRC_CLOSE			= "images/icon16_close.png";
		var SRC_NULL			= "images/null.gif";



		
		/* ---------------------- initialize object ------------------------- */		
		
		// build the slideshow control and start the show			
		var new_ele;
		new_ele = document.createElement("div");
		new_ele.id 				= "ssControl";
		new_ele.style.position 	= "absolute";
		new_ele.style.visibility = "hidden";
		new_ele.style.height 	= "16px";
		new_ele.style.zIndex 	= "1";
		this._slideshow_control = _slideshow_container.appendChild(new_ele);
		
		new_ele = document.createElement("img");
		new_ele.id 				= "ssClose";
		new_ele.src 			= SRC_CLOSE;
		new_ele.style.position 	= "absolute";
		new_ele.style.cursor	= "pointer";
		new_ele.style.visibility = "hidden";
		new_ele.style.top 		= "-10px";
		new_ele.style.left 		= "512px";
		new_ele.style.height 	= "16px";
		new_ele.style.width 	= "16px";
		new_ele.style.zIndex 	= "1";
		this._slideshow_close = _slideshow_container.appendChild(new_ele);
		
		
		
		/* properties */

		this.paused = false;			// auto play has been paused or is not active 
		this.pace;						// mseconds between images on auto play
		this.showContinuously = false; 	// whether to continue auto play after wrapping from last ot first image
		this.nowShowing = 0;			// which image is showing
		this.count;						// number of images
		
		
		
		/* methods */ 
		
		this.initialize = function (images, captions, pace) {
					if (this.timerSlideshow != null) 
						window.clearInterval(this.timerSlideshow);

					XBrowserAddHandler(new_ele, "onclick", slideshow.clickClose);
					
					this.ssImageSrcs = images;
					this.ssCaptions = captions;
					this.pace = pace * 1000;
					this.count = this.ssImageSrcs.length;		
					
					this._slideshow_control.innerHTML = "";		// clean out previous
					this._slideshow_close.style.visibility = "visible";
					
					if (this.count < 2) {
						
						// no pause/resume control needed - just show the img and caption
						this._slideshow_image.src = me.ssImageSrcs[0];
						this._slideshow_caption.innerHTML = me.ssCaptions[0];
						this._slideshow_control.style.visibility = "hidden";
						
					} else {
						
						// position pause/resume control centered above image 
						var w = this.count * 16;
						var x = (520 - w - 16) / 2;
						this._slideshow_control.style.top = "-10px";
						this._slideshow_control.style.left = x + "px";
						this._slideshow_control.style.width = w + 16 + "px";
						this._slideshow_control.style.height = "26px";
						this._slideshow_control.style.visibility = "visible";
						
						// populate the slideshow control and start the show
						
						// first the play/pause
						x = 0;
						new_ele = document.createElement("img");
						new_ele.src 	= SRC_PAUSE_ICON;
						new_ele.name 	= "pause";
						new_ele.style.cursor = "pointer";
						new_ele.style.top  = "-8px";
						new_ele.style.left 	 = x + "px";
						new_ele.style.width  = "16px";
						new_ele.style.height = "16px";
						x = x + 17;
						XBrowserAddHandler(new_ele, "onclick", slideshow.clickSlideshow);
						this._slideshow_control.appendChild(new_ele);
						
						// slide show - picture legend - add icons left to right 
						for (var i=0; i<this.count; i++) {
							new_ele = document.createElement("img");
							new_ele.src 	= SRC_NOTSHOWING_ICON;
							new_ele.name 	= i;
							new_ele.style.cursor = "pointer";
							new_ele.style.top  = "-8px";
							new_ele.style.width  = "16px";
							new_ele.style.height = "16px";
							new_ele.style.left 	 = x + "px";
							x = x + 16;
							XBrowserAddHandler(new_ele, "onclick", slideshow.clickSlideshow);
							this._slideshow_control.appendChild(new_ele);
						}
						
						// build icon references
						var imgs = this._slideshow_control.getElementsByTagName("img");
						this.ssIconPlayPause = imgs[0];
						var imgs2 = [];
						for (var i=1; i<imgs.length; i++) { imgs2[i-1] = imgs[i]; }
						this.ssIconImages = imgs2;			
						
						// start slideshow
						this.showThis(0);
						if (this.pace > 0) {
							this.timerSlideshow = window.setInterval(slideshow.showNext, this.pace);
						} else {
							this.paused = true;				
						}							
					}
		};

		this.showThis = function (ix) { 	
						// show the pic
						me._slideshow_image.src = me.ssImageSrcs[ix];
						me._slideshow_caption.innerHTML = me.ssCaptions[ix];
						
						me.ssIconImages[me.nowShowing].src = SRC_NOTSHOWING_ICON;
						me.nowShowing = ix; 
						me.ssIconImages[me.nowShowing].src = SRC_SHOWING_ICON;
					};
					
		this.showNext = function () { 
						var i = me.nowShowing + 1;
						if (i >= me.count) {
							i = 0;
							if (!me.showContinuously) { me.pause(); }
						}
						me.showThis(i);
					};
							
		this.pause = function () { 
						window.clearInterval(this.timerSlideshow);
						me.paused = true;
						me.ssIconPlayPause.src = SRC_PLAY_ICON;
						me.ssIconPlayPause.name = "play";
					};
		
		this.play = function () { 
						this.timerSlideshow = window.setInterval(slideshow.showNext, this.pace);
						me.paused = false;
						me.ssIconPlayPause.src = SRC_PAUSE_ICON;
						me.ssIconPlayPause.name = "pause";
					};
					
		this.clickSlideshow = function(ev) { 			
						if (!ev) var ev = window.event;
						if (ev.target) ele = ev.target;
						else ele = ev.srcElement;
						
						// show the pic
						var ix = ele.name;
						switch (ix) {
						case "play": 
							me.showNext();
							me.play();
							break;
						case "pause":
							me.pause();
							break;
						default:
							me.pause();
							me.showThis(+ix);	
						}
					};
								
		this.clickClose = function(ev) { 			
						if (!ev) var ev = window.event;
						if (ev.target) ele = ev.target;
						else ele = ev.srcElement;
					
						me.pause();
						me._slideshow_image.src = SRC_NULL;
						me._slideshow_caption.innerHTML = "";
						me._slideshow_control.style.visibility = "hidden";
						me._slideshow_close.style.visibility = "hidden";
						
						me._slideshow_onclose();
					};		
		
	}

	
	/*---------------------- global routines ------------------------- */
	
	
	function init(page) {
		_frmMain = document.getElementById("frmMain");
		
		switch (page) {
			case 1:
				_Q4StartPage 	 = document.getElementById("Q4StartPage");
				_Q4Slideshow 	 = document.getElementById("Q4Slideshow");
				_Q4Thumbnail 	 = document.getElementById("Q4Thumbnail");
				_ssImage = document.getElementById("ssImage");
				_ssCaption = document.getElementById("ssCaption");
				buildThumbnails();
				slideshow = new Slideshow(
											document.getElementById("ssImage"),
											document.getElementById("ssCaption"),
											document.getElementById("ssControl"),
											document.getElementById("ssClose"),
											onSlideshowClose
										  );
				_Q4StartPage.style.display = "block";
				_Q4Slideshow.style.display = "none";
				break;

			case 4:
				document.getElementById("loginName").display = (loggedIn) ? "block" : "none";
				break;

			default:
		}
	}
			
	
	/* ---------------- global routines ---------------- */
	/* ----------------      index      ---------------- */
	
	
	function onSlideshowClose() { 
		_Q4StartPage.style.display = "block";
		_Q4Slideshow.style.display = "none";
	}
	
	function buildThumbnails() {
		var TN_HSPACING = 48;
		var _proj_cache = document.getElementById("proj_cache");
		var projdivs = _proj_cache.getElementsByTagName("div");
		
		projects = [];
		
		var projdiv;
		var category = "";
		var next_left = TN_HSPACING * 2;
		var next_top = 15;
			
		var awardReplacement = "<br/><img src='images/award1.png' style='width:15px;height:15px;position:static;vertical-align:middle;'>";
		
		for (var i=0; i<projdivs.length; i++) {
			projdiv = projdivs[i	];
			
			//get proj key/name
			projkey = projdiv.id;	
			
			// get thumnails, category, images, text
			var imgs = projdiv.getElementsByTagName("img");		
			var ps = projdiv.getElementsByTagName("p");
			var tn = imgs[0];				// thumbnail is first image
			var imgs_srcs = [];
			for (var j=1; j<imgs.length; j++) { imgs_srcs[j-1] = imgs[j].src; }	// thumbnail is first image
			var p_text = [];
			for (var j=0; j<ps.length; j++) { p_text[j-1] = ps[j].innerHTML.replace("AWARD", awardReplacement); }
			var cat = ps[0].innerHTML;	// category is first text	
			projects[projkey] = new Project(tn, imgs_srcs, p_text, cat);
			
			// create thumbnail title if required
			var new_ele;
			if (projects[projkey].category != category) {
				if (category != "") {
					next_top+= 56;
				}
				category = projects[projkey].category;
				new_ele = document.createElement("p");
				new_ele.innerHTML = category;
				new_ele.style.left = 5;
				next_top+= 5;
				new_ele.style.top = next_top;
				next_top+= 15;
				_Q4Thumbnail.appendChild(new_ele);
				var next_left = TN_HSPACING * 2;
			}
			
			// create and position thumbnails
			if (next_left < 0) {
				next_left = TN_HSPACING * 2;
				next_top+= 32;
			}
			new_ele = document.createElement("img");
			new_ele.src = projects[projkey].thumbnail.src;
			new_ele.usemap = projkey;
			new_ele.style.top = next_top;
			next_top+= 22;
			new_ele.style.left = next_left;
			next_left-= TN_HSPACING;
			XBrowserAddHandler(new_ele, "onclick", clickThumbNail);
			XBrowserAddHandler(new_ele, "onmouseover", mouseonThumbNail);
			XBrowserAddHandler(new_ele, "onmouseout", mouseoffThumbNail);
//			if (browser.name == "ie") {
//				new_ele.attachEvent("onclick", clickThumbNail, false);
//				new_ele.attachEvent("onmouseover", mouseonThumbNail, false);
//				new_ele.attachEvent("onmouseout", mouseoffThumbNail, false);				
//			} else {
//				new_ele.addEventListener("onclick", clickThumbNail, false);
//				new_ele.addEventListener("onmouseover", mouseonThumbNail, false);
//				new_ele.addEventListener("onmouseout", mouseoffThumbNail, false);				
//			}
			_Q4Thumbnail.appendChild(new_ele);
		}
	}

	function mouseonThumbNail(ev) {
		var ele;
		if (!ev) var ev = window.event;
		if (ev.target) ele = ev.target;
		else ele = ev.srcElement;
		ele.style.zIndex = '9';
	}

	function mouseoffThumbNail(ev) {
		if (!ev) var ev = window.event;
		if (ev.target) ele = ev.target;
		else ele = ev.srcElement;
		ele.style.zIndex = '0';
	}

	function clickThumbNail(ev) {
		if (!ev) var ev = window.event;
		if (ev.target) ele = ev.target;
		else ele = ev.srcElement;
		
		var projkey = ele.usemap;
		_ssImage.src = projects[projkey].images[0];
		_ssCaption.innerHTML = projects[projkey].descriptions[0];
		
		// show it
		_Q4StartPage.style.display = "none";
		_Q4Slideshow.style.display = "block";
		slideshow.initialize(projects[projkey].images, projects[projkey].descriptions, 3);
	}
	
	function featureShowMore(which) {
		document.getElementById('more1').style.display='none';
		document.getElementById('more2').style.display='none';
		document.getElementById('more3').style.display='none';
		if (which != null) 
			document.getElementById(which).style.display='block';
	}


	/* ----------------      index      ---------------- */
	/* ----------------      client     ---------------- */
	
	function iconClicked(which) {
		if (which == "php") {
			window.open("showLocals.php");
		} else {
			_frmMain.iconClick.value = which;
			_frmMain.submit();		
		}
	}
	
	function getSqlFromHistory(ele) {
		document.getElementById("sqlInput").innerHTML = ele.innerHTML;
	}
	
	function addBug() {
		_frmMain.request.value = "addbug";
		_frmMain.submit();
	}
	
	function saveandreturn(id) {
		if (dirty && confirm("Save changes?")) {			
			_frmMain.request.value = "saveandreturn";
			_frmMain.reqdata.value = id;
			_frmMain.submit();
		} else {
			iconClicked('bugs');
		}
	}

	function saveBug(id) {
		_frmMain.request.value = "savebug";
		_frmMain.reqdata.value = id;
		_frmMain.submit();
	}
	
	function deleteBug(id) {
		if (confirm("Perminently delete this entry?")) {
			_frmMain.request.value = "deletebug";
			_frmMain.reqdata.value = id;
			_frmMain.submit();
		}
	}
	
	function showBug(id) {
		_frmMain.request.value = "showbug";
		_frmMain.reqdata.value = id;
		_frmMain.submit();
	}
	
	function sort(col) {
		_frmMain.request.value = "sort";
		_frmMain.reqdata.value = col;
		_frmMain.submit();
	}
	
	
	
	/* ----------------      client     ---------------- */
	/* ----------------     utility     ---------------- */
	
	
	function debug() {
		var msg = "";
		for (var i=0; i<arguments.length; i++) {
			var m = arguments[i];
			if (typeof m == "object") {
				for (var j=0; j<m.length; j++) {
					msg+= " ~ " + m[j];		
				}
			} else {
				msg+= " ~ " + m;		// string out all the args
										// separated by ~
			}
		}
		msg = (debugCount++) +": "+msg.substr(3); // jump over first ~
		document.getElementById('debugMsg').innerHTML = msg + "<br>" + document.getElementById('debugMsg').innerHTML;
	}

	function Browser() { 
		if (navigator.userAgent.indexOf('MSIE') != -1) {
			this.name = 'ie';
		} else if (navigator.userAgent.indexOf('Firefox') != -1) {
			this.name = 'firefox';
		} else if (navigator.userAgent.indexOf('Opera') != -1) {
			this.name = 'opera';
		} else if (navigator.userAgent.indexOf('WebKit') != -1) {
			this.name = 'safari';
		} else if (navigator.userAgent.indexOf('Chrome') != -1) {
			this.name = 'chrome';
		} else {
			this.name = 'other';
		}
	}
	
	
	
	function initImage() {
		imageId = 'thephoto';
		image = document.getElementById(imageId);
		setOpacity(image, 0);
		image.style.visibility = 'visible';
		fadeIn(imageId,0);
	}

	function setOpacity(obj, opacity) {
		opacity = (opacity == 100)?99.999:opacity;
		
		// IE/Win
		obj.style.filter = "alpha(opacity:"+opacity+")";
		
		// Safari<1.2, Konqueror
		obj.style.KHTMLOpacity = opacity/100;
		
		// Older Mozilla and Firefox
		obj.style.MozOpacity = opacity/100;
		
		// Safari 1.2, newer Firefox and Mozilla, CSS3
		obj.style.opacity = opacity/100;
	}

	function fadeIn(objId,opacity) {
		if (document.getElementById) {
			obj = document.getElementById(objId);
			if (opacity <= 100) {
			  setOpacity(obj, opacity);
			  opacity += 10;
			  window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
			}
		}
	}