//--------------------------------------------------------------
//--------------------------------------- All Bagbuilder Actions
//--------------------------------------------------------------

//function ChangeColor		>> Main function to trigger subfunctions
//function IconHighlight	>> Sets the outline around the icons
//function SetBagVariables	>> Sets Color and Price value
//function LoadColor		>> Loads the new color in the right imageholder
//function FadeImage		>> After loading, images will fade
//function ChangeStyle		>> Change the style of the bag
//function reCalculatePrice	>> Recalculate new price
//function ChangeLinkParams	>> Remember variables if any link is clicked
//function ButtonAddToCart	>> Show or hide the button
//function UpdateCartLink	>> Updates all variables before adding to the shopping cart

//main color changing functuon
function ChangeColor(changeitem, colorvalue, varpricePrincipal, varpriceBratPack, activeitem) {
	IconHighlight(changeitem, activeitem);
	SetBagVariables(changeitem, colorvalue, varpricePrincipal, varpriceBratPack);
	LoadColor(changeitem, colorvalue);
}

//highlights the color icons on the right of the page
function IconHighlight(changeitem, activeitem) {
	
	//reset all highlight status
	for(icon=0;icon<20;icon++) {
		//check if exists
		if(document.getElementById(['PrincipalIcon'+icon])!=null) {
			document.getElementById(['PrincipalIcon'+icon]).style.border='2px solid #000000';
			document.getElementById(['BratPackIcon'+icon]).style.border='2px solid #000000';
		} else {
			break;
		}
	}
	//highlight selected color icon
	document.getElementById(['PrincipalIcon'+activeitem]).style.border='2px dotted #FFFFFF';
	document.getElementById(['BratPackIcon'+activeitem]).style.border='2px dotted #FFFFFF';
}

//sets hidden form variables for add-to-cart
//changes all product links to pass the variables
function SetBagVariables(changeitem, varvalue, varpricePrincipal, varpriceBratPack) {
	if(changeitem=='Bag') {
		BagColor = varvalue;
		BagPricePrincipal = parseFloat(varpricePrincipal);
		BagPriceBratPack = parseFloat(varpriceBratPack);
	}
	if(changeitem=='Size') {
		BagCat = varvalue;
	}
	reCalculatePrice(BagCat);
}

//loads the images
function LoadColor(changeitem, colorvalue) {
	
	//set object variable
	img1 = document.getElementById([changeitem+'Image']);
	img2 = document.getElementById([changeitem+'Image2']);
	
	//check which image id is active
	if(img1.className=='image_visible') {
		if(BagCat=="Principal") {
			img2.src = ''; //this is to reset the src and trigger the onload event
			img2.src = '../collection/backpacks/bagbuilder/5500_'+colorvalue+'.jpg';
		} else {
			img2.src = ''; //this is to reset the src and trigger the onload event
			img2.src = '../collection/backpacks/bagbuilder/5600_'+colorvalue+'.jpg';
		}
	} else {
		if(BagCat=="Principal") {
			img1.src = ''; //this is to reset the src and trigger the onload event
			img1.src = '../collection/backpacks/bagbuilder/5500_'+colorvalue+'.jpg';
		} else {
			img1.src = ''; //this is to reset the src and trigger the onload event
			img1.src = '../collection/backpacks/bagbuilder/5600_'+colorvalue+'.jpg';
		}
	}
	//update product descriptions
	document.getElementById('BagName').innerHTML = '<b>'+BagCat+' Back '+colorvalue+'</b>';
}

function FadeImage(fadein, fadeout) {
	//fade image if image is not the transparent gif
	if(document.getElementById(fadein).src!='http://www.taggerbags.com/images/various/transparent.gif') {
		document.getElementById(fadein).className = 'image_visible';
		if(fadeout!='') {
			document.getElementById(fadeout).className = 'image_invisible';
		}
	}
}

//calculate the prices
function reCalculatePrice(newstyle) {
	//define variables
	var BagPrice;
	var BagPriceText;
	var FlapPrice;
	var FlapPriceText;
	var TotalPrice = 0;
	var TotalPriceText;
	
	if(isNaN(parseFloat(window['BagPrice'+BagCat]))) {
		BagPrice = 'OUT';
		BagPriceText = '<b style="color:#FF0000;">OUT!</b>';
		TotalPrice = 'OUT';
	} else {
		BagPrice = parseFloat(window['BagPrice'+BagCat]);
		BagPriceText = '<b>&euro; '+BagPrice.toFixed(2)+'</b>';
	}
	
	if(isNaN(parseFloat(window['FlapPrice']))) {
		FlapPrice = 'OUT';
		FlapPriceText = '<b style="color:#FF0000;">OUT!</b>';
		TotalPrice = 'OUT';
	} else {
		FlapPrice = parseFloat(window['FlapPrice']);
		FlapPriceText = '<b>&euro; '+FlapPrice.toFixed(2)+'</b>';
	}
	
	if(isNaN(TotalPrice)) {
		TotalPriceText = '<b style="color:#FF0000;">OUT!</b>';
	} else {
		TotalPriceText = '<b>&euro; '+(BagPrice+FlapPrice).toFixed(2)+'</b>';
	}
	
	//replace HTML
	document.getElementById('BagPriceText').innerHTML = BagPriceText;
	document.getElementById('FlapPriceText').innerHTML = FlapPriceText;
	document.getElementById('TotalPriceText').innerHTML = TotalPriceText;
	
	//set button state
	if(BagPrice > 0 && FlapPrice > 0) { 
		ButtonAddToCart(1);
	} else {
		ButtonAddToCart(0);
	}
}

//(de)Activates the button state
function ButtonAddToCart(add_var) {
	if(add_var==1) {
		//update the button
		document.getElementById('button_add').style.display = '';
		document.getElementById('button_out').style.display = 'none';
	} else {
		//update the button
		document.getElementById('button_add').style.display = 'none';
		document.getElementById('button_out').style.display = '';
	}
}

function UpdateCartLink(target) {
	//Check BagCat to make the SKUs
	if(BagCat=='Principal') {
		SkuCat = '5701';
	} else {
		SkuCat = '5702';			
	}
	
	//create the link
	querystring = '?status=1';
	querystring = querystring+'&bagbuilder=1';
	querystring = querystring+'&PRODUCT_SKU1='+SkuCat+'-'+BagColor;
	querystring = querystring+'&PRODUCT_AMOUNT1=1';
	querystring = querystring+'&PRODUCT_COLORCODE1='+BagColor;
	querystring = querystring+'&PRODUCT_SKU2='+FlapSKU;
	querystring = querystring+'&PRODUCT_AMOUNT2=1';
	querystring = querystring+'&PRODUCT_COLORCODE2=';
	querystring = querystring+'&PRODUCT_SKU3=';
	querystring = querystring+'&PRODUCT_AMOUNT3=';
	querystring = querystring+'&PRODUCT_COLORCODE3=';
	querystring = querystring+'&COMBINE_CODE='+CombineCode;
	querystring = querystring+'&addtocart=1';
	document.getElementById(target).href = querystring;
}


//changes the link click with the right variables
function ChangeLinkParams(target) {
	target.href = target.href+"&BagColor="+BagColor+"&BagCat="+BagCat;
}

//change style of Bag
function ChangeStyle(newstyle) {
	
	//Load the correct image, recalculate pricing
	SetBagVariables('Size', newstyle, BagPricePrincipal, BagPriceBratPack);
	LoadColor('Bag', BagColor);
	
	//set variables
	if(newstyle=="Principal") { 
		//show-hide the color icons for the right model
		document.getElementById('PrincipalColorIcons').style.display = '';
		document.getElementById('BratPackColorIcons').style.display = 'none';
		//switch the ImageIcon
		document.getElementById('PrincipalStyleIcon').src = '../images/various/icon_backpack_1008_o_r1_c1.jpg';
		document.getElementById('BratPackStyleIcon').src = '../images/various/icon_backpack_1008_r1_c2.jpg';
		//display the right names and prices
		document.getElementById('BagHeader').innerHTML = document.getElementById('BagHeader').innerHTML.replace("BratPack", newstyle);
		document.getElementById('BagName').innerHTML = document.getElementById('BagName').innerHTML.replace("BratPack", newstyle);
		document.getElementById('FlapName').innerHTML = document.getElementById('FlapName').innerHTML.replace("BratPack", newstyle);
	} else { 
		//show-hide the color icons for the right model
		document.getElementById('PrincipalColorIcons').style.display = 'none';
		document.getElementById('BratPackColorIcons').style.display = '';
		//switch the ImageIcon
		document.getElementById('PrincipalStyleIcon').src = '../images/various/icon_backpack_1008_r1_c1.jpg';
		document.getElementById('BratPackStyleIcon').src = '../images/various/icon_backpack_1008_o_r1_c2.jpg';
		//display the right names and prices
		document.getElementById('BagHeader').innerHTML = document.getElementById('BagHeader').innerHTML.replace("Principal", newstyle);
		document.getElementById('BagName').innerHTML = document.getElementById('BagName').innerHTML.replace("Principal", newstyle);
		document.getElementById('FlapName').innerHTML = document.getElementById('FlapName').innerHTML.replace("Principal", newstyle);
	}
}	

//--------------------------------------------------------------