var innovationBoxes = [];

//***** event listeners ***//
$(document).ready(document_Ready);

function assignBoxListeners()
{
	$.each(innovationBoxes,
		function()
		{
			$(this).mouseover(
				function()
				{
					setTopBox($(this));
				}
			);
		}
	);
}


function setTopBox(topBox)
{
	// move current box to top
	$.each(innovationBoxes,
		function()
		{
			if($(this).attr("id") != topBox.attr("id"))
			{
				$(this).css("z-index", 2);
				setBoxOff($(this));
			}
			else
			{
				$(this).css("z-index", 8);
				setBoxOn($(this));
			}
		}
	);
}

function setBoxOn(box)
{
	box = $($(box.children()[0]).children()[0]);
	box.children(".innovationBoxBannerOff")
			.removeClass("innovationBoxBannerOff")
			.addClass("innovationBoxBannerOn")
}
function setBoxOff(box)
{
	box = $($(box.children()[0]).children()[0]);
	box.children(".innovationBoxBannerOn")
			.removeClass("innovationBoxBannerOn")
			.addClass("innovationBoxBannerOff")
}

function arrangeBoxes()
{
	setBoxPosition(innovationBoxes[0], -300, 0);
	setBoxPosition(innovationBoxes[1], 1100, 0);
	setBoxPosition(innovationBoxes[2], 189, -500);
	setBoxPosition(innovationBoxes[3], 1000, 800);
	setBoxPosition(innovationBoxes[4], 128, 1000);
	
	var objDur = 1000;
	animateObject(innovationBoxes[0], {x:21,y:0}, objDur);
	animateObject(innovationBoxes[1], {x:0,y:85}, objDur);
	animateObject(innovationBoxes[2], {x:189,y:58}, objDur);
	animateObject(innovationBoxes[3], {x:230,y:150}, objDur);
	animateObject(innovationBoxes[4], {x:100,y:205}, objDur);
}

function animateObject(obj, to, duration)
{
	$(obj).animate(
		{
			'left': to.x,
			'top': to.y
		},
		{
			'duration': duration
		}
	);
}


function setBoxPosition(box, left, top)
{
	$(box).css(
		{
			"top": top,
			"left": left,
			"display": "block"
		}
	);
}

function initializeShadows()
{
	for(var i=1; i <= innovationBoxes.length; i++)
	{
		$("#shadowBox_" + i).height($("#individualBox_" + i).height());
		$("#shadowBox_" + i).width($("#individualBox_" + i).width() - 10);
	}
}


//****** event handlers *****//
function document_Ready()
{
	//$(".pageTitle").css("display", "none");
	//$("#rightSubImage").css("display", "none");
	
	$(".shadowBox").css("opacity", .33);
	
	innovationBoxes = $("#innovationsContainer").children();
	
	initializeShadows();
	arrangeBoxes();
	assignBoxListeners();
	
	setBoxOn($(innovationBoxes[4]));
}