//Written by Jayson Ward | August 10, 2008
//Copyright Jayson Ward / defiantGoat / www.defiantgoat.com
// if you use this code just give credit. thanks. j.

function $(id) { return document.getElementById(id); } //based on prototype library

window.onload = init;
var colorRecord = "";
var ax;
var isSafari;
var isIE;
var isFox;
var logoDivInfo;
var navDivInfo;
var contentDivInfo;
var footerDivInfo;

function init()
{
	var logoRand;
	var navRand;
	var contentRand;
	var footerRand;
	
	determineBrowser();
	setupNavigation();	
	changeColors();
}

function setupNavigation()
{
		if(window.innerHeight) // Firefox
		{			
			$("changeColors").addEventListener('mousedown', changeColors, false);
			$("startColors").addEventListener('mousedown', autoColors, false);
			$("reportColors").addEventListener('mousedown', reportColors, false);
			$("showRecord").addEventListener('mousedown', showColorRecord, false);
		}
		else // IE
		{
			$("changeColors").attachEvent('onmousedown', changeColors);	
			$("startColors").attachEvent('onmousedown', autoColors);	
			$("reportColors").attachEvent('onmousedown', reportColors);
			$("showRecord").attachEvent('onmousedown', showColorRecord);	
		}		
}
function changeColors()
{
		logoRand = getRandomRGB();
		navRand = getRandomRGB();
		contentRand = getRandomRGB();
		footerRand = getRandomRGB();
		
		$("logoDiv").style.backgroundColor = "rgb(" + logoRand[0] + "," + logoRand[1] + "," + logoRand[2] + ")";
		$("navDiv").style.backgroundColor = "rgb(" + navRand[0] + "," + navRand[1] + "," + navRand[2] + ")";
		$("contentDiv").style.backgroundColor = "rgb(" + contentRand[0] + "," + contentRand[1] + "," + contentRand[2] + ")";
		$("footerDiv").style.backgroundColor = "rgb(" + footerRand[0] + "," + footerRand[1] + "," + footerRand[2] + ")";
		
		$("logoDiv").style.color = logoRand[3];
		$("navDiv").style.color = navRand[3];
		$("contentDiv").style.color = contentRand[3];
		$("footerDiv").style.color = footerRand[3];
		
		recordColors();	
}
function autoColors(e)
{
	var e = e || mouse.event;
	
	if(window.event)
	{
		if(e.srcElement.getAttribute('id') == "stopColors")
		{
			window.clearInterval(ax);
			e.srcElement.setAttribute('id', "startColors");
			e.srcElement.innerHTML = "Start Auto Color Change";
			$("aboutAutoColors").style.display = "none";
		}
		else if(e.srcElement.getAttribute('id') == "startColors")
		{
			changeColors();
			ax = window.setInterval(changeColors,10000); // Change colors every 10 seconds
			e.srcElement.setAttribute('id', "stopColors");
			e.srcElement.innerHTML = "Stop Auto Color Change";
			$("aboutAutoColors").style.display = "block";
		}
	}
	else
	{
		if(this.getAttribute('id') == "stopColors")
		{
			window.clearInterval(ax);
			this.setAttribute('id', "startColors");
			this.innerHTML = "Start Auto Color Change";
			$("aboutAutoColors").style.display = "none";
		}
		else if(this.getAttribute('id') == "startColors")
		{
			changeColors();
			ax = window.setInterval(changeColors,10000); // Change colors every 10 seconds
			this.setAttribute('id', "stopColors");
			this.innerHTML = "Stop Auto Color Change";
			$("aboutAutoColors").style.display = "block";
		}
	}	
}

function reportColors(e)
{
	e = e || window.event;
	
	recordColorPalette();

	var currentColorInfo = document.createElement("div");
	currentColorInfo.setAttribute("id", "currentColorInfo");
	currentColorInfo.innerHTML = logoDivInfo + navDivInfo + contentDivInfo + footerDivInfo;
	
	var updateButton = document.createElement("p");
	updateButton.innerHTML = "> update current color info";
	updateButton.style.cursor = "pointer";
	(isIE) ? updateButton.attachEvent("onmousedown", function(){ recordColorPalette(); $("currentColorInfo").innerHTML = logoDivInfo + navDivInfo + contentDivInfo + footerDivInfo;} ) : updateButton.addEventListener("mousedown", function(){ recordColorPalette(); $("currentColorInfo").innerHTML = logoDivInfo + navDivInfo + contentDivInfo + footerDivInfo;}, false);
	
	var hideMeButton = document.createElement("p");
	hideMeButton.innerHTML = "> hide this info";
	hideMeButton.style.cursor = "pointer";
	(isIE) ? hideMeButton.attachEvent("onmousedown", function(){ $("colorInfo").innerHTML = ""; $("colorInfo").style.display = "none"; $("hideReport").innerHTML = "View Current Color Info"; $("hideReport").setAttribute('id', "reportColors");  }) : hideMeButton.addEventListener("mousedown", function(e){$("colorInfo").innerHTML = "";$("colorInfo").style.display = "none";$("hideReport").innerHTML = "View Current Color Info"; $("hideReport").setAttribute('id', "reportColors");}, false);
	
	if(window.event) // IE and Safari
	{
		if(e.srcElement.getAttribute('id') == "reportColors")
		{
			e.srcElement.setAttribute('id', "hideReport");
			e.srcElement.innerHTML = "Hide Current Color Info";
			
			$("colorInfo").appendChild(currentColorInfo);
			$("colorInfo").appendChild(updateButton);	
			$("colorInfo").appendChild(hideMeButton);
			$("colorInfo").style.display = "block";	

		}
		else if(e.srcElement.getAttribute('id') == "hideReport")
		{
			e.srcElement.setAttribute('id', "reportColors");
			e.srcElement.innerHTML = "View Current Color Info";
			$("colorInfo").innerHTML = "";
			$("colorInfo").style.display = "none";	
		}
	}
	else // Fox
	{
		if(this.getAttribute('id') == "reportColors")
		{
			this.setAttribute('id', "hideReport");
			this.innerHTML = "Hide Current Color Info";
			
			$("colorInfo").appendChild(currentColorInfo);
			$("colorInfo").appendChild(updateButton);	
			$("colorInfo").appendChild(hideMeButton);
			$("colorInfo").style.display = "block";	
		}
		else if(this.getAttribute('id') == "hideReport")
		{
			this.setAttribute('id', "reportColors");
			this.innerHTML = "View Current Color Info";
			$("colorInfo").innerHTML = "";
			$("colorInfo").style.display = "none";	
		}
	}
}

function recordColorPalette()
{
	logoDivInfo = "<div style=\"float:left;height:12px;width:12px;background-color:rgb(" + logoRand[0] + "," + logoRand[1] + "," + logoRand[2] + ");\"></div><div style=\"float:left;margin-left:15px\">logoDiv: r: " + logoRand[0] + " g: " + logoRand[1] + " b: " + logoRand[2] + "</div><br />";

	navDivInfo = "<div style=\"float:left;height:12px;width:12px;background-color:rgb(" + navRand[0] + "," + navRand[1] + "," + navRand[2] + ");\"></div><div style=\"float:left;margin-left:15px\">navDiv: r: " + navRand[0] + " g: " + navRand[1] + " b: " + navRand[2] + "</div><br />";

	contentDivInfo = "<div style=\"float:left;height:12px;width:12px;background-color:rgb(" + contentRand[0] + "," + contentRand[1] + "," + contentRand[2] + ");\"></div><div style=\"float:left;margin-left:15px\">contentDiv: r: " + contentRand[0] + " g: " + contentRand[1] + " b: " + contentRand[2] + "</div><br />";

	footerDivInfo = "<div style=\"float:left;height:12px;width:12px;background-color:rgb(" + footerRand[0] + "," + footerRand[1] + "," + footerRand[2] + ");\"></div><div style=\"float:left;margin-left:15px\">footerDiv: r: " + footerRand[0] + " g: " + footerRand[1] + " b: " + footerRand[2] + "</div><br />";	
	
}

function recordColors()
{
	recordColorPalette();
	
	currentRecord = "<hr />" + logoDivInfo + navDivInfo + contentDivInfo + footerDivInfo;
	
	colorRecord += "<hr />" + logoDivInfo + navDivInfo + contentDivInfo + footerDivInfo;	
	
	if( $("colorRecord") )
	{
		$("colorRecord").innerHTML += currentRecord;	
	}
}

function showColorRecord(e)
{
	var e = e || mouse.event;
	
	if(window.event) // IE and Safari unfortunately
	{
		if(e.srcElement.getAttribute('id') == "showRecord")
		{
			if( $("colorRecord") )
			{
				document.body.removeChild($("colorRecord"));
			}
			var colorRecordDiv = document.createElement('div');
			colorRecordDiv.setAttribute('id',"colorRecord");
			colorRecordDiv.style.width = "250px";
			colorRecordDiv.style.height = "200px";
			colorRecordDiv.style.marginTop = "10px";
			colorRecordDiv.style.padding = "4px";
			colorRecordDiv.style.backgroundColor = "#fff";
			colorRecordDiv.style.overflow = "scroll";
			colorRecordDiv.innerHTML = colorRecord;
			
			$("contentDiv").appendChild(colorRecordDiv);
			e.srcElement.setAttribute('id', "hideRecord");
			e.srcElement.innerHTML = "Hide Color History";
		}
		else if(e.srcElement.getAttribute('id') == "hideRecord")
		{
			$("contentDiv").removeChild( $("colorRecord") );		

			e.srcElement.setAttribute('id', "showRecord");
			e.srcElement.innerHTML = "Show Color History";
		}
	}
	else
	{
		if(this.getAttribute('id') == "showRecord")
		{
			if( $("colorRecord") )
			{
				document.body.removeChild($("colorRecord"));
			}
			var colorRecordDiv = document.createElement('div');
			colorRecordDiv.setAttribute('id',"colorRecord");
			colorRecordDiv.style.width = "250px";
			colorRecordDiv.style.height = "150px";
			colorRecordDiv.style.marginTop = "10px";
			colorRecordDiv.style.padding = "4px";
			colorRecordDiv.style.backgroundColor = "#fff";
			colorRecordDiv.style.overflow = "scroll";
			colorRecordDiv.innerHTML = colorRecord;
			
			$("contentDiv").appendChild(colorRecordDiv);
			this.setAttribute('id', "hideRecord");
			this.innerHTML = "Hide Color History";
		}
		else if(this.getAttribute('id') == "hideRecord")
		{
			$("contentDiv").removeChild( $("colorRecord") );		

			this.setAttribute('id', "showRecord");
			this.innerHTML = "Show Color History";
		}
	}
}

function getRandomRGB()
{
	var rNum1 = Math.round( ( ( Math.random() ) * 255 ) );
	var rNum2 = Math.round( ( ( Math.random() ) * 255 ) );
	var rNum3 = Math.round( ( ( Math.random() ) * 255 ) );
	
	if( (rNum1 < 120) && (rNum2 < 120) && (rNum3 < 120) )
	{
		var tColor = "#fff"; // text color if RGB is dark, this only estimates
	}
	else
	{
		var tColor = "#111"; // text color if RGB is lighter, this only estimates
	}
	
	var values = [rNum1, rNum2, rNum3, tColor];
	
	return values;
}

function determineBrowser()
{
	if(window.event)
	{
		if(navigator.userAgent.lastIndexOf("Apple") != -1 )
		{
			isSafari = true;
		}
		else
		{
			isIE = true;
		}	
	}
	else
	{
		isFox = true;	
	}
}