expandableMenu = Class.create();

expandableMenu.prototype = {
	menuBox:null,
	allHeads:null,
	IMAGECONTRACT:'/images/min_icon.gif',
	IMAGEEXPAND:'/images/plus_icon.gif',
	initialize : function() {
		if(!$('menuBoxUl'))return false;
		
		this.menuBox = $('menuBoxUl');
		
		var heads = this.menuBox.immediateDescendants();
		heads = this.stripSubCatContainers(heads);
		this.allHeads = heads;
		heads.each(function(head){	
			clickable = this.getClickable(head);
			clickable.observe("click",
			this.handleClick.bindAsEventListener(this,head));
		}.bind(this));
	},
	
	stripSubCatContainers : function(heads)
	{
		var result = [];
		for(var i = 0; i < heads.length; i++)
		{
			if(heads[i].select('ul').length == 1 && this.hasUl(heads[i])){
				result.push(heads[i]);
			} 
		}
		return result;
	},
	hasUl : function(element)
	{
		if(element == null)return false;
		if(element.getElementsByTagName('ul').length > 0){
			return true;
		} else {
			return false;
		}
	},
	getClickable : function(head)
	{
		element = head.getElementsByClassName('menuImage');
		if(element.length > 0)
		{
			return element[0];
		} else {
			return false;
		}
	},
	handleClick : function(e,head)
	{
		var element = Event.element(e);
		
		if(element.src.indexOf(this.IMAGEEXPAND) != -1)
		{
			this.closeAllButOne(head);
		} else {
			this.contractElement(head);
		}
	},
	closeAllButOne : function(clickedElement)
	{
		this.allHeads.each(function(head){
				if(head != clickedElement){
					this.contractElement(head);	
				}
		}.bind(this));
		this.expandCategorie(clickedElement);
	},
	
	contractElement : function(head)
	{
		this.setImageToPlus(head);
				
				var ulToClose = this.getSubcatUl(head);
					
			
				if(ulToClose)
				{
			 this.setClassHidden(ulToClose); 
			      this.setClassDeactive(head);
				}
	},
	
	setImageToPlus : function(head)
	{
		image = this.getImageFromHead(head);
		if(image){
			image.src = this.IMAGEEXPAND;
		}
	},
	
	setImageToMin : function(head)
	{
		image = this.getImageFromHead(head);
		if(image){
			image.src = this.IMAGECONTRACT;
		}
	},
	
	getImageFromHead : function(head)
	{
		element = head.getElementsByClassName('menuImage');
		if(element.length >0)
		{
			image = element[0].getElementsByTagName('img');
			if(image.length > 0)
			{
				return image[0];
			}
		}
		return false;
	},
	
	setClassHidden : function(ElementToHide)
	{
		ElementToHide.className = 'subcat hidden';
	},
	
	setClassVisible : function(elementToShow)
	{
		elementToShow.className = 'subcat subContent';
	},
	
	setClassActive : function(elementToActivate)
	{
		elementToActivate.className = 'active';
	},
	
	setClassDeactive : function(elementToDeactivate)
	{
		elementToDeactivate.className = '';
	},
	
	expandCategorie : function(head)
	{
		var subcatUl = this.getSubcatUl(head);
	
		if(subcatUl){
			
			var expandStartHeight 	= 0;
			var expandEndHeight 	= subcatUl.getHeight() - 4;
			
			//stel de hoogte in van het element
			subcatUl.style.height = expandStartHeight + 'px';
			
			this.setClassVisible(subcatUl);
			this.setClassActive(head);
			this.setImageToMin(head);
			var expandScaleOptions = {scaleMode: {originalHeight: expandEndHeight}, scaleX:false, scaleContent:false, scaleFrom:expandStartHeight,duration:0.1};
			new Effect.Scale(subcatUl,100,expandScaleOptions);
		} else {
			return false;
		}
	},
	
	getSubcatUl : function(head)
	{
		var ulToClose = head.getElementsByClassName('subcat');
		if(ulToClose.length>0)
		{
			return ulToClose[0];
		} else {
			return false;
		}
	}
	
}
function initializeMain(){
	var menu = new expandableMenu();
}
addLoadEvent(initializeMain);