var expanded = "";
var beginHeight;
$(document).ready(function() {
	beginHeight = $(document).height();
});

function expand(jquery, dir, ignoreHeight)
{
	var amount = 170;  // in pixels
	var speed = 250;  // in miliseconds
	
	var id = $(jquery).attr("id");
	
	// dir will be undefined if we want to toggle, otherwise you can specifically pass in 1 or 0
	// for open or close
	if(dir == undefined)
	{
		// opening if we're not curenntly open
		dir = (id != expanded);
		
		// if something else is open, close it now
		if(dir && expanded != "")
			expand($("#"+expanded), 0, 1);
		
		// update the currently opened box
		expanded = (dir ? id : "");
	}
	
	// add or subtract from the various amounts based on what direction we're moving
	var outPlus = dir ? "+" : "-";
	var outMinus = dir ? "-" : "+";
	
	// while the animation is running, set the zindex to higher than the rest of the boxes.
	// opening boxes are more important than closing boxes.
	$(jquery).css("z-index", dir ? 14 : 13);
	

	if(dir)
		$(jquery).find("img").attr("src", dir ? expandInfo[id][3] : expandInfo[id][0]);
	/*
	$(jquery).children().attr("width", dir ?  : expandInfo[id][1]);
	$(jquery).children().attr("height", dir ? expandInfo[id][5] : expandInfo[id][2]);
	
	var h =
	
	imgRel = $(jquery).children().attr("rel");
	imgSrc = $(jquery).children().attr("src");
	$(jquery).children().attr("rel", imgSrc);
*/

	var wAmount = expandInfo[id][4] - expandInfo[id][1];
	var hAmount = expandInfo[id][5] - expandInfo[id][2];

	var rel = $(jquery).attr("rel");
	var css = null;

	if(rel == "topRight")
	{
		css = { marginLeft: outPlus+"="+(expandInfo[id][6]),
	 		marginTop: outMinus+"="+(hAmount + expandInfo[id][7]),
	 		height: outPlus+"="+hAmount,
	 		width: outPlus+"="+wAmount }
	}
	else if(rel == "topCenter")
	{
		css = {
	 		marginLeft: outMinus+"="+(Math.floor(wAmount/2) + expandInfo[id][6]),
	 		marginTop: outMinus+"="+(hAmount + expandInfo[id][7]),
	 		height: outPlus+"="+hAmount,
	 		width: outPlus+"="+wAmount
		};
	}
	else if(rel == "topLeft")
	{
		css = {
	 		marginLeft: outMinus+"="+(wAmount + expandInfo[id][6]),
	 		marginTop: outMinus+"="+(hAmount + expandInfo[id][7]),
	 		height: outPlus+"="+hAmount,
	 		width: outPlus+"="+wAmount
		};
	}
	else if(rel == "left")
	{
		css = {
	 		marginLeft: outMinus+"="+(wAmount + expandInfo[id][6]),
	 		marginTop: outMinus+"="+(Math.floor(hAmount/2) + expandInfo[id][7]),
	 		height: outPlus+"="+hAmount,
	 		width: outPlus+"="+wAmount
		};
	}
	else if(rel == "right")
	{
		css = {
	 		marginLeft: outPlus+"="+(wAmount + expandInfo[id][6]),
	 		marginTop: outMinus+"="+(Math.floor(hAmount/2) + expandInfo[id][7]),
	 		height: outPlus+"="+hAmount,
	 		width: outPlus+"="+wAmount
		};
	}
	else  // "center", effectively
	{
		css = {
	 		marginLeft: outMinus+"="+(Math.floor(wAmount/2) + expandInfo[id][6]),
	 		marginTop: outMinus+"="+(Math.floor(hAmount/2) + expandInfo[id][7]),
	 		height: outPlus+"="+hAmount,
	 		width: outPlus+"="+wAmount
		};
	}
	
	var currentHeight = $(document).height();
	
	// when we're done animating, an open box should be higher than the page,
	// but a closed box should return to the page depth.
	$(jquery).animate(css, speed, function() {
		$(jquery).css("z-index", dir ? 5 : expandInfo[id][8]);
	});
	
	
	// the contents of the box should also grow/shrink
	$(jquery).find("img").animate({
 		height: outPlus+"="+hAmount,
 		width: outPlus+"="+wAmount
	}, speed, function() {
		if(!dir)
			$(jquery).find("img").attr("src", dir ? expandInfo[id][3] : expandInfo[id][0]);
			
		if(!ignoreHeight)
		{
			var endHeight;
			if(!dir)
			{
				endHeight = beginHeight;
			}
			else
			{
				endHeight = $(document).height();
			}
			
			var bodyHeight = $("body").height() + (endHeight - currentHeight);
			
			if(endHeight > currentHeight)
			{
				$("body").height(bodyHeight);
			}
			else
			{
				$("body").animate({
					height: bodyHeight
				}, speed, function() {
				});
			}
				
		}
	});
	
}