// var elements = [ "vu_comunity_1", "vu_comunity_2" ];
var categories = [];
var preloadedImages = [];

var activeCategory = -1;
var activeImage = -1;
var activeCustomer = -1;

function CreateDynamicContents() {
	var cat = 0;
	var catParam = GetRequestParam("categorie");
	if (catParam != "") {
		cat = parseInt(catParam);
	}
	activeCategory = -1;
	SetActiveCategory(cat);
	PreloadImages();
}

function PreloadImages() {
	PreloadImagesCat(activeCategory);
	for (var i = 0; i < categories.length; i++) {
		if (i != activeCategory) {
			PreloadImagesCat(i);
		}
	}
}

function PreloadImagesCat(cat) {
	var customers = categories[cat].customers;
	for (var i = 0; i < customers.length; i++) {
		var items = customers[i].items;
		for (var j = 0; j < items.length; j++) {
			var preloadIcon = new Image;
			var preloadMain = new Image;
			preloadIcon.src = items[j].icon;
			preloadMain.src = items[j].image;
			preloadedImages.Push(preloadIcon);
			preloadedImages.Push(preloadMain);
		}
	}
}

function AddCategory(name, subheading) {
	var p = { name: name, subheading: subheading, customers: [] };
	categories.push(p);
}

function AddCustomer(name) {
	var p = { name: name, items: [] };
	categories[categories.length-1].customers.push(p);
}

function AddItem(img, header, body) {
	var p = { icon: "images/extra/icon_" + img + ".png", image: "images/extra/" + img + ".png", header: header, body: body };
	categories[categories.length-1].customers[categories[categories.length-1].customers.length-1].items.push(p);
}

function SetActiveCategory(selected) {
	if (selected == activeCategory) return;
	activeCategory = selected;
	
	var cat = document.getElementById("maincategories");
	
	var ih = "";
	for (var i = 0; i < categories.length; i++) {
		var cls = (i == activeCategory)?" class=\"active\"":"";
		ih += "<li><a" + cls + " onclick=\"SetActiveCategory(" + i + ")\">" + categories[i].name + "</a></li>";
	}
	cat.innerHTML = "<ul>" + ih + "</ul>";
	activeCustomer = -1;
	SetActiveCustomer(0);
	
}

function SetActiveCustomer(selected) {
	if (selected == activeCustomer) return;
	activeCustomer = selected;
	
	var customers = [];
	var subheading = "<h1></h1>";
	if (activeCategory < categories.length) {
		customers = categories[activeCategory].customers;
		subheading = "<h1>" + categories[activeCategory].subheading + "</h1>";
	}
	
	var subCat = document.getElementById("subcategories");
	
	var ih = "";
	for (var i = 0; i < customers.length; i++) {
		var cls = (i == activeCustomer)?" class=\"active\"":"";
		ih += "<li><a" + cls + " onclick=\"SetActiveCustomer(" + i + ")\">" + customers[i].name + "</a></li>";
	}
	subCat.innerHTML = subheading + "<ul>" + ih + "</ul>";
	activeImage = -1;
	SetActiveImage(0);
}

function SetActiveImage(selected) {
	if (selected == activeImage) return;
	activeImage = selected;
	
	var items = [];
	if (activeCategory < categories.length && activeCustomer < categories[activeCategory].customers.length) {
		items = categories[activeCategory].customers[activeCustomer].items;		
	}
	
	var imageSelector = document.getElementById("imageselector");
	var pict = document.getElementById("schijfjes");
	var descr = document.getElementById("description");
	var ih = "";
	for (var i = 0; i < items.length; i++) {
		ih += "<li style=\"background-image: url('" + items[i].icon + "')\">";
		var cls = (i == activeImage)?" class=\"active\"":"";
		ih += "<a" + cls + " onmouseover=\"SetActiveImage(" + i + ")\"></a></li>";
	}
	if (items.length == 0) {
		pict.style.backgroundImage = "none";
		imageSelector.innerHTML = "";
		descr.innerHTML = "";
	}
	else {
		pict.style.backgroundImage = "url('" + items[activeImage].image + "')";

		imageSelector.innerHTML = "<ul>" + ih + "</ul>";
		descr.innerHTML = "<h1>" + items[activeImage].header + "</h1>" + items[activeImage].body;		
	}
	
}

function GetRequestParam(name) {
	name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
	var regexS = "[\\?&]"+name+"=([^&#]*)";
	var regex = new RegExp(regexS);
	var results = regex.exec(window.location.href);
	if(results == null) {
		return "";
	} else {
		return results[1];
	}
	
function MM_showHideLayers() { //v9.0
  	var i,p,v,obj,args=MM_showHideLayers.arguments;
  	for (i=0; i<(args.length-2); i+=3) 
  	with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
	}

}