/*document.id(window).load(function() {
        // No we can paint our canvas. Something rounded with a shadow ;-)
      document.id('#content').liquidCanvas(
          '[shadow{} fill{color:#fff}] => roundedRect{radius:10}');
      
      document.iddocument.iddocument.iddocument.id('h6').liquidCanvas(
            '[fill{coldocument.idor:#bb4a4e}] => roundedRect{radius:5}');
      
      document.id('#mainmenu .CMSListMenuLI').liquidCanvas(
            '[fill{color:#bbb}] =>  ecken{tl:6; bl:0; br:0; tr:6}');
            
});*/

//  à virer, les références js lc et shadedborder


window.addEvent("domready", function(){
	
	
	
	 new Mainmenu();
	 //var myBorder = RUZEE.ShadedBorder.create({ corner:8, shadow:16 });
     // myBorder.render('content');
    // myBorder.render(document.iddocument.id('#mainmenu ul li.CMSListMenuLI '));	
});
				
////////////////////////////////////////////////

(function($){ this.X = new Class({ initialize: function(element){ this.element = $(element); } }); })(document.id); 

var Mainmenu = new Class({
	
	initialize: function(){	
		
		if ((Browser.Engine.trident==true)&&(Browser.Engine.version<6)){ 
			this.is_ie6 = true;
			//alert('ie<8');
		}
		var all_lis = document.id('mainmenu').getElements('li');
		var sub_lis = document.id('mainmenu').getElements('li li');
		this.main_lis = all_lis.differentiate(sub_lis);
		
		this.submenudiv = new Element('div').set('id','submenu').inject(document.id('mainmenu'),'after');
			
		this.main_lis.each( function( main_li ){
			
			var submenu = main_li.getFirst('ul');
			if(submenu == null) return;
			
			submenu.height = submenu.getStyle('height');
			submenu.left = main_li.getPosition().x.toInt() - document.id('content').getPosition().x.toInt();
			submenu.setStyles({'height':0,'opacity':0, 'left':submenu.left});
			submenu.inject(this.submenudiv);
			
			submenu.fx = new Fx.Morph(submenu, {duration: 400, transition: Fx.Transitions.Sine.easeOut});
			
			//var myFx = new Fx.Slide(list).hide();
			main_li.addEvents({
				'mouseenter' : function(){
					if (this.is_ie6 == true){
						this._open_ie(submenu, main_li);
					}else{
						this._open(submenu, main_li);
					}
				}.bind(this),
				'mouseleave' : function(){
					if (this.is_ie6 == true){
						this._close_ie(submenu, main_li);
					}else{
						this._close(submenu, main_li);
					}
				}.bind(this)
			});
			
			submenu.addEvents({
				'mouseenter' : function(){
					if (this.is_ie6 == true){
						this._open_ie(submenu, main_li);
					}else{
						this._open(submenu, main_li);
					}
				}.bind(this),
				'mouseleave' : function(){
					if (this.is_ie6 == true){
						this._close_ie(submenu, main_li);
					}else{
						this._close(submenu, main_li);
					}
				}.bind(this)
			});
			
		}.bind(this))
	},
	
	
	_open:function(target, target_parent_li){
		target.fx.cancel();
		target.fx.start({
			'opacity':1,
			'height':target.height
		});
		target_parent_li.addClass('selected');
	},
	
	_close:function(target, target_parent_li){
		target.fx.cancel();
		target.fx.start({
			'opacity':0,
			'height':0
		});
		target_parent_li.removeClass('selected');
	},
	
	_open_ie:function(target, target_parent_li){
		//target.fx.cancel();
		target.setStyles({
			'opacity':1,
			'height':target.height
		});
		target_parent_li.addClass('selected');
		//alert('open');
	},
	
	_close_ie:function(target, target_parent_li){
		//target.fx.cancel();
		target.setStyles({
			'opacity':0,
			'height':0
		});
		target_parent_li.removeClass('selected');
	}
	
	
});





////////////////////////////////////////////

Array.implement({
	
	/**
	 * Creates an intersection of the current system and the given one.
	 * Returns as new array.
	 * @param Array array
	 */
	intersect: function(other) {
		var cpy = this.slice();
		this.each(function(el) {
			if (other.indexOf(el) < 0) {			
				cpy.splice(cpy.indexOf(el), 1);
			}
		}, this);
		return cpy;
	},
	
	/**
	 * Returns the symmetric difference between this array and the given one.
	 * Means the items both arrays include are removed from both and then both are combined.
	 */
	differentiate: function(other) {
		var src = this.slice();
		var cmp = other.slice();
		other.each(function(elem) {
			if (src.indexOf(elem) > -1) {
				// remove from both
				src.splice(src.indexOf(elem), 1);
				cmp.splice(cmp.indexOf(elem), 1);
			}
		}, this);
		// combine remaining items
		return src.combine(cmp);
	},
	
	/**
	 * Returns the given number of elements from the array starting 
	 * at the given index.
	 * @param int start index
	 * @param int number of elements to return
	 */
	getRange: function(start, elements) {
		var res = [];
		var j = 0;
		var upper = start + elements > this.length ? this.length : start + elements;
		if (start >= 0) {
			for (var i = start; i < upper; i++) {
				res[j++] = this[i];
			}
		}
		return res;
	}

});


///////////////////////////////////////////////////////////////////







/*this.container=document.id('quote');
		this.box=document.id('quote-block');
		
		this.box.fx = new Fx.Morph(this.box, {duration: 600, transition: Fx.Transitions.Sine.easeOut});
		this.box.set({'display':'none'});
		
		this.container.h = this.container.getStyle('height').toInt();
		this.box.h = this.box.getStyle('height').toInt();
	
		console.log("hi: "+this.box.h);
		
		var newpadding = Math.floor((this.container.h-this.box.h)/2);
		
		
		//this.box.fx.start({});
		this.box.fx.start({
			'opacity':[0,1],
			'margin-top':newpadding
		});
		*/