//Navigation Tabs Helper Scripts

/*
Page Identifier
USAGE:
	identifyPage();
Returns page name (e.g. "some_file.php") as a string

Use with lockPageTab in template to lock each page's tab without having to copy paste code
USAGE:
	window.onload=function(){
					lockPageTab(identifyPage());
	}
*/
function identifyPage(){
	var pgURL = document.URL;
	var pgArray = pgURL.split('/');
	var pgName = pgArray[pgArray.length-1];
	return pgName;
}

//--------------------------------------------------------------------------

/*
Locks a specified tabs from being clickable
Basically changes the innerHTML of the holding element. 
Steps:
1. Change the case (e.g. "index.php") to the page name
2. Change the holding element (e.g. 'home_button')
3. Change the img src or the entire img string to whatever you want it to be changed to
*/

function lockPageTab(pgName){
	if (pgName===undefined){
		pgName = identifyPage();	
	}
	switch(pgName){
		case "OurStory.php":
			document.getElementById('OurStory').innerHTML="<img src='images/OurStory_f3.png' />";
			break;
		case "Film.php":
			document.getElementById('Film').innerHTML="<img src='images/Film_f3.png' />";
			break;
		case "Gallery.php":
			document.getElementById('Gallery').innerHTML="<img src='images/Gallery_f3.png' />";
			break;
		case "Book.php":
			document.getElementById('Book').innerHTML="<img src='images/Book_f3.png' />";
			break;
		case "HorseboyFoundation.php":
			document.getElementById('Horseboy').innerHTML="<img src='images/HorseBoy_f3.png' />";
			break;
		case "Contacts.php":
			document.getElementById('Contacts').innerHTML="<img src='images/Contacts_f3.png' />";
			break;
		case "Links.php":
			document.getElementById('Links').innerHTML="<img src='images/Links_f3.png' />";
			break;
	}
}


//------------------------------------------------------------------------
/*
onmouseover and onmouseout event handlers
Called using 
		onmouseover="mouseOver(this)"
		onmouseout="mouseOut(this)"
specify hover image in img tag as "hoversrc" attribute.
specify mouseout image in img tag as "origsrc" attribute.

USAGE:
<img src="original_image.png" hoversrc="hover_image.png" origsrc="original_image.png" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" />
*/

function mouseOver(elem){
	elem.src = elem.getAttribute("hoversrc");	
}

function mouseOut(elem){
	elem.src = elem.getAttribute("origsrc");	
}