/*
 Moogets - MorphList 0.8 (formerly SlideList, aka Fancy Menu)
	- MooTools version required: 1.2
	- MooTools components required: 
		Core: Fx.Tween, Fx.Morph, Selectors, Element.Event and dependencies
		More: -

	Changelog:
		- 0.1: First release
		- 0.2: MooTools 1.2 compatible
		- 0.3: Now alters morphs width/height/top properties by default
		- 0.4: Morphing code now part of the function and not of the event.
		- 0.5: setOpacity changed to fade('show') so that visibility css is altered.
		- 0.6: 'left' class changed to 'inner', background options now can be passed in constructor. removed 'on' on fireEvent calls
		- 0.7: setCurrent and morphTo can be chained
		- 0.8: syntax changes
*/

/* Copyright: Guillermo Rauch <http://devthought.com/> - Distributed under MIT - Keep this message! */

var MorphList = new Class({   
	
	Implements: [Events, Options],
	
	options: {             
		onClick: $empty,
		/*
		onMorph: $empty,*/
		bg: { 'class': 'background', 'html': '<div class="inner"><b class="xtop"><b class="xb1"></b><b class="xb2 color_f"></b><b class="xb3 color_f"></b><b class="xb4 color_f"></b></b><div class="xboxcontent" style="height:23px;"></div><b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b></div>' },
		morph: { 'link': 'cancel' }
	},
	
	initialize: function(menu, options) {
		var that = this;
		this.setOptions(options);
		this.menu = $(menu);
		this.menuitems = this.menu.getChildren();
		var submenuitems = ['','submenu2','submenu3','','submenu5']; /*['submenu1','','submenu3'];*/
		var idx = 0;
		this.menuitems.each(function(el){
		    var regSubEvent = false;
		    var top = $(el);
            var sub = null;
            var vslsub = null;
            if( submenuitems[idx].length>0 && $chk($(submenuitems[idx])) ){
                sub = $(submenuitems[idx]);
//                alert('setting menu for ' + top.get('id') + ' : ' + sub.get('id') + '\n');
                var vslsub = new Fx.Slide($(submenuitems[idx]));
                vslsub.hide();
                sub.setStyle('display','');
                sub.addEvents({
                'mouseenter': function(e){ that.morphTo(el); if(regSubEvent){toggleSubMenu(1,top,sub,vslsub)};},
                'mouseleave': function(e){ if(regSubEvent){toggleSubMenu(0,top,sub,vslsub)};}
                });
                regSubEvent = true;
            }
                
            top.addEvents({
                'mouseenter': function(e){ that.morphTo(el); if (regSubEvent){toggleSubMenu(1,top,sub,vslsub)};},
                'mouseleave': function(e){ that.morphTo(that.current); if(regSubEvent){toggleSubMenu(0,top,sub,vslsub)};},
                'click': function(ev){ that.click(ev, this); }
            });
			idx+=1;
		});
		this.bg = new Element('li', this.options.bg).inject(this.menu).fade('hide').set('morph', this.options.morph);
		this.setCurrent(this.menu.getElement('.current'));
	},          
	click: function(ev, item) {
		this.setCurrent(item, true);
		this.fireEvent('click', [ev, item]);
	},
	setCurrent: function(el, effect){  
		if(el && ! this.current) {
			this.bg.set(
			    'styles', 
			    {   
			        left: seedfixOffsetLeft(0,el),
			        width: el.offsetWidth, 
			        height: el.offsetHeight, 
			        top: el.get('top') 
			    }
			);
//			alertDims(el);
			(effect) ? this.bg.fade('in') : this.bg.fade('show');
		}
		if(this.current) this.current.removeClass('current');
		if(el) this.current = el.addClass('current');    
		return this;
	},         
         
	morphTo: function(to) {
		if(! this.current) return false; 
		this.bg.morph({ 
		    left: seedfixOffsetLeft(0,to), 
		    top: to.get('top'), 
		    width: to.offsetWidth, 
		    height: to.offsetHeight });

		this.fireEvent('morph', to);
		return this;
	}

});

var alertDims = function(el){
    var posvals = el.getCoordinates();
    var msg = 'top: '+posvals.top+'\n';
    msg += 'left: '+posvals.left+'\n';
    msg += 'width: '+el.get('width')+'\n';
    msg += 'height: '+el.get('height')+'\n';
    msg += 'tag: '+el.get('tag')+'\n';
    alert(msg);
}
var seedfixOffsetLeft = function(seed,el){
    var osl;
    var isIE8 = false;
    var ver = '';
    try{ ver = navigator.appVersion; }catch(err){}
    if( ver.contains('MSIE 8') ){isIE8 = true;}
    
    //ie8 no longer has the offset issue
	if( Browser.Engine.trident==true&&isIE8==false ){ osl = seed+el.offsetLeft; } else { osl = el.offsetLeft; }
	//  alert('browser: '+Browser.Engine.name+'\nversion: '+Browser.Engine.version); 
    return osl;
}

var toggleSubMenu = function(state,top,sub,vsl){
    var coords = top.getCoordinates();
//    var msg = '';
//    msg += 'top: '+coords.top+'\n';
//    msg += 'right: '+coords.right+'\n';
//    msg += 'bottom: '+coords.bottom+'\n';
//    msg += 'left: '+coords.left+'\n';
//    msg += 'width: '+coords.width+'\n';
//    msg += 'height: '+coords.height+'\n';
//    alert(msg);
//    var left = '0';
//    if( Browser.Engine.trident==true ){
//        left=(seedfixOffsetLeft(136,el)+'px'; 
//    }else{ 
//        left=(top.offsetLeft).toString()+'px'; 
//    }
////    var width = '0';
////    if( sub.get('id')=='submenu3' ){width='';}else{ width=(coords.width).toString()+'px'; }
    sub.getParent().getParent().setStyles({
        'width': (coords.width+7).toString()+'px',
        'left': seedfixOffsetLeft(0,top).toString()+'px',
        'top': (coords.top+18).toString()+'px'
    });
    switch(state){case 0: vsl.hide();break; case 1: vsl.show();break;}
    //vsl.toggle();
}