// Written by Jayson Ward | August 2008
// copyright Jayson Ward | defiantGoat
// www.defiantgoat.com
// use this script if you like, just give credit please.

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

// set global variables

var boxCount = 0;
var numberOfRows;
var numberOfColumns;
var numberOfImages;
var imageWidth;
var boxHeightWidth;
var imagePrefix;
var imageSuffix;
var isSafari;
var isIE;
var isFox;
var collageCount = 0;

var imageCategories = [ "modern|7|.png|100", "mosaicC|4|.jpg|100", "eye|4|.jpg|50", "mosaicA|4|.jpg|50", "mosaicD|4|.jpg|100", "modernA|4|.png|100", "mosaicB|4|.jpg|50", "map|6|.jpg|50", "statue|4|.jpg|50", "mosaicF|4|.jpg|100", "scribbleB|4|.png|100", "scribbleC|4|.png|100", "picasso|4|.jpg|100", "scribbleD|1|.png|25"  ]; // a quasi multi-dimensional array

window.onload = init;

function init()
{
	getBrowser();
	loadImages();	
	setupButtons();	
}

function setupButtons()
{
	if(isIE)
	{
		$("changeMosaic").attachEvent("onmousedown", changeMosaic);	
	}
	else
	{
		$("changeMosaic").addEventListener("mousedown", changeMosaic, false);
	}	
}

function loadImages()
{
	if(collageCount < imageCategories.length)
	{
		var imageInfo = imageCategories[ collageCount ];
		imageInfo = imageInfo.split("|");
		
		imagePrefix = imageInfo[0];
		numberOfImages = imageInfo[1];
		imageSuffix = imageInfo[2];
		imageWidth = parseInt(imageInfo[3]);
		
		imageArray = new Array(numberOfImages);
		
		for(c = 0; c < numberOfImages; c++)
		{
			imageArray[c] = new Image();
			imageArray[c].src = "../experimental/collagist/" + imagePrefix + c + imageSuffix;
		}
		
		collageCount++;	
		createBoxes();	
	}
	else
	{
		collageCount = 0;
		loadImages();
	}
	
	$("currentCollageNumber").innerHTML = collageCount;
	$("totalCollageNumber").innerHTML = imageCategories.length;
}

function createBoxes()
{
	setDimensions();	
	
	for(a = 0; a < numberOfRows; a++ ) 
	{
		for(b = 0; b < numberOfColumns; b++) 
		{
			var newBox = document.createElement("div");
			var newBoxID = "box" + boxCount;
			(isIE == true) ? newBox.setAttribute("className", "box") : newBox.setAttribute("class", "box");
			newBox.style.width = boxHeightWidth;
			newBox.style.height = boxHeightWidth;
			newBox.setAttribute("id", newBoxID);
			(isIE == true) ? newBox.attachEvent("onmouseover", changeImage) : newBox.addEventListener("mouseover", changeImage, false);
			newBox.style.backgroundColor = "rgb(" + getRandomRGBValue() + "," + getRandomRGBValue() + "," + getRandomRGBValue() + ")";
			
			$("appContainer").appendChild(newBox);
			boxCount++;			
		}		
	}// end outer for loop
	
	createCollage();	
}

function changeMosaic()
{
	if( $("box0") )
	{
		for(e = 0; e < boxCount; e++)
		{
			var boxID = "box" + e;
			$("appContainer").removeChild( $(boxID) );			
		}		
		boxCount = 0;
	}
	
	loadImages();
}

function createCollage()
{
	for(d = 0; d < boxCount; d++)
	{
		var boxID = "box" + d;
		//var centerBoxID = "cb" + d;
		
		var imageToGet = imagePrefix + getRandomImage() + imageSuffix;
		
		$(boxID).style.backgroundImage = "url(../experimental/collagist/" + imageToGet + ")";
	}
}

function setDimensions()
{

	switch(imageWidth)
	{
		case 25:
		numberOfRows = 16;
		numberOfColumns = 24;
		boxHeightWidth = "25px";
		break;
		
		case 50:
		numberOfRows = 8;
		numberOfColumns = 12;
		boxHeightWidth = "50px";
		break;
		
		case 100:
		numberOfRows = 4;
		numberOfColumns = 6;
		boxHeightWidth = "100px";
		break;
		
		default:
		numberOfRows = 8;
		numberOfColumns = 12;
		boxHeightWidth = "50px";
		break;		
	}	
}

function changeImage(e)
{
	e = e || window.event;
	
	var imageToGet = imagePrefix + getRandomImage() + imageSuffix;
	
	(isIE == true) ? e.srcElement.style.backgroundImage = "url(../experimental/collagist/" + imageToGet + ")" : this.style.backgroundImage = "url(../experimental/collagist/" +  imageToGet + ")";
	
	(isIE == true) ? e.srcElement.style.backgroundColor = "rgb(" + getRandomRGBValue() + "," + getRandomRGBValue() + "," + getRandomRGBValue() + ")" : this.style.backgroundColor = "rgb(" + getRandomRGBValue() + "," + getRandomRGBValue() + "," + getRandomRGBValue() + ")";

}

function getRandomImage()
{
	var myDate = new Date().getTime(); 
	
	var newNum1 = (myDate * Math.random()).toString();
	newNum1 = newNum1.substring( (newNum1.indexOf(".")), newNum1.length );
	var rNum1 = Math.floor( parseFloat(newNum1) * numberOfImages ); 
	
	return rNum1; 	
} 

function getRandomRGBValue()
{
	var myDate = new Date().getTime();
	
	var newNum1 = (myDate * Math.random()).toString();
	newNum1 = newNum1.substring( (newNum1.indexOf(".")), newNum1.length ); 
	var rNum1 = Math.floor( parseFloat(newNum1) * 256 );
	
	return rNum1;	
}

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