/*

	but.... but.... there is no ajax here!
	
	true!  Im pulling all the data at once and storing it in the javascript environment.
	This is beneficial because Im pulling roughly the same amount of data to draw
	the home page anyway.  Also, downloading the whole chunk at 25k (or so) is faster than
	the same amount in smaller periodic chunks.
	
	Ajax would only be appriopriate if the data set were much larger, or if user interraction
	changed the content.  
	
	 "The better part of valor is discretion" (1 Henry IV, 5:4).


*/



window.onload = function (){

	ge("ill, illUList").originalHeight =  getHiddenHeight(ge("ill, illUList"))
	ge("ill, illUList").style.height =  getHiddenHeight(ge("ill, illUList")) + "px";
	loaded = true;
	
	assignBehaviors();
	if(location.hash != ''){parseHash()}
}
	
	var loaded = false;
	var activePanel = "ill, ill";
	var activeIndex;
	
		
	function isUndefined(a){return typeof a == 'undefined';} 

	
	function parseHash(){
		var thisHash = location.hash.substr(9,location.hash.length - 9);
		if(thisHash.length == 3){
			showPane(thisHash);
			if(thisHash != "inf") populateFullViewPanel(thisHash,0);
			return;
		}
		if(thisHash.substr(0,2)=="ML"){
			var thisSection = thisHash.substr(2,3)
			var thisIndex = thisHash.substr(5,thisHash.length - 5)
			showPane(thisSection);
			populateFullViewPanel(thisSection,thisIndex);
			return;
		}
		if(thisHash.substr(0,3)=="inf"){
			showInfoSection(thisHash);
			return;
		}		
	}

	function showInfoSection(section){
		hideFullViewPanel();
		ge("inf_services").style.display = "none";
		ge("inf_method").style.display = "none";
		ge("inf_access").style.display = "none";
		//ge("inf_interaction").style.display = "none";
		ge("inf_technology").style.display = "none";
		if(section){
			changeOpac(0, section);
			ge(section).style.display = "";
			opacity(section,0,100,500);
		}
	}
	

			
	function assignBehaviors(){
		var menuLinks = getElementsByClassName(ge("panels"),"a","menulink");
		var paneLinks = getElementsByClassName(ge("panels"),"a","paneLink");
		for(var i=0;i<menuLinks.length; i ++){
			if(menuLinks[i].id.substr(0,2)=="ML"){
				menuLinks[i].href = "#_('-')_." + menuLinks[i].id;
				menuLinks[i].onfocus = function(){this.blur()}
				menuLinks[i].onclick = function (){populateFullViewPanel(this.id.substr(2,3), this.id.substr(5,this.id.length - 5));return true;}
				menuLinks[i].onmouseover = function (){showThumb(this.id.substr(5,this.id.length - 5),this.id.substr(2,3))}
				menuLinks[i].onmouseout = function (){hideThumb()}
			}
			if(menuLinks[i].id.substr(0,2)=="IL"){
				menuLinks[i].onfocus = function(){this.blur()}
				menuLinks[i].href = "#_('-')_." + menuLinks[i].id.substr(2,menuLinks[i].id.length - 2);
				menuLinks[i].onclick = function (){showInfoSection(this.id.substr(2,this.id.length - 2));return true;}				
			}
		}
		for(var i=0;i<paneLinks.length; i ++){
			if(paneLinks[i].id){
				paneLinks[i].onfocus = function(){this.blur()}
				paneLinks[i].href = "#_('-')_." + paneLinks[i].id.substr(0,3);
				paneLinks[i].onclick = function (){showPane(this.id.substr(0,3));return true;}
			}
		}		
	}
	
		
	function getStyle(el,styleProp)
	{
		var x = document.getElementById(el);
		if (x.currentStyle)
			var y = x.currentStyle[styleProp];
		else if (window.getComputedStyle)
			var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
		return y;
	}
	
	
	
	
	
	function getHiddenHeight(obj){
		var beginVal = obj.style.display
		obj.style.display = '';
		var offHeight = obj.offsetHeight;
		obj.style.display = beginVal;
		return offHeight;
	}
	
	

		 	
	function showPane(section){
		if(!loaded) return;
		if(section == activePanel){return}
		
		thisSection = ge(section + "UList")
		
		if(isUndefined(thisSection.originalHeight))	{thisSection.originalHeight =  getHiddenHeight(thisSection);}
		
		changeOpac(0, thisSection.id)
		thisSection.style.height = "0";
		thisSection.style.display = "";
		thisSection.onComplete = function(){opacity(section + "UList",0,100,500)}
		ge(activePanel + "UList").onComplete = function(){this.style.display="none";}
		
		opacity(activePanel + "UList",100,0,500)
		Tween(activePanel + "UList", 'height', 0,150,30);
		Tween(section + "UList", 'height', thisSection.originalHeight,150,30);
		activePanel = section;
	}


	function ge(theId){return document.getElementById(theId)}
	
	
	
	function getMousePos(e)
	{
		var iebody=(document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body
		var dsocleft=document.all? iebody.scrollLeft : pageXOffset
		var dsoctop=document.all? iebody.scrollTop : pageYOffset

		return{x: e.clientX + dsocleft, y:e.clientY + dsoctop}
	}
	
	
	
	function findPos(obj) {
		var curleft = curtop = 0;
		if (obj.offsetParent) {
			curleft = obj.offsetLeft
			curtop = obj.offsetTop
			while (obj = obj.offsetParent) {
				curleft += obj.offsetLeft
				curtop += obj.offsetTop
			}
		}
		return {left:curleft,top:curtop};
	}	
	
	
	function showThumb(index, section){
		var theTarget = ge("ML" + section + index);
		var thumbDiv =ge("thumbDiv")
		var thumbImg = document.createElement("img");			
		thumbImg.onload = function(){if(!isUndefined(ge("thumbDiv").lastY)){ge("thumbDiv").style.top = (ge("thumbDiv").lastY - (ge("thumbDiv").offsetHeight / 2)) +"px";}}
		thumbImg.id = "thumbDivImg";
		thumbImg.src = eval(section + "Array["+index+"].src");
		thumbDiv.appendChild(thumbImg);
		ge("thumbPointer").style.display = "";
		thumbDiv.style.display = "";
		ge("thumbDiv").style.top = (findPos(theTarget).top - (ge("thumbDiv").offsetHeight / 2)) +"px";
		ge("thumbDiv").style.left = (findPos(theTarget).left+theTarget.offsetWidth + 10) +"px";
		ge("thumbPointer").style.top = (findPos(theTarget).top) + "px";
		ge("thumbPointer").style.left = (findPos(theTarget).left+theTarget.offsetWidth + 1) +"px";
		ge("thumbDiv").lastY = findPos(theTarget).top + (theTarget.offsetHeight /2) ;
		thumbDiv.callback = eventObserve(document, "mousemove", function(e){
				if (!e) var e = window.event;
				if (!e.target) e.target = e.srcElement;
					var mousePos = getMousePos(e);
					ge("thumbDiv").style.top = (mousePos.y - (ge("thumbDiv").offsetHeight / 2)) +"px";
					ge("thumbDiv").style.left = (findPos(e.target).left+e.target.offsetWidth + 10) +"px";
					ge("thumbPointer").style.top = (mousePos.y - 10) + "px";
					ge("thumbPointer").style.left = (findPos(e.target).left+e.target.offsetWidth + 1) +"px";
					ge("thumbDiv").lastY = mousePos.y
		})	
	}
	
	
	
	function hideThumb(){
		var thumbDiv = ge("thumbDiv")
		if(thumbDiv.style.display == "none") return;
		eventStopObserving(document, 'mousemove', thumbDiv.callback);
		thumbDiv.removeChild(ge('thumbDivImg'));
		ge("thumbPointer").style.display = "none";
		thumbDiv.style.display = "none";
		
	}	
	
	
	
	function eventStopObserving(elm, evType, fn, useCapture) {
	//	Cross-browser friendly means of unregistering event handlers
	//	bastardized from prototype event.stopObserving, then formatted to jive with rendr.eventObserve
		if (elm.removeEventListener) {
			elm.removeEventListener(evType, fn, useCapture);
		} else if (elm.detachEvent) {
		  try {
			elm.detachEvent( 'on'+evType, elm[evType+fn] );
			elm[evType+fn] = null;	  
			} 
		  catch (e) {}
		}
		return fn;
	}
	
	function eventObserve(elm, evType, fn, useCapture) {
	//	Cross-browser friendly means of registering event handlers
	//	Taken from http://www.dustindiaz.com/top-ten-javascript/
		if (elm.addEventListener) {
			elm.addEventListener(evType, fn, useCapture);
			return fn;
		}
		else if (elm.attachEvent) {
			elm['e'+evType+fn] = fn;
			elm[evType+fn] = function(){elm['e'+evType+fn]( window.event );}
			elm.attachEvent( 'on'+evType, elm[evType+fn] );
			return fn;
		}
		else {
			elm['on' + evType] = fn;
		}
	}	

			
			
			
	function removeChildrenFromNode(node, exclusion)
	{
		if(node == undefined && node == null){return;}
		while (node.hasChildNodes())
		{
		  if(node.firstChild == exclusion){node.appendChild(exclusion)}  //if we find it, move it to the end for later.
		  if(node.firstChild == exclusion &&  node.childNodes.length == 1){return}	//if it is "later", exit the function
		  node.removeChild(node.firstChild);
		} 
	}
	

	
	function hideFullViewPanel(){
		
		ge("MLoutput").style.display = "none";
		return false;
		
	}
	
	function populateFullViewPanel (section, index)
	{
		if(activeIndex == index) return;
		showInfoSection();
		var fullViewPanel = ge("MLoutput");
		opacity("MLoutput", 100, 0 , 200)
		setTimeout("fillFullViewPanel('" + section + "'," + index + ")",200);	
		setTimeout("opacity('MLoutput', 0, 100 , 200)", 500); 
		activeIndex = index;

	}
	
	function fillFullViewPanel (section, index)
	{	
		hideThumb();
		
		var theSection;
		
		switch(section)
		{
		case "ill": theSection = "Illustration";break    
		case "prn": theSection = "Print";break    
		case "dev": theSection = "Development";break    
		case "web": theSection = "Design";break    
		case "brn": theSection = "Logo and branding";break    
		case "inf": theSection = "Information";break    
		}	

		var fullViewPanel = ge("MLoutput");
		removeChildrenFromNode(fullViewPanel);

		var fullImage = document.createElement("img");
		fullImage.id = section + "fullImage";
		fullImage.src = "http://gregtaff.com/portfolio/" + eval(section + "FArray[" + index + "]");
		fullImage.alt = eval(section + "TArray[" + index + "]");
		fullImage.section = section;
		fullImage.index = index;
		fullImage.style.marginTop = "4px";
		
		var theTitle = document.createElement("h2");
		theTitle.innerHTML = theSection + " :: " + eval(section + "TArray[" + index + "]");
		theTitle.className = section + "top";

		fullViewPanel.appendChild(theTitle);
		fullViewPanel.appendChild(fullImage);
		fullViewPanel.innerHTML += "<p>" + eval(section + "DArray[" + index + "]") + "</p>";
		fullViewPanel.style.display = "";
			
	}

	

	/*
		Written by Jonathan Snook, http://www.snook.ca/jonathan
		Add-ons by Robert Nyman, http://www.robertnyman.com
		
		[	retrofitted to use XPath where available and to fix the 	]
		[   regEx pattern that stopped working in FF. XPath portions	]
		[   and the new pattern were taken from prototype.				]
		[																]
		[												-greg			]
	*/
	
	function getElementsByClassName(oElm, strTagName, strClassName){
		if (!!document.evaluate) {
	    	var expression = ".//*[contains(concat(' ', @class, ' '), ' " + strClassName + " ')]";
	        var results = [];
	    	var query = document.evaluate(expression, oElm || document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
		    for (var i = 0, length = query.snapshotLength; i < length; i++){results.push(query.snapshotItem(i));}
		    		    
	    	return results;
		}
		
		var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
		var arrReturnElements = new Array();
		strClassName = strClassName.replace(/-/g, "\-");
		var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");		//	the original pattern was broken.  This pattern courtesy of prototype
		var oElement;
		for(var i=0; i<arrElements.length; i++){
			oElement = arrElements[i];
			if(oRegExp.test(oElement.className)){
				arrReturnElements.push(oElement);
			}
		}		
		
		return (arrReturnElements)
	}