//*****************************************************************************************************
// BEGIN INSTRUCTIONS *********************************************************************************
//*****************************************************************************************************
/*
	You'll need :
		* Menu image (menuImg.jpg)
		* Menu image hover version (menuImgOn.jpg)
		* SubNav images for all sections (sec01.jpg, sec02.jpg, sec03.jpg)
		* SubNav hover version images for all section (sec01On.jpg, sec02On.jpg, sec03On.jpg)
		* A name for this section (NAME)
		* A page or pages to link to (page.php, page.php#sec01, page.php#sec02, page.php#sec03)

	* Open 'includes/header.php'
	* Inside '#MainMenu' create link with id=NAME, and optional href
		<a href="page.php" id="NAME" ><img src="images/menu/imgName.jpg" /></a>
	* Inside '#navBottom' add a div with name="NAME". Make sure you add it after the fist div.
		<div name="NAME">
		</div>
	* Inside of that div, add your SubNav Links
		<div name="NAME">
			<a href="page.php#sec01"><img src="images/subNav/sec01.jpg" /></a>
			<a href="page.php#sec02"><img src="images/subNav/sec02.jpg" /></a>
			<a href="page.php#sec03"><img src="images/subNav/sec03.jpg" /></a>
		</div>
	* TaDa! It's that easy. The following functions will take care of positioning and animating your SubNav, and handle all hover behavior. Just make sure everything in in its proper place.
	
	**NOTEs**
	
	**The name of the hover version for all images should have the same name, with 'On' tacked to the end. So 'image.jpg' becomes 'imageOn.jpg'. 
	**Make sure the normal and hover version of the  images are in the same folder. If you do this, all hovering behavior will be handled automagically in the menus!
	**If you want to add a menu item without a subNav, just omit the id.
*/ 
	
//*****************************************************************************************************
// End INSTRUCTIONS ***********************************************************************************
//*****************************************************************************************************

var currentSubNav = "default";                      //Default Current SubNav menu name
$(document).ready(function(){						//BEGIN FUNCTION
	
	//*****************************************************************************************************
	// BEGIN SUBNAV FUNCTIONS******************************************************************************
	//*****************************************************************************************************
	
	$('#navBottom div:eq(0)').css({"z-index": "50"});		//Place first div on top
	//All other divs: Move up, KEEP VISIBLE, make opacity 0, position below everything
	$('#navBottom div:gt(0)').css({"margin-top":"-56px", "visibility":"visible", "opacity":"0", "z-index": "0"});
	
	$('#mainMenu a').mouseenter(function() {				//SubNav animation
	
		var newName = $(this).attr("id") || 'default';			//Store id of link. If none, store 'default'
		
		if(newName == currentSubNav){							//If new and old subNav are the same
			return;													//Do Nothing
		}else{													//Otherwise
			
			//Just fade in for IE, cause IE blows
			if($.browser.msie){
				$("div[name=" + currentSubNav + "]").stop().animate({"opacity": "0"}, "slow");
				$("div[name=" + newName + "]").animate({"opacity": "100"}, 10000);
				$("div[name=" + newName + "]").css({"z-index": "50"});					//move new subNav to top
				$("div[name=" + currentSubNav + "]").css({"z-index": "0"});				//move old subNav to bottom
			}else{
				//Move and fade current subNav
				$("div[name=" + currentSubNav + "]").stop().animate({"left": "+=600px", "opacity": "0"}, "slow");	
				$("div[name=" + newName + "]").animate({"opacity": "100"}, 10000);		//Fade in new subNav
				$("div[name=" + newName + "]").css({"z-index": "50"});					//move new subNav to top
				$("div[name=" + currentSubNav + "]").css({"z-index": "0"});				//move old subNav to bottom
				//Reset position and hide old subNav
				$("div[name=" + currentSubNav + "]").animate({"left": "-=600px", "opacity": "0"}, 0);	
			}
			currentSubNav = newName;												//Store new subNav name
			
		}
	});
	
	//*****************************************************************************************************
	// END SUBNAV FUNCTIONS *******************************************************************************
	//*****************************************************************************************************
	
	//*****************************************************************************************************
	// BEGIN MENU HOVER FUNCTIONS *************************************************************************
	//*****************************************************************************************************
	
	$('#mainMenu a img, #navBottom a img').each(function(){
		var imgSrc = $(this).attr("src");										//Get the image source
		var imgSrcOn = imgSrc.split('.')[0] + "On." + imgSrc.split('.')[1];		//Append 'On' to the image name and store it
		$(this).bind("mouseenter", function(){									//On Mouseenter
			$(this).attr("src", imgSrcOn);											//Activate 'On' version
		}).bind("mouseleave", function(){										//On Mouseleave
			$(this).attr("src", imgSrc);											//Restore 'Off' version
		});
	});
		
	//****************************************************************************************************
	// END MENU HOVER FUNCTIONS **************************************************************************
	//****************************************************************************************************
	
});

//****************************************************************************************************
// IMAGE SWAP FUNCTIONS ******************************************************************************
//****************************************************************************************************

/* INSTRUCTIONS
	* Give the main image a unique image unique id. (NAME)
	* Name thumbs the same as main images, with 't' at the end (or any one extra letter will work, really)
		** Main = "image01.jpg"        ** Thumb = "image01t.jpg"
	* Add the following to your thumbs
		**  onMouseOver="hoverSwap(this, 'NAME')"
*/

function hoverSwap(thumb, main){
	imgSrc = $(thumb).attr('src').split('.')[0].slice(0, -1) + '.' + $(thumb).attr('src').split('.')[1];	//Parce Image Name
	$('#'+ main).attr("src", imgSrc);								//Swap out main Image
}

//****************************************************************************************************
// IMAGE SWAP FUNCTIONS ******************************************************************************
//****************************************************************************************************