function preloadImage(url) { $('<img />').attr('src', url); }

function changeSwatch(sid)
{
	var mainImage = $('#pictures div.main');
	
	if (mainImage.attr('id') != 'swatch-' + sid)
	{
		mainImage.attr('id', 'swatch-' + sid);
		var swatch = SWATCHES[sid];

		// Replace the size options
		var sizeSelect = $('#options select[name=size]').html('');
		for (var size in swatch.sizes)
		{
			$('<option value="'+ size +'">'+ swatch.sizes[size].label + '</option>').appendTo(sizeSelect);
		}

		// Replace main image link
		$('a', mainImage).attr('href', swatch.images[0].original);

		// Replace main image
		$('img', mainImage).attr('src', swatch.images[0].main);
		$('img', mainImage).attr('alt', swatch.label);

		// Replace secondary images
		var secondaryList = $('#pictures ul').html('');
		for (var i in swatch.images)
		{
			var last = '';
			if ((i+1) % 4 == 0) last = 'last ';
			
			$('<li class="image-'+ last + i +'"><img src="'+ swatch.images[i].secondary + '" alt="Image '+ (i+1) +'" /></li>').appendTo(secondaryList);
		}
		
		$('#pictures ul li').hover(
			function()
			{
				var index = 1 * this.className.split('-')[1];
				$('a', mainImage).attr('href', swatch.images[index].original);
				$('img', mainImage).attr('src', swatch.images[index].main);
			},
			function(){}
		);

		// Change the selected color in the color select box
		$('#options select[name=swatch] option[value='+sid+']').attr('selected', 'selected');
	}
}

$(function()
{
	var MEDIA_URL = 'http://media.junees.com/';
	
	$('a[rel*=facebox]').facebox({
		opacity: 0.2,
		loadingImage: MEDIA_URL + 'images/static/facebox/loading.gif',
		closeImage: MEDIA_URL + 'images/static/facebox/close.gif'
	});
	
	for (var i in SWATCHES)
	{
		for (var j in SWATCHES[i].images)
		{
			preloadImage(SWATCHES[i].images[j].main);
			preloadImage(SWATCHES[i].images[j].secondary);
		}
	}
	
	$('#meta ul li').click(function()
	{
		var sid = this.className.split('-');
		changeSwatch(1 * sid[1]);
	});
	
	$('#options select[name=swatch]').change(function()
	{
		changeSwatch(1 * this.value);
	});
	
	$('#meta ul li').hover(
		function()
		{
			$('div', this).animate({ width: '34px' }, 200);
		},
		function()
		{
			$('div', this).animate({ width: '23px' }, 150);
		}
	);
	
	$('#pictures ul li').hover(
		function()
		{
			var mainImage = $('#pictures div.main');
			var sid = 1 * mainImage.attr('id').split('-')[1];
			
			var index = 1 * this.className.split('-')[1];
			$('a', mainImage).attr('href', SWATCHES[sid].images[index].original);
			$('img', mainImage).attr('src', SWATCHES[sid].images[index].main);
		},
		function() {}
	);
	
	$('.sizechart h2').live('mouseover', function()
	{
		var tab_id = parseInt(this.getAttribute('id').split('-')[1]);
		$('.sizechart table').hide();
		$('.sizechart table#tab-' + tab_id + '-content').fadeIn();
	});
});