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




function init()
{
	drawThumbnail();

	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 drawThumbnail(json, area)
	{
		var json = archive;

		for (var data = 0; data < json.length; data++)
		{
			var scapes = $("#scapes ol");
			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 label = $('<p class="label"><strong>' + json[data]["title"] + '</strong><br /><em>by ' + json[data]["name"] + '</em></p>');
			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)
				.append(label)
				.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();
				}
			}
		}
	}
}

$(init);