// That code snippet belongs to squaredesign - http://squaredesign.com

function draw() {
	// first we remove all old squares in case this is a redraw
	$(".square").remove();
	// hard-coded number of squares wide
	numX = 20;
	// width expressed in percent
	sqW = 100/numX;
	// initialize height
	sqH = "";
	//number of 'columns' set to hard-coded value
	sqX = numX;
	// number of 'rows' depends on the height of the container
	sqY = Math.floor($("#effects").height()/($("#effects").width()/numX))+1;

	// loop that draws the squares
	for(var x = 0;x<sqX*sqY;x++) {
	//for(var x = 0;x<1;x++) {
		// start by cloning an existing element, matching its bg color to the body bg
		$(".onesquare")
		.clone(false)
		.css({
			width : sqW+"%",
			background : $("body").css("background-color")
		})
		.appendTo("#effects")
		.removeClass("onesquare")
		.addClass("square")
		.addClass("sq"+x);// .text(x)

	}
	
	$("#effects").height(sqY*$(".sq0").width());
	/* so far we have a lot of flat squares. this sets all their heights equal to
		the width of the first one (which will read as px), and makes them visible */
	$(".square").height($(".sq0").width()).removeClass("hide");

	// this is the initial "tweak" to get the random colors
	var thesquares = $('.square');
	return thesquares;
}

function tweak(elem) {
	/* this script originally used opacity to change the 'color' of the squares.
		i guess most browsers aren't ready for that yet. but your kids
		are going to love it! altering it to use rgb color instead.
	opac = 1-(Math.random()/1.5);
	//elem.animate({
	//	opacity: 1-(Math.random()/1.5)
	//},2000,"swing");
	//elem.fadeTo("slow",1-(Math.random()/1.5))
	// both animate and fadeTo eat CPU for breakfast. ouch!
	elem.css("opacity",opac); /* */

	back = $("#effects").css("background-color");
	if(back.charAt(0) == "#" || back.length == "6") {
		back = hex2num(back);
	} else {
		back = back.replace("rgb(","").replace(")","").split(",");

	}

	front = $("body").css("background-color");
	if(front.charAt(0) == "#" || front.length == "6") {
		front = hex2num(front);
	} else {
		front = front.replace("rgb(","").replace(")","").split(",");
	}


	var rnd = Math.random();
	// round ( ( abs val of (front val less back val) times random ) plus smaller of front val or back val
	var r = Math.round((Math.abs(front[0]-back[0])*rnd) + Math.min(front[0], back[0]));
	var g = Math.round((Math.abs(front[1]-back[1])*rnd) + Math.min(front[1], back[1]));
	var b = Math.round((Math.abs(front[2]-back[2])*rnd) + Math.min(front[2], back[2]));
	elem.css("background","rgb(" + r + "," + g + "," + b + ")");
}


// http://www.openjs.com/scripts/graphics/hex_color_rbg_value_converter.php
//Convert a hex value to its decimal value - the inputted hex must be in the
//	format of a hex triplet - the kind we use for HTML colours. The function
//	will return an array with three values.
function hex2num(hex) {
	if(hex.charAt(0) == "#") hex = hex.slice(1); //Remove the '#' char - if there is one.
	hex = hex.toUpperCase();
	var hex_alphabets = "0123456789ABCDEF";
	var value = new Array(3);
	var k = 0;
	var int1,int2;
	for(var i=0;i<6;i+=2) {
		int1 = hex_alphabets.indexOf(hex.charAt(i));
		int2 = hex_alphabets.indexOf(hex.charAt(i+1)); 
		value[k] = (int1 * 16) + int2;
		k++;
	}
	return(value);
}
//Give a array with three values as the argument and the function will return
//	the corresponding hex triplet.
function num2hex(triplet) {
	var hex_alphabets = "0123456789ABCDEF";
	var hex = "#";
	var int1,int2;
	for(var i=0;i<3;i++) {
		int1 = triplet[i] / 16;
		int2 = triplet[i] % 16;

		hex += hex_alphabets.charAt(int1) + hex_alphabets.charAt(int2); 
	}
	return(hex);
}


$(document).ready(function() {	
	var squares = draw();
	for(var y = 0; y < squares.length; y++) {
		tweak($(squares[y]));
	}

	$("#toolscontent").hide();
	$("#text-339374831 .widgettitle").click(function(){
		$("#toolscontent").slideToggle("normal");
	});

	// var wid = $(window).width();
	// 	$("#effects").width(wid);

	if(shouldTweak) {
		$("body").mousemove(function(e) {
			pick = Math.round(squares.length*Math.random());
			tweak($(squares[pick]));
		});
	};
});