// JavaScript Document
var pathArray = window.location.pathname.split( '/' );
var pageName = pathArray[pathArray.length-1];
var subPageName = pageName.split("_"); <!-- pages in a subsection must have ux_ before their name & be in the root folder-->
var folderName = pathArray[pathArray.length-2];
var carouselTextH1 = new Array('LEGO Universe', 'UX', 'Art', 'Interaction');
var carouselTextH2 = new Array('Senior UI Designer', 'User Experience Designer', 'Cartoonify', 'Indie Game Maker');
var carouselTextP = new Array('Spent over four years guiding LEGO\'s UI Team toward the simplest user experience.', 'Flow, layout, design and the ultimate tool...<b>user testing</b>.', 'Skilled artist with a passion for comic-style art and live model sketching.', '10+ years of Flash experience making games.');
var carouselLinks = new Array('ux.html', 'ux.html', 'art.html', 'interact.html');


 $(document).ready(	function(){
//	setTabButtonState(false, "blog", true);
	setTabButtonState(false, "art", true);
	setTabButtonState(false, "ux", true);
	setTabButtonState(false, "interact", true);
	setTabButtonState(false, "about", true);
//	setTabButtonState(false, "lead", true);
});
 
// setTabButtonState - for the header navigation, keeps active page highlighted & highlights/turns off other tabs when necessary (usually from mouse events)
//		bOn - if mouse is over the tab
//		imgName - the img name and the filename within headerNav_ !! TODO - change this so it's not just headerNav buttons that can use this code.
// 		bInit - true when we're initializing the page & need to set the current page to ON.
function setTabButtonState(bOn, imgName, bInit) {
	<!-- if we're on this page      or   we're on a subpage of ux -->
	if(pageName==(imgName+".html") || (imgName=="ux" && (subPageName[0]=="ux")) ) {
		if(bInit) {
			document[imgName].src = "_images/buttons/headerNav_"+imgName+"_highlight.gif";
			}
		return;
	}
		
   if (document.images)	{
		if(bOn)
			document[imgName].src= "_images/buttons/headerNav_"+imgName+"_highlight.gif";
		else 
			document[imgName].src= "_images/buttons/headerNav_"+imgName+".gif";
	}
 }


// setCarouselImage - cycles through a series of images with text. Sets the proper radio button. !Todo - refactor so radio button can be dynamically named.
//		frame - 0 - n-1, where n is the number of images we're cycling through
//		bAutoCycle - true if you want the images to auto cycle. Usually this is set to false when mouse click interrupts 
function setCarouselFrame(frame, bAutoCycle) {
	//stop auto cycling
	if(bAutoCycle)
		autoCycleTimer = setTimeout(function(){setCarouselFrame('right', true)}, 3000);
	else 
		clearTimeout(autoCycleTimer);

	var oldSelectedRadioIndex = currSelectedRadioIndex;
	
	if(frame=='left')
		currSelectedRadioIndex = Math.abs((currSelectedRadioIndex-1)%4);
	else if(frame=='right')
		currSelectedRadioIndex = (currSelectedRadioIndex+1)%4;
	else // use frame as a number
		currSelectedRadioIndex = frame;
	// Set image to currSelectedRadioIndex
	if (document.images){
		document["carouselImg"].src = "_images/homeCarousel/"+currSelectedRadioIndex+".png";
		//$('#contents ul.people li');
		$('#ImageLink').attr('href', carouselLinks[currSelectedRadioIndex]);
		$('#SpeechBubbleWideToLeft #homeCarouselH1').html(carouselTextH1[currSelectedRadioIndex]);
		$('#SpeechBubbleWideToLeft #homeCarouselH2').html(carouselTextH2[currSelectedRadioIndex]);
		$('#SpeechBubbleWideToLeft #homeCarouselP').html(carouselTextP[currSelectedRadioIndex]);
		//light up proper button
		setRadioButtonState(false, currSelectedRadioIndex, "radioButton", "png");
		//turn off currently lit button
		setRadioButtonState(false, oldSelectedRadioIndex, "radioButton", "png");
	}
}

// setButtonState
//		bOn - whether or not the mouse is over the button
//		imgName - must match what img name is. And if imgNameExtended is not defined, this will be used to create the filename
// 		fileType - png, gif, bmp - No period needed
//		imgNameExtended - optional parameter. Use this if the filename is different than the imgName (ie the radioButtons)
function setButtonState(bOn, imgName, fileType, imgNameExtended) {
if(!imgNameExtended)
	imgNameExtended = imgName;
if (document.images)	{
	if(bOn)
		document[imgName].src= "_images/buttons/"+imgNameExtended+"_highlight."+fileType;
	else 
		document[imgName].src= "_images/buttons/"+imgNameExtended+"."+fileType;
	} 
}

// setRadioButtonState - initialize & change the state of a radio button. This will NOT change the state of any other radio button. Please deactivate old button.
//		bOn - whether or not the mouse is over the button
//		index - 0 to n-1, where n is the number of radio buttons in the series
//		imgName - the prefix of the img name, without the number
//		fileType - png, gif, bmp - no period needed
function setRadioButtonState(bOn, index, imgName, fileType)
{
//if button is on, show on's highlight
if(currSelectedRadioIndex==index)
	setButtonState(bOn, imgName+""+index, fileType, imgName+"_on");
// else if button is off, show off's highlight
else setButtonState(bOn, imgName+""+index, fileType, imgName+"_off");
}

// initializeHeader - called to setup the logo & header buttons
function initializeHeader() {
	// To change superScripts.js initHeader function, edit code in _js/headerCode with normal formatting.html, then
  	//  find & replace all " with \"
  	//  find & replace all line breaks (copy one from here) with nothing
  	// paste into the document.write of initHeader()
	 document.write("<div id=\"Header\">			<div id=\"HeaderLogo\">    	<a href=\"index.html\"><img src=\"_images/HeaderLogo.gif\" alt=\"SuperCami\"/></a>    </div>    <div id=\"HeaderNav\">    	<div id=\"HeaderNavTop\">        	<ul>            	<li><a href=\"mailto:cami@supercami.com\"><img src=\"_images/buttons/contactNav_Mail.gif\" alt=\"Email\" /></a></li>                <li><a href=\"_files/CamiDodsonResume.doc\" target=\"_blank\"><img src=\"_images/buttons/contactNav_Word.gif\" alt=\"Resume Doc\" /></a></li>                <li><a href=\"_files/CamiDodsonResume.pdf\" target=\"_blank\"><img src=\"_images/buttons/contactNav_PDF.gif\" alt=\"Resume PDF\" /></a></li>                <li><a href=\"http://www.linkedin.com/in/camidodson\" target=\"_blank\"><img src=\"_images/buttons/contactNav_LinkedIn.gif\" alt=\"LinkedIn\" /></a></li>            </ul>        </div>        <div id=\"HeaderNavBottom\">        	<ul>				<li><a href=\"ux.html\"><img src=\"_images/buttons/headerNav_ux.gif\" name=\"ux\" onMouseover=\"setTabButtonState(true, 'ux')\" onMouseout=\"setTabButtonState(false, 'ux')\" alt=\"User Experience\"/></a></li>				<li><a href=\"art.html\"><img src=\"_images/buttons/headerNav_art.gif\" name=\"art\" onMouseover=\"setTabButtonState(true, 'art')\" onMouseout=\"setTabButtonState(false, 'art')\" alt=\"Art\"/></a></li>				<li><a href=\"interact.html\"><img src=\"_images/buttons/headerNav_interact.gif\" name=\"interact\" onMouseover=\"setTabButtonState(true, 'interact')\" onMouseout=\"setTabButtonState(false, 'interact')\" alt=\"Interact\"/></a></li>				<li><a href=\"about.html\"><img src=\"_images/buttons/headerNav_about.gif\" name=\"about\" onMouseover=\"setTabButtonState(true, 'about')\" onMouseout=\"setTabButtonState(false, 'about')\" alt=\"About\"/></a></li>            </ul>        </div>    </div></div>");
 }