/* Digital Jaffro Feb 2009
 * 
 * Navigation Control Scripts for Digital Jaffro homepage.
 * 
 * 
 */


var isViewContent = false; //Asking if the page is in content view or not.
var curContentPgIcon; // Global for the current content page in view - default is none, eg no content loaded.





$(document).ready(function(){
	var imagesToPreload = new Array("images/navigation/button_email_hover.png","images/navigation/button_3D_hover.png","images/navigation/button_cv_hover.png","images/navigation/button_web_hover.png","images/navigation/button_profile_hover.png");
	preLoadImgFrmArray(imagesToPreload);
	
	$(".button").hover(function(){
			mOverAction(this);
		},function(){
			if ($(this).attr("id") != $(curContentPgIcon).attr("id")) {
				mOutAction(this);
			}
		});
	
	$(".button").click(function(){
			if (!isViewContent) {
				navAnimateFromSplash(this);
			} else {
				if($(this).attr("id") != $(curContentPgIcon).attr("id")){
					swapContentIconWithButton(this);
				}
			}
		});
});

/*
 * Navigation Functions
 */

function navAnimateFromSplash(eventingButton){
	/*
	 * What happens when a button is pressed from the Splash page
	 */
	var speed = 700;
	var buttonId = new Array("#button_3D","#button_cv","#button_web","#button_profile","#button_email");
	/*
	 * The first element in the buttonId array is the 'clicked' element, buttonId[0] will goto the top of the content page.
	 */
	
	$(".buttonTxt").fadeTo(300,0.0,function(){//fade out the texts
		positionHeadings();//align the headings into heading position.
		$(".buttonTxt").fadeTo(200,0.1);
	});
	
	
	/*
	 * The default first element may not always be the element that is clicked on.
	 * This solution checkes if another element has been clicked on and uses the putEventingButtonFirst function to move the element ID to the front of the array (index 0)
	 */
	if ( $(buttonId[0]).attr("id") != $(eventingButton).attr("id") ){
		buttonId = putEventingButtonFirst(eventingButton,buttonId);
	}
	
	/*
	 * Animate the logos into their header position.
	 */
	$("#logo_group").animate({left:"113px",top:"5px"},speed);
	$("#logo_jaffro").animate({left:"400px",top:"95px"},speed);
	
	//Set the current content page global variable.
	curContentPgIcon = buttonId[0];
	
	// Animate the buttons.
	$(buttonId[0]).animate({height: "143px",width: "144px",left:"340px",top:"80px"},speed)// Remember this one buttonId[0] goes to the top of the page.
				.css({cursor:"auto"});
	$(buttonId[1]).animate({height: "113px",width: "114px",left:"0px",top:"260px"},speed);
	$(buttonId[2]).animate({height: "113px",width: "114px",left:"0px",top:"460px"},speed);
	$(buttonId[3]).animate({height: "113px",width: "114px",left:"680px",top:"260px"},speed);
	$(buttonId[4]).animate({height: "113px",width: "114px",left:"680px",top:"460px"},speed,function(){
		
		//Add the content and fade in the content box. - happens after the button animations.
		$("#contentController").fadeTo(500,0.0,function(){getXMLPage("content.xml", getBasicPageID());});
		$("#contentController").fadeTo(speed+500,1.0);
		
		
	});

	isViewContent = true;// Set the global isViewContent variable to true - indicating globally that the view is in content mode.
}
function putEventingButtonFirst(eventingButton,buttonIdArray){
	/*
	 * re-arrange the Ids in arg'buttonIdArray', so that the id from arg'eventingButton' is listed first..
	 * while still preserving the order of the other Id's. 
	 */
	var evntBtonID = $(eventingButton).attr("id");//put the Id of the eventingButton into a string
	var lstIndex = buttonIdArray.push("")-1;//Gives the useful array length - adds on a blank index to the end to handle errors that may occur from the event id matching with the last index
	
	for( var i=1; i < lstIndex; i++ ) { // test everything from the 'second' index, we dont need to test the first because thats the default and is tested previously - to make things quicker under default conditions.
		
		if ( "#"+evntBtonID == buttonIdArray[i] ){ // is the eventing button ID matching with current element in array 
			
			var scndHalf = buttonIdArray.slice(i,lstIndex); // split the array
			var fstHalf = buttonIdArray.slice(0,i); // get the first half
			
			fstHalf.unshift(scndHalf.shift()); // add the first element of the second half to the start of the first half.
			return fstHalf.concat(scndHalf); // return the concatination of the first and second half 
		}
	}
	return buttonIdArray; // if it doesn't find a match then just return the array as it came in - just in case, should never happen in theory.
	
}
function swapContentIconWithButton(eventingButton){
	/*
	 *  When the page is in content mode.. this controls the button clicking animation and functions.
	 */
	eventingButtonPos = $(eventingButton).position();// get the positions (top, left) of the clicked button
	
	$(eventingButton).animate({left:"340px",top:"80px",width:"144px",height:"143px"},900,function(){mOverAction(this)}) // Animate straight to the center top of page.
					.css({cursor:"auto"});
	
	$(curContentPgIcon).animate({left:(eventingButtonPos.left+"px"),width:"84px",height:"83px"},400,function(){mOutAction(this)})// animate to middle of page and reset the mOver action..
					.animate({top:(eventingButtonPos.top+"px"),width:($(eventingButton).width()+"px"),height:($(eventingButton).height()+"px")},500) // move to the position and scale of the clicked button.
					.css({cursor:"pointer"});
	
	curContentPgIcon = eventingButton; // set the global content page to match the update.
	
	$(".buttonTxt").fadeTo(400,0.1);
	$("#contentController").fadeTo(500,0.0,function(){
			getXMLPage("content.xml", getBasicPageID());
		});
	$("#contentController").fadeTo(800,1.0,function(){
			
		});
	
}
function positionHeadings(){
	$("#button_txt_email")		.css({top:"233px",left:"375px"});
	$("#button_txt_3D")			.css({top:"233px",left:"280px"});
	$("#button_txt_computer")	.css({top:"233px",left:"323px"});
	$("#button_txt_graphics")	.css({top:"231px",left:"445px"});
	$("#button_txt_cv")			.css({top:"233px",left:"395px"});
	$("#button_txt_web")		.css({top:"233px",left:"320px"});
	$("#button_txt_development").css({top:"233px",left:"380px"});
	$("#button_txt_aboutMe")	.css({top:"233px",left:"360px"});
}
function buttonTxtSwitch(pageID){
	
	switch(pageID){
	case "3D":
		$("#button_txt_3D").fadeTo(400,0.95);
		$("#button_txt_computer").fadeTo(400,0.95);
		$("#button_txt_graphics").fadeTo(400,0.95);
		break;
	case "cv":
		$("#button_txt_cv").fadeTo(400,0.95);
		break;
	case "web":
		$("#button_txt_web").fadeTo(400,0.95);
		$("#button_txt_development").fadeTo(400,0.95);
		break;
	case "profile":
		$("#button_txt_aboutMe").fadeTo(400,0.95);
		break;
	case "email":
		$("#button_txt_email").fadeTo(400,0.95);
		break;
	}
	
}

/*
 * Page Change Function (ajax)
 */
function getXMLPage(file,pageID){
	/*
	 * Func to get the specified page out of the file and put into blocks for the content.
	 */
	
	$("#contentController").empty();

	var x = 0;
	$.get(file, {}, function(data){
		$(data).find("page").filter(function(){return $(this).attr("id") == pageID}).each(function(){
			$(this).find("block").each(function(){
				/*
				 * Create a Block and put it into the content.
				 */
				if($(this).attr("topic") != "fullImage"){// If the block isnt a full image block.
					var imgPrint = $("img",this).attr("thumbSrc");
					var print = $(this).text();
					
					/*
					 * Getting text and title.
					 */
					if(print.length<330){
						print = "<div style=\"position: relative; border: none; min-height:121px; overflow: visible;\">\n<p class=\"blockText\">\n<em>"+$(this).attr("topic")+"</em><br/>"+print+"\n</p>\n</div>";
					} else {
						print = "<p class=\"blockText\"><em>"+$(this).attr("topic")+"</em><br/>"+print+"</p>";
					}
					
					/*
					 * Getting images
					 */
					var float = (x%2 == 0)?"floatLeft":"floatRight";
					if(imgPrint != ""){
						imgPrint = "<div class=\"cycle "+float+"\">";
						$(this).find("img").each(function(){
							imgPrint += "\n<img class=\"blockImg "+float+"\" src=\""+$(this).attr("thumbSrc")+"\" />"; 
						});
						imgPrint += "</div>";
					} 
					x++;
					
					/*
					 * Getting file
					 */
					var addfile = false;
					var fileStream = "<span class=\"fileBlock\">File: &nbsp;";
					$(this).find("file").each(function(){
						addfile = true;
						fileStream += "<a href=\""+$(this).attr("src")+"\">"+$(this).attr("title")+"</a>";
					})
					fileStream += "</span>";
					if(!addfile){
						fileStream = "";
					}
					
					/*
					 * Adding block to content.
					 */
					$("#contentController").append(
							"<div class=\"block\">"+
							imgPrint+
							print+
							fileStream+
							"</div>"
					);/**/
				} else {
					/*
					 * If the block is a full image block then add it to the start of the content. Not sure why the start, thus subject to change!
					 */
					$("#contentController").prepend(
							"<div class=\"imgblock\">"+
							"<img src=\""+$("img",this).attr("thumbSrc")+"\" />"+
							"</div>"
					);/**/
				}
			});
			
			var now = new Date();
			var year = now.getYear();
			if(year < 2000) { year = year + 1900; }
			
			$("#contentController").append("<div class=\"block copyright\"><span style=\"position:relative;float: right; color: #888888;\">M. J. A. Taylor</span> &copy;Copyright 2004-"+year+"</div>");
		});
		$(".cycle").cycle('fade');
		buttonTxtSwitch(getBasicPageID());
	},"xml");
	
	
}

/*
 * Image Hover Functions
 */
function mOverAction(imgEle){
	/*
	 * These only work if the ID's of the img elements are the same as the filename of the base image.
	 */
	var newSrc = "images/navigation/"+$(imgEle).attr("id")+"_hover.png";
	$(imgEle).not(".ignore").attr({ src: newSrc }); // Add highlight to image the mouse is over.
}
function mOutAction(imgEle){
	/*
	 * These only work if the ID's of the img elements are the same as the filename of the base image.
	 */
	var oldSrc = "images/navigation/"+$(imgEle).attr("id")+".png";
	$(imgEle).not(".ignore").attr({ src: oldSrc }); // Remove highlight to image the mouse is over.
}


/*
 * General Utilities
 */
function getBasicPageID(baseID){
	if(!baseID){
		baseID = $(curContentPgIcon).attr("id");
	}
	return baseID.slice((baseID.search("_")+1),(baseID.length));
}