/*
"Button Picturefader" jQuery-Plugin-Funktion
*/
jQuery.fn.button_picturefader = function() {
    
    return this.each(function() {
        
        var action_timer_ms = 250;
        var next_image_timer_ms = 4000;
        var $container = jQuery(this);
        var $images = $container.find("img");
        var $first_image = $images.filter(":first");
        var $labels = jQuery("label.button_picturefader_label");
        var $last_image = $first_image;
        var $next_image = null;
        var action_timer = null;
        var next_image_timer = null;
        var $hovered_label = null;
    
        
        /*
        Startende Hover-Effekt-Funktion für das übergebene Label
        */
        var hover_in = function(label) {
        
            var $label = $(label);
            var $default_image = $label.find("img.button_picturefader_image_default");
            var $hover_image = $label.find("img.button_picturefader_image_hover");
            var $current_image = $images.filter(":visible");
            
            /* Hoverbild anzeigen */
            $hover_image.show();
            $default_image.hide();
        }
    
        
        /* 
        Beendende Hover-Effekt-Funktion für das übergebene Label 
        */
        var hover_out = function(label) {
        
            var $label = $(label);
            var $default_image = $label.find("img.button_picturefader_image_default");
            var $hover_image = $label.find("img.button_picturefader_image_hover");
    
            // Hoverbild verstecken
            $default_image.show();
            $hover_image.hide();
        }
        
        
        /* Alle Bilder bis auf das erste Bild ausblenden */
        $images.filter(":not(:first)").hide();
        $images.filter(":first").show();
        
        /* Die Hoehe und Breite des Containers an das erste Bild anpassen */
        /*
        $container.height($first_image.height());
        $container.width($first_image.width());
        */
        
        /* Die Bilder übereinander legen */
        $images.css("position", "absolute");
        
        /* In den Bildern hinterlegen, welches Bild als nächstes dran ist */
        $images.filter(":not(:last)").each(function(index) {
            var $this = jQuery(this);
            $this.data("next_index", index + 1);
        });
        $images.filter(":last").data("next_index", 0);
        
        /* Erstes Label hervorheben */
        hover_in($labels.eq(0));
        
        /* Die Labels durchlaufen und an die zugehörigen Bilder binden */
        $labels.each(function() {
            
            var $label = jQuery(this);
            var image_id = $label.attr("for");
            var $image = jQuery("#" + image_id, $container);
            
            $image.data("label", $label);
            
            $label.hover(
                function() {
                
                    if (!! action_timer) {
                        window.clearTimeout(action_timer);
                    }
                    if (!! next_image_timer) {
                        window.clearTimeout(next_image_timer);
                    }
                
                    $hovered_label = $label;
                    hover_in($label);
                    $next_image = $image;
                    $labels.each(function() {
                        var $this_label = jQuery(this);
                        if ($label.attr("for") != $this_label.attr("for")) {
                            hover_out($this_label);
                        }
                    });
                    
                    action_timer = window.setTimeout(worker_loop, action_timer_ms);
                },
                function() {
                    next_image_timer = window.setTimeout(
                        next_image_loop, next_image_timer_ms
                    );
                }
            );
            
            $label.click(function() {
                var $a = $label.find("a");
                var href = $a.attr("href");
                
                window.location.href = href;
                return false;
            });
        });
        
        
        /*
        Worker-Loop
        */
        var worker_loop = function() {
        
            var $current_image;
            var $next_label;
            
            if (!!$next_image && $next_image.attr("src") != $last_image.attr("src")) {
                
                /* Bild Faden */
                $current_image = $images.filter(":visible");
                $current_image.fadeOut(1000);
                $next_image.fadeIn(1000);
                $last_image = $next_image;
                
            }
            action_timer = window.setTimeout(worker_loop, action_timer_ms);
        }
        worker_loop();
        
        
        /*
        Next-Image-Loop
        */
        var next_image_loop = function() {
            
            var $current_image = $images.filter(":visible");
            var next_index = $current_image.data("next_index");
            
            $next_image = $images.eq(next_index);
            
            $labels.each(function() {
                var $this_label = jQuery(this);
                
                $this_label.clearQueue(); 
                               
                $hovered_label = $labels.eq(next_index);
                if ($hovered_label.attr("for") == $this_label.attr("for")) {
                    hover_in($this_label);
                } else {
                    hover_out($this_label);
                }
                
            });
            next_image_timer = window.setTimeout(next_image_loop, next_image_timer_ms);
        }
        next_image_timer = window.setTimeout(next_image_loop, next_image_timer_ms);
    
    });
};



/*
Hiermit wird der "Labeled Picturefader" für alle Container aktiviert, die mit
der CSS-Klasse "button_picturefader_container" gekennzeichnet wurden. 
*/
jQuery(document).ready(function() {
    /* Picturefader starten */
    jQuery("div.button_picturefader_container").button_picturefader();
});