var ALL_STYLEPACKS = [];
var STYLEPACKS_BY_ID = {};
var STORE_PAGE_REDIR = '';
var ADDTOCART_BUTTON = false; //'<a title="Add to Cart" class="atc button btn_add_to_cart"><div class="btn_left"></div><div class="btn_bg"><div>Add to Cart</div></div><div class="btn_right"></div></a>';

function addPackToCart( evt )
{
	evt.preventDefault();

	$(".popup_box.status").jqmShow();

	$.getAny($(this).attr("href"), function(){
		location.href = STORE_PAGE_REDIR || '/en/store/';
	});
}

function _loadStylePreviews(evt)
{
	getPreviews(evt.data);
}

function showPacksInGrid()
{
	$("#packs-settings .view-type .icon").attr("title", "Show style packs in list view");
	
	var packs = filterPacks();
	
	var gridContainer = $("#packs-grid").empty().show();
	
	// TODO: enable caching of formatted list, so we don't manipuate every timeemerge -C 
	
	var hasNew = false;
	var hasSuperStyle = false;

	var rowSize = 5;
	var isNewRow = $([]);
	var packRow = null;
	var buyRow = null;
	
	var idx;
	for ( idx=0; idx <packs.length; idx++ )
	{
		if (0 == idx % rowSize)
		{
			if (!hasNew)
			{
				// we delete the previous hasNew row if there was no "new" stylepack
				isNewRow.remove();	
			}
			
			if (idx)
			{
				// when we have already a full row of styles
				// we need a horizontal separator
				$('<tr class="hseparator"><td colspan="' + rowSize + '"><div /></td></tr>').appendTo(gridContainer);
			}
			
			// now prepare the rows for the next 5 styles
			hasNew = false;
			isNewRow = $('<tr class="isnew-row" />').appendTo(gridContainer);
			packRow = $('<tr class="pack-row" />').appendTo(gridContainer);
			buyRow = $('<tr class="buy-row" />').appendTo(gridContainer);
		}
		
		var isNew = $('<td />').appendTo(isNewRow);
		if (packs[idx].IsNew)
		{
			hasNew = true;
			isNew.append('<div class="sp_isnew" />');
		}
		
		// add pack to row
		var pack = $('<td />')
			.addClass( packs[idx].Id )
			.append( 
				$('<a class="preview-pic"><div class="play" /></a>')
					.css("background-position", packs[idx].SpriteOffset)
					.bind('click', packs[idx].Id, _loadStylePreviews)
					//for event tracking
					.bind("click", {cat:'PreviewStylePack_' + packs[idx].Name.replace(/ /g, ''), label:'img_PreviewStylePack'}, trackBindEvent)										
			)
			.append( $('<div class="pack-title" />').text(packs[idx].Name) )
			.append( $('<div class="pack-description" />').text(packs[idx].ShortBlurb) )
			.appendTo(packRow)
		
		if ( packs[idx].IsSuperStylePack )
		{
			$(".preview-pic", pack).append('<div class="superstyle" />');
		}

		var buybutton = ADDTOCART_BUTTON
			.clone()
			.data("pack", packs[idx])
			.click( addPackToCart )
			.attr("href", packs[idx].AddToCartLink)
			//for event tracking
			.bind("click", {cat:'AddToCart_' + packs[idx].Name.replace(/ /g, ''), label:'btn_AddToCart'}, trackBindEvent)										

		var buy = $('<td/>')
			.append($('<div class="product_pricing" />')
				.text(packs[idx].FormattedPrice)
			)
			.append(buybutton)
			.appendTo(buyRow);

		if (0 == idx % rowSize)
		{
			isNew.add(pack).add(buy).css("border", "none");
		}
	}
	
	while (packs.length && 0 != idx % rowSize)
	{
		isNewRow.add(packRow).add(buyRow).append('<td class="empty" />');
		idx++;
	}
	
	$('<tr class="hseparator"><td colspan="' + rowSize + '"><div /></td></tr>').appendTo(gridContainer);
	
	$(".superstyles-description")[ hasSuperStyle ? "show" : "hide" ]();
}

function showPacksInList()
{
	$("#packs-settings .view-type .icon").attr("title", "Show style packs in grid view");

	var packs = filterPacks();
	
	var listContainer = $("#packs-list").empty().show();
	
	// TODO: enable caching of formatted list, so we don't manipuate every timeemerge -C 
	
	var rowSize = 2;
	var rowNum = Math.ceil( packs.length / rowSize ); 
	var packRow = null;
	
	for (var idx=0; idx <packs.length; idx++ )
	{
		if (0 == idx % rowSize)
		{
			packRow = $('<tr class="pack-row" />').appendTo( listContainer );
			if (0 == idx)
			{
				packRow.addClass("first-row");
			}
		}
		
		var buybutton = ADDTOCART_BUTTON
			.clone()
			.data("pack", packs[idx])
			.attr("href", packs[idx].AddToCartLink)
			.click( addPackToCart )

		// add pack to row
		var buy = $('<div class="buy" />')
			.append($('<div class="product_pricing" />')
				.text(packs[idx].FormattedPrice)
			)
			.append(buybutton)

		var pack = $('<td />')
			.append( buy )
			.append($('<div class="pack-title" />')
				.append($('<a href="javascript:void(0)" />')
					.text(packs[idx].Name)
					.bind('click', packs[idx].Id, _loadStylePreviews)
				)
			)
			.append( $('<div class="pack-description" />').text(packs[idx].ShortBlurb) )
			.appendTo( packRow );
			
		if (idx == 0)
		{
			// on the first row, we must add the vertical spacer
			$('<td class="vseparator-1" rowspan="' + rowNum + '" /><td class="vseparator-2" rowspan="' + rowNum + '" />').appendTo( packRow );
		}
	}
}

function showPacks()
{
	$("table.packs").hide();
	$("#packs-tabs .packs-tab").removeClass("selected").filter(".packs").addClass("selected");
	$(".packs-tab-content").hide().filter("#packs").show();
	
	if ( $("#packs-settings .view-type .icon").hasClass("list") )
	{
		showPacksInList();
	}
	else
	{
		showPacksInGrid();	
	}	
}

function togglePacksViewMode()
{
	$("table.packs").hide();
	var icon = $(".icon", this).toggleClass("list");
	
	if( icon.hasClass("list") )
	{
		showPacksInList();
	}
	else
	{
		showPacksInGrid();
	}
}

function showFreeStyles()
{
	$("#packs-tabs .packs-tab").removeClass("selected").filter(".free-styles").addClass("selected");
	$(".packs-tab-content").hide().filter("#free-styles").show();	
}

function getPacksData()
{
	$.getJSON(document.location.pathname, {command: 'get_data'}, function(json, status)
	{
		if (json.stat != 'ok')
		{
			// TODO: report error
		}
		else
		{
			$("#loading-packs").remove();
			$("#packs-settings").show();
			
			// merge all data to window object
			$.extend(window, json); // will port ALL_STYLEPACKS, STYLEPACKS_CATEGORIES
			
			// populate the STYLEPACKS_BY_ID object
			$.each(ALL_STYLEPACKS, function(i, stylepack){ STYLEPACKS_BY_ID[ stylepack.Id ] = stylepack; });

			showPacks();
		
			// trigger callback for page-specific actions			
			try { stylelabInit(); } catch (e) {};
		}
	});
}

$(function()
{
	// set up event handlers
	$("#packs-tabs")
		.find("> .packs").click(showPacks)
		.end()
		.find("> .free-styles").click(showFreeStyles);
		
	$("#packs-settings .view-type").click(togglePacksViewMode)
	ADDTOCART_BUTTON = $('<a title="Add to Cart" class="atc button btn_add_to_cart"><div class="btn_left"></div><div class="btn_bg"><div>Add to Cart</div></div><div class="btn_right"></div></a>');
	$('#estore-components > .atc').each(function(){
		ADDTOCART_BUTTON = $(this)
	})
});

$(window).load( getPacksData );