$(".product_overlay").hide();

function Group(name,code,products,linkedGroups,active){
	this.name 			= name;
	this.code 			= code;
	this.products		= products;
	this.linkedGroups 	= linkedGroups;
	this.active			= active;
}

function Product(URLname,name,id,image,pdf,description){
	this.name 			= name;
	this.id 			= id;
	this.image 			= image;
	this.pdf 			= pdf;
	this.description 	= description;
	this.URLname        = URLname;
}


var selection1 				= '';
var selection2 				= '';
var gebruikersGroup 		= '';
var variatieGroup			= '';
var variatieGroupObj 		= '';
var gebruikersGroupObj	    = '';

function setFirstSelection(option){

    //set a cookie so selection is saved during site visit
    setCookie('userType',option.id,'');
	// if the option for show all (option6) has been selected then hide that layer and reset the selections
	if(option.id == 'option6'){
		reset();
	} else {
	
		//Turn off the 'show all/Toon alles' option.
		document.getElementById("option6").getElementsByTagName("IMG")[0].src = '../images/vis_producten_radio_off.gif';
		document.getElementById("option6").style.fontWeight = '';
		
		// retrieve the currently active object for the usersgroup. (this gets set global)
		for(i=0;i<gebruikersGroupArr.length;i++){
			if(option.id == gebruikersGroupArr[i].code){
				gebruikersGroupObj = gebruikersGroupArr[i];
			}
		}
		
		// Check if the currently clicked group has not been disabled because of a previously made selection.
		if(gebruikersGroupObj.active == 1){
			
			//document.getElementById('overlaydiv1').style.display = 'none';
			
			if(selection1 != ''){
				selection1.getElementsByTagName("IMG")[0].src = '../images/vis_producten_radio_off.gif';
				selection1.style.fontWeight = '';
				
			}
			
			var divElement 		= option;
			var imageElement 	= option.getElementsByTagName("IMG")[0];
			
			imageElement.src = '../images/vis_producten_radio_on.gif';
			divElement.style.fontWeight = 'bold';
			
			selection1 = divElement;
			
			if(selection1 && selection2){
				getActiveMachines();
			}
			
			// Enable/disable buttons in the second selection div element.
			var secondPanel = document.getElementById("secondSelectionDiv");
			var tdElements	= secondPanel.getElementsByTagName("TD");
			
			// Turn all variation group items off
			for(i=0;i<variatieGroupArr.length;i++){
				variatieGroupArr[i].active = 0;
			}
			
			for(i=0;i<tdElements.length;i++){
			
			
			
				if(tdElements[i].id != ""){
					// Make current object appear transparent (off)
					$("#"+tdElements[i].id).addClass("transparent50");
					
					for(j=0;j<gebruikersGroupObj.linkedGroups.length;j++){
						
						if(tdElements[i].id.indexOf("option"+gebruikersGroupObj.linkedGroups[j]) != "-1"){
							// Turn a single item on.
							arrIndex 				= gebruikersGroupObj.linkedGroups[j] - 1;
							variatieGroupObj 		= variatieGroupArr[arrIndex];
							variatieGroupObj.active	= 1;
							
							$("#"+tdElements[i].id).removeClass("transparent50");
						}
					}
				}
			}
		}
	}
	$('a[href$="mini_cafe"]').attr('href','javascript:getPDPTemplateVersion();');
}

function setSecondSelection(option){

	setCookie('productType',option,'');
	
	for(i=0;i<variatieGroupArr.length;i++){
		if(option == variatieGroupArr[i].code){
			variatieGroupObj = variatieGroupArr[i];
		}
		 
	}
	
	if(variatieGroupObj.active == 1){
	   
		if(selection2 != ''){
		    
			document.getElementById(selection2+"Img").getElementsByTagName("IMG")[0].src = '../images/vis_producten_radio_off.gif';
			document.getElementById(selection2+"Txt").style.fontWeight = '';
		}
		
		var imageElement	= document.getElementById(option+"Img").getElementsByTagName("IMG")[0];
		var textElement 	= document.getElementById(option+"Txt");
		
		imageElement.src = '../images/vis_producten_radio_on.gif';
		textElement.style.fontWeight = 'bold';
		
		selection2 = option;
		
		getActiveMachines();
		$('a[href$="mini_cafe"]').attr('href','javascript:getPDPTemplateVersion();');
		
	}
}

function getActiveMachines(){
	for(i=0;i<gebruikersGroupArr.length;i++){
		if(gebruikersGroupArr[i].code == selection1.id){
			gebruikersGroup = gebruikersGroupArr[i];
		}
	}
	
	for(i=0;i<variatieGroupArr.length;i++){
		if(variatieGroupArr[i].code == selection2){
			variatieGroup = variatieGroupArr[i];
		}
	}
	
	var variatieProductenArr 	= variatieGroup.products;
	var gebruikersProductenArr 	= gebruikersGroup.products
	var actieveProducten		= new Array();
	
	for(i=0;i<variatieProductenArr.length;i++){
		for(j=0;j<gebruikersProductenArr.length;j++){
			if(gebruikersProductenArr[j].name == variatieProductenArr[i].name){
				actieveProducten[actieveProducten.length] = variatieProductenArr[i];
			}
		}
	}

	$("#producten").children(".product").remove();
	var totalCounter = 1;
	for(i=0;i<actieveProducten.length;i++){
		// Add a style to the last product item per row to removed the right margin.
		if(totalCounter % 5 == 0){
			nomargin = "style='margin-right:0px;'";
		} else {
			nomargin = "";
		}
		var html = getMachineHtml(actieveProducten[i].URLname, actieveProducten[i].name,actieveProducten[i].id,actieveProducten[i].description,actieveProducten[i].image,actieveProducten[i].pdf,actieveProducten[i].height,false,nomargin);
		$("#producten").append(html);
		totalCounter++;
	}
	
	for(i=0;i<allProductsArray.length;i++){
		var productIsInSelection = false;
		for(j=0;j<actieveProducten.length;j++){
			if(actieveProducten[j].name == allProductsArray[i].name){
				productIsInSelection = true;
			}
		}
		$('#product' + allProductsArray[i].id).css('opacity', 1);
		if(productIsInSelection == false) {
			// Add a style to the last product item per row to removed the right margin.
			if(totalCounter % 5 == 0){
				nomargin = "style='margin-right:0px;'";
			} else {
				nomargin = "";
			}
			var html = getMachineHtml(allProductsArray[i].URLname, allProductsArray[i].name,allProductsArray[i].id,allProductsArray[i].description,allProductsArray[i].image,allProductsArray[i].pdf,allProductsArray[i].height,true,nomargin);
			$("#producten").append(html);

			$('#product' + allProductsArray[i].id).css('opacity', .3);
			totalCounter++;
		}
	}
	$("#producten").append("<div style='clear:both;'></div>");
}
function getMachineHtml(URLname, name,id,description,image,pdf,height,inActive,nomargin){
	var html = '';
	
	if(inActive){
		html += "<div class='product' id='product"+id+"'>";
		html += "	<div style='position:absolute;left:0px;top:0px;height:166px;width:178px;cursor:pointer;' class='transparent' onclick='document.location.href=\"" + URLname + "\";'></div>";
	} else {
		html += "<div class='product' id='product"+id+"' "+nomargin+" onmouseover='showOverlay(this)' onmouseout='hideOverlay(this)'>";
		html += "	<div class='product_overlay'>";
		html += "		<div class='product_overlay_top'></div>";
		html += "		<div class='product_overlay_middle'>";
		html += "			<h3 class='producten_overlay'>"+name+"</h3>";
		html += "			<div>"+description+"</div>";
		html += "			<div style='padding-top:6px;'>";
		html += "				<a href='"+URLname+"' id='product"+id+"ReadMore' class='overlay_link'>";
		html += "					<img src='../images/ic_arrow_small_red.gif' border='0' alt='' />&nbsp;<b>Meer informatie</b>";
		html += "				</a>";
		html += "			</div>";
		html += "		</div>";
		html += "		<div class='product_overlay_bottom'></div>";
		html += "	</div>";
	}
	html += "	<div class='product_top'>";
	html += "		<a href='"+URLname+"' id='product"+id+"Img'>";
	html += "			<img src='../images/producten/"+image+"' border='0' alt='"+name+"' />";
	html += "		</a>";
	html += "	</div>";
	html += "	<div class='product_bottom'>";
	html += "		<a href='"+URLname+"' class='linkblack'>";
	html += "			<b>"+name+"</b>&nbsp;<img src='../images/ic_arrow_right.gif' border='0' alt='' />";
	html += "		</a>";
	html += "	</div>";
	html += "</div>";
	
	$(".product_overlay").hide();
	
	return html;
}
function reset(){
	document.location.reload();
}
function showOverlay(obj){
	obj.style.zIndex = 2;
	obj.getElementsByTagName("DIV")[0].style.display = "block";
}
function hideOverlay(obj){
	obj.style.zIndex = 1;
	obj.getElementsByTagName("DIV")[0].style.display = "none";
}
