/*

Author: Me
Application: Javascript Extension
Website: BYStudios.com

*/
/*global variables */
//our global variable for tracking our yTarget
var yTarget = 0;
var lastYOffset = 1000; //as long as it's not equal to the first id' on the page we're fine
var yOffSet = 0; //the height of our header, change to grab dynamically instead of hard-coded
var windowHeight = 400; //hardcoded for now

function resetPageScroll() {
	window.scrollTo(0, 0);
}


function prepareSubNav() {
	if (!document.getElementsByTagName) return false;
	if (!document.getElementById) return false;
	
	//now that we know the browser is up-to-date with the script, check to see if the page's structure hasn't changed
	if (!document.getElementById("subNav")) return false;
	
	//now grab a reference to imagegallery so we can loop through all '<a>nchor elements' and attach an event handler to them
	var subNav = document.getElementById("subNav");
	var links = subNav.getElementsByTagName("a");
	
	for (var i=0; i < links.length; i++) {
		links[i].onclick = function () {
			//reset all links to default color, hardcoded for now
			resetSubNavTextColor();
			//set this selected link to our hover color
			this.style.color = "#008fea"; //hardcoded in, default selected color
			this.setAttribute("onMouseOut", ""); //remove attribute or it'll reset the color
			return calculateYCoord(this.getAttribute("title"));
		}
	}
	
	//now that we know how many works we need to display, we'll set our view window to the appropriate height, so the scroll bar 
	//will scroll the last project to the top of the screen
	var viewOffset = 1; //since we're not starting our count at '1' from the titles, we need to add this number back to the amount of windows
								//we have. it should be '1' but we want the last project to come to the top, so we add one more, for spacing underneath
	var viewOffsetGap = 50; //the margin underneath the last project is not being used, so we need to add the difference from the header, which is 30 for now
	var newViewWindowHeight = links.length + viewOffset;  
	
	newViewWindowHeight *= windowHeight; //if 10 projects, 10 * windowHeight (if we use 400px as example) = 4000px, our new height
	newViewWindowHeight += viewOffsetGap; 
	var view = document.getElementById("viewWindow");
	view.style.height = newViewWindowHeight +"px";
	
}

/*changeSubNavTextColor
accepts an arguement that represents the id of the subnav links, which the id
is stored in the 'title' attribute
*/
function changeSubNavTextColor(id) {
	if (!document.getElementsByTagName) return false;
	if (!document.getElementById) return false;
	
	//now that we know the browser is up-to-date with the script, check to see if the page's structure hasn't changed
	if (!document.getElementById("subNav")) return false;
	
	//now grab a reference to imagegallery so we can loop through all '<a>nchor elements' and attach an event handler to them
	var subNav = document.getElementById("subNav");
	var links = subNav.getElementsByTagName("a");

	//reset the subnav
	resetSubNavTextColor();	
	
	for (var i=0; i < links.length; i++) {
		var title = links[i].getAttribute("title");
		if (title == id) {
			links[i].style.color = "#008fea";
			links[i].setAttribute("onMouseOut", ""); //remove attribute or it'll reset the color
		}
		
	}
}


/*resetSubNavTextColor
resets all the subnav links to their default font color
*/
function resetSubNavTextColor() {
	if (!document.getElementsByTagName) return false;
	if (!document.getElementById) return false;
	
	//now that we know the browser is up-to-date with the script, check to see if the page's structure hasn't changed
	if (!document.getElementById("subNav")) return false;
	
	//now grab a reference to imagegallery so we can loop through all '<a>nchor elements' and attach an event handler to them
	var subNav = document.getElementById("subNav");
	var links = subNav.getElementsByTagName("a");
	
	for (var i=0; i< links.length; i++) {
		links[i].style.color = "#afafaf";
		links[i].setAttribute("onMouseOver", "this.style.color='#008fea'");
		links[i].setAttribute("onMouseOut", "this.style.color='#afafaf'");
	}
}

function calculateYCoord (yMultiplier) {
	//yMultiplier is the value of the clicked link's 'title' attribute,
	//used to calculate how far to scroll our window, which is the height
	//of our 'window' element multiplied by our yMultiplier plus the height
	//of our header element
	
	//these next two variables are now global variables, left here just incase i decide to put them back
	//var yOffSet = 80; //the height of our header, change to grab dynamically instead of hard-coded
	//var windowHeight = 400; //hardcoded for now
	
	var viewOffsetGap = 77; //the margin underneath the last project is not being used, so we need to add the difference from the header, which is 30 for now
	yMultiplier = parseInt(yMultiplier); //turn the string into an integer
	yTarget = (yMultiplier * windowHeight) + yOffSet + (yMultiplier); //why subtract yMultiplier? cause each window keeps getting pressed down by 
																								//the amount the same as the title. weird? very, but it works
	
	//alert(yTarget);
	scrollPageTo();
	//alert("yTarget: "+yTarget);
	return false;
}


function scrollPageTo() {
	//scroll's the page to the desired Y-Coordinate, yTarget
	//later we'll add an inertia formula for smooth transistion
	window.scrollTo(0, yTarget);
	
	//now call checkPageHeight to highlight the link we just scrolled our page to
	checkPageHeight();
	return true;
}
	

function checkPageHeight() {
	var headerOffset = 80; //the size of our header
	var pageYOffset = document.body.scrollTop;
	
	if (pageYOffset == 0) {
		if (window.pageYOffset) {
			pageYOffset = window.pageYOffset;
		}
		else {
			pageYOffset = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
		}
	}
	
	//now we calculate where on the page we are, and after finding out
	//which section we're browsing, we'll highlight the subnav text that
	//matches what's on our screen
	var newPageYOffset = parseInt((pageYOffset + headerOffset) / 400);
	//alert("new page: "+newPageYOffset);
	
	if (newPageYOffset != lastYOffset) {
		changeSubNavTextColor(newPageYOffset);
	}
	
	//restart timer, set pageoffset to global variable for checking
	lastYOffset = newPageYOffset;
	setTimeout("checkPageHeight()", 500);
}

/************************************************************************************/
//now we're going to make a que of functions for the page to initialize when it loads
function addLoadEvent(func) {
	var oldOnLoad = window.onload;
	if (typeof window.onload != "function") {
		window.onload = func;
	}
	else {
		window.onload = function () {
			oldOnLoad();
			func();
		}
	}
}

//now we can just add events, technically could also just use an array of functions as an observer/listener type pattern to do same thing
addLoadEvent(resetPageScroll); //resets page height back to 0
addLoadEvent(prepareSubNav);
addLoadEvent(checkPageHeight);