var K3Menu = Class.create();  
K3Menu.prototype = {
 
	initialize: function(ul, options) {


		this.optionsDefault = $H({
			direction:'horizontal',  //or vertical
			cssSkin:"jsElementMenu",
			showOn:"mouseover",
			hideAfter:"1", //seconde
			zIndex:1000
		});
		
		this.options=this.optionsDefault.merge(options);
		
		this.ul = $(ul);
		this.lis = this.ul.select("li");
		this.hide();
		this.addCssClass();
		this.initPosition();
		this.addHandler();
		
		this.visibleUls = [];
		
		//console.debug('test');
		
		
	},



	addCssClass: function(){
		
		this.ul.addClassName("level_0");
		this.ul.setStyle({zIndex:this.options.get("zIndex")});
		this.ul._level = 0;
		
		this.ul.select("ul").each(function(ul){
			var ulParent=ul;
			var cpt=0;
			while(ulParent != this.ul){
				cpt++;
				ulParent = ulParent.up("ul");
			}
			cpt--;
			ul.addClassName("level_" + (cpt));
			ul._level = cpt;
			if(cpt>0){
				ul.addClassName("level_sub");
			}
		});
		
		//console.debug('addCssClass');
	},
	
	
	initPosition: function(){
		this.ul.select("ul.level_sub").each(function(ul){
			ul.setStyle({position:"absolute", top:"5px",left:"5px"});
		});	
		
		//console.debug('initPosition');
	},

	
	//hide all level except 0	
	hide: function(){
		this.ul.select("ul").invoke("hide");
	},
	
	
	
	addHandler: function(){
		
		this.ul.select("li").each(function(li){
			Event.observe(li, this.options.get('showOn'), function(e){
				this.showSubMenu(li,e);
				this.cancelTimer();
			}.bind(this));
		}.bind(this));
		
		var uls = this.ul.select("ul");
		uls.push(this.ul);
		
		uls.each(function(ul){
			Event.observe(ul, this.options.get('showOn'), function(e){this.cancelTimer();}.bind(this));
			Event.observe(ul, 'mouseout', function(e){this.startTimer()}.bind(this));
		}.bind(this));
		
		this.lis.each(function(li){
			var ul=li.down('ul');
			if(ul){
				li.childUl = ul;
			}	
		});
		
		//console.debug('addHandler');
	},
	
	
	
	showSubMenu: function(li,event){
		//console.debug("showSubMenu");
		var ul = li.down("ul");
		//console.debug(ul);
		if(ul){
			//console.debug('showing UL');
			ul.show();
			ul.setStyle({display: 'block'});
			
			if(!ul._positioned){
				this.placeUl(ul);
			}
		}
		this.hideAllOther(li);
		Event.stop(event);
	},
	 
	 
	 
	placeUl: function(ul){
		//console.debug("placeUl");
	
		parentLi = ul.up("li");
		width = parentLi.getWidth();
		height = parentLi.getHeight();
		if(this.options.get("direction")=="vertical"){
			Element.clonePosition(ul, parentLi, {offsetLeft:width});
		}else{
			if(ul._level == 1){  // must place the submenu on bottom of the previous one
				Element.clonePosition(ul, parentLi, {offsetTop:height, setWidth:false, setHeight:false});
			}else{ // must place the submenu on the right of the previous one
				Element.clonePosition(ul, parentLi, {offsetLeft:width, setWidth:false, setHeight:false});
			}
		}
		
		ul._positioned = true;
			
	},
	
	

	hideAllOther: function(liRef){
		//console.debug("hideAllOther");
	
		this.lis.each(function(li){
			if(li != liRef){
				if(li.childUl && li.visible() && !liRef.descendantOf(li)){
					li.childUl.hide();
				}
			}
		}.bind(this));
	},
	
	
	startTimer: function(){
		if(this.foo){
			return false;	
		}
		
		this.foo = true;
		
		this._pe = new PeriodicalExecuter(function(pe) {
			
			if(this.foo){
				this.hide();
				pe.stop();
			}
		}.bind(this),this.options.get('hideAfter'));
		
	},
	
	
	cancelTimer: function(){
		this.foo = false;
		
		if(this._pe){
			this._pe.stop();
		}
	}	
	
	


	

	
}