var TridentFix = new Class({
	tridentFix: function(item){
		item.addEvents({
			'mouseover':function(){
				this.addClass('iehover');
			},
			'mouseout':function(){
				this.removeClass('iehover');
			}
		});
	}
});


var DropMenu = new Class({
	Implements: [Options, TridentFix],
	options: {
		mode: 'horizontal'
	},
	menu: null,
	zlevel: 1000,
	initialize: function(menu,options){
		if(options) this.setOptions(options);
	
		this.menu = $(menu);
		
		$(menu).setStyle('z-index', this.zlevel);
		
		// grab all of the menus children - LI's in this case
		var children = this.menu.getChildren();
		
		// loop through children
		children.each(function(item,index){
			// declare some variables 
			var firstChild, list;

			firstChild = item.getFirst();
			list = firstChild.getNext('ul');
			
			// check if IE, if so apply fix
			if(Browser.Engine.trident) this.tridentFix(item);
			
			// if there is a sub menu UL
			if(list){
				
				$(list).setStyle('z-index', this.zlevel)
				var newSubIndicator = new Element('span').set('html','\»').addClass('subIndicator').setStyle('z-index', this.zlevel);
				item.adopt(newSubIndicator);				
				item.subIndicator = newSubIndicator;
				
				list.parentEl = item;
				item.subMenu = list;
				
				
				
				new SubMenu(list, this.zlevel + 1); // hook up the subMenu
			}
		},this); // binding loop to this object for trident fix

	}	
});



var SubMenu = new Class({
	Implements: [Options, TridentFix],
	options: {
		mode: 'vertical'
	},
	menu: null, // storage for menu object
	zlevel: 1001, 
	colThreshold: 10,
	initialize: function(el,zlevel,options){
		if(options) this.setOptions(options); // set options
		if(zlevel) this.zlevel = zlevel;// set depth
		
		this.menu = el; //attach menu to object
		$(el).setStyle('z-index', this.zlevel);
		this.menu.fade('hide'); // set menu to hid
		this.menu.parentEl.addEvents(this.parentEvents); 
		
		// get menu's child elements
		var children = this.menu.getChildren();
//			
//		// count items and convert to multi column if over threshold
//		if(children.length > this.colThreshold)
//		{
//			// so how many cols?
//    	var colCount = ((children.length - (children.length % this.colThreshold) ) / this.colThreshold) + (((children.length % this.colThreshold) > 0) ? 1 : 0);
//			var wid = $(el).getStyle('width').toInt();
//			if(wid)
//			{
//				$(el).setStyles({width: (wid * colCount)});
//				// reorder items to appear in columns
//				
//				
//			}
//		}
			
			
		// loop through children
		children.each(function(item,index){
			// declare some variables 
			var firstChild, list;
			firstChild = item.getFirst();
			list = firstChild.getNext('ul');
			
			// check if IE, if so apply fix
			if(Browser.Engine.trident) this.tridentFix(item);
			
			// if the menu item has a sub_submenu
			if(list){

				var newSubIndicator = new Element('span').set('html','\»').addClass('subIndicator').setStyle('z-index', this.zlevel);
				item.adopt(newSubIndicator);
				item.subIndicator = newSubIndicator;
				
				list.parentEl = item;
				item.subMenu = list;
				
				// create new subMenu with depth incremented
				new SubMenu(list,this.zlevel + 1);
			}
		},this); //bound to this for trident fix
	},
	// menu parent mouse events
	parentEvents: {
		'mouseover': function(){
				/*
				var p = this.getParent('ul');
				if(p){
					$(p).addClass('faded');
				}
				*/
				//$(this).getFirst().addClass('on');				
				this.subMenu.fade('in');
		},
		'mouseout': function(){
				/*
				var p = this.getParent('ul');
				if(p){
					$(p).removeClass('faded');
				}
				*/
				//$(this).getFirst().removeClass('on');
				this.subMenu.fade('out');
		}
	}
	
});