function whenReady()
{
	var area = null;
	selectArea(area);
	
	$("#white").mouseenter(function()
	{
		area = "white";
		selectArea(area);
	});
	
	$("#white").mouseleave(function()
	{
		area = null;
		selectArea(area);
	});
	
	$("#black").mouseenter(function()
	{
		area = "black";
		selectArea(area);
	});
	
	$("#black").mouseleave(function()
	{
		area = null;
		selectArea(area);
	});
	
	$(window).resize(function()
	{
		selectArea(area);
	});
}

function selectArea(area)
{
	var windowWidth = $(window).width();
	var windowHeight = $(window).height();
	var windowThird = windowWidth / 3;
	var tagWhiteWidth = 100;
	var tagBlackWidth = 100;
	
	switch(area)
	{
		case "white":
		var whiteWidth = Math.ceil(windowThird * 2);
		var whiteHeight = windowHeight;
		var whiteX = Math.ceil((whiteWidth / 2) - (tagWhiteWidth / 2));
		var whiteY = Math.ceil((whiteHeight / 2) - 15);
		var blackWidth = Math.ceil(windowThird);
		var blackHeight = windowHeight;
		var blackX = Math.ceil((blackWidth / 2) - (tagBlackWidth / 2));
		var blackY = Math.ceil((blackHeight / 2) - 15);
		break;
		
		case "black":
		var whiteWidth = Math.ceil(windowThird);
		var whiteHeight = windowHeight;
		var whiteX = Math.ceil((whiteWidth / 2) - (tagWhiteWidth / 2));
		var whiteY = Math.ceil((whiteHeight / 2) - 15);
		var blackWidth = Math.ceil(windowThird * 2);
		var blackHeight = windowHeight;
		var blackX = Math.ceil((blackWidth / 2) - (tagBlackWidth / 2));
		var blackY = Math.ceil((blackHeight / 2) - 15);
		break;
		
		default:
		var whiteWidth = Math.ceil(windowThird * 1.5);
		var whiteHeight = windowHeight;
		var whiteX = Math.ceil((whiteWidth / 2) - (tagWhiteWidth / 2));
		var whiteY = Math.ceil((whiteHeight / 2) - 15);
		var blackWidth = Math.ceil(windowThird * 1.5);
		var blackHeight = windowHeight;
		var blackX = Math.ceil((blackWidth / 2) - (tagBlackWidth / 2));
		var blackY = Math.ceil((blackHeight / 2) - 15);
		break;
	}
	
	$("#white").stop().animate(
	{
		width: whiteWidth - whiteX,
		height: whiteHeight - whiteY,
		"padding-top": whiteY,
		"padding-left": whiteX
	}, 250, "easeOutExpo");
	
	$("#black").stop().animate(
	{
		width: blackWidth - blackX,
		height: blackHeight - blackY,
		"padding-top": blackY,
		"padding-left": blackX
	}, 250, "easeOutExpo");
}