var GRID_SPACING = 4;
var SELECTION_OFFSET_X = 2;
var SELECTION_OFFSET_Y = 5;




function init()
{
	drawThumbnail(recent, $("#recent"));
	drawThumbnail(popular, $("#popular"));

	$(".buttons").each(function()
		{
			this.currIndex = -1;
		}
	);
	
	$(".buttons .down a").click(clickDown).click();
	$(".buttons .up a").click(clickUp);
	
	function clickDown()
	{
		var $this = $(this);
		
		var $buttons = $this.parents(".buttons");
		var buttons = $buttons.get(0);
		
		if (typeof buttons.currIndex == "undefined")
		{
			buttons.currIndex = 0;
		}

		var scapes = $this.parents(".buttons").siblings(".scapes");
		var listItem = $("li", scapes);
		
		if (buttons.currIndex < listItem.length - 1)
		{
			clearLabelThumbnail(scapes);
		
			var itemHeight = listItem.height() + parseInt(listItem.css("marginBottom"));
			
			listItem.eq(buttons.currIndex).animate(
				{
					"opacity": 0.5
				},
				600
			);
			
			listItem.eq(buttons.currIndex + 1).animate(
				{
					"opacity": 1
				},
				300
			);
			
			$("ol", scapes)
				.stop()
				.animate(
					{
						"top": ++buttons.currIndex * -itemHeight
					},
					600,
					function()
					{
						labelThumbnail(scapes);
					}
				);
		}
		
		if (buttons.currIndex >= listItem.length - 1)
		{
			$this.parents(".down").addClass("off");
		}
		
		if (buttons.currIndex > 0)
		{
			$this.parents(".down").siblings(".up").removeClass("off");
		}

		return false;
	};
	
	function clickUp()
	{
		var $this = $(this);
		
		var $buttons = $this.parents(".buttons");
		var buttons = $buttons.get(0);
		
		if (typeof buttons.currIndex == "undefined")
		{
			buttons.currIndex = 0;
		}

		var scapes = $this.parents(".buttons").siblings(".scapes");
		var listItem = $("li", scapes);

		if (buttons.currIndex > 0)
		{
			clearLabelThumbnail(scapes);
		
			var itemHeight = listItem.height() + parseInt(listItem.css("marginBottom"));
			
			listItem.eq(buttons.currIndex).animate(
				{
					"opacity": 0.5
				},
				600
			);
			
			listItem.eq(buttons.currIndex - 1).animate(
				{
					"opacity": 1
				},
				300
			);
			
			$("ol", scapes)
				.stop()
				.animate(
					{
						"top": --buttons.currIndex * -itemHeight
					},
					600,
					function()
					{
						labelThumbnail(scapes);
					}
				);
		}

		if (buttons.currIndex <= 0)
		{
			$this.parents(".up").addClass("off");
		}
		
		if (buttons.currIndex < listItem.length - 1)
		{
			$this.parents(".up").siblings(".down").removeClass("off");
		}

		return false;
	};

	function labelThumbnail(scapes)
	{
		var currIndex = scapes.siblings(".buttons").get(0).currIndex;
		
		if (typeof currIndex == "undefined")
		{
			currIndex = 0;
		}

		var json = recent;
		
		if (scapes.parents("#popular").length > 0)
		{
			json = popular;
		}
		
		var label = $('<p class="label"></p>');
		label
			.html('<strong>' + json[currIndex]["title"] + '</strong><br /><em>by ' + json[currIndex]["name"] + '</em>')
			.css("opacity", 0)
			.appendTo($("li", scapes).eq(currIndex))
			.animate(
				{
					"opacity": 1
				},
				1000
			)
	};
	
	function clearLabelThumbnail(scapes)
	{
		$(".label", scapes)
			.stop()
			.animate(
			{
				"opacity": 0
			},
			250,
			function()
			{
				$(this).remove();
			}
		);
	};
	
	function drawThumbnail(json, area)
	{
		for (var data = 0; data < json.length; data++)
		{
			var scapes = $(".scapes ol", area);
			var listItem = $('<li></li>');
			var canvas = $('<div class="canvas"></div>');
			var shadows = $('<div class="shadows"></div>');
			var anchor = $('<a href="load.php?id=' + json[data]["id"] + '" title="View the full screen version"></a>');
			var cubesHTML = "";
			var shadowsHTML = "";
	
			var minX = null;
			var maxX = null;
			var minY = null;
			var maxY = null;
			
			for (var row = 0; row < json[data]["cubes"].length; row++)
			{
				if (typeof json[data]["cubes"][row] != "undefined")
				{
					for (var col in json[data]["cubes"][row])
					{
						for (var stack = 0; stack < json[data]["cubes"][row][col].length; stack++)
						{
							col = parseInt(col);
							
							var cubePlacement = placeCube(row, col, stack, json[data]["cubes"][row][col][stack].colour);
							cubesHTML += cubePlacement.cubeHTML;
							shadowsHTML += cubePlacement.shadowHTML;
							
							if (minX == null || minX.row + minX.col > row + col)
							{
								var minX = {row: row, col: col};
							}
							
							if (maxX == null || maxX.row + maxX.col < row + col)
							{
								var maxX = {row: row, col: col};
							}
	
							if (minY == null || minY.row - minY.col > (row + stack) - (col + stack))
							{
								var minY = {row: row + stack, col: col + stack};
							}
	
							if (maxY == null || maxY.row - maxY.col < row - col)
							{
								var maxY = {row: row, col: col};
							}
						}
					}
				}
				
//				checkShadows(json[data]["cubes"][row], row, canvas);
			}

			if (minX == null)
			{
				minX = {row: 0, col: 0}
			}
			if (maxX == null)
			{
				maxX = {row: 0, col: 0}
			}
			if (minY == null)
			{
				minY = {row: 0, col: 0}
			}
			if (maxY == null)
			{
				maxY = {row: 0, col: 0}
			}
			
			canvas.append(cubesHTML);
			shadows.html(shadowsHTML);
			
			var leftSide = minX.row * GRID_SPACING + minX.col * GRID_SPACING - SELECTION_OFFSET_X;
			var rightSide = maxX.row * GRID_SPACING + maxX.col * GRID_SPACING - SELECTION_OFFSET_X;
			var topSide = (maxY.row * (GRID_SPACING / 2)) - (maxY.col * (GRID_SPACING / 2)) - SELECTION_OFFSET_Y;
			var bottomSide = (minY.row * (GRID_SPACING / 2)) - (minY.col * (GRID_SPACING / 2)) - SELECTION_OFFSET_Y;
			
			var adjustLeft = -(Math.round((rightSide - leftSide) / 2) + leftSide - 100);
			var adjustTop = -(Math.round((topSide - bottomSide) / 2) + bottomSide - 100);
	
			canvas.css("left", adjustLeft);
			canvas.css("top", adjustTop);
	
			shadows.css("left", adjustLeft);
			shadows.css("top", adjustTop);
			
			listItem
				.append(anchor)
				.append(shadows)
				.append(canvas)
				.appendTo(scapes)
		}
	};

	function placeCube(row, col, stack, selectedColour)
	{
		var MAX_CUBE_HEIGHT = 10;
		
		var targetX = row * GRID_SPACING + col * GRID_SPACING - SELECTION_OFFSET_X;
		var targetY = (row * (GRID_SPACING / 2)) - (col * (GRID_SPACING / 2)) - SELECTION_OFFSET_Y;

		var stackHeight = stack * GRID_SPACING;

		var shadowHTML = "";
		
		if (selectedColour != "coloursTransparent")
		{
			shadowHTML = '<div class="shadow" style="left: ' + (targetX + stackHeight + GRID_SPACING) + 'px; top: ' + (parseInt(targetY + 3 - stackHeight / 2)) + 'px;"></div>';
		}

		return {
			cubeHTML: '<div class="cube cube' + selectedColour + '" style="left: ' + targetX + 'px; top: ' + (targetY - stackHeight) + 'px; z-index: ' + (row * 100 - col) + ';"></div>',
			shadowHTML: shadowHTML
		};
	};
	
	function checkShadows(row, rowNum, canvas)
	{
		var minCol = 0;
		
		for (var col in row)
		{
			if (parseInt(col) < minCol)
			{
				minCol = parseInt(col);
			}
		}

		for (var col in row)
		{
			col = parseInt(col);
			
			for (var height = 0; height < row[col].length; height++)
			{
				var unshadowed = true;
				
				/* Items that shadow it */
				for (var i = col - 2, j = height + 2; i >= minCol; j++, i--)
				{
					if (typeof row[i] != "undefined" && row[i].length >= j && !$("#" + row[i][j - 1].id).hasClass("cubecoloursTransparent"))
					{
						unshadowed = false;
						
						if ($(".row" + rowNum + "col" + col, canvas).length == 0)
						{
							var rowElement = $('<div class="row row' + rowNum + 'col' + col + '"></div>');
							rowElement.prependTo(canvas).css("zIndex", rowNum * 100 + col + 1)
						}
						
						if ($("vShadow" + row[col][height].id.replace(/cube/, ""), canvas).length == 0)
						{
							var verticalShadow = $('<div class="shadow vShadow vShadow' + row[col][height].id.replace(/cube/, "") + '"></div>');

							verticalShadow
								.appendTo($(".row" + rowNum + "col" + col, canvas))
								.css("left", rowNum * GRID_SPACING + col * GRID_SPACING - SELECTION_OFFSET_X)
								.css("top", (rowNum * (GRID_SPACING / 2)) - (col * (GRID_SPACING / 2)) - 2 - ((height) * GRID_SPACING))
								.css("opacity", 0.99)
						}
								
						break;
					}
				}
				
				if (unshadowed)
				{
					$(".vShadow" + row[col][height].id.replace(/cube/, ""), canvas).remove();
				}
			}
		}
	}
	
	function animateButton()
	{
		var outer = $("#getCubing .outer");
		
		outer.animate(
			{
				"left": 12,
				"top": 23
			},
			2000,
			"linear",
			function()
			{
				outer.animate(
					{
						"left": 21,
						"top": 28
					},
					1500,
					"linear",
					function()
					{
						outer.animate(
							{
								"left": 27,
								"top": 18
							},
							1500,
							"linear",
							function()
							{
								outer.animate(
									{
										"left": 21,
										"top": 12
									},
									1500,
									"linear",
									animateButton
								);
							}
						);
					}
				);
			}
		);
	};
	
	animateButton();
}

$(init);