$(document).ready(function() {
		showGarment('a85b25a9-d24e-43d5-811b-52451c4b91cb', '#girlsl1');
		showGarment('3cd54a1d-bd65-42f3-901b-98bbe99d16bb', '#girlsl2');
		showGarment('ac7745e3-b127-4518-b9b2-e9d9a5e53955', '#girlsl3');
		showGarment('4445b73f-53d1-46f2-8100-f606519fb660', '#girlsl4');
		showGarment('2083aa13-ad89-4c35-bdd4-102c1980a2d3', '#boysl2');
		showGarment('625d1f79-4b0c-4d42-992d-e0faf7042848', '#boysl3');
		showGarment('adaccb5b-47ba-466e-846d-ee210aeca413', '#boysl4');		
		fixPNGs();
	});
	function addToBasket(category) {
		$('#addToMyBasketButton').attr('disabled', 'disabled');
		$('#addToBasket table tr:gt(0)').remove();
		$('#' + category + 'Palette div.label:visible').each(function(i) {
			var tr = $('<tr/>').appendTo('#addToBasket table');
			$('<td/>')
				.text($(this).children('span.title').text())
				.appendTo(tr);
			$('<td/>')
				.text($(this).children('span.price').text())
				.appendTo(tr);
			var td = $('<td/>')
				.appendTo(tr);
			var s = $('<select/>')
				.attr('disabled', 'disabled')
				.attr('id', 'p' + $(this).children('span.id').text())
				.attr('name', 'item')
				.change(function() {
					$('#addToMyBasketButton').attr('disabled', 'disabled');
					$('#addToBasket select').each(function() {
						if($(this).val() != '') {
							$('#addToMyBasketButton').attr('disabled', '');
						}
					});
				})
				.appendTo(td);
			$('<option/>')
				.attr('value', '')
				.text('Please Choose')
				.appendTo(s);
			$.getJSON(
				'/ajax/load-sizes/default.aspx?variation=' + $(this).children('span.id').text(),
				function(result) {
					for(i = 0; i < result.sizes.length; i++) {
						$('<option/>').attr('value', result.sizes[i].id).text(result.sizes[i].title).appendTo($('#p' + result.id));
					}
					$('#p' + result.id).attr('disabled', '');
				}
			);
		});
		$('#addToBasketArea').show();
	}
	function addToMyBasketClick() {
		$('#addToMyBasketButton').attr('disabled', 'disabled');
		$('#cancelButton').attr('disabled', 'disabled');
		$('#addToMyBasketButton').val('Adding To Your Basket...');
		var url = '/ajax/add-to-basket/default.aspx';
		var params = $('#addToBasketForm').serialize();
		$.ajax({
			type: 'POST',
			url: url,
			data: params,
			error: function(request) {
				alert(request.statusText);
			},
			success: function(html) {
				$('#basket').load('/ajax/update-basket/default.aspx');
				alert('Your items have been added to your basket.');
				$('#addToBasketArea').hide();
				$('#addToMyBasketButton').val('Add To My Basket');
				$('#cancelButton').attr('disabled', '');
			}
		});
	}
	function loadGarments(subCategory, category) {
		if(subCategory == '') {
			$('#' + category + 'Garments div.garments').hide();
			$('#' + category + 'Garments div.garments').html('');
			$('#' + category + 'Garments div.instructions').show();
		}
		else {
			$('#' + category + 'Garments div.instructions').hide();
			$('#' + category + 'Garments div.garments').html('<p>Loading...</p>');
			$('#' + category + 'Garments div.garments').show();
			$.getJSON(
				'/ajax/load-garments/default.aspx?subcategory=' + subCategory,
				function(result) {
					if(result.garments.length == 0) {
						alert('There are no available garments.');
					}
					else {
						$('#' + category + 'Garments div.garments').html('');
						for(i = 0; i < result.garments.length; i++) {
							fixPNG($('<img/>')
								.attr('alt', result.garments[i].title)
								.attr('src', result.garments[i].thumbnail)
								.attr('title', result.garments[i].title)
								.attr('garmentId', result.garments[i].id)
								.attr('garmentLayer', '#' + category + 'l' + result.layer)
								.css('cursor', 'pointer')
								.click(function() { showGarment($(this).attr('garmentId'), $(this).attr('garmentLayer')); } )
								.appendTo($('#' + category + 'Garments div.garments')));
						}
					}
				}
			);
		}
	}
	function removeGarment(layer) {
		$('#' + layer).css('background-image', '');
		$('#' + layer).html('');
		$('#' + layer + 'mask').hide();
		$('#' + layer + 'label').hide();
	}
	function showBoys() {
		$('#beCool').hide();
		$('#girlsModel').hide();
		$('#girlsPalette').hide();
		$('#boysModel').show();
		$('#boysPalette').show();
		$('#models').removeClass('girls');
		$('#models').addClass('boys');
	}
	function showGarment(id, layer) {
		$.getJSON(
			'/ajax/show-garment/default.aspx?id=' + id,
			function(result) {
				$(layer).html('');
				fixPNG($('<img/>')
					.attr('alt', result.title)
					.attr('src', result.image)
					.css('margin-left', result.offsetX + 'px')
					.css('margin-top', parseInt(result.offsetY) + 22 + 'px')
					.appendTo($(layer)));
				$(layer + 'mask').show();
				$(layer + 'label span.id').html(result.id);
				$(layer + 'label span.price').html(result.price);
				$(layer + 'label span.title').html('<a href="' + result.link + '">' + result.title + '</a>');
				$(layer + 'label').show();
			}
		);
	}
	function showGirls() {
		$('#beCool').hide();
		$('#boysModel').hide();
		$('#boysPalette').hide();
		$('#girlsModel').show();
		$('#girlsPalette').show();
		$('#models').removeClass('boys');
		$('#models').addClass('girls');
	}