// JavaScript Document

window.addEvent('domready', function(){
    // ********* Initialisierungen
    var myFx1 = new Fx.Slide('sub1').hide();
    var myFx2 = new Fx.Slide('sub2').hide();
    //var myFx3 = new Fx.Slide('sub3').hide();
    //var myFx4 = new Fx.Slide('sub4').hide();
    var myFx5 = new Fx.Slide('sub5').hide();
    var myFx6 = new Fx.Slide('sub6').hide();
    var myFx7 = new Fx.Slide('sub7').hide();
    
    
    $('sub1').setStyle('display','block');
    $('sub2').setStyle('display','block');
    $('sub5').setStyle('display','block');
    $('sub6').setStyle('display','block');
    $('sub7').setStyle('display','block');
    
    // Ein- und Ausfahren der Navigation
    var tweenIt = function(richtung, menupunkt){
        if (richtung == 'in') {
            eval('myFx' + menupunkt + '.cancel();');
            eval('myFx' + menupunkt + '.slideIn();');
        }
        if (richtung == 'out') {
            eval('myFx' + menupunkt + '.cancel();');
            eval('myFx' + menupunkt + '.slideOut();');
        }
    }
    
    
    // ********* Events
    // Hier werden die Mouseover Events für die Navigation und Subnavigation gesteuert
    var names = ["img.schuhe", "div.schatten_mo_1", "div.showroom", "div.damen", "div.herren", "div.maedchen", "div.jungen", "div.freizeit", "div.sale"];
    for (var i in names) {
        $$(names[i]).addEvent('mouseenter', function(){
            tweenIt('in', 1)
        });
        $$(names[i]).addEvent('mouseleave', function(){
            tweenIt('out', 1)
        });
    }
    
    var namesAcc = ["img.access", "div.schatten_mo_2", "div.damenAcc", "div.herrenAcc", "div.maedchenAcc", "div.jungenAcc"];
    for (var i in namesAcc) {
        $$(namesAcc[i]).addEvent('mouseenter', function(){
            tweenIt('in', 2)
        });
        $$(namesAcc[i]).addEvent('mouseleave', function(){
            tweenIt('out', 2)
        });
    }
    
    
    var namesSpec = ["img.specials", "div.schatten_mo_5", "div.newsletter", "div.making","div.geschenk", "div.fashion", "div.promo"];
    for (var i in namesSpec) {
        $$(namesSpec[i]).addEvent('mouseenter', function(){
            tweenIt('in', 5)
        });
        $$(namesSpec[i]).addEvent('mouseleave', function(){
            tweenIt('out', 5)
        });
    }
    
    
    var names = ["img.service", "div.schatten_mo_6", "div.filial", "div.zubehor","div.pflege", "div.tips", "div.faq", "div.hilfe", "div.hilfe", "div.kontakt", "div.tipps"];
    for (var i in names) {
        $$(names[i]).addEvent('mouseenter', function(){
            tweenIt('in', 6)
        });
        $$(names[i]).addEvent('mouseleave', function(){
            tweenIt('out', 6)
        });
    }

    var namesUnt = ["img.company", "img.unternehmen", "div.schatten_mo_7", "div.geschichte", "div.philosophie", "div.gruppe", "div.datenschutz", "div.presse", "div.ausbildung", "div.jobs"];
    for (var i in namesUnt) {
        $$(namesUnt[i]).addEvent('mouseenter', function(){
            tweenIt('in', 7)
        });
        $$(namesUnt[i]).addEvent('mouseleave', function(){
            tweenIt('out',7)
        });
    }
    
    
    // ********* MouseOver
    // Alle Bilder, die die Klasse "mo" besitzen bekommen einen MouseOver Effekt.
    // für Inhalte aus dem CMS wird src2 als mouseover-Bild verwendet
    // wo keine src2-property vorhanden ist (Bilder in Quelltexten oder Scripten von Butter)
    // wird die mouse-over Logik von Butter angewandt (mouse_over-Bild = Dateiname +_mo )
    $$('img.mo').each(function(img){
        var src = img.getProperty('src');

        var src2 = img.getProperty('src2');
        if(src2 != null){
          img.addEvent('mouseenter', function(){
              img.setProperty('src', src2);
          });
        } else {
          var extension = src.substring(src.lastIndexOf('.'), src.length);
          img.addEvent('mouseenter', function(){
              img.setProperty('src', src.replace(extension, '_mo' + extension));
          });
        }
    
        img.addEvent('mouseleave', function(){
            img.setProperty('src', src);
        });
    });
    
    // ********* MouseOver
    // Alle Bilder, die die Klasse "mo" besitzen bekommen ein MouseOver Effekt. Das MouseOver Bild braucht am Ende des Names Sufix "_mo"
    // Beispiel "Bild.jpg" braucht "Bild_mo.jpg"
    $$('input.mo').each(function(img){
        var src = img.getProperty('src');
        var extension = src.substring(src.lastIndexOf('.'), src.length);
        img.addEvent('mouseenter', function(){
            img.setProperty('src', src.replace(extension, '_mo' + extension));
        });
        img.addEvent('mouseleave', function(){
            img.setProperty('src', src);
        });
    });
    
    
    
    $('footer').getElements('.unternehmen').addEvent('mouseenter', function(){
        $('footer').getElements('.unternehmen_sub').setStyles({
            'display': 'block'
        });
    });
    
    
    /* Grau */
    $$('.grau').addEvent('mouseenter', function(){
        $$('.grau').setStyles({
            'background-color': '#d7d7d7'
        });
    });
    
    $$('.grau').addEvent('mouseleave', function(){
        $$('.grau').setStyles({
            'background-color': 'transparent'
        });
    });
    
    
    /* Sichtbar */
    $$('.sichtbar').addEvent('mouseenter', function(){
        $$('.sichtbar').setStyles({
            'visibility': 'visible'
        });
    });
    
    $$('.sichtbar').addEvent('mouseleave', function(){
        $$('.sichtbar').setStyles({
            'visibility': 'hidden'
        });
    });

});