var box = new Array();
box["width"] = 42;
box["height"] = 65;
box["border"] = 1;
box["borderColor"] = "#ffffff";
box["colors"] = new Array();
box["colors"][1] = "#F9D900";
box["colors"][2] = "#EE7F00";
box["colors"][3] = "#E2001A";
box["colors"][4] = "#F5B3B3";
box["colors"][5] = "#97BF0D";
box["colors"][6] = "#A4D8E3";
box["colors"][7] = "#00AEC7";


var backColor = new Array();
backColor[1] = "#4b4b4d";



function randomRange(low,high) {
  return Math.floor(Math.random() * (1+high-low)) + low;
}
	

$(function() {
	init();
	$(".kachelLink").mouseenter(function () {
		$(this).stop().fadeTo(500,1);
	});
	$(".kachelLink").mouseleave(function () {
		$(this).stop().fadeTo(500,0.0);
	});
	
	$(".kachelLink").click(function() {
		$("#content").show(500);
		$(".content").slideUp(500);
		$("#"+$(this).attr("id")+"_content").slideDown(500);
	});
	
	$("#dn3").click(function() {
		$("#content").hide(500, function() {update()});
	})
	
});

$(window).resize(function() { centerIt("container"); });

function init() {
	
	centerIt("container");
	var w = $("#boxes").innerWidth();
	var h = $("#boxes").innerHeight();

	var boxCountX = Math.floor(w/box["width"]);
	
	var boxCountY = Math.floor(h/box["height"]);
	
	var boxCount = Math.floor(boxCountX*boxCountY);
	
	var foo = 0;
	$("#boxes").html("");
	for (var i = 1; i <= boxCount; i++ ) {
		
		
		$("#boxes").prepend("<div class='kachel'></div>");
	}
	$(".kachelLink").delay(1000).effect("explode", {},600, function() {
		$(".kachelLink").fadeTo(1000,0.0).css("display","block");
	});
	
	dnBackground(0);
	update();

}
var foo = 4;
function update () {
	
	
	var colorCount = $(box["colors"]).size()-1;
	var bar = foo;
	$(".kachel").each(function() {
		/*if (bar == 3) {*/
			color = randomRange(1, colorCount);
			randColor = box["colors"][color];
			$(this).css("backgroundColor",randColor);
			bar = 1;
		/*} else {
			$(this).css("backgroundColor","#ffffff");
			bar = 1;
		}*/
	});
	/*if (foo == 1) {
		foo = 0;
	} else {
		foo = 1;
	}*/
	var change = $("#content").css("display");
	if (change != "block") {
		window.setTimeout("update()", 1000);
	}
}

function dnBackground (i) {
	/*
	$("#background2").fadeIn(800, function() {
		
		$("#background1").css("backgroundColor", backColor[i]);
		
		$("#background2").delay(3000).fadeOut(1000, function() {
			var next;
			if (i == $(backColor).size()-1) {
				next = 0;
			} else {
				next = i+1;
			}
			$("#background2").css("backgroundColor", backColor[next]);
			dnBackground (next++);
		})
	})
	*/
}