var pdpOtherProductsImageToUrlMapping = new Array();

function addOtherProductImage(product, url, caption)
{
	pdpOtherProductsImageToUrlMapping.push(new Array(product, url, caption));
}

(function($) {
	var HelpWindow;
	
	$(document).ready(function()
	{		
		$('.storeProductDetail').each(function () {
			initializePDP();
		});
	});
	
	function initializePDP()
	{
		$('.coloroption').click(function ()
		{
			// update hidden color fields
			var idArr = ($(this).attr('id')).split('_');
			$('#colorField').attr('value', idArr[1]);
			
			// clear the previously selected color
			$('.coloroptionselected').removeClass('coloroptionselected');

			$(this).children('img').addClass('coloroptionselected');
		});
		
		$('.coloroption').mouseover(function ()
		{
			// put border on selected image
			//$(this).addClass('coloroptionmouseover');
			$(this).children('img').addClass('coloroptionmouseover');

			// update selected color text
			var name = $(this).children('img').attr('alt');	
			$('#defaultColor').html('('+name+')');

			var colorId = $(this).attr('id').split('_')[1];
			
			// update product image
			updateProductImage(colorId);
			
			// update thumbnails
			updateProductThumbnails(colorId);
			
		});
		
		$('.coloroption').mouseout(function ()
		{
			//$(this).removeClass('coloroptionmouseover');
			$(this).children('img').removeClass('coloroptionmouseover');			
			
			// return to default color
			var colorId = $('#colorField').attr('value');
			var name = $('#color_'+colorId).children('img').attr('alt');			
			$('#defaultColor').html('('+name+')');
			
			updateProductImage(colorId);

			// update thumbnails
			updateProductThumbnails(colorId);
		});
		
		$('.perspectiveThumbnail').click(function ()
		{
			var perspectiveName = $(this).children('img').attr('alt');	
			// update perspectiveName
			$('#perspectiveName').html(perspectiveName);
			// update product image
			var colorId = $('#colorField').attr('value');
			updateProductImage(colorId);
		});
		
		$('.perspectiveThumbnailText').click(function() {
			var perspectiveName = $(this).children('label').html();
			$('#perspectiveName').html(perspectiveName);
			updateProductImage();
		});

		$('#additionalThumbnail').click(function ()
		{
			var url = $(this).children('img').attr('src');
			$('#productImage').attr('src', url);
		});
		
		$('#viewLargerLink').click(function ()
		{
			doViewLarger('http://www.cafepress.com/cp/moredetails.aspx?showBleed=false&ProductNo='+$('#productId').html(), 'height=610, width=650, scrollbars=1');
		});	

		$('#sizeChartLink').click(function ()
		{
			doViewLarger('http://www.cafepress.com/cp/moredetails.aspx?showBleed=false&ProductNo='+$('#productId').html()+'&tab=3', 'height=610, width=650, scrollbars=1');
		});
		
		$('.fitTitle').children('a').attr('href', '#');
		$('.fitTitle').children('a').click(function () {
			launchHelpInShop('http://www.cafepress.com/cp/info/help/help_fit.aspx','height=600,width=600,scrollbars=1');
		});
		
		$('#pdp_carousel > li').remove(); // remove the empty li or else jcarousel won't load any products. The empty li is for html validation.
		
		$('#pdp_carousel').jcarousel({
			size: pdpOtherProductsImageToUrlMapping.length,
			itemLoadCallback: {
				onBeforeAnimation: pdp_carousel_itemLoadCallback
			}
		});
		
		$('.sizeDropDown').bind("change", function(){
			updateSellPriceBasedOnSize();
		});
		
		updateSellPriceBasedOnSize();
	};

	function updateSellPriceBasedOnSize(){
		var priceDiffClassVal = $(".sizeDropDown option[selected]").attr("class");
		if (priceDiffClassVal){
			var priceDiff = parseFloat(priceDiffClassVal.split('-')[1]);
			var sellPrice = (priceDiff > 0) ? parseFloat($("#sellPrice").attr("value")) + priceDiff : parseFloat($("#sellPrice").attr("value"));
						
			$("#pdp-productsellprice").html('$' + roundNumber(sellPrice, 2));
		}
	}

	function updateProductImage(colorId)
	{
		var perspectiveName = $('#perspectiveName').html();
		$('#productImage').attr('src', getProductImageUrl($('#productId').html(), perspectiveName, 350, colorId));
	}

	function updateProductThumbnails(colorId)
	{
		$('.perspectiveThumbnail').each(function ()
		{
			var perspectiveName = $(this).children('img').attr('alt');
			$(this).children('img').attr('src', getProductImageUrl($('#productId').html(), perspectiveName, 48, colorId));
		});
	}
	
	function doViewLarger(theUrl, newFeatures)
	{
		var colorId = $('#colorField').attr('value');
		if (colorId && colorId != 0)
			theUrl = theUrl + '&colorNo=' + colorId;
		var perspectiveName = $('#perspectiveName').html();
		theUrl += (perspectiveName.toLowerCase() == 'back') ? '&pr=B' : '&pr=F';
		launchHelpInShop(theUrl, newFeatures);
	}

	function pdp_carousel_itemLoadCallback(carousel, state)
	{
		var items = pdpOtherProductsImageToUrlMapping;
	    for (var i = carousel.first; i <= carousel.last; i++) {
	        if (carousel.has(i)) {
	            continue;
	        }
	
	        if (i > items.length) {
	            break;
	        }
	
	        carousel.add(i, pdp_carousel_getItemHTML(items[i-1]));
	    }
	};

	function pdp_carousel_getItemHTML(item)
	{
	    return '<div class="carouselitem"><a href="' + getUrl(item[0]) + '"><img src="' + item[1] + '" alt="' + item[2] + '" /></a><br/><a href="' + getUrl(item[0]) + '">' + item[2] + '</a></div>';
	};
	
	function getUrl(productId)
	{
		var url = document.URL;
		var dotIndex = url.lastIndexOf('&');
		var url2 = url.substring(0, dotIndex+1);
		return url2 + 'item=' + productId;
	};
	
	function roundNumber(rnum, rlength) {
		return Math.round(rnum*Math.pow(10,rlength))/Math.pow(10,rlength);
	}	
	
})(jQuery);