/**
 * Aktivert die Fade Effekte im CSS Hovermenue
 */
Event.observe(window,'load', function() {
    $$('body')[0].setStyle({
        background: '#000'
    });
}); 

if (navigator.appVersion.indexOf('MSIE 6') == -1) {
    document.write('<link href="fileadmin/templates/default/css/hovermenu.css" rel="stylesheet" type="text/css">');
}

var hovermenu = Class.create({
    
    initialize: function(DIV)
    {
        this.mainContainerHeight = $('main').getHeight();
        
        this.checkBrowser();
        
        if (this.client == "IE6") {
            return;
        }

        $('header').setStyle({
            height: ( $('header').getHeight() - $('header').getStyle('padding-top').replace(/px/, '') ) + 'px'
        }); 
       
        $('backgroundholder').setStyle({
            height: $('header').getHeight() - 10 +"px",
            width: $('header').getWidth() +"px",
            position: 'absolute',
            paddingTop: '10px',
            top: 0,
            left: 0,
            filter: 'opacity(0)',
            opacity: 0
        }); 
        
        
        this.origHeaderHeight = $('header').getHeight();
        this.headerExpanded = false;
        this.expandedScale = 300;

        this.breakMenuCount = 7;
        this.lasMenuOverflow = 999;
        this.lang = {
            mehr : "mehr..."
        }
        
        this.getUL(DIV);
        this.items = {};
        this.getItems();
        
        this.positionItems();
        this.hideItems(false);
        this.addEvents();
        new Effect.Opacity($('backgroundholder'), {from: 0, to: 1, duration: 0.6, delay: 0.2});
        
        if (this.client == "IE7") {
            $('main').setStyle({
                height: this.mainContainerHeight + "px"
            });
        }
        
        /* $('backgroundholder').setStyle({
            filter: 'opacity(100)'
        }); */
        
    },
    
    enable: function()
    {
        for (var x in this.items) {
            this.addEvent(x);
        }
    },
    
    disable: function()
    {
        for (var x in this.items) {
            this.removeEvent(x);
        }
    },
    
    checkBrowser: function()
    {
        this.client = "default";
		if (navigator.appName == "Microsoft Internet Explorer") {
		    if (navigator.appVersion.indexOf('MSIE 6') != -1) {
		      this.client = "IE6";
		    }
		    if (navigator.appVersion.indexOf('MSIE 7') != -1) {
		      this.client = "IE7";
		    }
		    if (navigator.appVersion.indexOf('MSIE 8') != -1) {
		      this.client = "IE8";
		    }
        }
    },
    
    getUL: function(CONTAINER)
    {
        childs = CONTAINER.childNodes;
        for (var x in childs) {
            if (childs[x].nodeName && childs[x].nodeName == 'UL') {
                this.ul = childs[x];
                break;
            }
        }
    },
    
    /**
     * Versteckt die Unternavigation
     * Setzt die Eventhandler   
     */
    getItems: function()
    {
        var items = this.ul.childNodes;
        for (var x in items) {
            if (items[x].nodeName && items[x].nodeName == 'LI') {
                this.items[x] = {
                    element : items[x],
                    link: items[x].firstChild,
                    subnav : Element.getElementsBySelector(items[x], 'ul')[0],
                    headline : Element.getElementsBySelector(items[x], 'h2')[0],
                    image : Element.getElementsBySelector(items[x], '.headerimg')[0]
                }
                if (this.items[x].subnav) {
                    this.mouseOffsetY = this.items[x].subnav.getDimensions().height + Element.cumulativeOffset(this.items[x].subnav).top;
                    this.mouseOffsetX = this.items[x].subnav.getDimensions().width + Element.cumulativeOffset(this.items[x].subnav).left;
                }
            }
        }

    },
    
    /**
     * Positioniert die Untermenuepunkte
     */
    positionItems: function()
    {
        for (var x in this.items) {
            
            if (this.items[x].subnav) {
                
                //Bug verhindern: Display: none hat keien hoehe und breite
                //this.items[x].subnav.setStyle( {display: 'block'} );
                
                var breakMenuCount = this.breakMenuCount;
                var lasMenuOverflow = this.lasMenuOverflow;
                var offset = 20;
                var ratio = 2;
                var origPadding = this.items[x].subnav.style.paddingLeft.replace(/px/, '');
                var MenuHeight = this.items[x].subnav.getHeight() - this.items[x].subnav.getStyle('padding-top').replace(/px/,'') - this.items[x].subnav.getStyle('padding-bottom').replace(/px/,'');
                //var MenuHeight = this.items[x].subnav.select('li')[0].getHeight() * this.breakMenuCount;
                //console.log('MenuHeight: '+MenuHeight);
                
                if (x == 0) {
                    var paddingLeft = 40;
                } else {
                    var paddingLeft = (this.items[x].element.positionedOffset().left - this.items[x].subnav.positionedOffset().left + offset) / ratio + 40/x;
                }
                
                this.items[x].subnav.style.width = this.items[x].subnav.getWidth() - paddingLeft + "px";
                this.items[x].subnav.style.paddingLeft = paddingLeft + "px";

                if (this.items[x].image) {
                    if (this.client == "IE6") {
                        this.items[x].image.style.bottom = "0px";
                    } else {
                        if ( this.expandedScale > $('backgroundholder').getHeight() ) {
                             this.items[x].image.style.bottom = (this.expandedScale -22 )*-1 + "px";
                        } else {
                            this.items[x].image.style.bottom = 'auto';
                            this.items[x].image.style.top = ( $('backgroundholder').getHeight() - this.items[x].image.getHeight() + 2 ) + "px";
                        }
                    }
                }
                
                //Umbrechen bei mehr Eintraegen, als ins Menue passen
                pages = this.items[x].subnav.getElementsBySelector('li');
                
                var h = 0;
    
                for (z = 0; z < pages.length; z++) {
                    h = h + pages[z].getHeight();
                    if (h >= MenuHeight ) {
                        breakMenuCount = z-1;
                        break;
                    }
                }

                //console.log('breakMenuCount: '+breakMenuCount);
                var MenuMaxHeight = 0;
                if (this.items[x].subnav.firstChild) {
                  MenuMaxHeight = this.items[x].subnav.firstChild.getHeight() * breakMenuCount;
                }
                

                if (pages.length > breakMenuCount) {
                    h=0;
                    for (z = breakMenuCount-1; z < pages.length; z++) {
                        h = h + pages[z].getHeight();
                        if (h >= MenuHeight ) {
                            lasMenuOverflow = z-1;
                            break;
                        }
                    }
                }
                
                if (pages.length >= lasMenuOverflow) {
                    pages[lasMenuOverflow].firstChild.href = this.items[x].link.href;
                    pages[lasMenuOverflow].firstChild.innerHTML = '<strong class="arrow">'+this.lang.mehr+'</strong>';
                    for (z = lasMenuOverflow+1; z < pages.length; z++) {
                        pages[z].hide();
                    }
                }
                
                if (pages.length > breakMenuCount) {
                    this.items[x].subnav.style.paddingLeft = "30px";
                    var positions = [];
                    for (z = 0; z < pages.length; z++) {
                        pages[z].setStyle({
                            width: pages[z].getWidth() * 0.9 + "px"
                        });
    
                        //erst Positionen ermitteln, dann verschieben
                        if (z >= breakMenuCount) {
    
                           positions[z] = { 
                                top: (pages[z].positionedOffset().top - ( MenuMaxHeight ) )  + "px",
                                left: pages[z].positionedOffset().left + pages[z].getWidth() + 30 + "px"
                            }

                            //console.log("Objekt verschoben: "+pages[z]+" Von: "+pages[z].positionedOffset().top+" Nach: "+positions[z].top);
                        }
                    }
                    for (z = 0; z < pages.length; z++) {
                        if (z >= breakMenuCount) {
                            pages[z].setStyle({
                                position: 'absolute',
                                top: positions[z].top,
                                left: positions[z].left
                            });
                        }
                    }
                }
            
            }
        }
    },
    
    /**
     * Alle Elemente verstecken
     */
    hideItems: function(item)
    {
        for (var x in this.items) {
            if (!item || item != x) {
                if (this.items[x].act) {
                    
                    if (this.items[x].subnav) {
                        this.fadeEffect(this.items[x].subnav);
                    }
                    if (this.items[x].headline) {
                        this.fadeEffect(this.items[x].headline);
                    }
                    if (this.items[x].image) {
                        this.fadeEffect(this.items[x].image);
                    }

                    this.items[x].act = false;
                } else {
                    
                    if (this.items[x].subnav) {
                        this.items[x].subnav.hide();
                        this.items[x].subnav.setStyle({ visibility: 'visible' });
                        this.items[x].subnav.style.backgroundColor = "transparent";
                    }
                    if (this.items[x].headline) {
                        this.items[x].headline.hide();
                        this.items[x].headline.setStyle({ visibility: 'visible' });
                    }
                    if (this.items[x].image) {
                        this.items[x].image.hide();
                        this.items[x].image.setStyle({ visibility: 'visible' });
                    }
                    
                }
                this.items[x].element.className = this.items[x].element.className.replace(/sel_hover/, '');
                this.removeEvent(x);
                this.addEvent(x);
            }
        }
    },
    
    /**
     * Alle Elemente anzeigen
     */
    showItems: function()
    {
        for (var x in this.items) {
            if (!item || item != x) {
                if (this.items[x].act) {
                    
                    if (this.items[x].subnav) {
                        this.fadeEffect(this.items[x].subnav);
                    }
                    if (this.items[x].headline) {
                        this.fadeEffect(this.items[x].headline);
                    }
                    if (this.items[x].image) {
                        this.fadeEffect(this.items[x].image);
                    }

                    this.items[x].act = false;
                } else {
                    
                    if (this.items[x].subnav) {
                        this.items[x].subnav.hide();
                        this.items[x].subnav.style.backgroundColor = "transparent";
                    }
                    if (this.items[x].headline) {
                        this.items[x].headline.hide();
                    }
                    if (this.items[x].image) {
                        this.items[x].image.hide();
                    }
                    
                }
                this.items[x].element.className = this.items[x].element.className.replace(/sel_hover/, '');
                this.removeEvent(x);
                this.addEvent(x);
            }
        }
    },
    
    /**
     * Event Handler hinzufuegen
     */
    addEvents: function()
    {
        for (var x in this.items) {
            this.addEvent(x);
        }
        this.setFocusListener();
        
        Event.observe(window, "mousemove", function(e){
            
            this.mouseY = Event.pointerY(e);
            this.mouseX = Event.pointerX(e);
            
        }.bind(this));
    },
    
    /**
	* Setzt auf alle Link Elemente
	*/
   setFocusListener: function()
   {
	   for (var x in this.items) {

            this.items[x].link.hasFocus = false;
            ATags = Element.getElementsBySelector(this.items[x].element, 'a');
            for (var z = 0; z < ATags.length; z++) {
    		    ATags[z].hasFocus = false;
    	   		Event.observe(ATags[z], 'focus', function() {
    				this.hasFocus = true
    			});
    			this.addBlurEventOnLink(ATags[z]);
	       }
        }
   },
    
    addBlurEvents: function()
    {
        for (var x in this.items) {
            this.addBlurEventOnLink(this.items[x].link);
        }
    },
    
    addBlurEventOnLink: function(link)
    {
        Event.observe(link, "blur", function(e){
            link.hasFocus = false;
            window.setTimeout(function() {
                if (!this.checkFocus()) {
                    this.hideItems(false);
                    this.showActHeader(e);
                }
            }.bind(this,e), 100);
            
        }.bind(this, link));
    },
    
    addMouseMove: function()
    {
        Event.observe(document, "mousemove", function(e){
            if (this.checkMousePosition(e)) {
                return;
            }
            this.hideItems(false);
            this.showActHeader(e);
        }.bindAsEventListener(this));
    },
    
    hasHoverOrFocus: function(x)
    {
        //console.log(this.mouseY+'-'+this.mouseX);
                    
        if (this.items[x].link.hasFocus) {
            return false;
        }

        if ( this.mouseX > (this.items[x].element.cumulativeOffset().left + this.items[x].element.getWidth()) ) {
            return false;
        }
        //console.log('x: '+this.mouseX + ' - left+width: ' + (this.items[x].element.cumulativeOffset().left + this.items[x].element.getWidth()) );
        
        if ( this.mouseX < (this.items[x].element.cumulativeOffset().left) ) {
            return false;
        }
        
        if ( this.mouseY > (this.items[x].element.cumulativeOffset().top + this.items[x].element.getHeight()) ) {
            return false;
        }
        
        if ( this.mouseY < (this.items[x].element.cumulativeOffset().top) ) {
            return false;
        }
        
        return true;
    },
    
    fadeIn: function(x)
    { 
        this.hideActHeader();
    
        this.items[x].act = true;
        this.items[x].element.className = this.items[x].element.className + ' sel_hover';
        
        this.removeEvent(x);
        
        this.appearEffect(this.items[x].subnav);
        this.appearEffect(this.items[x].headline);
        
        if (this.client != "IE6") {
            this.appearEffect(this.items[x].image); 
        }
        
        window.setTimeout(this.fallBack.bind(this), 1000);
    },
    
    removeEvent: function(x)
    {
        Event.stopObserving(this.items[x].link, "mouseover");
        Event.stopObserving(this.items[x].link, "focus");
    },
    
    addEvent: function(x)
    {
        Event.observe(this.items[x].link, "mouseover", function(evt, x){
            
                window.setTimeout(function(x){
                    if (!this.hasHoverOrFocus(x)) {
                        return;
                    }
                    this.fadeIn(x);
                    this.hideItems(x);
                    
                }.bind(this, x), 300);
                
            }.bindAsEventListener(this, x));

        Event.observe(this.items[x].link, "focus", function(e, x){
                this.items[x].link.hasFocus = true;
                this.fadeIn(x);
                this.hideItems(x);
            }.bindAsEventListener(this, x));    
    },
    
    hideActHeader: function()
    {
        this.addMouseMove();
        this.addBlurEvents();
        
        this.fadeEffect($('act_headerimg'));
        this.fadeEffect($('title'));
        this.resizeHeader();
    },
    
    showActHeader: function(e)
    {
        new Effect.Appear($('act_headerimg'), {duration: 0.5, delay: 0.2});
        new Effect.Appear($('title'), {duration: 0.5, delay: 0.2});
        Event.stopObserving(document, "mousemove");
        this.shrinkHeader();
    },
    
    /**
     * Prueft, ob sich die Maus im Navigationsbereich befindet
     * Gibt true zurueck, wenn sich der Cursor in dem bereich befindet, in dem das Hover weiter angezeigt werden soll
     */
    checkMousePosition: function(e)
    {
        var mousex = Event.pointerX(e);
        var mousey = Event.pointerY(e);
        
        
        var miny = Element.cumulativeOffset(this.ul).top;
        var maxy = this.mouseOffsetY;
        
        var minx = Element.cumulativeOffset($('header')).left;
        var maxx = this.mouseOffsetX
        
        if (mousey > maxy || mousey < miny) {
            return false;
        }
        
        if (mousex > maxx || mousex < minx) {
            return false;
        }
        
        return true;
    },
    
    /**
     * Prueft, ob sich auf einem Element in den Subnavigationseben der Focus befindet
     */
    checkFocus: function()
    {
        for(var x in this.items) {
            var links = Element.getElementsBySelector(this.items[x].element, 'a');
            for (var z = 0; z < links.length; z++) {
                if (links[z].hasFocus == true ) {
                    return true;
                }
            }
        }
        return false;
    },
    
    fadeEffect: function(el) 
    {
        if (el) {
            if (this.client != "IE5") {
                new Effect.Fade(el, {duration: 0.5});
            } else {
                el.hide();
            }
        }
    },
    
    appearEffect: function(el)
    {
        if (el) {
            if (this.client != "IE5") {
                new Effect.Appear(el, {duration: 0.5});
            } else {
                el.show();
            }
        }

    },
    
    resizeHeader: function()
    {
        if (!this.headerExpanded && this.expandedScale > this.origHeaderHeight) {
            this.headerExpanded = true;
            new Effect.Scale($('header'), (this.expandedScale/$('header').getHeight())*100, {scaleX: false, duration: 0.5, scaleContent: false});
            new Effect.Scale($('backgroundholder'), (this.expandedScale/$('header').getHeight())*100, {scaleX: false, duration: 0.5, scaleContent: false});
        }
    },
    
    shrinkHeader: function()
    {
        if (this.headerExpanded) {
            this.headerExpanded = false;
            new Effect.Scale($('header'), (this.origHeaderHeight/($('header').getHeight()+10))*100, {scaleX: false, duration: 0.5, scaleContent: false});
            new Effect.Scale($('backgroundholder'), (this.origHeaderHeight/($('header').getHeight()+10))*100, {scaleX: false, duration: 0.5, scaleContent: false});
        }
    },
    
    /**
     * Wenn der FadeIn Effekt aus irgendeinem Grund nicht funktioniert, wird hier der Inhalt wieder eingeblendet
     */
    fallBack: function()
    {
        for(var x in this.items) {
            if (this.items[x].act || $('title').style.display != "none" ) {
                return;
            }
        }
        this.showActHeader(false);
    }
    
    
}); 

Event.observe(document, "dom:loaded", function(){
  zfh_hov = new hovermenu($('main_nav'));
});