$(document).ready(function() {
	// HTML for å erstatte nedtrekksmenyen med
	var replaceHtml;
	replaceHtml = '<input type="hidden" id="produkt_variant_code" name="produkt_multiple[1]" value="" />';
	replaceHtml += '<div class="outer">';
	replaceHtml += ' <div id="SizeSelect">';
	replaceHtml += ' ';
	replaceHtml += ' </div>';
	replaceHtml += ' <br style="clear: both" />';
	replaceHtml += '</div>';
	replaceHtml += '<div class="outer">';
	replaceHtml += ' <div id="ColorSelect">';
	replaceHtml += ' ';
	replaceHtml += ' </div>';
	replaceHtml += ' <br style="clear: both" />';
	replaceHtml += '</div>';
	replaceHtml += '<div id="color"> &nbsp; </div>';
	
	// Erstatt nedtrekksmenyen
	$("#strFargeValg").html(replaceHtml);

	if (typeof (Item_No) != 'undefined') {
		$(".submit_handlevogn").addClass("hidden");
		
		initSize = findFirstSizeAvailable ();
		var SizeBoxes = drawSizeBoxes (Item_No, Variants);
		var ColorBoxes = drawAllColorBoxes (Item_No, ColorCodes, HexCodes, Variants, initSize);
		
		$("#SizeSelect").html(SizeBoxes);
		//$("#SizeSelect label:first").addClass("active");
		//$("#SizeSelect label:first input").attr("checked", "true");
		
		$("#ColorSelect").html(ColorBoxes);
		//$("#ColorSelect label:first").addClass("active");
		//$("#ColorSelect label:first input").attr("checked", "true");

		/* Første størrelse og farge er automatisk valgt produkt */
		size 		= $("#SizeSelect label:first input").val();
		//colorCode 	= $("#ColorSelect label:first input").val();
		//$("#produkt_variant_code").val (colorCode + '-' + size);
		tekst = Messages['chosesizetext_'+Lang];
		$("#color").text(tekst);
		
		$("#SizeSelect label").click(choseSize);
		$("#ColorSelect label.available").live('click', choseColor);
	}

	function choseSize () 
	{
		size = $(this).children("input").val();
		tekst = Messages['chosecolortext_'+Lang];

		$("#SizeSelect label").removeClass("active");
		$(this).addClass("active");
		$("#ColorSelect").html(drawColorBoxes (Item_No, ColorCodes, HexCodes, Variants, size));
		$("#color").text(tekst);
		
		$(".submit_handlevogn").addClass("hidden");
	}
	
	function choseColor () 
	{
		var choosenColor = $(this).children(".fargekode").text();
		var color = $(this).children(".colorcodeprice").val();
		var SelectedSize = $("#SizeSelect label.active input").val ();
		var VariantCode = color + '-' + SelectedSize;
		
		$("#ColorSelect label").removeClass("active");
		$(this).addClass("active");
		$("#color").html(choosenColor);

		if (SizeVariations[color]) {
			imageSize = "_0";
		} else {
			imageSize = "";
		}
		
		//image = Item_No + "_main_" + color.toLowerCase() + imageSize + "_0.jpg";
		image = Item_No + "_main_" + color.toLowerCase() + imageSize + "_" + ImageNumbers[color] + ".jpg";
		image = image.replace('/', '-');
		image = image.replace('ø', 'o');
		image = image.replace('å', 'a');
		image = image.replace('æ', 'a');
		image = image.replace('Æ', 'a');
		image = image.replace('Ø', 'o');
		image = image.replace('Å', 'a');
		url   = Item_No + "_original_" + color.toLowerCase() + "_" + ImageNumbers[color] + ".jpg";
		url   = url.replace("/", "-");
	
		$("#mainpic").attr('src', 'bilder/bilder/nettbutikk/' + image);
		$(".mainPic").attr('href', 'bilder/bilder/nettbutikk/' + url);

		//updateVariantPrice ($(".colorcodeprice").val() + '-' + SelectedSize);

		$("#produkt_variant_code").val (color + '-' + SelectedSize);

		$(".submit_handlevogn").removeClass("hidden");
	}
});



/**
 * Tegn opp bokser med størrelser som kan velges
 *
 * @param Item_No 		Produktnummer
 * @param Variants 		Tabell med hvilke produkter som har hvilke farger på lager
 *
 * @return Streng med htmlkode for alle boksene
 */
function drawSizeBoxes (Item_No, Variants) 
{
	var SizeBoxes 		= '';
	var HaveBox 		= 'string for sjekk ';
	var Size 			= '';
	
	for (sRow = 0; sRow < Variants.length; sRow++) {
		Size = Variants[sRow]['Size'];
		CheckSize = ' ' + Variants[sRow]['Size'];
		if (HaveBox.indexOf(CheckSize) < 0) {
			HaveBox += Size + ', ';
			if (sizeAvailable (Size)) {
				SizeBoxes += drawSizeBox (Size);
			}
		}
	}
	return SizeBoxes;
}



/**
 * Tegn opp boks med størrelse som kan velges
 *
 * @param Size 		Størrelser som kan velges for produktet
 *
 * @return Streng med htmlkode for en størrelsesboks
 */
function drawSizeBox (Size) 
{
	var sizeBox = '<label class="sizeSelect"><input type="radio" name="size" value="' 
				+ Size 
				+ '" class="hidden" /><span class="storrelse">' 
				+ Size 
				+ '</span></label>';
	return sizeBox;
}



/**
 * Tegn opp alle fargebokser på produktvarianter på lager
 * 
 * Tegner opp farger som ikke kan velges. Bokser som vises
 * er avhengig av om fargen er tilgjengelig på lager
 *
 * @param Item_No 		Produktnummer
 * @param ColorCodes 	Tabell med farger tilgjengelig for produktet
 * @param HexCodes 		Tabell for mapping mellom fargekode og hexkode
 * @param Variants 		Tabell med hvilke produkter som har hvilke farger på lager
 * @param Size 			Valgt størrelse
 *
 * @return Streng med htmlkode for alle boksene
 */
function drawAllColorBoxes (Item_No, ColorCodes, HexCodes, Variants, Size) 
{
	var ColorBoxes 	= '';
	var HaveBox 	= 'string for sjekk ';
	var Color 		= '';
	var colorName 	= '';
	
	for (vRow = 0; vRow < Variants.length; vRow++) {
		Color 		= Variants[vRow]['ColorCode'];
		CheckColor 	= ' ' + Variants[vRow]['ColorCode'];
		if (Variants[vRow]['Quantity'] > 0) {
			if (HaveBox.indexOf(CheckColor) < 0) {
				HaveBox += Color + ', ';
				ColorBoxes += drawColorBox (Item_No, Variants[vRow]['ColorCode'], colorName, HexCodes[colorCode], 'Available');
			}
		}
	}
	return ColorBoxes;
}



/**
 * Tegn opp bokser med farger som kan velges
 * 
 * Tegner opp farger som kan velges. Bokser som vises
 * er avhengig av om fargen i valgt størrelse er
 * tilgjengelig
 *
 * @param Item_No 		Produktnummer
 * @param ColorCodes 	Tabell med farger tilgjengelig for produktet
 * @param HexCodes 		Tabell for mapping mellom fargekode og hexkode
 * @param Variants 		Tabell med hvilke produkter som har hvilke farger på lager
 * @param Size 			Valgt størrelse
 *
 * @return Streng med htmlkode for alle boksene
 */
function drawColorBoxes (Item_No, ColorCodes, HexCodes, Variants, Size) 
{
	var ColorBoxes = '';
	for (cRow = 0; cRow < ColorCodes.length; cRow++) {
		colorCode = ColorCodes[cRow][0];
		colorName = ColorCodes[cRow][1];
		for (vRow = 0; vRow < Variants.length; vRow++) {
			if (Variants[vRow]['ColorCode'] == colorCode && Variants[vRow]['Size'] == Size) { 
				if (Variants[vRow]['Quantity'] > 0) {
					ColorBoxes += drawColorBox (Item_No, colorCode, colorName, HexCodes[colorCode], 'available');
				} else {
					//ColorBoxes += drawColorBox (colorCode, colorName, HexCodes[colorCode], 'notAvailable');
				}
			}
		}
	}
	return ColorBoxes;
}



/**
 * Tegn opp boks med farge som kan velges
 *
 * @param ColorCode 	Fargekode for valgt produkt og størrelse
 * @param Hex 			Hexkode for valgt produkt
 * @param Available 	Streng som forteller om produktet er tilgjengelig eller ikke
 *
 * @return Streng med htmlkode for en fargeboks
 */
function drawColorBox (Item_No, ColorCode, colorName, Hex, Available) 
{
	var imagePath = 'bilder/bilder/cropicons/';
	ColorCodePrice= ColorCode; // use when getting price for product
	ColorCode 	  = ColorCode.replace('/', '-');
	ColorCode 	  = ColorCode.replace('Ø', 'O');
	ColorCode 	  = ColorCode.replace('Å', 'A');
	ColorCode 	  = ColorCode.replace('Æ', 'A');
	ColorCode     = ColorCode.replace(' ', '%20');
	var image 	  = imagePath + Item_No + '-' + ColorCode + '.JPG';

	var colorBox = '<label class="colorSelect ' + Available + '">';
		colorBox += '<input type="radio" name="color" value="';
		colorBox += ColorCode;
		colorBox += '" class="hidden"';
					(Available == 'notAvailable') ? colorBox += ' disabled="disabled"' : '';
		colorBox += ' />';
		colorBox += '<input type="hidden" name="colorcodeprice" class="colorcodeprice" value="';
		colorBox += ColorCodePrice;
		colorBox += '" />';
		colorBox += '<span class="fargeklatt" style="background-color: ' + Hex + ';">';
					(Available == 'notAvailable') ? colorBox += '<a title="Ikke tilgjengelig"><span id="colorNotAvailable">&nbsp;</span></a>' : '';
		colorBox += '<img src=' + image + ' alt="" />';
		colorBox += '</span>';
		colorBox += '<span class="fargekode">' + colorName + '</span>';
		colorBox += '</label>';
	return colorBox;
}



/**
 *  
 * @return
 */
function updateVariantPrice (VariantCode) 
{
	VariantCode = VariantCode.replace('/', '-');
	var Price 	= PriceCode[VariantCode];
	$("span#pris").text(Price + ',-');
}



/**
 *
 * @return
 */
function sizeAvailable (Size) {
	for (cRow = 0; cRow < ColorCodes.length; cRow++) {
		colorCode = ColorCodes[cRow][0];
		for (vRow = 0; vRow < Variants.length; vRow++) {
			if (Variants[vRow]['ColorCode'] == colorCode && Variants[vRow]['Size'] == Size) { 
				if (Variants[vRow]['Quantity'] > 0) {
					return true;
				}
			}
		}
	}
	return false;
}



/**
*
* @return
*/
function findFirstSizeAvailable () {
	for (cRow = 0; cRow < ColorCodes.length; cRow++) {
		colorCode = ColorCodes[cRow][0];
		for (vRow = 0; vRow < Variants.length; vRow++) {
			if (Variants[vRow]['ColorCode'] == colorCode) { 
				if (Variants[vRow]['Quantity'] > 0) {
					return Variants[vRow]['Size'];
				}
			}
		}
	}
	return false;
}