/**********************************
	Color Shifting DIVs
	Version 1.0
	Last Revision: 06.13.2004
	steve@slayeroffice.com

	PLEASE leave this notice in tact!

	Should you modify/improve this source
	please let me know about it so I can
	update the version hosted at slayeroffice.	

***********************************/

window.onload = init;

var sp=new Array(); 		// array for the div objects we're going to create

var colorScheme=3; 		// refers to the main index in the color array.
var colors=new Array(); 		// the arrays of colors we'll be using
colors[0] = new Array("006699","F1DE87","869960","FFAA99","0E4403","D41A23");
colors[1] = new Array("FF0000","FFBF40","FFFF00","00FF00","0000FF","FF00FF");
colors[2] = new Array("FF0000","FFBF40","FFFF00");
colors[3] = new Array("638DA1","F2F6F7","98B4C1","E3EBED");
colors[4] = new Array("434469","CFBE84","16777E","F3E6C8");
colors[5] = new Array("000000","FFFFFF");
colors[6] = new Array("39630C","FFFF80");
colors[7] = new Array("F09E35","0882C6","D03201","5A709A","FFE26E","984A23");
colors[8] = new Array("7EE06F","C4C2BF","C9D1EC");
colors[9] = new Array("DDDDBB","CAAC6C","778855","EEEEDD","99AA77");
colors[10] = new Array("645339","F6F6F6","A38D6F","463928");
colors[11] = new Array("66CC33","0099CC");
colors[12] = new Array("6CB4F0","FFCF60","C60262","E4E4E4");
colors[13] = new Array("F85A3F","F73E78","470100");
colors[14] = new Array("C81624","F6DC31","454E3F","EFF6C6","AAC12B");
colors[15]= new Array("FFDA6F","ED1E24","EEEEEE")

pause = 0;

colorPercent=1.0; 			// used to calculate the color transitions. decrements by .01 until 0
var colorPath = new Array(); 	// stores the colors needed to get from color[x] to color[y]
var colorIndex = 0; 		// where we are in the colors array
var shiftIndex = new Array(); 	// where each DIV is in the colorPath array
var isShifting=new Array(); 		// tells us if a DIV is currently active and shifting
var watchShift=0; 			// increments by 1. when it reaches SHIFT_STEP, a new DIV is set to active. controls the stagger
var SHIFT_STEP=10; 		// what watchShift has to get to
var on=0; 			// tells us how many DIVs are in an active state

var NUM_DIVS = 28;		// the number of DIVs we'll be creating
//var curObjColor = new Array();

var d=document; 			// shortcut object reference to the document object
var zInterval = null; 		// our timer

function init() {
	if(!document.getElementById) return; // bail out if this is an older browser
	createFadeObjArray(NUM_DIVS);	// create the div elements.
	colorPath=createColorPath();	// sets up the colorPath array so we know what the transitions will be
	
	zInterval = setInterval("shiftColors()",20); // start the animation interval
	
}

function createFadeObjArray(len) {
	h=40;			// the height of the divs
	for(i=0;i<len;i++) {	// loop over how many divs we want to create
		// create the divs...
		sp[i]=d.getElementById("mContainer").appendChild(d.createElement("div"));
		sp[i].style.backgroundColor = "#"+colors[colorScheme][0];
		// the following code is just to create the "arc" effect for presentational purposes. it can be removed
		// without effecting the application.
		sp[i].style.height=h+"px";
		sp[i].style.marginTop=40-h+"px";
		if(i<=(len-3)/2) {
			h--;
		} else if (i>(len/2)) {
			h++;
		}
		// define the initial values in shiftIndex and isShifting
		shiftIndex[i]=0;
		isShifting[i]=0;
	}
	// create the text logo for the right hand side so the user knows which scheme they are seeing.
	nLogo=d.getElementById("mContainer").appendChild(d.createElement("div"));
	nLogo.id="nLogo";
	nLogo.style.color="#"+colors[colorScheme][0];
	nLogo.appendChild(d.createTextNode(d.getElementById("nColorScheme").options[colorScheme].innerHTML));

	// set the first isShifting to 1 so that the app will start at 0.
	isShifting[0]=1;
}


function createColorPath() {
	// figure out what the color we'll be transitioning too is.
	nColor = colorIndex+1;
	// if we're at the end of the color array, set the next color to the first.
	if(nColor>=colors[colorScheme].length)nColor=0;
	do {
		// calculate the colors we need.
		colorPath[colorPath.length]=setColorHue(longHexToDec(colors[colorScheme][colorIndex]),colorPercent,longHexToDec(colors[colorScheme][nColor]));
		// decrement color percent
		colorPercent-=.01;
	} while(colorPercent>0);

	// return the new colorPath array to the caller.
	return colorPath;
}

function shiftColors() {
	if(pause)return;
	// the heart of the application.
	// loop over the length of our DIVs...
	for(i=0;i<sp.length;i++) {
		// only do a shift on them if isShifting[i] is 1. otherwise, they arent active yet.
		if(isShifting[i]) {
			// change the DIVs background-color to the RGB color in colorPath at this DIVs shiftIndex
			sp[i].style.backgroundColor = "rgb("+colorPath[shiftIndex[i]][0]+","+colorPath[shiftIndex[i]][1]+","+colorPath[shiftIndex[i]][2]+")";
			// increment shiftIndex so we get a new color on the next iteration
			shiftIndex[i]++;
		}	
		// when shiftIndex reaches the end of the colors, we need to create a new color
		// path for the next transition.
		if(shiftIndex[i]>=colorPath.length) {
			colorIndex++;
			if(colorIndex>=colors[colorScheme].length)colorIndex=0;
			colorPercent=1.0;
			colorPath=createColorPath();
		}
	}
	// increment watchShift. if its reached SHIFT_STEP, we turn another DIV on.
	watchShift++;
	if(watchShift>=SHIFT_STEP && on<sp.length) {
		on++;
		watchShift=0;
		isShifting[on]=1;
	}
}

// changes the color scheme.
function changeScheme(themeIndex) {
	colorScheme=themeIndex;
	normalize();
	init();
}

// resets vars back to their original states
function normalize() {
	d.getElementById("mContainer").innerHTML="";
	clearInterval(zInterval);
	shiftIndex=new Array();
	isShifting=new Array();
	watchShift=0;
	colorIndex=0;
	colorPath=new Array();
	on=0;
	colorPercent=1.0;
}

// calculates a color based on the it being a certain percentage of another color.
function setColorHue(originColor,opacityPercent,maskRGB) {
	returnColor=new Array();
	for(w=0;w<originColor.length;w++) returnColor[w] = Math.round(originColor[w]*opacityPercent) + Math.round(maskRGB[w]*(1.0-opacityPercent));
	return returnColor;
}

// utility method to convert "FFFFFF" to an array of 255,255,255
function longHexToDec(longHex) {
	r=toDec(longHex.substring(0,2));
	g=toDec(longHex.substring(2,4));
	b=toDec(longHex.substring(4,6));
	return new Array(r,g,b);

	function toDec(hex) {
		return parseInt(hex,16);
	}
}