// JavaScript Document
var menuInstances = 0;
var menuSpeed = 30;
var mainNav;
var testNavHeight;
var mainNavheight = 44;


function newSubNav(navItem, i) {
	//get size of this sub nav box and set to origHeight
	this.navCont = document.getElementById(navItem);
	this.origHeight = this.navCont.offsetHeight
	// every sub nav checks to make sure it can fix in the main container, if not we make the container bigger
	mainNav = document.getElementById('mainNav');
	mainNavHeight = mainNav.offsetHeight;
	testNavheight = parseFloat(this.origHeight) + mainNavheight;
	if(parseFloat(mainNavHeight) < testNavheight) {
		mainNav.style.height = testNavheight+"px";
	}
	
	//now we place the sub nav up above to be ready to "drop down"
	this.navCont.style.top="-"+this.origHeight+"px"; 
	
	//next we loop through all A tags and find the once associated with our sub nav (via rel attribute) and apply it to this.navLink
	this.navLinks;
	allLinks = document.getElementsByTagName('A');
	for(l=0; l<allLinks.length; l++) {
		linkRel = allLinks[l].getAttribute("rel");
		if(linkRel == navItem) {
			this.navLink = allLinks[l];
		}
	}
	// now applying mouseover and mouseout events to A tag parent (the LI tag)
	this.navLink.parentNode.onmouseover = function() {setIntervalNav(i, 15);};
	this.navLink.parentNode.onmouseout = function() {setIntervalNav(i, -15);};
}

function setIntervalNav(i, direction) {
	// set unique identifier for the interval of this sub nav
	var uniqueID = "nav"+i;
	var subNav = document.getElementById('nav'+i);
	var checkSetting = (subNav.offsetHeight) * -1;
	// clear all other intervals
	for (h=0; h<=menuInstances; h++) {
		clearInterval(window['changenav'+h]);
	}
	
	if(direction < 0) {
		window['change'+uniqueID] = setInterval(function() {moveNav(mainNavheight, direction, uniqueID) }, menuSpeed);
	} else if (direction > 0 ) {
		for(j=1; j<=menuInstances; j++) {
			subNavTop = getTopPos(document.getElementById('nav'+j));
			if(subNavTop > checkSetting && j != i) {
				window['changenav'+j] = setInterval("moveNav("+mainNavheight+", -"+direction+", 'nav"+j+"')", menuSpeed);	
			}
		}
		window['change'+uniqueID] = setInterval(function() {moveNav(mainNavheight, direction, uniqueID) }, menuSpeed);
	}
}

function moveNav(endTop, direction, uniqueID) {
	var subNav = document.getElementById(uniqueID);
	var origSetting = (subNav.offsetHeight) * -1;
	var curTop = getTopPos(subNav);
	var newTop = curTop + direction;
	if(direction > 0) {
		if(newTop >= mainNavheight) {
			subNav.style.top = mainNavheight+"px";
			clearInterval(window['change'+uniqueID]);
		} else {
			subNav.style.top = newTop+"px";
		}
	}
	if(direction < 0) {
		if(newTop < origSetting) {
			subNav.style.top = origSetting+"px";
			clearInterval(window['change'+uniqueID]);
		} else {
			subNav.style.top = newTop+"px";
		}
	}
}
function clearAll() {
	for (u=1; u<=menuInstances; u++) {
		clearInterval(window['changenav'+u]);
		window['changenav'+u]=setInterval("moveNav("+mainNavheight+", -15, 'nav"+u+"')",menuSpeed);	
	}
}
function getTopPos(el) {
	if(el.currentStyle) {
		var style = el.currentStyle['top'];
	} else if(document.defaultView.getComputedStyle)  {
		var style = document.defaultView.getComputedStyle(el,null).getPropertyValue('top'); 
	}
		return parseFloat(style);
}

function initNav(navItems) {
	for (var i in navItems) {
		//alert('key is: ' + i + ', value is: '+ navItems[i]);
		newSubNav(navItems[i], i);
		menuInstances++;
	}
}