// *** Parameters/Variables


// *** End Parameters/Variables
// *** *** ***


// What to do when document is prepared to work
$(document).ready(
	function(){
		configurePage();
	}
);

function configurePage(){
	
	// If page is resized, color changes
	$(window).resize(
		function() {
			colorPage();
		}
	);
	
	colorPage();
}
// *** End configurePage
// *** *** ***


// Lo siguiente se usa para determinar el Browser
// -> Extraia de http://www.quirksmode.org/js/detect.html
// Las funciones son las siguientes
//		Browser name: BrowserDetect.browser
//		Browser version: BrowserDetect.version
// 		OS name: BrowserDetect.OS
// ****************
var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.indexOf(data[i].subString) != -1)
					return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
		{
			string: navigator.userAgent,
			subString: "Chrome",
			identity: "Chrome"
		},
		{ 	string: navigator.userAgent,
			subString: "OmniWeb",
			versionSearch: "OmniWeb/",
			identity: "OmniWeb"
		},
		{
			string: navigator.vendor,
			subString: "Apple",
			identity: "Safari",
			versionSearch: "Version"
		},
		{
			prop: window.opera,
			identity: "Opera"
		},
		{
			string: navigator.vendor,
			subString: "iCab",
			identity: "iCab"
		},
		{
			string: navigator.vendor,
			subString: "KDE",
			identity: "Konqueror"
		},
		{
			string: navigator.userAgent,
			subString: "Firefox",
			identity: "Firefox"
		},
		{
			string: navigator.vendor,
			subString: "Camino",
			identity: "Camino"
		},
		{		// for newer Netscapes (6+)
			string: navigator.userAgent,
			subString: "Netscape",
			identity: "Netscape"
		},
		{
			string: navigator.userAgent,
			subString: "MSIE",
			identity: "Explorer",
			versionSearch: "MSIE"
		},
		{
			string: navigator.userAgent,
			subString: "Gecko",
			identity: "Mozilla",
			versionSearch: "rv"
		},
		{ 		// for older Netscapes (4-)
			string: navigator.userAgent,
			subString: "Mozilla",
			identity: "Netscape",
			versionSearch: "Mozilla"
		}
	],
	dataOS : [
		{
			string: navigator.platform,
			subString: "Win",
			identity: "Windows"
		},
		{
			string: navigator.platform,
			subString: "Mac",
			identity: "Mac"
		},
		{
			   string: navigator.userAgent,
			   subString: "iPhone",
			   identity: "iPhone/iPod"
	    },
		{
			string: navigator.platform,
			subString: "Linux",
			identity: "Linux"
		}
	]

};
BrowserDetect.init();
// *** End BrowserDetect
// *** *** ***



function colorPage() {
	
	osSupported = (BrowserDetect.OS == "Mac" || BrowserDetect.OS == "Windows" || BrowserDetect.OS == "Linux") && (BrowserDetect.browser == "Chrome" || BrowserDetect.browser == "Firefox" || BrowserDetect.browser == "Safari" || BrowserDetect.browser == "Explorer") && !(BrowserDetect.browser == "Explorer" && BrowserDetect.version < 7);
	if( !osSupported ){
		$("body").css("background", "url('img/bg_01.png')");
		return;
	}
//	alert(osSupported)
	
//	if(
//		BrowserDetect.
//	){
//		$("body").css("background", "url('img/bg_01.png')");
//		return
//	}

	var squareSide = 60,
		bgWidth = $(window).width() - $(window).width() % squareSide + Math.ceil(($(window).width() % squareSide) / 60) * squareSide,
		bgHeight = $(window).height() - $(window).height() % squareSide + Math.ceil(($(window).height() % squareSide) / 60) * squareSide;
		
	
	var rowArray = $();
	
	var hue = hueGenerator(30);
	
	// Colors in HSL
	var minSat = 95, maxSat = 100, minBri = 48, maxBri = 52;
	tl = [hue[0],	Math.round(minSat+Math.random()*(maxSat-minSat)),	Math.round(minBri+Math.random()*(maxBri-minBri))],
	tr = [hue[1],	Math.round(minSat+Math.random()*(maxSat-minSat)),	Math.round(minBri+Math.random()*(maxBri-minBri))],
	bl = [hue[2],	Math.round(minSat+Math.random()*(maxSat-minSat)),	Math.round(minBri+Math.random()*(maxBri-minBri))],
	br = [hue[3],	Math.round(minSat+Math.random()*(maxSat-minSat)),	Math.round(minBri+Math.random()*(maxBri-minBri))];
	
	// Colors in RGB
	tl = hslToRgb(tl),
	tr = hslToRgb(tr),
	bl = hslToRgb(bl),
	br = hslToRgb(br);
	
	var hor = bgWidth/squareSide, ver = bgHeight/squareSide;
	
	for(var i=0; i<ver ; i++){
		var l = [	tl[0]+i*((bl[0]-tl[0])/(ver-1)),
					tl[1]+i*((bl[1]-tl[1])/(ver-1)),
					tl[2]+i*((bl[2]-tl[2])/(ver-1))
					];
		var r = [	tr[0]+i*((br[0]-tr[0])/(ver-1)),
					tr[1]+i*((br[1]-tr[1])/(ver-1)),
					tr[2]+i*((br[2]-tr[2])/(ver-1))
					];
		
		var row = $( document.createElement('div') );

		for(var j=0; j<hor; j++){
			var color = [	Math.round( l[0]+j*((r[0]-l[0])/(hor-1)) ),
							Math.round( l[1]+j*((r[1]-l[1])/(hor-1)) ),
							Math.round( l[2]+j*((r[2]-l[2])/(hor-1)) )
						];
			
			var c = $( document.createElement('div') )
				.css("background-color","rgb("+(color[0])+","+(color[1])+","+(color[2])+")")
				.css("float","left")
				.css("font-size","0.7em")
				.css("width",squareSide+"px")
				.css("height",squareSide+"px");
				
			$(row).append( $(c) );
		}
		rowArray = rowArray.add( $(row) );
	}
	
	if( $("#bgcolors").length == 0 ){
		$("body")
			.append( $( document.createElement("div")).attr("id","bgcolors") );
	}
	else {
		$("#bgcolors").remove();
		$("body")
			.append( $( document.createElement("div")).attr("id","bgcolors") );
	}
	
	$("#bgcolors")
		// <- css
		.css("width",bgWidth+"px")
		.css("height",bgHeight+"px	")
		.css("text-align","center")
		.css("position","fixed")
		.css("top", 0)
		.css("left","50%")
		.css("margin-left",-(bgWidth/2)+"px")
		.css("z-index","-2")
		// -> css
		.append( $(rowArray) );
	
	$("#bgcolors").click(
		function(){
			colorPage();
		}
	);
	
//	var t = $(".title"), ctemp;
//	var colorArr = [tl, tr, bl, br];
//	
//	$(t).each(
//		function(i, val) {
//			ctemp = i % 4;
//			$(this)
////				.hover(
////					function() {
////						$(val).css("color","rgb("+colorArr[ (ctemp+1) % 4 ][0]+","+colorArr[ (ctemp+1) % 4 ][1]+","+colorArr[ (ctemp+1) % 4 ][2]+")");
////					},
////					function() {
////						$(val).css("color","rgb("+colorArr[ctemp][0]+","+colorArr[ctemp][1]+","+colorArr[ctemp][2]+")");
////					}
////				)
//				.css("color","rgb("+colorArr[ctemp][0]+","+colorArr[ctemp][1]+","+colorArr[ctemp][2]+")");
//    	}
//    );
}

function hueGenerator(space){
	var hueArray = [
		Math.round( Math.random()*360 ),
		Math.round( Math.random()*360 ),
		Math.round( Math.random()*360 ),
		Math.round( Math.random()*360 )
		];
		
	var delta = space;
	
	for(var h=1; h<4; h++){
		var dif = false;
		while(!dif){
			for(var u=0; u<h; u++){
				if( hueArray[h] <= (hueArray[u] - delta) || hueArray[h] >= (hueArray[u] + delta) ){
					dif = true;
					continue;
				}
				else {
					dif = false;
					hueArray[h] = Math.round( Math.random()*360 );
					break;
				}
			}
		}
	}
	
	return hueArray;
}

function hslToRgb(hsl){
	var h=hsl[0]/360, s=hsl[1]/100, l=hsl[2]/100;

	var r=l,g=l,b=l;
	
	if(s==0){
		return [r,g,b];
	} else {
		var temp2 = l < 0.5? l * (1 + s): l + s - l * s;
		var temp1 = 2 * l - temp2;
		
		function getColor(temp3){
			if(temp3 < 0) temp3 += 1;
			if(temp3 > 1) temp3 -= 1;
			if(6 * temp3 < 1) return temp1 + (temp2 - temp1) * 6 * temp3;
			if(2 * temp3 < 1) return temp2;
			if(3 * temp3 < 2) return temp1 + (temp2 - temp1) * ( (2 / 3) - temp3) * 6
			return temp1;
		}		
		r = Math.round( 255 * getColor(h + 1/3) );
		g = Math.round( 255 * getColor(h) );
		b = Math.round( 255 * getColor(h - 1/3) );
		return [r,g,b];
	}
	
}
// *** End colorBg()
// *** *** ***