//-------VARIABLES ------------//

//portfolio screen
var screenItem=document.getElementById("screenItem");
var portfolioScreenImg=document.getElementById("portfolioScreenImg");
var portfolioScreenFlash=document.getElementById("portfolioScreenFlash");
var portfolioScreenFlashObject=document.getElementById("portfolioScreenFlashObject");
var flashPlaying=false;

//hide/show panel functions
var hideShow=document.getElementById('hideShow');
var panels=document.getElementById('panels');
var hidePos="0px -50px";
var showPos="0px 0px";

//prev/next functions
var prevLi=document.getElementById('prevLi');
var nextLi=document.getElementById('nextLi');
var prevAnchor=document.getElementById("prevAnchor");
var prevAnchorNoScript=document.getElementById("prevAnchorNoScript");
var nextAnchor=document.getElementById("nextAnchor");
var nextAnchorNoScript=document.getElementById("nextAnchorNoScript");
var prevPos="0px -50px";
var nextPos="0px 0px";

//proj items functions
var projItemsList=document.getElementById("projItemsList");
var projItemsLi=projItemsList.getElementsByTagName("li");
var pilA=projItemsList.getElementsByTagName("a");
var projTransShowPos="0px 0px";
var projTransHidePos="0px 20px";

var pilaHref=new Array();
var pilaHrefHQIndex=new Array();
var pilaHrefHashIndex=new Array();
var pilaHrefQIndex=new Array();
var pilaPath=new Array();
var pilaQuery=new Array();
var pilaHashed=new Array();

//cat items functions
var catList=document.getElementById("catList");
var catLi=catList.getElementsByTagName("li");
var clA=catList.getElementsByTagName("a");
var catTransShowPos="0px 0px";
var catTransHidePos="0px 20px";

var clA=catList.getElementsByTagName("a");
var claHref=new Array();
var claHrefQIndex=new Array();
var claPath=new Array();
var claQuery=new Array();
var claHashed=new Array();

//external items functions
var extList=document.getElementById("extList");
var extLi=extList.getElementsByTagName("li");
var eLResume=document.getElementById("eL-resume");
var eLLinkedin=document.getElementById("eL-linkedin");
var extTransShowPos="0px 0px";
var extTransHidePos="0px 20px";

//description area
var descArea=document.getElementById("descArea");
var descHeadings=descArea.getElementsByTagName("h3");
var descUl=descArea.getElementsByTagName("ul");

//---- TEMPORARY HIDE/SHOW PANELS FUNCTIONS --//

//make hide/show button faux transparency to read "show panels"
// this line shouldn't be necessary as the cookie would take care of it:
//hideShow.style.backgroundPosition=showPos;

//begin page load with panels hidden.
// this line shouldn't be necessary as the cookie would take care of it:
//panels.style.display="none";

//Function to check for a cookie and apply it to the effect.
function hideShowApply(cookieName){
	// if the cookie says "block" which means the panels should be shown
	if (getCookie(cookieName)=="block"){
		// display it as "block", showing the panels
		panels.style.display="block";
		// since the panels are shown, make the button say "hide"
		hideShow.style.backgroundPosition=hidePos;
		} else if(getCookie(cookieName)=="none"){
		// if the cookies says "none";
		// display it as "none", hiding the panels
		panels.style.display="none";
		// since the panels are shown, make the button say "show"
		hideShow.style.backgroundPosition=showPos;
		} else {
		//default settings
		panels.style.display="block";
		hideShow.style.backgroundPosition=hidePos;
		}
	}
	
// Function to switch the hide<-->show
function hideShowSwitch(cookieName,days){
	// if the cookie says "block" which means the panel is shown right now
	if (getCookie(cookieName)=="block"){
		// set the cookie as "none", making it not shown
		setCookie(cookieName,"none",days);
		} else if (getCookie(cookieName)=="none"){
		// else if the cookie says "none", meaning it's not shown
		// set the cookie to "block", showing it
		setCookie(cookieName,"block",days);
		} else {
		// else if the cookie says anything else
		// set it to "block", showing it (especially for the first click ever, going from none to block)
		setCookie(cookieName,"block",days);
		}
	}

//Make hide/show button cursor change when hovered
hideShow.onmouseover=function(){this.style.cursor="pointer";}

//Defines what happens when button is clicked
hideShow.onclick=function(){
	// do the switch...
	hideShowSwitch("c_portfolio-hideShow",7);
	// ... then apply the cookie value
	hideShowApply("c_portfolio-hideShow");
}

//----PREVIOUS/NEXT FUNCTIONS-----//

//bring prevLi back to original position from non-js-enabled state
prevLi.style.backgroundPosition=nextPos;

//when prevLi is hovered, move background images to show transparency on top of prevLi
prevLi.onmouseover=function(){
	this.style.backgroundPosition=prevPos;
	nextLi.style.backgroundPosition=prevPos;
	}
	
//when nextLi is hovered, move background images to show transparency on top of nextLi
nextLi.onmouseover=function(){
	this.style.backgroundPosition=nextPos;
	prevLi.style.backgroundPosition=nextPos;
	}
	
//reverse the stylesheet's rules of the anchors so that the noscript anchors are hidden and the regular anchors are shown.
prevAnchor.style.display="inline";
prevAnchorNoScript.style.display="none";

nextAnchor.style.display="inline";
nextAnchorNoScript.style.display="none";
	
//get value for previous index using a given list.
function getPrevIndex(index,list){
	if(index==0){
		index=list.length-1;
		} else {
		index=index-1;
		}
	return index;
	}

//get value for next index using a given list.
function getNextIndex(index,list){
	if(index==list.length-1){
		index=0;
		} else {
		index=index+1;
		}
	return index;
	}

function prevClicked(){
	//get the new piece index values
	var newPieceIndex=getPrevIndex(pieceIndex,allPieces);
	
	var cliId=catLi[newPieceIndex].id;
	var cliIdLastDash=cliId.lastIndexOf("-");
	var cliIdProj=cliId.substring(3,cliIdLastDash);
	var cliIdPiece=cliId.substr(3+cliIdProj.length+1);
	
	//perform actions using the current proj and piece ids
	changeScreen(cliIdProj,cliIdPiece);
	changePieces(cliIdProj);
	changeHeadings(cliIdProj,cliIdPiece);
	changeDesc(cliIdProj,cliIdPiece);	
	changeLocation(cliIdProj,cliIdPiece);
	changeProjIndex(cliIdProj);
	
	//change the index
	pieceIndex=getPrevIndex(pieceIndex,allPieces);

	changeProjSelection(projIndex);
	changeCatSelection(pieceIndex);
	}

function nextClicked(){
	//get the new piece index values
	var newPieceIndex=getNextIndex(pieceIndex,allPieces);
	
	var cliId=catLi[newPieceIndex].id;
	var cliIdLastDash=cliId.lastIndexOf("-");
	var cliIdProj=cliId.substring(3,cliIdLastDash);
	var cliIdPiece=cliId.substr(3+cliIdProj.length+1);
	
	//perform actions using the current proj and piece ids
	changeScreen(cliIdProj,cliIdPiece);
	changePieces(cliIdProj);
	changeHeadings(cliIdProj,cliIdPiece);
	changeDesc(cliIdProj,cliIdPiece);	
	changeLocation(cliIdProj,cliIdPiece);
	changeProjIndex(cliIdProj);
	
	//change the index
	pieceIndex=getNextIndex(pieceIndex,allPieces);

	changeProjSelection(projIndex);
	changeCatSelection(pieceIndex);
	}


//--------- PROJITEMS FUNCTION --------//

//When mouse is over the projItemList ul...
projItemsList.onmouseover=function(){
	//Define function for mouseover event for each projItem
	for(var i=0;i<projItemsLi.length;i++){
		projItemsLi[i].onmouseover=function(){
			//If the item is not the selected one
			if(i!=projIndex){
				//Hide the faux transparency on the selected project item
				projItemsLi[projIndex].style.backgroundPosition=projTransHidePos;
				}
			//Show the faux transparency on the hovered projItem
			this.style.backgroundPosition=projTransShowPos;
			//Change the cursor to the pointer
			this.style.cursor="pointer";
			}
		}
		
	//Definite function for mouseout event for each projItem
	for(var i=0;i<projItemsLi.length;i++){
		projItemsLi[i].onmouseout=function(){
			//Hide the faux transparency on the hovered projItem
			this.style.backgroundPosition=projTransHidePos;
			}
		}
	}

//When mouse is out of projItemList ul
projItemsList.onmouseout=function(){
	//Return the selected item's faux transparency to "show" state.
	projItemsLi[projIndex].style.backgroundPosition=projTransShowPos;
	}

function changeProjSelection(projIndex){
	for (var i=0;i<projItemsLi.length;i++){
		projItemsLi[i].style.backgroundPosition=projTransHidePos;
		}
	for (var i=0;i<pilA.length;i++){
		pilA[i].style.color="#ffffff";
		}
	projItemsLi[projIndex].style.backgroundPosition=projTransShowPos;
	pilA[projIndex].style.color="#000000";
	}
	
//hide all piece items, then take the projId value from the onclick event
//and display the appropriate piece items
function projClicked(projId){
	//this if statement is made to check whether you're already on the project you selected
	//if it is, don't do anything. if it isn't, proceed to change all the necessary things
	if (projId!=allProjects[projIndex]){
		//get the project's first piece id by looking through the id's of the description headings
		for (var i=0;i<descHeadings.length;i++){
			var dhId=descHeadings[i].id;
			
			var dhPieceParentId=dhId.substring(17,projId.length+17);
			if (dhPieceParentId==projId){
				var projFirstPieceId=dhId.substr(17+projId.length+1);
				break;
				}
			}
		
		changePieces(projId);
		changeHeadings(projId,projFirstPieceId);
		changeDesc(projId,projFirstPieceId);
		changeScreen(projId,projFirstPieceId);
		changeLocation(projId,projFirstPieceId);
	
		changeProjIndex(projId);
		changePieceIndex(projId,projFirstPieceId);
		changeProjSelection(projIndex);
		changeCatSelection(pieceIndex);
		}
	}

//--------- CATEGORY FUNCTION --------//

//When mouse is over the catList ul...
catList.onmouseover=function(){
	//Define function for mouseover event for each catLi
	for(var i=0;i<catLi.length;i++){
		catLi[i].onmouseover=function(){
			//If the item is not the selected one
			if(i!=pieceIndex){
				//Hide the faux transparency on the selected catLi
				catLi[pieceIndex].style.backgroundPosition=catTransHidePos;
				}
			//Show the faux transparency on the hovered catLi
			this.style.backgroundPosition=catTransShowPos;
			//Change the cursor to the pointer
			this.style.cursor="pointer";
			}
		}
		
	//Define function for mouseout event for each catLi
	for(var i=0;i<catLi.length;i++){
		catLi[i].onmouseout=function(){
			//Hide the faux transparency on the hovered catLi
			this.style.backgroundPosition=catTransHidePos;
			}
		}
	}

//When mouse is out of catList ul
catList.onmouseout=function(){
	//Return the selected item's faux transparency to "show" state.
	catLi[pieceIndex].style.backgroundPosition=catTransShowPos;
	}
	
function changeCatSelection(pieceIndex){
	for (var i=0;i<catLi.length;i++){
		catLi[i].style.backgroundPosition=catTransHidePos;
		clA[i].style.color="#ffffff";
		}
	catLi[pieceIndex].style.backgroundPosition=catTransShowPos;
	clA[pieceIndex].style.color="#000000";
	}
	
function pieceClicked(projId,pieceId){
	changeHeadings(projId,pieceId);
	changeDesc(projId,pieceId);
	changeScreen(projId,pieceId);
	changeLocation(projId,pieceId);
	changePieceIndex(projId,pieceId);

	changeCatSelection(pieceIndex);
	}

// PROJITEMS AND CATITEMS FUNCTIONS

//change the link's hrefs to hashes so the page doesn't refresh
//in exchange, use JS to change the pieces
function hashAnchors(){
	//change the link values for the PROJECT LIST ITEMS
	for (var i=0;i<pilA.length;i++){
		pilaHref[i]=pilA[i].href;
		pilaHrefQIndex[i]=pilaHref[i].indexOf("?");
		pilaPath[i]=pilaHref[i].substring(0,pilaHrefQIndex[i]);
		pilaQuery[i]=pilaHref[i].substr(pilaHrefQIndex[i]);
		pilaHashed[i]=pilaPath[i]+"#"+pilaQuery[i];
		pilA[i].href=location.href+"#"+pilaQuery[i];
		}
	}

	for(var i=0;i<clA.length;i++){
		claHref[i]=clA[i].href;
		claHrefQIndex[i]=claHref[i].indexOf("?");
		claPath[i]=claHref[i].substring(0,claHrefQIndex[i]);
		claQuery[i]=claHref[i].substr(claHrefQIndex[i]);
		claHashed[i]=claPath[i]+"#"+claQuery[i];
		clA[i].href=location.href+"#"+claQuery[i];
		}

// ------------- EXTERNAL FUNCTIONS --------------//

//Define objects
//When mouse is over extList ul...
extList.onmouseover=function(){
	//Define function for mouseover event for each extLi
	for(var i=0;i<extLi.length;i++){
		extLi[i].onmouseover=function(){
			//Make all extLi hide the faux transparency first...
			for(var j=0;j<extLi.length;j++){
				extLi[j].style.backgroundPosition=extTransHidePos;
				}
			//...Then show the faux trans for the hovered extLi
			this.style.backgroundPosition=extTransShowPos;
			//Change the cursor to the pointer
			this.style.cursor="pointer";
			}
		}
	}

//when the external links li are clicked, the href inside them gets activated
function liAsLink(liVar){
	var liHref=liVar.getElementsByTagName("a")[0].href;
	location.href=liHref;
	}


// Changes for different elements

function changeScreen(projId,pieceId){
	var uri="showScreen.php";
	uri=uri+"?proj="+projId+"&piece="+pieceId;
	uri=uri+"&sid="+Math.random();
	
	var screenHttp=new GetXmlHttpObject();
	if (screenHttp==null){
		alert("Your browser does not support AJAX!");
		}

	screenHttp.onreadystatechange=function(){
		if (screenHttp.readyState<4){
			screenItem.style.padding="0";
			screenItem.style.width=screenItemDesiredWidth+"px";
			screenItem.style.height=screenItemDesiredHeight+"px";
			screenItem.innerHTML='<p style="margin:0;border:0;padding:0;color:#333333;font-family:Arial, Helvetica, sans-serif;font-size:10px;text-transform:uppercase;font-weight:700;">Downloading Data (Hopefully)...</p>'; //this takes out the image and div tag for the flash content, so it must be re-introduced when the readystate is complete
			}
		
		if (screenHttp.readyState==4){
			
			//reinsert the image tag and div tag for the flash after it's taken out from the ajax readystatechange
			screenItem.innerHTML='<img id="portfolioScreenImg" src="" alt="" style="border:0;" /><div id="portfolioScreenFlash"></div>';
			
			//Reintroduce the img and div since they were "deleted" during the readystatechange phase
			var portfolioScreenImg=document.getElementById("portfolioScreenImg");
			var portfolioScreenFlash=document.getElementById("portfolioScreenFlash");
			
			//Get the data and sort it out
			var responseText=screenHttp.responseText;
			var indexWidth=responseText.indexOf("&width="); // "&width=" has 7 characters
			var indexHeight=responseText.indexOf("&height="); // "&height=" has 8 characters
			var indexFileType=responseText.indexOf("&fileType=");// "&fileType=" has 10 characters
			var indexProjTitle=responseText.indexOf("&projTitle=");// "&projTitle=" has 11 characters
			var indexPieceTitle=responseText.indexOf("&pieceTitle=");// "&pieceTitle=" has 12 characters
			
			var fileSrc=responseText.substring(0,indexWidth);
			var fileWidth=responseText.substring(fileSrc.length+7,indexHeight);
			var fileHeight=responseText.substring(fileSrc.length+7+fileWidth.length+8,indexFileType);
			var fileType=responseText.substring(fileSrc.length+7+fileWidth.length+8+fileHeight.length+10,indexProjTitle);
			var projTitle=responseText.substring(fileSrc.length+7+fileWidth.length+8+fileHeight.length+10+fileType.length+11,indexPieceTitle);
			var pieceTitle=responseText.substring(fileSrc.length+7+fileWidth.length+8+fileHeight.length+10+fileType.length+11+projTitle.length+12);

			var fileSrcSansType=fileSrc.substring(0,fileSrc.length-fileType.length-1);
			
			if (fileWidth>screenItemDesiredWidth || (fileWidth>screenItemDesiredWidth && fileWidth/screenItemDesiredWidth>fileHeight/screenItemDesiredHeight)){
			//if the width of file is wider than the width of the screen, OR
			//if percentage of the overflow of the width of the file is greater than the percentage of the overflow of the height of the file
				fileHeight=Math.round(fileHeight*(screenItemDesiredWidth/fileWidth)); //calculate the new height before the width is changed.
				fileWidth=screenItemDesiredWidth;
				} else if (fileHeight>screenItemDesiredHeight || (fileHeight>screenItemDesiredHeight && fileHeight/screenItemDesiredHeight>fileWidth/screenItemDesiredWidth)){
				fileWidth=Math.round(fileWidth*(screenItemDesiredHeight/fileHeight)); //calculate the new width before the height is changed.
				fileHeight=screenItemDesiredHeight;
				}

			var screenItemPaddingLeft=Math.floor((screenItemDesiredWidth-fileWidth)/2);
			var screenItemAdjWidth=screenItemDesiredWidth-screenItemPaddingLeft;
			var screenItemPaddingTop=Math.floor((screenItemDesiredHeight-fileHeight)/2);
			var screenItemAdjHeight=screenItemDesiredHeight-screenItemPaddingTop;

			if (fileType=="gif" || fileType=="jpeg" || fileType=="png"){
				portfolioScreenFlash.style.display="none";
				portfolioScreenImg.style.display="block";
				portfolioScreenImg.src=fileSrc;
				
				portfolioScreenImg.style.width=fileWidth+"px";
				portfolioScreenImg.style.height=fileHeight+"px";
				
				portfolioScreenImg.alt=projTitle+" - "+pieceTitle;
				
				} else if (fileType=="swf" || fileType=="swc") {
					
				portfolioScreenImg.style.display="none";
				portfolioScreenFlash.style.display="block";
				
				//Script for Flash objects without play buttons

				//Script for the Flash object
				var portfolioScreenFlashInnerHTML="<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" ";
				portfolioScreenFlashInnerHTML=portfolioScreenFlashInnerHTML+"codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0\" ";
				portfolioScreenFlashInnerHTML=portfolioScreenFlashInnerHTML+"width=\""+fileWidth+"\" ";
				portfolioScreenFlashInnerHTML=portfolioScreenFlashInnerHTML+"height=\""+fileHeight+"\" ";
				portfolioScreenFlashInnerHTML=portfolioScreenFlashInnerHTML+"title=\""+projTitle+"\">\n";
				portfolioScreenFlashInnerHTML=portfolioScreenFlashInnerHTML+"<param name=\"movie\" value=\""+fileSrc+"\" />\n";
				portfolioScreenFlashInnerHTML=portfolioScreenFlashInnerHTML+"<param name=\"quality\" value=\"high\" />\n";
				portfolioScreenFlashInnerHTML=portfolioScreenFlashInnerHTML+"<embed src=\""+fileSrc+"\" ";
				portfolioScreenFlashInnerHTML=portfolioScreenFlashInnerHTML+"quality=\"high\" ";
				portfolioScreenFlashInnerHTML=portfolioScreenFlashInnerHTML+"pluginspage=\"http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash\" ";
				portfolioScreenFlashInnerHTML=portfolioScreenFlashInnerHTML+"type=\"application/x-shockwave-flash\" ";
				portfolioScreenFlashInnerHTML=portfolioScreenFlashInnerHTML+"id=\"portfolioScreenFlashObject\" ";
				portfolioScreenFlashInnerHTML=portfolioScreenFlashInnerHTML+"width=\""+fileWidth+"\" ";
				portfolioScreenFlashInnerHTML=portfolioScreenFlashInnerHTML+"height=\""+fileHeight+"\">";
				portfolioScreenFlashInnerHTML=portfolioScreenFlashInnerHTML+"</embed>\n</object>\n"; //this line is not complete. it's only showing the "noscript" code and not actually using the javascript code.
				
				portfolioScreenFlash.innerHTML=portfolioScreenFlashInnerHTML;

				var portfolioScreenFlashObject=document.getElementById("portfolioScreenFlashObject");
				
				}
				
			screenItem.style.width=screenItemAdjWidth+"px";
			screenItem.style.paddingLeft=screenItemPaddingLeft+"px";
			screenItem.style.height=screenItemAdjHeight+"px";
			screenItem.style.paddingTop=screenItemPaddingTop+"px";
			} //end if/else readystate==4

		} // end readystatechange
	screenHttp.open("GET",uri,true);
	screenHttp.send(null);
	}
	
function changePieces(projId){
	for(var i=0;i<catLi.length;i++){
		catLi[i].style.display="none";
		var cliId=catLi[i].id;
		var cliProjId=cliId.substring(3,projId.length+3);
		if(cliProjId==projId){
			catLi[i].style.display="block";
			}
		}
	}

function changeHeadings(projId,pieceId){
	//change the piece and project headings
	for (var i=0;i<descHeadings.length;i++){
		descHeadings[i].style.display="none";
		var dhId=descHeadings[i].id;
		
		//piece heading
		var dhPieceParentId=dhId.substring(17,projId.length+17);
		if (dhPieceParentId==projId){
			var dhPieceId=dhId.substring(projId.length+17+1,projId.length+17+1+pieceId.length);
			if (dhPieceId==pieceId){
				descHeadings[i].style.display="block";
				}
			}
			
		//project heading
		var dhProjId=dhId.substring(16,projId.length+16);
		if (dhProjId==projId){
			descHeadings[i].style.display="block";
			}
		}
	}

function changeDesc(projId,pieceId){
	//change the piece and project descriptions
	for (var i=0;i<descUl.length;i++){
		descUl[i].style.display="none";
		var duId=descUl[i].id;

		//piece description
		var duPieceParentId=duId.substring(10,projId.length+10);
		if (duPieceParentId==projId){
			var duPieceId=duId.substring(projId.length+10+1,projId.length+10+1+pieceId.length);
			if (duPieceId==pieceId){
				descUl[i].style.display="block";
				}
			}
		//project description
		var duProjId=duId.substring(9,projId.length+9);
		if(duProjId==projId){
			descUl[i].style.display="block";
			}
		}
	}

function changeLocation(projId,pieceId){
	location.hash="?proj="+projId+"&piece="+pieceId;
	}

function changeProjIndex(projId){
	for (var i=0;i<allProjects.length;i++){
		if (allProjects[i]==projId){
			projIndex=i;
			break;
			}
		}
	}

function changePieceIndex(projId,pieceId){
	for (var i=0;i<catLi.length;i++){
		var cliId=catLi[i].id;
		var cliIdLastDash=cliId.lastIndexOf("-");
		var cliIdProj=cliId.substring(3,cliIdLastDash);
		var cliIdPiece=cliId.substr(3+cliIdProj.length+1);
		if (cliIdPiece==pieceId && cliIdProj==projId){
			pieceIndex=i;
			break;
			}
		}
	}

function playPauseFlash(){
	var portfolioScreenFlashObject=document.getElementById("portfolioScreenFlashObject");
	var playPauseAnchor=document.getElementById("playPauseAnchor");
	if (flashPlaying==true){
		portfolioScreenFlashObject.StopPlay();
		playPauseAnchor.innerHTML="Play demo";
		flashPlaying=false;
		} else if (flashPlaying==false){
		portfolioScreenFlashObject.Play();
		playPauseAnchor.innerHTML="Pause demo";
		flashPlaying=true;
		}
	}

// ONLOAD EVENTS
hideShowApply("c_portfolio-hideShow");
hashAnchors();