/**************************************************************

	Script	: Kuse Slide Menu
	Version	: 1.0
	Authors	: Hans Breitenfellner & Sebastian Wolf
	Copyright	: 2008 Kuse.de - Werbeagentur

	Basierend auf Image Menu vs 2.2 von Samuel Birch

**************************************************************/

var ImageMenu = new Class({

	getOptions: function(){
		return {
			onOpen: false,
			onClose: Class.empty,
			openWidth: 80,
			transition: Fx.Transitions.Quad.easeOut,
			duration: 500,
			open: null,
			border: 0,
			fixedWidths: new Array(104, 76, 120, 96, 101, 99),

			// Margin Left - #Menu li a
			openMargin:22
		};
	},



	initialize: function(elements, options){
		this.setOptions(this.getOptions(), options);
		this.elements = $$(elements);

		this.widths = {};

		showSubDelay = "";
		subTimeout = "";
		subMenuIn = "";
		subMenuOut = "";
		subImg = "";
		subImgIn = "";

		openElement = this.elements[0];

		activeElement = "";

		// Breiten von #Menu li auslesen



		liWidths = new Array();
		this.firstLink = new Array();

		for(var y = 0; y < this.elements.length; y++) {
			liWidths[y] = this.options.fixedWidths[y];
			// Erstes a Element in li
			this.firstLink[y] = this.elements[y].getElementsByTagName('a')[0];
		}

		// Animation li width
		//this.fx = new Fx.Elements(this.elements, {onComplete: showSubMenu(activeElement), wait: false, duration: this.options.duration, transition: this.options.transition});
		this.fx = new Fx.Elements(this.elements, {wait: false, duration: this.options.duration, transition: this.options.transition});

		// Animation Link marginLeft
		fxLink = new Fx.Elements(this.firstLink, {wait: false, duration: this.options.duration, transition: this.options.transition});



		this.elements.each(function(el,i){

			// breite von Aktivem li + zusätzliche geöffnete Breite (openWidth)
			this.widths.openSelected = el.clientWidth+this.options.openWidth;

			// openWidth, aufteilen auf nicht aktive Li
			this.widths.openOthers = Math.round(this.options.openWidth / (this.elements.length-1));

			el.addEvent('mouseenter', function(e){
				new Event(e).stop();
				this.reset(i);
			}.bind(this));

			el.addEvent('mouseleave', function(e){
				new Event(e).stop();
				this.reset(this.options.open);
			}.bind(this));

			var obj = this;

		}.bind(this));

		this.UlOpacity();

	},

	UlOpacity: function() {
        this.UlList = $$('#Nav>li');
		this.UlList.each(function(el,i){
			if(i != this.options.open && el.getElementsByTagName('ul')[0]) {
				this.ulElement = el.getElementsByTagName('ul')[0];
				ulFade = new Fx.Elements(el.getElementsByTagName('ul')[0], {wait: true, duration: '0', transition: Fx.Transitions.Quad.easeOut});
				ulFade.start({
					'0': {'opacity': [0, 0]}
				});
			}
		}.bind(this));
	},

	reset: function(num){
		//console.debug('reset');
		if($type(num) == 'number'){
			var width = this.widths.openOthers;
			if(num+1 == this.elements.length){
				width += this.options.border;
			}
		}else{
			var width = 0;
		}
		//this.hideSubMenu(this.options.open);
		var obj = {};
		var link = {};
		this.elements.each(function(el,i){

                var w = width;
    			// Breite für Animation
    			obj[i] = {'width': liWidths[i] - w};

    			// Margin Berechnung " breite - ( 74 / 5 )
     			var finishSize = liWidths[i] - (this.options.openWidth / ((this.elements.length-1) / 2));

    			// Prozent Breite fuer Margin
    			var Percent = finishSize / (liWidths[i] / 100);
    			// End Margin fuer Animation
    			lnMargin = Math.round((this.options.openMargin/100) * Percent);
                // alert(lnMargin);

                // alert(finishSize + '/' + Percent);

    			// Wenn Mouse Over
			   	//alert(this.firstLink[i].getStyle('margin-left').toInt());
    			if($type(num) == 'number' && (this.firstLink[i].getStyle('margin-left') != lnMargin + "px")){
					//console.debug('reset.mouseover');
    				link[i] = {
    					'margin-left': [this.options.openMargin, lnMargin]
    				};

    			// Wenn Mouse Out
    			} else if(
    				this.firstLink[i].style.marginLeft != this.options.openMargin + "px" &&
    				this.firstLink[i].style.marginLeft != "" &&
    				(this.firstLink[i].style.marginLeft != lnMargin + "px" || $type(num) != 'number')
    				) {
					//console.debug('reset.mouseout');
    				link[i] = {
    					'margin-left': [lnMargin, this.options.openMargin]
    				};
    			}

		}.bind(this));


		if($type(num) == 'number'){
			obj[num] = {'width': liWidths[num] + this.options.openWidth};
		}

		// Starte Animationen
		fxLink.start(link);
		this.fx.start(obj);


	    //SubMenu aufrufen
		this.fx.onComplete(this.initSubMenu(num));

	},

	// Sub Menu
	initSubMenu: function(activeElement) {
		if(subMenuIn) subMenuIn.cancel();
		if(subMenuOut) subMenuOut.cancel();
		if(subImg) subImg.cancel();
		if(subImgIn) subImgIn.cancel();
		if(subTimeout) clearTimeout(subTimeout);
		$clear(showSubDelay);
		this.hideSubMenu(activeElement);
		showSubDelay = this.showSubMenu.delay(this.options.duration, this, activeElement);
	},

	// Lässt img.Arrow ausblenden und ul einblenden
	showSubMenu: function(activeElement) {
		activeArrow = $$('.Arrow')[activeElement];
        if(activeArrow) {
            laListElement = activeArrow.parentNode.parentNode.getElementsByTagName('ul')[0];
        }
	  	if(activeArrow && laListElement) {

			subImg = new Fx.Elements(activeArrow, {wait: true, duration: '50', transition: this.options.transition});
			subImg.start({
				'0': {'opacity': [activeArrow.getOpacity(), 0]}
			});

			activeEl = $$('.FirstLevel')[activeElement].getElementsByTagName('ul')[0];
			if(activeEl) {
				function showUl() {
					subMenuIn = new Fx.Elements(activeEl, {wait: true, duration: '50', transition: Fx.Transitions.Quad.easeOut});
					subMenuIn.start({
						'0': {'opacity': [activeEl.getOpacity(), 1]}
					});
				}
				subTimeout = setTimeout(showUl, '200');
			}
	   	}
	},

	// Lässt img.Arrow einblenden und ul aus
	hideSubMenu: function(activeElement) {

		this.elements.each(function(el, i){

			if(i != activeElement) {
				// Arrow Einblenden
				laArrows = $$('.Arrow');

				if(laArrows) {
					subImgIn = new Fx.Elements(laArrows[i], {wait: true, duration: '100', transition: Fx.Transitions.Quad.easeOut});
					subImgIn.start({
						'0': {'opacity': [laArrows[i].getOpacity(), 1]}
					});
			  	}

                // Menu Ausblenden
				activeEl = $$('.FirstLevel')[i];
				activeEl = activeEl.getElementsByTagName('ul')[0];

			   if (activeEl) {
                    subMenuOut = new Fx.Elements(activeEl, {wait: true, duration: '100', transition: Fx.Transitions.Quad.easeOut});
					subMenuOut.start({
						'0': {'opacity': [activeEl.getOpacity(), 0]}
					});
			   	}
			}
		});
	}
});

ImageMenu.implement(new Options);
ImageMenu.implement(new Events);



/*************************************************************/