// Code and comments written by Jayson Ward - November 2006
// Updated June 2009

// This javascript file is only used by the Planning Department home page
// Some of these functions are used in other pages, but they use the page_setup.js file.

var isIE = false;
var isIE8 = false;
var isNotIE = false;
var isFox = false;
var isChrome = false;
var isSafari = false;
var source = "";
var ieClass = "";

getBrowser();

(isNotIE) ? window.addEventListener( "load", init, false ) : window.attachEvent( "onload", init );

function init()
{
	//IE8 specific
	(isIE8) ? ieClass = "class" : ieClass = "className";

	setupNavigation();
	addSidebarPhoto();
	//setUpRightColumn();
	setupWhatsNewSection();
}

function setupWhatsNewSection()
{
	var dropDownH3 = document.getElementById('dropDowns').getElementsByTagName('h3');

		for(i=0;i<dropDownH3.length;i++)
		{
			if( isNotIE ) // Firefox,Chrome,Safari
			{
				if(dropDownH3[i].getAttribute("class") == "dropDownH3")
				{
					dropDownH3[i].addEventListener('mousedown', showHiddenContent, false);
					dropDownH3[i].style.cursor = 'pointer';
				}
			}
			else
			{
				if(dropDownH3[i].getAttribute(ieClass) == "dropDownH3")
				{
					dropDownH3[i].attachEvent('onmousedown', showHiddenContent);					
					dropDownH3[i].style.cursor = 'pointer';
				}
			}
			
			//(isNotIE) ? dropDownH3[i].addEventListener('mousedown', showHiddenContent, false) : dropDownH3[i].attachEvent('onmousedown', showHiddenContent);	
			//dropDownH3[i].style.cursor = 'pointer';
		}
}
function showHiddenContent(e)
{
	e = e || window.event;
	
	(isNotIE) ? source = this.getAttribute('id') : source = e.srcElement.getAttribute('id');
	
	var sourceHiddenContent = source + "_HC";
	var sourcePlus = source + "_plus";
	document.getElementById(source).style.backgroundColor = "#e6e5cc";
	document.getElementById(source).style.backgroundImage = "url(../images/minus_dark.gif)";
	document.getElementById(sourceHiddenContent).style.display = 'block';
	//document.getElementById(sourcePlus).innerHTML = '-';
	
	(isNotIE) ? document.getElementById(source).removeEventListener('mousedown', showHiddenContent, false) : document.getElementById(source).detachEvent('onmousedown', showHiddenContent);
	(isNotIE) ? document.getElementById(source).addEventListener('mousedown', hideHiddenContent, false) : document.getElementById(source).attachEvent('onmousedown', hideHiddenContent);
}

function hideHiddenContent(e)
{
	e = e || window.event;
	
	(isNotIE) ? source = this.getAttribute('id') : source = e.srcElement.getAttribute('id');
	
	
	var sourceHiddenContent = source + "_HC";
	var sourcePlus = source + "_plus";
	document.getElementById(sourceHiddenContent).style.display = 'none';
	document.getElementById(source).style.backgroundImage = "url(../images/plus_dark.gif)";
	document.getElementById(source).style.backgroundColor = '';
	//document.getElementById(sourcePlus).innerHTML = '+';

	(isNotIE) ? document.getElementById(source).removeEventListener('mousedown', hideDropDown, false) : document.getElementById(source).detachEvent('onmousedown', hideHiddenContent);
	(isNotIE) ? document.getElementById(source).addEventListener('mousedown', showHiddenContent, false) : document.getElementById(source).attachEvent('onmousedown', showHiddenContent);
	
}
function setUpRightColumn()
{
	/*
		This function is for the Planning Home page only.  It finds the height of the columnOne div,
		which is on the left hand side of the page, and sets the height of the right hand column to match.
		
		The left hand div is typically shorter than the right hand div, so the page
		typically requires a lot of scrolling to see all of the right hand column.
		
		This function checks the offsetHeight of both columns; if the right column is longer
		then overflow is set to scroll and the height is set to the height of the left hand
		column.
	*/
	
	var leftColumn = document.getElementById('columnOne');
	var rightColumn = document.getElementById('columnTwo');
	
	var leftColumnHeight = leftColumn.offsetHeight;
	var rightColumnHeight = rightColumn.offsetHeight;
	
	if (rightColumnHeight > leftColumnHeight)
	{
		rightColumn.style.overflow = 'scroll';
		rightColumn.style.height = leftColumnHeight + 'px';
	}
	else
	{
		rightColumn.style.height = leftColumnHeight + 'px';
	}
}

function setUpRightColumn2()
{
	var leftColumn = document.getElementById('columnTwo');
	leftColumn.style.height = window.innerHeight - document.getElementById('header').offsetHeight + "px";
	
}

function setupNavigation()
{
	/*
		This function loops through the H1 tags within the mainNavMenu div and assigns
		events to them.  One event highlites the h1 and the other turns the background
		back to the original color.  Then a mouseover event is added to display the drop 
		down menu associated with the H1 tag. A hideDropDown function is added to the 
		H1 and to the Drop Down menu itself.  
	*/	
	
	var navigationH1 = document.getElementById('mainNavMenu').getElementsByTagName('h1'); //Returns an array of elements with h1 tag
	var dropDownUL = document.getElementById('mainNavMenu').getElementsByTagName('ul'); //Returns an array of elements with ul tag
	
	for (i=0;i<navigationH1.length;i++) // Loop
	{
		if(window.innerHeight) //Firefox
		{
			navigationH1[i].addEventListener('mouseover', highLiteMe, false);
			navigationH1[i].addEventListener('mouseout', unHighLiteMe, false);
			navigationH1[i].addEventListener('mouseover', showDropDown, false);
			navigationH1[i].addEventListener('mouseout', hideDropDown2, false);
			dropDownUL[i].addEventListener('mouseout', hideDropDown, false);
			
			dropDownUL[i].style.visibility = 'hidden';
		}	
		else //IE
		{
			navigationH1[i].attachEvent('onmouseover', highLiteMe);
			navigationH1[i].attachEvent('onmouseout', unHighLiteMe);
			navigationH1[i].attachEvent('onmouseover', showDropDown);
			navigationH1[i].attachEvent('onmouseleave', hideDropDown2);
			dropDownUL[i].attachEvent('onmouseleave', hideDropDown);
		}
	}
}

function showDropDown(e)
{
	/*
		This function is fired with the mouse over event on the H1 element associated with each
		drop down.  With all event functions, create a variable e and then set the variable e
		to the passed e (event), or for IE you must set it to window.event because IE doesn't pass an
		event when a mouse event is fired, instead IE saves the event in a variable called window.event.
		
		FOR IE:  Use e.srcElement.getAttribute to get the id value for the H1 element that fired the
		event.  Then to dynamically place the hidden <ul> drop down, find the offsetLeft of 
		the element that fired the event (in this situation, in other situations you may need to find 
		the offsetLeft of the mainDiv, or whichever div is the main content container for the page or navigation
		and add that amount to the offsetLeft for the event element).
		
		The offsetLeft of the firing element will be the left x position for the dropdown menu.  In the
		case of this website, the H1 tags only have a right side border, therefore to make the left-hand
		border of the drop down menu meet up with the right-hand border of the h1 element to the left, you 
		need to subtract 1 from the menuLeft variable.  This will make the borders look flush.
		
		Finally, set a variable that will hold the id plus "menu" which correlates
		to the id for the drop down (i.e. firing element's id = "menu1", drop downs id = "menu1menu").
		Set the visibility, top and left styles for the drop down.
		
		FOR FIREFOX:
		
		Use e.target or this (e.g. this.getAttribute) instead of e.srcElement, and do the same as above.
	*/
	
	var e
	e = e || window.event;
	e.cancelBubble = true;
	
	if (window.event) // IE
	{	
	
		var id = e.srcElement.getAttribute('id');
		
		var eventTop = document.getElementById(id).offsetTop;
		var eventHeight = document.getElementById(id).offsetHeight;
		var eventLeft = document.getElementById(id).offsetLeft;
		var eventWidth = document.getElementById(id).offsetWidth;
		
		var menuLeft = eventLeft;
		var menuTop = (eventTop + eventHeight);
		
		var menuToShow = id + "menu";
		document.getElementById(menuToShow).style.visibility = "visible";
		document.getElementById(menuToShow).style.top = menuTop + "px";
		document.getElementById(menuToShow).style.left = (menuLeft-1) + "px";
		// You need to subtract one to compensate for the lack of a lefthand border on the H1s
		// Other wise it would just be menuLeft + 'px';
		
	}
	else // Real Browsers
	{
		var id = e.target.getAttribute('id');
		var eventTop = document.getElementById(id).offsetTop;
		var eventHeight = document.getElementById(id).offsetHeight;
		var eventLeft = document.getElementById(id).offsetLeft;
		var eventWidth = document.getElementById(id).offsetWidth;
		
		var menuLeft = eventLeft;
		var menuTop = (eventTop + eventHeight);
		
		
		var menuToShow = id + "menu";
		document.getElementById(menuToShow).style.visibility = "visible";
		document.getElementById(menuToShow).style.top = menuTop + "px";
		document.getElementById(menuToShow).style.left = (menuLeft-1) + "px";
		// You need to subtract one to compensate for the lack of a lefthand border on the H1s
		// Other wise it would just be menuLeft + 'px';
	}	
}

function hideDropDown(e)
{
	/*
		This function is used by the drop down menu itself, and not the H1 tag that fired the event.
		
		FOR IE:  	IE actually has the mouseleave event that makes this function
		         	very easy to perform.  We just need to grab the id of the drop
					down container (in this case a UL with id 'menu1menu' for example)
					that the mouse left and set it to hidden.
					
					We also pull out the 'menu1' portion of the drop down id, so that
					we can manipulate the background color of the h1 tag that initially
					fired the drop down visibility event.  Because we leave the background
					highlited per the highliteMe function, when the mouse moves off the H1
					to the corresponding drop down.
					
		FOR FIREFOX:	The process is a little more convuluted.  You must use a mouseout
						event with Firefox, etc.  This mouseevent is fired on every element within
						the drop down container (meaning the a tags, li tags, etc. all fire
						a mouseoff event).  So you need to word the function different ways 
						depending on the navigation setup.  For the planning site, all the 
						dropdown menus, contain A tags that fire the event.
						Please see more notes inside function.
	*/
	
	var e;
	e = e || window.event; 
	
	if (window.event) //IE
	{
		var elementMovedOffOf = e.srcElement;		
		var elementMovedOnto = e.toElement;
		
		var id = e.srcElement.getAttribute('id'); //i.e. 'menu1menu'
		var menuTrigger = id.substring(0,5); // pulls out the substring 'menu1' for example, which is id of H1 that fired event.
		
		if (elementMovedOnto.nodeName == 'H1' && elementMovedOnto.getAttribute('id') == menuTrigger)
		{
			return;		//If the element we moved onto from the dropdown is the associated H1 that fired
						//the dropdown then we quit the function
		}
		else
		{		
			window.setTimeout("document.getElementById('"+id+"').style.visibility = 'hidden'", 100);
			window.setTimeout("document.getElementById('"+menuTrigger+"').style.backgroundColor = ''", 100);
		}
	}
	
	else // Firefox
	{
		var id = e.target.parentNode.parentNode.getAttribute('id'); //Finds the id for the parentNode, for this site the UL is the parentNode
		var menuTrigger = id.substring(0, 5); //Finds the id of the associated H1 that triggers the dropDownMenu, so that it can be de-highlited

		var elementMovedOffOf = e.target;		
		var elementMovedOnto = e.relatedTarget;

		if ( ((elementMovedOnto.nodeName == elementMovedOffOf.nodeName) && (elementMovedOnto.parentNode.parentNode.getAttribute('id') == id)) || (elementMovedOnto.nodeName == 'H1' && elementMovedOnto.getAttribute('id') == menuTrigger))
		{
			return;
			/*
				This if statement checks to see if the nodeName of the target and the relatedTarget are the same.
				This works for this site because within the UL dropdown menu, the only two elements firing the
				event are A tags with an A node name.  In addition, we need to make sure that we are only moving
				over A nodes within our drop down, so we check the parentNode.parentNode's id and make sure it is
				equal to the id variable above.  We must do this because it is quite possible to move onto an 
				A tag that is on the page, but not within our dropdown. Doing this would leave the drop down visible.

				We also have to take into consideration that the user may move back onto the H1 tag that fired
				the drop down. so we have an or conditional that checks to see if the element moved onto is
				an H1 tag and does it also have an id that equals the menuTrigger variable (i.e. menu1menu, would
				have a menuTrigger variable of menu1, which is the id of the H1 tag that fired the showDropDown
				event).
				
				If either of these scenarios is true, then we end the function immediately with a return.
			*/
		}
		else // else make the dropdown hidden and change the backgroundColor of the H1 tag to null
		{
			window.setTimeout("document.getElementById('"+id+"').style.visibility = 'hidden'", 100);
			window.setTimeout("document.getElementById('"+menuTrigger+"').style.backgroundColor = ''", 100);
		}
	}	
}

function hideDropDown2(e)
{
	/*
		This function is utlized by the H1 that fired the showDropDown function.
		
		For IE:	When the mouse moves onto the drop down, the toElement.nodeName
				it registers is UL for the UL, so we check to see if the nodeName
				moved onto wasn't a UL, then we know that the mousemoved onto
				something other than the drop down and we can hide it. else
				we return and stop the function.
				
		FOR FIREFOX:	When the mouse moves onto the drop down, the relatedTarget.nodeName
						it registers is A for the A tags within the UL, so we check to see if the nodeName
						moved onto wasn't an A, then we know that the mousemoved onto
						something other than the drop down and we can hide it. else
						we return and stop the function.
	*/
	
	var e;
	e = e || window.event;
	
	if (window.event)
	{
		var elementMovedOffOf = e.srcElement.getAttribute('id');
		var elementMovedOnto = e.toElement.nodeName; 
		var associatedMenu = elementMovedOffOf + 'menu'; //If elementMovedOffOf is 'menu1', this sets associatedMenu to 'menu1menu'
		if(elementMovedOnto != 'A')
		{
			window.setTimeout("document.getElementById('"+associatedMenu+"').style.visibility = 'hidden'", 100);
		}
		else
		{
			return;
		}
	}
	
	else
	{	
		var elementMovedOffOf = e.target.getAttribute('id');
		var elementMovedOnto = e.relatedTarget.nodeName;
		var associatedMenu = elementMovedOffOf + 'menu'; //If elementMovedOffOf is 'menu1', this sets associatedMenu to 'menu1menu'
		if(elementMovedOnto != 'A')
		{
			window.setTimeout("document.getElementById('"+associatedMenu+"').style.visibility = 'hidden'", 100);
		}
		else
		{
			return;
		}			
	}
}

function highLiteMe(e)
{
	/*
		This function sets the background-color of the firing element to which ever color you choose.
		This instance uses white.	
	*/
	
	var e
	e = e || window.event;
	
	if(window.event) // IE
	{
		e.srcElement.style.backgroundColor = "#ddd";	
		e.srcElement.style.color = "#000";
	}
	else // Real Browsers
	{		
		this.style.backgroundColor = "#ddd";
		this.style.color = "#000";
}
	
}
function unHighLiteMe(e)
{
	/*
		This function sets the background-color of the firing element back to it's original color.
	*/
	
	var e
	e = e || window.event;

	if(window.event) // IE
	{
			var movedOffOf = e.srcElement.getAttribute('id');
			var movedOnto = e.toElement.parentElement.parentElement.getAttribute('id');
			if(movedOnto != (movedOffOf + 'menu'))
			{
				e.srcElement.style.backgroundColor = "";		
				e.srcElement.style.color = "";
			}
	}
	else // Real Browsers
	{	
		var movedOnto = e.relatedTarget.parentNode.parentNode.getAttribute('id');
		var movedOffOf = e.target.getAttribute('id');
	
		if(movedOnto != (movedOffOf + 'menu'))
		{
			this.style.backgroundColor = "";
			this.style.color = "";
		}
		else
		{
			return;
		}
	}
	
}	
	
function addSidebarPhoto(){
	
	/*
		This function is for the Planning home page only.  It checks for the seconds, and
		depending on the amount of seconds, it places a different image in
		the sidebar.	
	*/
	
	var innerContent = document.getElementById('innerContent');
	innerContent.style.backgroundRepeat = "repeat-y";
	innerContent.style.backgroundColor = "transparent";
	
	var thisDate = new Date();
	var thisSecond = thisDate.getSeconds();

	if (thisSecond >= 1 && thisSecond <= 5){innerContent.style.backgroundImage = "url(images/image1.jpg)";}
	
	else if (thisSecond >= 6 && thisSecond <= 10){innerContent.style.backgroundImage = "url(images/image2.jpg)";}
	
	else if (thisSecond >= 11 && thisSecond <= 15){innerContent.style.backgroundImage = "url(images/image3.jpg)";}
	
	else if (thisSecond >= 16 && thisSecond <= 20){innerContent.style.backgroundImage = "url(images/image4.jpg)";}
	
	else if (thisSecond >= 21 && thisSecond <= 25){innerContent.style.backgroundImage = "url(images/image5.jpg)";}
	
	else if (thisSecond >= 26 && thisSecond <= 30){innerContent.style.backgroundImage = "url(images/image6.jpg)";}
	
	else if (thisSecond >= 31 && thisSecond <= 35){innerContent.style.backgroundImage = "url(images/image7.jpg)";}
	
	else if (thisSecond >= 36 && thisSecond <= 40){innerContent.style.backgroundImage = "url(images/image8.jpg)";}
	
	else if (thisSecond >= 41 && thisSecond <= 45){innerContent.style.backgroundImage = "url(images/image9.jpg)";}
	
	else if (thisSecond >= 46 && thisSecond <= 54){innerContent.style.backgroundImage = "url(images/image10.jpg)";}
	
	else {innerContent.style.backgroundImage = "url(images/image12.jpg)";}
}

// establish which browser the client is using
function getBrowser()
{
	// which version of IE do we have
	if( (navigator.userAgent).indexOf("MSIE") != -1 )
	{ 
		if( (navigator.userAgent).indexOf("MSIE 8.0") != -1 )
		{
			// IE 8 uses new javascript interpretation, specifically getAttribute('class') rather than getAttribute('className')
			isIE8 = true;
		}
		else
		{
			// old versions of IE
			isIE = true;
		}
	}
	//everything else
	else if( (navigator.userAgent).indexOf("Firefox") != -1 ) {	isNotIE = true; isFox = true; }
	else if( (navigator.userAgent).lastIndexOf("Chrome") != -1 ) { isNotIE = true; isChrome = true;	}
	else if( (navigator.userAgent).lastIndexOf("Safari") != -1 ) { isNotIE = true; isSafari = true;	}
}