// Written by Jayson Ward || defiantgoat.com
// August 2008

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

window.onload = init;
var boxCount = 0;
var scrollColorCounter = 0;
var colorScrollingIntervalID;
var colorScrollingIntervalID2;
var bgColorGlobal = "#fff"; // set this to white until it is reset somewhere else
var colorIntervalID;
var newBGColor;
var isSafari;


function init()
{
	makeBoxes(); // create the colored boxes
	setupColorChangeSelections(); // setup background color change functionality
	testForSafari();
}	

function setupColorChangeSelections()
{
	var colorChangeBoxes = $('colorChangeBar').getElementsByTagName("div"); // create an array of references to divs in colorChangeBar
	
	for( c=0; c < colorChangeBoxes.length; c++ )
	{		
		var thisID = colorChangeBoxes[c].getAttribute("id"); // generate the id attribute to dynamically attach listeners
		if(window.event)
		{
			try // IE
			{
				$(thisID).attachEvent("onmousedown", changeBGColor);
			}
			catch(exception) // f'ing Safari
			{
				$(thisID).addEventListener("mousedown", changeBGColor, false);
			}
		}
		else //Fox
		{
			$(thisID).addEventListener("mousedown", changeBGColor, false);		
		}
	}	
}

function changeBGColor(e)
{
	clearInterval(colorIntervalID);	// stop random color changes until scrolling color is over
	
	if(colorScrollingIntervalID != null) // if color scrolling is already happening, then clear the interval
	{
		clearInterval(colorScrollingIntervalID);	
		colorScrollingIntervalID == null;
	}
	
	e = e || window.event;
	
	if(window.event)
	{
		try // IE
		{
			newBGColor = e.srcElement.getAttribute("id");
		}
		catch(exception) // f'ing Safari
		{
			newBGColor = this.getAttribute("id");
			window.alert("yes");
		}
	}
	else //Fox
	{
		newBGColor = this.getAttribute("id");
	}
	
	bgColorGlobal = newBGColor; // set the color to a global variable for use in scrollColors to set color back
	$("appContainer").style.backgroundColor = newBGColor; // change the appContainer div's background color to choice
	colorScrollingIntervalID = window.setInterval(scrollColors,50); // set the boxes colors to change at an interval
}

function scrollColors()
{
	if(scrollColorCounter < boxCount)
	{	
		// establish dynamic id reference	
		var boxID = "box" + scrollColorCounter; 
		
		// establish a temp variable to hold prior color to pass to anonymoous setTimeout function below
		var tempColor = $(boxID).style.backgroundColor; 
		
		$(boxID).style.backgroundColor = bgColorGlobal;
		
		// Add a 1px border, except for Safari which doesn't handle this very well
		isSafari ? $(boxID).style.border = "0px solid #555" : $(boxID).style.border = "1px solid #555";
		
		// use an anonymous setTimeout function to change the color back to original color after 1000 milliseconds
		colorScrollingIntervalID2 = window.setTimeout( function(){ $(boxID).style.backgroundColor = tempColor;}, 1000 ); 
		
		// increment scrollColorCounter
		scrollColorCounter++; 
	}
	else // after scrollColorCounter reaches the boxCount number established in makeBoxes function
	{
		scrollColorCounter=0;
		clearInterval(colorScrollingIntervalID); // Kill the scrolling colors interval
		colorIntervalID = window.setInterval(changeColors,1); // Reset the random colors interval
	}	
}

function makeBoxes()
{
	
	for(a=0;a<4;a++) // For four rows
	{
		for(b=0;b<18;b++) // Create 18 div elements with the box class
		{			
			var newBox = document.createElement("div"); // create element
			newBox.setAttribute("id", "box" + boxCount); // dynmically establish its id (ex. id="box1")
			
			if(window.event)
			{
				try
				{
					newBox.setAttribute("className", "box");
					newBox.attachEvent("onmouseover", changeMyColor);
					newBox.style.marginBottom = "0px";
				}
				catch(exception) // for stupid Safari
				{
					newBox.setAttribute("class", "box"); 
					newBox.addEventListener("mouseover", changeMyColor, false);
					newBox.style.marginBottom = "5px";
				}	
			}
			else
			{
					newBox.setAttribute("class", "box"); 
					newBox.addEventListener("mouseover", changeMyColor, false);
					newBox.style.marginBottom = "5px";				
			}
			
			$("appContainer").appendChild(newBox); // add the div to the appContainer div as a child
			newBox.style.backgroundColor = "rgb(" + getRandom() + "," + getRandom() + "," + getRandom() + ")"; // make it's background  color random rgb value
			boxCount++; // increment boxCount global variable to use in other functions
		} // end inner for loop		
		
		var newLineBreak = document.createElement("div"); // create a line breaking div tag so boxes move to next row
		
		if(window.event)
		{
			try
			{
				newLineBreak.setAttribute("className", "clearer");
			}
			catch(exception) // Safari sucks
			{
				newLineBreak.setAttribute("class", "clearer");
			}
		}
		else //firefox
		{
			newLineBreak.setAttribute("class", "clearer");
		}
		
		// add this div to the appContainer div as a child
		$("appContainer").appendChild(newLineBreak); 
		
	} // end outer for loop
	
	// Change colors every 10 seconds
	colorIntervalID = window.setInterval(changeColors,1); 
	
} // end makeBoxes

function changeMyColor(e)
{
		e = e || window.event;
		var boxOver;
		
		window.event ? boxOver = e.srcElement.getAttribute("id") : boxOver = this.getAttribute("id");	
		$(boxOver).style.backgroundColor = bgColorGlobal;//"#fff";	
		
		// Add a 1px border, except for Safari which doesn't handle this very well
		isSafari ? $(boxOver).style.border = "0px solid #555" : $(boxOver).style.border = "1px solid #555";

} // end changeMyColor

function changeColors()
{

	var boxSuffix = Math.floor( Math.random() * (boxCount) );	

	var boxID = "box" + boxSuffix;

	$(boxID).style.backgroundColor = "rgb(" + getRandom() + "," + getRandom() + "," + getRandom() + ")";
	$(boxID).style.borderWidth = "0px";
	
} // end changeColors

function getRandom()
{
	var myDate = new Date().getTime(); // create a new Date object with time in milliseconds
	
	var newNum1 = (myDate * Math.random()).toString(); // multiply myDate by a random number and then convert to string for manipulation
	newNum1 = newNum1.substring( (newNum1.indexOf(".")), newNum1.length ); // remove portion of newNum1 before the decimal
	var rNum1 = Math.floor( parseFloat(newNum1) * 256 ); // parse a float out of string representation of newNum1, multiply by 256 (255 is max value for an individual r,g.b value). This gives you a float such as 55.3333. Use .floor method to round down, ex: 55.3333 to 55
	
	return rNum1; // return this integer to use in your dynamic r, g, b color settings.
	
} // end getRandom

function testForSafari()
{
	if(window.event)
	{
		if(addEventListener)
		{
			isSafari = true;
		}
	}
		
}