var currentItem = 0;
var currentSubItem = 0;

// Content

var menuTimer;

// Specify submenu-items:
var PortFolioSub = new Array();
var GallerieSub = new Array();
var WinkelSub = new Array();

var LoginSub = new Array();

var Menu = new Array();
Menu[0] = new MenuItem("Home", "Terug naar begin", "/", null);
Menu[1] = new MenuItem("Portfolio", "Portfolio", "/Portfolio/", PortFolioSub);
Menu[2] = new MenuItem("Galerie", "Galerie", "", GallerieSub);
Menu[3] = new MenuItem("Contact", "Neem contact op", "/page/contact/", WinkelSub);
//Menu[4] = new MenuItem("Inloggen", "Prive gedeelte", "login.asp", LoginSub);


// Constructors

function MenuItem(name, title, link, subMenu) {
	// Creates an menu-item object
	this.name = name;
	this.title = title;
	this.link = link;
	this.subMenu = subMenu;	
}

function Topic(name, url, title) {
	// Creates a topic which can be placed in a submenu
	this.name = name;
	this.url = url;
	this.title = title;
}

// Functions for modifying the menu

function updateSub(menuIndex) {
	// --- First update background-color of all items ---
	for(i=0; i < Menu.length; i++) {
		if(menuIndex == i) {
			document.getElementById("Item"+i).style.backgroundColor='black';
			document.getElementById("Item"+i).style.color='white';
		} else {
			document.getElementById("Item"+i).style.backgroundColor='transparent';
			document.getElementById("Item"+i).style.color='white';
		}
	}
	
	// --- Now write the submenu and insert it into the layer ---
	var content = "<div align='" +Menu[menuIndex].align+ "'>";
	switch (menuIndex) {
		case 0:		content += "<span class='menuTopic'>Welkom op Pixture.nl</span>";
				break;
		case 1:		content += "<span class='menuTopic'>Een selectie uit het werk...</span>";
				break;
		default:	var topics = Menu[menuIndex].subMenu;
				for(i=0; i < topics.length; i++) {
					content += (menuIndex == currentItem && i == currentSubItem)? "<span class='activeTopic'>" : "<span class='menuTopic'>";
					content += "<A HREF='javascript: openLink(" +menuIndex+ ", "+i+")' class='active' title='" +topics[i].title+ "'>";
					content += topics[i].name + "</a>";
					content += (i < (topics.length -1))? "</span> | " : "</span>";
				}
	}	
	writeLayer(content);
} 

function openMenuLink(menuIndex) {
	// Opens the link of a menuItem
	if (Menu[menuIndex].link != '') {
		currentItem = menuIndex;
		currentSubItem = 0;
		window.open(Menu[menuIndex].link, '_top');
	}	
}

function openLink(menuIndex, subIndex) {
	// Opens the link of the selected item in the submenu
	currentItem = menuIndex;
	currentSubItem = subIndex;
	updateSub(menuIndex);
	window.open(Menu[menuIndex].subMenu[subIndex].url, '_top');
}

function writeLayer(text) {
	document.getElementById("submenu").innerHTML = text;
}

function changeImage(menuIndex) {
	document.all.menuPic.src = Menu[menuIndex].picture;	
}

function writeHeading() {
	if(Menu == null) document.write("Error initializing menu...");
	else {
		var content = "<div id='menu' onMouseout='setTimer()' onMouseover='clearTimer()'>";
		for(i=0; i < Menu.length; i++) {
			content += "<span id='Item"+i+"' onMouseOver='updateSub(" +i+ ")'";
			content += " onclick='openMenuLink("+i+")' title='" +Menu[i].title+ "'>" +Menu[i].name+ "</span>";
		}
		content += "</div>"
		document.write(content);
	}
}

function resetMenu() {
	updateSub(currentItem);
}

function setTimer() {
	menuTimer = setTimeout('resetMenu()', 400);
}

function clearTimer() {
	clearTimeout(menuTimer);
}