$(function() {

    // Menü öffnen und schließen
    $('*').click(function(e) {
        $target = $(e.currentTarget);


        // Klick irgendwoanders hin: Menü einklappen
        if (!$target.is('#menu *,#menu')) {
            var $activeMenu = $('#menu>li.active').removeClass('active');

            // ...aber das aktive Sub-Element weiter anzeigen
            $currentSite = $('#menu li.currentSite');
            if ($currentSite.length) {
                $('ul li:not(.active)', $currentSite).hide();
                $('ul li.active', $currentSite).addClass('bottom_border normalColor').show(); 
                $currentSite.addClass('active');                       
            }

            // Klick auf unausgeklapptest Menü    
        } else if ($target.is('#menu *')) {	     
            var $li = $target.parents('#menu>li');
            if ($li.length) {

                var $activeMenu = $('#menu>li.active');
                $activeMenu.removeClass('active');

                // ...aber das aktive Sub-Element weiter anzeigen
                if ($activeMenu.hasClass('currentSite')) {
                    $('ul li', $activeMenu).hide();             
                }

                $('li.active', $li).removeClass('bottom_border');


                $li.addClass('active');
                $('ul li', $li).show();
                $('ul li.active', $li).removeClass('normalColor');
                e.stopPropagation();
            }
        }	 
        
        // Klick aufs erste menüelement: Nicht die Seite öffnen, nur Menü öffnen
        var $a = $target.parents('#menu > li a');
        if ($a.length) {
            return false;
        }
    });

    // Aktives submenu item? Nur dieses anzeigen
    var $currentSite = $('#menu li.currentSite');
    if ($currentSite.length) {

        $('ul li:not(.active)', $currentSite).hide();
        $('ul li.active', $currentSite).addClass('bottom_border normalColor').show();
        $currentSite.addClass('active');
    }


    // Accordion & Custom Scrollbars
    $("#accordion").accordion({ header: "h4",
    autoHeight: true,
    fillSpace: true,
    change: function(event, ui) {
        if (!$('.accordion_content_wrap .pressbox', ui.newContent).length) {
            $('.accordion_content_wrap', ui.newContent).jScrollPane({animateScroll: true});
        } else {
            $('.accordion_content_wrap .pressbox', ui.newContent).jScrollPane({animateScroll: true});
        }

    }
});

var $sofaSlider = $('#start .top .slider');
$sofaSlider.jScrollPane({showArrows: true, autoReinitialise: true, animateScroll: true});
$('#press #accordion .accordion_content_wrap .pressbox').jScrollPane({animateScroll: true});


// Sofa Autoscroll
if ($sofaSlider.length) {
    $sofaSlider.hover(
        function() { $.data(this, 'hover', true); },
        function() { $.data(this, 'hover', false);}
    ).data('hover', false);
    
    var isIE = $.browser.msie;
    var sofaSpeed = 1;
    if (isIE) {
        sofaSpeed *= 2;
    }
    var sofaAPI = $sofaSlider.data('jsp');
    var sofaX = 100;
    var sofaDirection = 1;
    var sofaWidth = $('img', $sofaSlider).width() - $sofaSlider.width();
    (function() {
        if (!$sofaSlider.data('hover')) {
            sofaX = sofaAPI.getContentPositionX();    
            
            // Von Links nach rechts und zurück scrollern
            if (sofaX >= sofaWidth) {
                sofaDirection = -1;
            } else if (sofaX <= 0) {
                sofaDirection = 1;
            }    
            sofaAPI.scrollByX(sofaSpeed * sofaDirection, false);            
        }
        setTimeout(arguments.callee, isIE ? 100 : 50);
    })();
    
    sofaAPI.scrollByX(sofaWidth, false);
}




// Kompetenzen Tabs mit Autoswitch

if ($('#comp').length) {
    
    var manualSwitchSpeed = 150;        // Dauer eines switches bei Klick
    var autoSwitchSpeed = 1000;         // ... und beim auto switching
    var switchInterval = 12000;  // Wie lange ein Panel sichtbar ist bevor weitergeschaltet wird
    var switchIntervalHandle = null;
    
    function switchTab(to_id, speed) {
        
        // Panel ändern
        $('#comp .panel.active').fadeOut(speed).removeClass('active');
        $('#comp_panel_'+to_id).fadeIn(speed).addClass('active');

        // Tabs ändern
        // Active Tab deaktivieren
        $('#comp .tabs li.active div.bg').animate({'opacity': 0}, speed);           
        $('#comp .tabs li.active').removeClass('active');
         
        // Neuen Tab aktivieren 
        $('#comp .tabs li#comp_tab_'+to_id+' div.bg').animate({'opacity': 1}, speed);
        $('#comp .tabs li#comp_tab_'+to_id).addClass('active');
    }
    
    
    $('#comp .tabs li').click(function() {
        
        var id = $(this).attr('id').split("_")[2];
        
        if (!$('#comp_panel_'+id+'.active').length) {
            switchTab(id, manualSwitchSpeed);            
        }
    });
    
    // Autoswitching alle x Sekunden, solange die Maus nicht drüber ist
    function rotatePanels() {
        var id = $('#comp .panel.active').attr('id').split("_")[2];
        var newId = (parseInt(id) + 1) % parseInt($('#comp .panel').length);
        switchTab(newId, autoSwitchSpeed);
    }
    switchIntervalHandle = setInterval(rotatePanels, switchInterval);
    
    $('#comp .bottom,#comp .tabs').hover(function() {
        clearInterval(switchIntervalHandle);
    }, 
    function() {
        switchIntervalHandle = setInterval(rotatePanels, switchInterval);
    });
}









// Clients
$client = $('#clientmatrix .client');
if ($client.length > 0) {

    var infoSpeed = 200;
    var moveSpeed = 1000;
    var easing = "easeInOutQuad";
    
    var isWarpedIn = false;
    var isWarpingIn = false;
    var isWarpingBack = false;
    


    $('#header_top h1').click(function() {$('#clients *').stop()});
        
        
    // Zuerst die Client-Boxen absolut positionieren. Dazu ihre aktuell berechnete Position auslesen
    $client.each(function(i) {
        var pos = $(this).position();
        var id = $(this).attr('id').split('_')[2];

        $('#client_box_'+id).css({'top' : pos.top, 'left' : pos.left})
                            .data('originalPosTop', pos.top)
                            .data('originalPosLeft', pos.left); // erst die Position setzen und merken...
        
        // Hier die Transformationedaten fürs Warpen speichern
        
        switch (parseInt(id)) {
            
            // Linke Spalte
            case 0: $('#client_box_0').data('transform', {skewY: '-15deg', scaleY: 0.8, translateY: '35px'}); break;
            case 6: $('#client_box_6').data('transform', {skewY: '-15deg', scaleY: 0.8, translateY: '15px'}); break;
            case 12: $('#client_box_12').data('transform', {skewY: '-15deg', scaleY: 0.8, translateY: '-5px'}); break;
            
            // 2. Spalte von links
            case 1: $('#client_box_1').data('transform', {skewY: '-7deg', scaleY: 0.8, translateY: '3px'}); break;
            case 7: $('#client_box_7').data('transform', {skewY: '-7deg', scaleY: 0.8, translateY: '-17px'}); break;
            case 13: $('#client_box_13').data('transform', {skewY: '-7deg', scaleY: 0.8, translateY: '-37px'}); break;
            
            // 3. Spalte von Links
            case 2: $('#client_box_2').data('transform', {skewY: '-1deg', scaleY: 0.8, translateY: '-9px'}); break;
            case 8: $('#client_box_8').data('transform', {skewY: '-1deg', scaleY: 0.8, translateY: '-29px'}); break;
            case 14: $('#client_box_14').data('transform', {skewY: '-1deg', scaleY: 0.8, translateY: '-49px'}); break;
            
            // Rechte Spalten. Spiegelungen der Linken

           // 3. Spalte von rechts
           case 3: $('#client_box_3').data('transform', {skewY: '1deg', scaleY: 0.8, translateY: '-9px'}); break;
           case 9: $('#client_box_9').data('transform', {skewY: '1deg', scaleY: 0.8, translateY: '-29px'}); break;
           case 15: $('#client_box_15').data('transform', {skewY: '1deg', scaleY: 0.8, translateY: '-49px'}); break;
           
           // 2. Spalte von rechts
           case 4: $('#client_box_4').data('transform', {skewY: '7deg', scaleY: 0.8, translateY: '3px'}); break;
           case 10: $('#client_box_10').data('transform', {skewY: '7deg', scaleY: 0.8, translateY: '-17px'}); break;
           case 16: $('#client_box_16').data('transform', {skewY: '7deg', scaleY: 0.8, translateY: '-37px'}); break;
           
           // Rechte Spalte
           case 5: $('#client_box_5').data('transform', {skewY: '15deg', scaleY: 0.8, translateY: '35px'}); break;
           case 11: $('#client_box_11').data('transform', {skewY: '15deg', scaleY: 0.8, translateY: '15px'}); break;
           case 17: $('#client_box_17').data('transform', {skewY: '15deg', scaleY: 0.8, translateY: '-5px'}); break;
           
        }
        

        
        
        
        
        
        
        
    });
    $client.css({   'float': 'none',
                    'position' : 'absolute'});  // ...dann float entfernen, damit die Positionen zum Auslesen bestehen bleiben
    
    
    // Cloned ein Element, bewegt es in die Mitte
    function moveToFront($el) {
        
        $el.addClass('active');
        
        var id = $el.attr('id').split('_')[2];
        
        // Wird die Box grad nach hinten bewegt? Stoppen und nicht nochmal Clonen
        var $clientBox = $('#clone_client_box_' + id);
        
        if ($clientBox.length > 0) {
            $clientBox.stop();
        
        // Ansonsten, wenns die Box noch nicht gibt, selbige erstellen
        } else {
            // Originalbox stehenlassen
            var $clientBox = $el.clone(false)
                                .appendTo('#clientmatrix')
                                .attr('id', 'clone_' + $el.attr('id'))
                                .unbind('click')
                                .addClass('isClone')
                                .click(function() {moveBack($el, true)});
                                
            // Etwas umständlich, aber behebt merkwürdigen Bug                    
            $clientBox.data('transform', $('#client_box_'+id).data('transform'))
                        .data('originalPosLeft', $('#client_box_'+id).data('originalPosLeft'))
                        .data('originalPosTop', $('#client_box_'+id).data('originalPosTop'));
                                
        }
        

        
        // In die Mitte bewegen
        var animateOptions = {    'top': 61,
                                'left': 277,
                                'width': 206,
                                'height': 122,
                                'opacity': 1};
        if (!$.browser.msie) {
            $.extend(animateOptions, {skewY: '0',
            scaleY: 1,
            translateY: '0'});
        }
        
        
        $clientBox.animate(animateOptions, moveSpeed, easing, function() {
            $(this).addClass('isInFront');
        });
        
        
        // Schatten dazu
        $clientBox.css({    '-moz-box-shadow': 'rgba(0,0,0,0.4) 0 0 20px',
                            '-webkit-box-shadow': 'rgba(0,0,0,0.4) 0 0 20px',
                            'box-shadow': 'rgba(0,0,0,0.4) 0 0 20px',                            
                            'z-index': 1});
                        
        $clientBox.addClass('isClone');
        
        
        // Ists das erste angeklickte Element? Matrix warpen
        if (!isWarpedIn) {
            warpIn();
        }
        
        $('#client_info_'+id).fadeIn(infoSpeed).addClass('active');
        
    }
    
    // Bewegt ein Element zurück, löscht es
    // $el: das Element
    // isLast: ist true, wenn die große Box selbst angeklickt wurde, die Matrix somit wieder zurückgewarped werden muss
    function moveBack($el, isClone) {
        var id = $el.attr('id').split('_')[2];
        var $clientBox = $('#clone_client_box_' + id);
        
        // Wird es grad nach vorn bewegt? Stoppen
        $clientBox.stop();
        
        var cssOptions = {   'top': $clientBox.data('originalPosTop'),
                                         'left': $clientBox.data('originalPosLeft'),
                                         'width': 118,
                                         'height': 77,
                                         'opacity': 0};
                                         
        
        if (isWarpedIn || isWarpingIn) {

            
            // Matrix zurückwarpen, wenn die letzte Clone-Box angeklickt wurde                                 
            if (isClone && ($clientBox.hasClass('isInFront') || $('#clientmatrix .isInFront').length == 0) ) {
                warpBack();
            } else {
                // Matrix ist gewarpt: Das geklonte Element so warpen, dass es wieder auf die gewarpte Box passt
                $.extend(cssOptions, $('#client_box_'+id).data('transform'));
            }
        }


         $clientBox.removeClass('isInFront');
         $clientBox.animate(cssOptions, moveSpeed, easing, function() {
             $clientBox.remove(); // Am Ende der Animation einfach entfernen      
         });


         
         
        $el.removeClass('active');
        $('#client_info_' + id).fadeOut(infoSpeed).removeClass('active');
        
    }
    
    
    // Client-Matrix wölben. Je nach Browser in 3D, pseudo-orthogonal-3D oder garnicht
    function warpIn() {        
        
        
        if (!$.browser.msie) {
            isWarpingIn = true;
            $('#clientmatrix .row > .client').each(function() {
                $(this).stop().animate($(this).data('transform'), moveSpeed, easing, function() {isWarpingIn = false; isWarpedIn = true});
            });
        }
        

    }
    
    function warpBack() {
        if (!$.browser.msie) {
            isWarpedIn = false;
            isWarpingBack = true;
            $('#clientmatrix .row > .client').stop().animate({skewY: 0, scaleY: 1, translateY: 0}, moveSpeed, easing, function() {isWarpingBack = false});
        }
    }
    
    
    $client.click(function() {
        $this = $(this);
        var id = $this.attr('id').split('_')[2];
        
        
        
        // Nicht aktiv? Aktivieren
        if (!$this.hasClass('active')) {          
            
            

            $activeClient = $('#clientmatrix .client.active');

            // Client-Box in die Mitte packen, Schatten dazu, vergrößern
            moveToFront($this);

            // Gibts schon eine aktive Box? Diese zurückbewegen
            if ($activeClient.length > 0) {
                moveBack($activeClient);                
            }

            


        }
        

        
        
        
    });
}




// Flaggen im Navigator blenden Items unterschiedlicher Sprache ein
$('#press .flags a').click(function() {
    var lang_id = $(this).attr('class').split("_")[1];
    var pressbox = $(this).parents('.flags').siblings('.pressbox');
    

    
    $('.pressitem.lang_'+lang_id, pressbox).show();//fadeIn(500);
    $('.pressitem:not(.lang_'+lang_id+')', pressbox).hide();//fadeOut(500);
    pressbox.jScrollPane({animateScroll: true});    
    
})










if ($.browser.msie) {
    $('#comp .tabs li div.bg').css({'opacity': 0});
    $('#comp .tabs li.active div.bg').css({'opacity': 1});
    $('#header_bottom input[type="text"]').css({'margin-top': '3px'});
}



});