$(document).ready(function () {
	
	
	function GetEndL(i)
	{
		switch(i)
		{
			case 1:
			case 3:
			case 5:
			case 7:
			case 9:
			case 11:
			case 13:
			case 15:
				return 450;
				break;
			case 2:
			case 6:
			case 10:
			case 14:
			case 0:
			case 4:
			case 8:
			case 12:
				return 300;
				break;
		}
	}
	
	function GetEndR(i)
	{
		switch(i)
		{

			case 2:
			case 6:
			case 10:
			case 14:
			case 0:
			case 4:
			case 8:
			case 12:
				return 150;
				break;
			case 1:
			case 5:
			case 9:
			case 13:
			case 3:
			case 7:
			case 11:
			case 15:
				return 0;
				break;		
		}
		
	}
	
	function GetEndT(i)
	{
		switch(i)
		{
			case 0:
			case 1:
			case 2:
			case 3:
			case 4:
			case 5:
			case 6:
			case 7:
				return 0;
				break;
			case 8:
			case 9:
			case 10:
			case 11:
			case 12:
			case 13:
			case 14:
			case 15:
				return 300;
				break;
		}
		
	}
	
	function GetEndB(i)
	{
		switch(i)
		{
			case 0:
			case 1:
			case 2:
			case 3:
			case 4:
			case 5:
			case 6:
			case 7:
				return 300;
				break;
			case 8:
			case 9:
			case 10:
			case 11:
			case 12:
			case 13:
			case 14:
			case 15:
				return 0;
				break;
		}
	}
	
	$(".imgswap").each(function(i,imgSwap) {	

		// set elements
		var showSpeed = 800;
		var hideSpeed = showSpeed / 2;
		var gw = 600;	// grid width
		var gh = 600;	// grid height
		var gu = 150;	// grid unit
	
		var gridEl  = $("#grid-" + i);
		var gridImg = $("#grid-" + i + " img");
		var gridTxt	= $("#text-" + i);
	
		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;
			
		if (i < 3) { 
			gridRow = 0;
		} else if (i < 6) {
			gridRow = 1;
		} else if (i < 12) {
			gridRow = 2;
		}
		 else {
			gridRow = 3;
		}
		
		gridCol=4;
		
		gridEndL = GetEndL(i);//450;
		gridEndR = GetEndR(i); //0;
		gridEndT = GetEndT(i); //0;
		gridEndB = GetEndB(i); //300;
		
		textEndL = GetEndL(i);
		textEndR = GetEndR(i);
		
		if (i > 7 && i < 12)
		{
			textEndT = GetEndB(i)+150;
			textEndB = GetEndB(i)/2;
		} else if (i > 11)
		{
			textEndT = GetEndB(i)+150;
			textEndB = GetEndB(i)+300;
			
		} else { 
			textEndT = GetEndB(i);
			textEndB = GetEndB(i)/2;
		}
		
				
		
		/* END LANDSCAPE */
		
		$(imgSwap).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: gridTxt.css("left"),
				textStartR: gridTxt.css("right"),
				textStartT: gridTxt.css("top"),
				textStartB: gridTxt.css("bottom")
				
			});
			
		$(imgSwap)
		.hover(function() {		
		
			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
				};
					
					
			$(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 ()
		{
			
			
		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
			};
			
		$(this).data("grid").grid
			.stop(false)
			.css("z-index",1700)
			.animate(gridAnimObj, hideSpeed, function() {
				$(this).css("z-index",100)
			});
			
		$(this).data("grid").img
			.stop(false)
			.animate({ 
				left: $(this).data("grid").imgL,
				top: $(this).data("grid").imgT
			}, hideSpeed );
			
		$(this).data("grid").text
			.stop(false)
			.css("z-index",1600)
			.animate(textAnimObj, hideSpeed, function() {
				$(this).hide()
			});			
		
			
		} );
		
	});
	
});