// needed variables
var g_paramVariant;
var param_path;
var carouselTemplate;
var carouselUrl;

var g_variantsUrl;

// --------------------------------------------
// Variant Selection
// --------------------------------------------
function buildVariantSelection(variants) {
	// current variant
	var selectedVariantId = g_paramVariant;
	var selectedVariant;
	var sizeVariants = new Array();
	var sizesHTML = "";
	// get the selected variant
	variants.each( function(variant) {
		if (selectedVariantId == variant.id) {
			selectedVariant = variant;
		}
	});
	// process colors variants
	var i = 0;
	variants.each( function(variant) {
		sizeVariants[i] = variant;
		i++;
	});
	if (sizeVariants.length > 1) {
		for (i = 0; i < sizeVariants.length; i++) {
			sizesHTML = "<select name='product' size='1' onchange='submit()'>";
			for (i = 0; i < sizeVariants.length; i++) {
				if(null == sizeVariants[i])continue;
				var selected = "";
				if (selectedVariantId == sizeVariants[i].id) {
					selected = " selected";
				}
				sizesHTML += "<option value='"+sizeVariants[i].id+"'"+selected+">"+sizeVariants[i].ctcSize+"</option>";
			}
			sizesHTML += " </select>";
		}
	} else {
		sizesHTML = sizeVariants[0].ctcSize;
	}
	$("selectBoxTemplate").replace(g_selectBoxTemplate1.evaluate({"content":sizesHTML}));
}

function buildSizeOverviewPage(variants, id) {
	var sizeVariants = new Array();
	var sizesHTML = "";

	var i = 0;
	variants.each( function(variant) {
		sizeVariants[i] = variant;
		i++;
	});
	if (sizeVariants.length > 1) {
		for (i = 0; i < sizeVariants.length; i++) {
			sizesHTML += sizeVariants[i].ctcSize;
			if(i < sizeVariants.length - 1)
			sizesHTML += " / ";
		}
	} else {
		sizesHTML = sizeVariants[0].ctcSize;
	}
	$(id).replace(sizesHTML);
}


function startBuildVariantSelection() {
	new Ajax.Request(g_variantsUrl, {
		onSuccess : function(transport) {
			if(transport.responseText.length == 2){
				//empty response
				$('selectBoxTemplate').morph("opacity:0", {
					duration :0.5
				});
				return;
			}
			buildVariantSelection(eval(transport.responseText));
		},
		onLoading : function(transport) {
		}

	});
}

/**
 * 
 * @param variantsUrl the ajax url 
 * @param id id of the span or div to replace the content
 * @return void
 */
function startBuildSizes(variantsUrl, id) {
	new Ajax.Request(variantsUrl, {
		onSuccess : function(transport) {
			if(transport.responseText.length == 2){
				return;
			}
			buildSizeOverviewPage(eval(transport.responseText), id);
		},
		onLoading : function(transport) {
		}

	});
}