Menu = Class.create(
{
	// Variables
	itemArray: new Array(),
	itemMargin: 15,
	height: 40,
	itemWidth: 130,
	inactiveHeight: 30,
	duration: 0.3,
	delay: 0.08,
	disabled: false,
	activeItem: false,

	initialize: function(refObjId)
	{
		this.id = "Menubar";
		this.div = document.getElementById(this.id);
		this.refObjId = refObjId;
		
		// Empty div
		this.div.innerHTML = '';
		
		// Add menuitems
		for (var i=0, len=PHP.navigation.menuItems.length; i<len; ++i )
		{
			this.addMenuItem(PHP.navigation.menuItems[i]);
			
			// Preserve reference to active item
			if (PHP.navigation.menuItems[i].active)
				this.activeItem = this.itemArray.last();
		}
		
		// Set size and position
		this.updateSizeAndPos();
		
		// Make div visible
		this.div.style.display = 'block';
		
		// Show items
		if (PHP.navigation.dropIn)
			this.animateDropIn()
		else
			this.show();
	},
	
	// Functions
	getPosX:   function() {return document.getElementById(this.id).style.left.replace(/[^0-9]/g,"");},		
	setPosX:   function(x) {document.getElementById(this.id).style.left=x+'px';},
	getPosY:   function() {return document.getElementById(this.id).style.top.replace(/[^0-9]/g,"");},	
	setPosY:   function(y) {document.getElementById(this.id).style.top=y+'px';},
	getWidth:  function() {return Number(this.div.style.width.replace(/[^0-9]/g,""));},
	setWidth:  function(w){this.div.style.width=Math.round(w)+'px';},
	getHeight: function() {return Number(this.div.style.height.replace(/[^0-9]/g,""));},		
	setHeight: function(h){this.div.style.height=Math.round(h)+'px';},

	/** Add an item to the bar
	  * @param name
	  */
	addMenuItem: function(args)
	{
		this.itemArray.push(new MenuItem(this, args));
	},
	
	updateSizeAndPos: function()
	{
		// Update size of menuItems and add up widths in newWidth
		newWidth = 0;
		itemX = 0;
		this.itemArray.each(function(item)
		{
			item.updateSize();
			item.setPosY(0);
			item.setPosX(itemX);
			itemX += item.getWidth() + item.Menubar.itemMargin;
			newWidth += item.getWidth() + item.Menubar.itemMargin;
		});
		
		// Remove last margin
		newWidth -= this.itemMargin;
		newHeight = this.height;
		
		// Update my size
		this.setWidth(newWidth);
		this.setHeight(newHeight);
		
		this.updatePos();
	},
	
	updatePos: function()
	{
		// Y
		refPos = $(this.refObjId).viewportOffset();
		this.setPosY(refPos.top);
		
		// X
		refWidth = $(this.refObjId).getWidth();
		CenterX = Math.round(refWidth / 2)-3;
		newPosX = Math.round(CenterX - (this.getWidth() / 2));
		this.setPosX(refPos.left + newPosX);
	},
	
	show: function ()
	{
		for (var i=0, len=this.itemArray.length; i<len; ++i )
		{
			this.itemArray[i].show();
		}		
	},
	
	animateDropIn: function()
	{
		for (var i=0, len=this.itemArray.length; i<len; ++i )
		{
			// Set start position behind headerDiv			
			this.itemArray[i].setPosY(-this.itemArray[i].Menubar.height);
			
			// Set visible
			this.itemArray[i].div.style.display = 'block';
			
			// Start animation
			new Effect.Move(this.itemArray[i].id, 
			{
				delay: this.delay*(i+1), 
				duration: this.duration, 
				x:0, 
				y:this.height, 
				mode: 'relative',
				afterFinish: this.itemArray[i].animateToInActive.bindAsEventListener(this.itemArray[i])
			})
		};
		
		if (this.activeItem != false) this.activeItem.animateToActive({delay: this.delay*(i*2)});		
	},
	
	animateOut: function()
	{
		this.disabled = true;
		
		for (var i=0, len=this.itemArray.length; i<len; ++i )
		{
			// Start animation
			new Effect.Move(this.itemArray[i].id, 
			{
				duration: this.duration, 
				x: this.itemArray[i].getPosX(), 
				y: -this.height, 
				mode: 'absolute'
			})
		};
	}
});

MenuItem = Class.create(
{
	initialize: function(Menubar, args)
	{
		// Constructor
		this.Menubar = Menubar;
		this.name = args.name;
		this.active = args.active;
		typeof(args.caption) != "undefined" ? this.caption = args.caption : this.caption = args.name;
		this.id = 'menuItem_' + this.name;
		
		this.div = new Element('div');
		this.div.setAttribute('id', this.id);
		this.div.menuItem = this;
		//this.div.style.lineHeight = this.Menubar.height +'px';
		this.div.style.backgroundColor = '#1A1A1A';
		this.div.style.backgroundImage= "url('/img/menubar_bg_bottom.gif')";
		this.div.style.backgroundPosition = "bottom center";
		this.div.style.backgroundRepeat = "no-repeat";
		this.div.style.color = '#53f602'; /* zacht groen */
		this.div.style.position = 'absolute';
		this.div.style.display = 'none';
		this.div.style.zIndex = 102;
		this.div.style.textAlign = 'left';
		this.div.style.padding = '0px';
		this.div.style.paddingLeft = '5px';
		this.div.style.paddingTop = '15px';
		this.div.style.cursor = 'pointer';
		
		// Set bouncing gt
		this.div.addClassName('BouncingLink');
		
		if (!this.active)
		{
			Event.observe(this.div, 'mouseover', this.animateToActive.bindAsEventListener(this));		
			Event.observe(this.div, 'mouseout', this.animateToInActive.bindAsEventListener(this));		
		}
		
		Event.observe(this.div, 'click', this.onClick.bindAsEventListener(this));		
		
		// Add gt image
		var img = new Element('img', {id: 'ImgBounce_'+this.name, src: '/img/menubar/gt.gif'});
		this.div.insert(img);
		
		// Add text
		var text = document.createTextNode('' + this.caption + '...');
		this.div.appendChild(text);
		$(this.Menubar.id).insert(this.div);
	},
	
	// Functions
	getPosX:   function() {return document.getElementById(this.id).style.left.replace(/[^0-9]/g,"");},		
	setPosX:   function(x) {document.getElementById(this.id).style.left=x+'px';},
	getPosY:   function() {return document.getElementById(this.id).style.top.replace(/[^0-9]/g,"");},	
	setPosY:   function(y) {document.getElementById(this.id).style.top=y+'px';},
	getWidth:  function() {return Number(this.div.style.width.replace(/[^0-9]/g,""));},
	setWidth:  function(w){this.div.style.width=Math.round(w)+'px';},
	getHeight: function() {return Number(this.div.style.height.replace(/[^0-9]/g,""));},		
	setHeight: function(h){this.div.style.height=Math.round(h)+'px';},

	updateSize: function()
	{
		// Update size
		this.setWidth(this.Menubar.itemWidth);
		this.setHeight(this.Menubar.height-15); // Minus padding
	},
	
	show: function()
	{
		// Set visible
		this.div.style.display = 'block';

		this.active ? 
			this.setPosY(0) : this.setPosY(-this.Menubar.height + this.Menubar.inactiveHeight);
	},
	
	animateToActive: function(args)
	{
		if (this.Menubar.disabled) return;
		
		effectArgs = 
		{
			duration: 0.15, 
			x:this.getPosX(), 
			y:0, 
			mode: 'absolute'
		};
		
		if (typeof(args) == 'object')
		{
			if (typeof(args.delay) == 'number')
			{
				effectArgs.delay = args.delay;
			}
		}
	
		new Effect.Move(this.id, effectArgs);		
	},

	animateToInActive: function(args)
	{
		if (this.Menubar.disabled) return;
		if (this.clicked) return;
		
		menuItem = this;
		effectArgs = 
		{
			duration: 0.15, 
			x:menuItem.getPosX(), 
			y:-(menuItem.Menubar.height - menuItem.Menubar.inactiveHeight), 
			mode: 'absolute'
		}
		
		if (typeof(args) == 'object')
		{
			if (typeof(args.afterFinish) == 'function')
				effectArgs.afterFinish = args.afterFinish;
		}
		
		new Effect.Move(menuItem.id, effectArgs)
	},
	
	onClick: function()
	{
		this.clicked = true;
		if (this.Menubar.activeItem != false)
			this.Menubar.activeItem.animateToInActive();
			
		Effect.Appear('Cover',{	duration: 0.3,
								afterFinish: this.gotoLink.bindAsEventListener(this)
								});
	},
	
	gotoLink: function()
	{
		self.location = '/nl/'+this.name+'/';
	}
});

function fadeToLink(url)
{
	document.newLocation = url;
	Effect.Appear('Cover', {
							duration: 0.3,
							afterFinish: function()
												{
													self.location = document.newLocation;
												}
							});
}


function onLoad()
{
	if (PHP.navigation.home == false)
	{
		Menu = new Menu('MenubarHook');
	}

	Effect.Fade('Cover', { afterFinish: function() {$('Cover').className = "MiddleCover";}});
	
	// Activate bouncing links
	activeBouncingLinks();
}

function showElement(name)
{
	$(name).style.visibility = 'visible';
	$(name).show();
}

function hideElement(name)
{
	$(name).hide();
}

function onMouseMove(e)
{
	if (!e) var e = window.event;

	Mouse.x = e.clientX;
	Mouse.y = e.clientY;
	Mouse.moved = true;

	return true;
}

function periodical()
{
	checkResize();
	mouseMoved();
}

function checkResize()
{
	var dims = document.viewport.getDimensions();
	
	if ((dims.width != window.Screen.previousWidth) || (dims.height != window.Screen.previousHeight))
	{
		window.Screen.previousWidth  = dims.width;
		window.Screen.previousHeight = dims.height;
		
		window.Menu.updatePos();
	}	
}

function mouseMoved()
{
	if (Mouse.moved)
	{
		Mouse.moved = false;
		for (i = 0; i < MouseMoved.length; i++) { 
			MouseMoved[i]();
		}
	}
}

function backToHome()
{
	if (PHP.navigation.home) return; // Already there
	
	Menu.animateOut();
	Effect.Appear('Cover', {	duration: 0.3, 
								delay: Menu.duration,
								link: '/nl/',
								afterFinish: function(obj)
								{	
									self.location = this.link;
								}
							});
}

function activeBouncingLinks()
{
	links = $$('.BouncingLink');
	
	for (i = 0; i < links.length; i++) { 
		link = links[i];
		
		link.observe('mouseover', function(event) {
			var name = Event.element(event).id.split('_');
			name.shift();
			name = name.join('_');
			
			// Get image
			img = $('ImgBounce_'+name);
			
			src = img.src.split('/');
			name = src[src.length-1];
			src.pop();
			src = src.join('/');
			double = name == 'gt2.gif';
			
			// New src
			newsrc = src + '/gt';
			if (double) newsrc = newsrc + '2';
			newsrc = newsrc + '_animated.gif';
			img.oldsrc = img.src;
			img.src = newsrc;
		});

		link.observe('mouseout', function(event) {
			var name = Event.element(event).id.split('_');
			name.shift();
			name = name.join('_');
			
			// Get image
			img = $('ImgBounce_'+name);

			img.src = img.oldsrc;			
		});
	}
}

/**
* Function : dump()
* Arguments: The data - array,hash(associative array),object
*    The level - OPTIONAL
* Returns  : The textual representation of the array.
* This function was inspired by the print_r function of PHP.
* This will accept some data as the argument and return a
* text that will be a more readable version of the
* array/hash/object that is given.
*/
function dump(arr, level)
{
	var dumped_text = "";
	if(!level) level = 0;
	
	//The padding given at the beginning of the line.
	var level_padding = "";
	for(var j=0;j<level+1;j++) level_padding += "    ";
	
	if(typeof(arr) == 'object') { //Array/Hashes/Objects
	 for(var item in arr) {
	  var value = arr[item];
	 
	  if(typeof(value) == 'object') { //If it is an array,
	   dumped_text += level_padding + "'" + item + "' ...\n";
	   dumped_text += dump(value,level+1);
	  } else {
	   dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
	  }
	 }
	} else { //Stings/Chars/Numbers etc.
	 dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
	}
	return dumped_text;
}

// Set global variables
Mouse = {x: 0, y: 0, moved: false};
Screen = {previousWidth: document.viewport.getWidth(), previousHeight: document.viewport.getHeight()};
var MouseMoved = [];

// Set events
document.onmousemove = onMouseMove;

// Set periodical function
new PeriodicalExecuter(periodical, 0.1);