$(document).ready(function () {

	
	// prep for IE6 (requires width/height values in home grid
	if ($.browser.msie && $.browser.version < 7) {
		var ie6 = true;
		$('.text-box').css({'width':240, 'height':0});
		$('.grid-box').css({'width':240, 'height':264});
	}
	
	jQuery.easing.def = "easeOutCubic";
	var showSpeed = 800;
	var hideSpeed = showSpeed / 2;
	var gw = 480;	// grid width
	var gh = 264;	// grid height
	var gu = 120;	// grid unit

	$(".grid-link").each(function(i,gridlink) {
		
		// set elements
		var gridEl  = $("#grid-" + i);
		var gridImg = $("#grid-" + i + " img");
		var gridTxt	= $("#text-" + i);
		
		// Establish variables
		var gridEndL;
		var gridEndR;
		var gridEndT;
		var gridEndB;
		var gridW;
		var gridH;
		var textStartL;
		var textStartR;
		var textStartT;
		var textStartB;
		var textEndL;
		var textEndR;
		var textEndT;
		var textEndB;
		var textXDir;
		var textYDir;
		var gridRow;
		var gridCol;
		var orientation;
		var hUnits;
		var vUnits;
		
		
		gridRow = 0;
		gridCol = (i + 6) % 6;
		
		
			orientation = 'portrait';
			hUnits		= 2;
			vUnits		= 1;

			// img spans full height
			gridEndT = 0;
			gridEndB = 0;
			gridW = 2 * gu;
			gridH = 1 * gu;
			
			// text is on top
			textEndT 	= 0;
			textEndB 	= 0;
			textStartT	= 0;
			textStartB	= 3 * gu;
			
			if (gridCol == 3 || gridCol == 1) {				// Handle img going left
				gridEndL = ((gridCol - hUnits + 1) * gu);
				gridEndR = (gw - ((gridCol + 1) * gu));
			} else {										// Handle img going right
				gridEndL = (gridCol * gu);
				gridEndR = (gw - ((gridCol + hUnits) * gu));
			}
			
			if (gridCol >= 2) {								// Handle text on left
				textEndL = gridEndL - (2 * gu);
				textEndR = gw - gridEndL;
			} else {										// Handle text on right
				textEndL = gw - gridEndR;
				textEndR = gridEndR - (2 * gu);
			}
			
			if (gridCol == 2 || gridCol == 3) {				// Handle text opening to the right
				textStartL = textEndL;
				textStartR = textEndR + (3 * gu);
			} else {										// Handle text opening to the left
				textStartL = textEndL + (3 * gu);
				textStartR = textEndR;
				gridTxt.find("div").css({
					'left' : 'auto',
					'right' : '0px'
				});
			}
		
		
		// Initialize start positions for text box in DOM
		gridTxt.css({
			'left' : textStartL,
			'right' : textStartR,
			'top' : textStartT,
			'bottom' : textStartB
		});
		
		// set link data and functions	
		$(gridlink)
			.data("grid", { 
				grid: gridEl,
				img: gridImg,
				imgL: gridImg.css("left"),
				imgT: gridImg.css("top"),
				orientation: orientation,
				gridRow: gridRow,
				gridCol: gridCol,
				gridStartL: gridEl.css("left"),
				gridStartR: gridEl.css("right"),
				gridStartT: gridEl.css("top"),
				gridStartB: gridEl.css("bottom"),
				gridEndL: gridEndL,
				gridEndR: gridEndR,
				gridEndT: gridEndT,
				gridEndB: gridEndB,
				gridW: gridW,
				gridH: gridH,
				text: gridTxt,
				textEndL: textEndL,
				textEndR: textEndR,
				textEndT: textEndT,
				textEndB: textEndB,
				textStartL: textStartL,
				textStartR: textStartR,
				textStartT: textStartT,
				textStartB: textStartB
			})
			.hover(
				// HOVER STATE
				function () {
					
					// set the objects for animationn
					var gridAnimObj = {
						left: $(this).data("grid").gridEndL,
						right: $(this).data("grid").gridEndR,
						top: $(this).data("grid").gridEndT,
						bottom: $(this).data("grid").gridEndB
						};
					var textAnimObj = {
						left: $(this).data("grid").textEndL,
						right: $(this).data("grid").textEndR,
						top: $(this).data("grid").textEndT,
						bottom: $(this).data("grid").textEndB
						};
					
					// also animate width/height in IE6
					if (ie6) {
						gridAnimObj.width = gridW;
						gridAnimObj.height = gridH;
						textAnimObj.width = 3 * gu;
						textAnimObj.height = gu;
					}
					
					$(this).data("grid").grid
						.stop(true)
						.css("z-index",2000)
						.animate(gridAnimObj, showSpeed );
					$(this).data("grid").img
						.stop(true)
						.animate({ 
							left: 0,
							top: 0
						}, showSpeed );					
					$(this).data("grid").text
						.stop(true)
						.css("z-index",1900)
						.show()
						.animate(textAnimObj, showSpeed );
				},
				// OFF STATE
				function () {
					
					// set the objects for animationn
					var gridAnimObj = {
						left: $(this).data("grid").gridStartL,
						right: $(this).data("grid").gridStartR,
						top: $(this).data("grid").gridStartT,
						bottom: $(this).data("grid").gridStartB
						};
					var textAnimObj = {
						left: $(this).data("grid").textStartL,
						right: $(this).data("grid").textStartR,
						top: $(this).data("grid").textStartT,

						bottom: $(this).data("grid").textStartB
						};
					
					// also animate width/height in IE6
					if (ie6) {
						gridAnimObj.width = gu;
						gridAnimObj.height = gu;
						textAnimObj.width = gu;
						textAnimObj.height = 0;
					}
					
					$(this).data("grid").grid
						.stop(true)
						.css("z-index",1700)
						.animate(gridAnimObj, hideSpeed, function() {
							$(this).css("z-index",100)
						});
					$(this).data("grid").img
						.stop(true)
						.animate({ 
							left: $(this).data("grid").imgL,
							top: $(this).data("grid").imgT
						}, hideSpeed );
					$(this).data("grid").text
						.stop(true)
						.css("z-index",1600)
						.animate(textAnimObj, hideSpeed, function() {
							$(this).hide()
						});
				}
			);
		
	});

});