// Dummy console Objekt, falls Browser keine console kennt.
if (! (typeof console === 'object' && typeof console.log === 'function')) {
    console = {};
    console.log = function() {};
}

var fancybox_config = {
    'hideOnContentClick': true,
    'autoScale':false,
    'type':'iframe',
    'padding':0,
    'width':450,
    'height':600,
    'centerOnScroll':true,
    'titleShow': true,
    'titlePosition': 'inside'
};

$(document).ready(function() {
    /*
       ===================
       Service Menu
       ===================
    */
    $('.tab-drop-tab').click(function() {
        $('.tab-drop').hide();
    });

    $('.tab-drop-content ._close').click(function() {
        $('.tab-drop').hide();
    });

    $('.servicemenu h5').click(function() {
        var clicked_node = jQuery(this);

        $('.tab-drop').hide();
        clicked_node.next('.tab-drop').show();
        $('.servicemenu > *').css("z-index", 99);
        clicked_node.parents('.service-menu').css("z-index", 1);
    });


    /*
        ===================
        Flyout
        ===================
    */
    var lock_ajax_call_for = {}; // hier merken wir uns, ob schon ein AJAX Request für einen Navigationspunkt am laufen ist.
    $('#shopnav > ul > li').mouseover( function() {
        var menupoint = jQuery(this);
        menupoint.addClass('_currentlyhovered');

        // testen ob die Unternavigationspunkte für das Flyout-Menu schon im DOM sind.
        if ( menupoint.find('ul').size() > 0 ) {
            // ja, also flyouten
            flyout.apply(this);
        }
        else {
            if (!menupoint.hasClass('_do_not_query_for_flyout')) {
                // nein, also per AJAX nachladen
                var ajax_url = menupoint.parents('ul').attr('data-ajax-url');
                if (ajax_url) {
                    var navigation_id = menupoint.attr('data-navigation-id');
                    if (navigation_id && !lock_ajax_call_for[navigation_id]) {
                        lock_ajax_call_for[navigation_id] = true;
                        jQuery.ajax({
                            //url: shop_config.shopnav_ajax_url,
                            url: ajax_url,
                            type: 'GET',
                            data: { nav_id: navigation_id },
                            complete: function (data) {
                                // Prüfen ob nicht in der Zwischenzeit schon ein anderer AJAX Request die Navigation für diesen Navigationspunkt befüllt hat.
                                if (menupoint.find('ul').size() == 0) {
                                    menupoint.append(data.responseText);
                                    if (menupoint.hasClass('_currentlyhovered')) {
                                        flyout.apply(menupoint.get(0)); // get(0) = Downgrade des ersten Elements eines jQuery Objektes zum normalen DOM Node
                                    }
                                    delete lock_ajax_call_for[navigation_id];
                                }
                            },
                            error: function() {
                                delete lock_ajax_call_for[navigation_id];
                            }
                        });
                    }
                }
            }
        }
    });

    $('#shopnav > ul > li').mouseout(function(){
        var menupoint = jQuery(this);
        menupoint.children("a").removeClass("hover");
        menupoint.children('.flyout').css('display','none');
        menupoint.removeClass('_currentlyhovered');
    });

    /*
        ===================
        Zuletzt gesehen
        ===================
    */
    $('.lastseen > ul > li').mouseover(function(){ $(this).children('.produkt').css('display','block'); });
    $('.lastseen > ul > li').mouseout(function() { $(this).children('.produkt').css('display','none');  });


    /*
        ===================
        Produktdetail
        ===================
    */
    prepare_dom_for_product_detail_page();

    if(jQuery('body.produktdetail .jcarousel li').length > 0){
        jQuery('body.produktdetail .jcarousel').jcarousel({
            scroll: 4,
            auto:0,
            animation : "slow"
        });
    }

    /*
        ===================
        Produktbild Zoom
        ===================
    */
    //jcarousel options on:
    //http://sorgalla.com/jcarousel/
    (function() {
        var selector = 'body.produktzoom .jcarousel';
        var productzoom_carousel = jQuery(selector);
        var start = productzoom_carousel.find('li').index(jQuery(selector + ' li._preselected'));
        productzoom_carousel.jcarousel({
            scroll: 4,
            auto: 0,
            animation: "slow",
            vertical: true,
            start: start + 1
        });

        if (jQuery('body').hasClass('produktzoom') ) {
            var imageid = start;
            var imagesrc = null;

            if(location.hash){
                imageid = location.hash;
                if(location.hash.charAt(0) == "#"){
                    imageid = location.hash.substring(1, location.hash.length);
                }

                imagesrc = jQuery(".jcarousel li:eq("+imageid+") a").attr("data-big-image");
                jQuery(".detailimage img").attr("src", imagesrc);
            }

            var carousel = jQuery('.jcarousel').data('jcarousel');
            carousel.scroll(jQuery.jcarousel.intval(imageid)+1);

            jQuery(".jcarousel li:eq("+imageid+")").addClass("active");

            jQuery('.jcarousel li img').click(function(e){
                jQuery(".jcarousel li").removeClass("active");
                jQuery(this).parents("li").addClass("active");

                jQuery('.detailimage img').attr("src", jQuery(this).parent().attr("data-big-image"));
            })
        }
    })();


    /* Carousel */
    jQuery('._vertical-teaser-carousel').each(function(index, element) {
        var list = jQuery(element);

        var json_carousel_items = list.attr('data-carousel-items');
        if (json_carousel_items) {
            var carousel_itemList = eval(json_carousel_items);

            list.jcarousel({
                vertical: true,
                scroll: 2,
                auto: 0,
                animation : "slow",
                size: carousel_itemList.length,
                itemLoadCallback: {onBeforeAnimation: function(carousel, state) {
                    for (var i = carousel.first; i <= carousel.last; i++) {
                        // Auslassen schon im DOM bestehender Items
                        if (carousel.has(i)) {
                            continue;
                        }

                        if (i > carousel_itemList.length) {
                            break;
                        }

                        carousel.add(i, carousel_itemList[i-1]);
                    }
                }},
                itemVisibleInCallback: {onAfterAnimation: function(carousel, state) {
                    // load hover on new dom items
                    list.find('.jcarousel-item')
                        .mouseover(function(){ $(this).children('.produkt').show(); })
                        .mouseout( function(){ $(this).children('.produkt').hide(); })
                    ;
                }}
            });
        }
    });




    /*
        ===================
        Tabs
        ===================
    */
        var tabs = $('._tab, #tabs');
        tabs.tabs({
            show: function(event, ui){
                var pos = $(ui.tab).parents("li").position().left + $(ui.tab).parents("li").outerWidth()/2;
                jQuery(".ui-tabs-nav").css({backgroundPosition: (-500+pos)+"px 37px"});
            }
        });

        // Index des gewaehlten Tabs in ein Hiddenfeld kopieren
        (function() {
            var tabs = $('._tab_copy_index_in_hiddenfield');
            tabs.bind('tabsselect', function(event, ui) {
                var target_name = $(ui.panel).parents("._tab").attr("data-target-field");
                $('input[name="'+target_name+'"]').val(ui.index + 1);
            });
        })();

    /*
        ===================
        radio-sets
        ===================
    */
        // Pointer ("Schnoerpfel") auf richtige Position schieben
        function set_pointer_for_buttonset(radio_set, active_radio_item) {
            var i = 0;
            while (!active_radio_item && i < 10) {
                active_radio_item = radio_set.find('input[type="radio"]:checked');
                if (!active_radio_item) { // wenn keine gecheckte radiobox gefunden wurde, checke die erste.
                    radio_set.find('input[type="radio"]').get(0).checked = true;
                }
                i++;
            }
            
            var label = radio_set.find('label[for="'+active_radio_item.attr('id')+'"]');

            // 500 abziehen, weil die "Nase" der Hintergrundgrafik dort anfaengt
            var pos = parseInt( ( label.position().left + label.outerWidth()/2) - 500 , 10);

            $(radio_set.attr("data-pointer-element")).css({backgroundPosition: pos+"px 8px"});
        }

        function save_html_of_button(radio_set, active_radio_item) {
            if (!active_radio_item) {
                active_radio_item = radio_set.find('input[type="radio"]:checked');
            }
            var target_div = $(radio_set.attr("data-target-element"));
            active_radio_item.data('html-code', target_div.html());
        }

        // Buttonsets initialisieren
        $("._radio_set").buttonset();



        // OnClick-Handler
        //  Pointer neu setzen
        // Falls nicht gecached: AJAX-Request machen
        $("._radio_item").bind('click', function() {
            var radio_item = $(this);
            var radio_set = radio_item.parents("._radio_set");
            var target_div = $(radio_set.attr("data-target-element"));

            set_pointer_for_buttonset(radio_set, radio_item);

            // HTML schon gecached? Dann gleich raus damit...
            if (radio_item.data('html-code')) {
                target_div.html(radio_item.data('html-code'));
            }
            else {
                // AJAX: Slot holen und in richtigen DIV packen
                var ajax_url = radio_set.attr("data-ajax-url");
                target_div.html("");
                target_div.addClass('show_loader');
                $.ajax({
                    url: ajax_url,
                    type: "GET",
                    cache: false,
                    data: { selected_tab: radio_item.val() },
                    success: function(html_code) {
                        radio_item.data('html-code', html_code);
                        target_div.removeClass('show_loader');
                        target_div.html(html_code);
                    }
                });
            }
        });

        // Initialisierung des Pointers, Cachen des HTML-Inhalts des target-elements
        $("._radio_set").each(function(index, radio_set) {
            radio_set = $(radio_set);
            
            var active_radio_item = radio_set.find('input[type="radio"]:checked');
            if (active_radio_item.size() == 0) {
                // Achja, diese DOM Properties sind in jQuery < 1.6 echt nicht dolle...
                // Der obige Selektor prüft anhand von DOM-Properties. Der Browser ist aber der Meinung, dass keine Radiobox gewählt ist, deshalb suchen wir
                // nochmal anhand der wirklichen HTML Attribute und siehe da: Plötzlich findet der Browser eine Radiobox. Wir erinnern ihn also mal brav dran,
                // dass diese Box gechecked ist und refresehen dann das Buttonset.
                active_radio_item = radio_set.find('input[type="radio"][checked]');
                active_radio_item.get(0).checked = true;
                active_radio_item.button('refresh');
            }
            
            if (radio_set.attr('data-trigger-click') == 1) {
                active_radio_item.trigger('click');
            }

            set_pointer_for_buttonset( radio_set, active_radio_item);
            save_html_of_button(radio_set, active_radio_item);
        });


    /*
        ===================
        placheolder Attribut nachbilden
        ===================
    */
    (function() {
        // Prüfen ob Browser das placeholder Attribut kann
        var input = document.createElement('input');
        input.setAttribute('type', 'text');

        var browser_can_placeholder = typeof input.placeholder != "undefined" ? true : false;
        if (!browser_can_placeholder) {
            jQuery('input[placeholder]').each(function() {
                var input = jQuery(this);
                input.val(input.attr('placeholder'));
                input.addClass('placeholder_active');

                input.focus(
                    function() {
                        if (input.val() == input.attr('placeholder')) {
                            input.val('');
                            input.removeClass('placeholder_active');
                        }
                    }
                );

                input.blur(
                    function() {
                        if (input.val() == '') {
                            input.val(input.attr('placeholder'));
                            input.addClass('placeholder_active');
                        }
                    }
                );
            });
        }
    })();

    /*
        ===================
        check_anchor_target
        ===================

        Aktiviert Check- oder Radioboxen, die von einem Link mit Anchor verlinkt sind:
            <a href="#my_checkbox">Check the checkbox</a>
            <input type="checkbox" id="my_checkbox">

        Damit stellen solche Links fast so etwas wie <label>-Tags dar. Der Browser springt aber gleich zur entsprechenden Stelle im Dokument (und die Labels
        sind nicht ewig weit weg vom eigentlichen Input-Feld).
    */
    jQuery('a._check_anchor_target').bind('click keyup',
        function(event) {
            if (!event.keyCode || (event.keyCode && event.keyCode === 13)) { // onclick oder "onenter"
                var link = jQuery(event.currentTarget);

                if (link.attr('href').indexOf('#') == 0) { // fängt unser Link mit einem # an?
                    var input_element = jQuery(link.attr('href'));
                    input_element.get(0).checked = true;
                    input_element.trigger('click');
                    input_element.trigger('change');

                    if (input_element.parents('_radio_set')) {
                        input_element.button('refresh');
                    }
                }
            }
        }
    );

     /*
        ===================
        toggle_class_on_state_change
        ===================

        Verändere die Klasse eines bestimmten Elementes, wenn eine Checkbox oder ein Radiobutton geändert werden.
            <a href="http://www.google.de/" id="my_link">ein link</a>
            <input type="checkbox" class="_toggle_class_on_state_change" data-class="my_class" data-selector="#my_link">

        Wenn beim Input-Tag noch das Attribut data-toggle-group-id angegeben wurde, wird die Klasse bei allen Elementen entfernt, die zu dieser Gruppe gehören.
    */
    (function() {
        var store_for_group = {};

        jQuery('input[type="checkbox"]._toggle_class_on_state_change, input[type="radio"]._toggle_class_on_state_change')
            .each(function(index,element) {
                // erstmal alle Elemente dieser Gruppe im Store sammeln
                var input_element = jQuery(element);

                var classname = input_element.attr('data-class');
                var selector  = input_element.attr('data-selector');
                var group_id  = input_element.attr('data-toggle-group-id');
                if (classname && selector && group_id) {
                    if (!store_for_group[group_id]) {
                        store_for_group[group_id] = [];
                    }

                    jQuery(selector).each(function(index, element) {
                        store_for_group[group_id].push( jQuery(selector) );
                    });
                }
            })
            .bind('change', function(event) {
                var input_element = jQuery(event.currentTarget);

                var classname = input_element.attr('data-class');
                var selector  = input_element.attr('data-selector');
                var group_id  = input_element.attr('data-toggle-group-id');
                if (classname && selector) {
                    var nodes = jQuery(selector);
                    if (input_element.get(0).checked) {
                        nodes.addClass(classname);
                    }
                    else {
                        nodes.removeClass(classname);
                    }

                    if (group_id) {
                        for (var i = 0; i < store_for_group[group_id].length; i++) {
                            var element = store_for_group[group_id][i];
                            if (element.get(0) != nodes.get(0)) {
                                element.removeClass(classname);
                            }
                        }
                    }
                }
            })
        ;
    })();


    /*
        ===================
        List Seiten
        ===================
    */
    init_lister_save_number_of_products();
    init_lister_change_pageviewtype();

    /*
        ===================
        Inline Popups mit iframes
        ===================

        Trigger: Links oder Formulare mit class="_open_in_inline_iframe"

        Optionen:
            data-iframe-url: optionale URL, die im iframe geöffnet werden soll (wenn nicht angegeben wird href- oder action-Attribut verwendet)
            data-reload-page-on-close: Soll die Seite neu geladen werden, wenn das iframe geschlossen wird?
            data-group-id: Gruppen-ID; sorgt dafür, dass immer nur ein iframe dieser Gruppe geöffnet ist

    */
    jQuery('a._open_in_inline_iframe, form._open_in_inline_iframe').bind('click submit', function(event) {
        var trigger = jQuery(event.currentTarget);
        var mode = trigger.get(0).nodeName.toLowerCase() == 'form' ? 'form' : 'link';

        // prüfen ob event-typ passt
        if (! ((mode === 'form' && event.type == 'submit') || (mode === 'link' && event.type == 'click'))) {
            return;
        }

        var target_url = null;
        if (mode === 'form') {
            target_url = trigger.attr('data-iframe-url') || trigger.attr('action');

            // Werte im Formular an die URL anfügen
            target_url += ( target_url.indexOf('?') > -1 ) ? '&' : '?';
            target_url += trigger.serialize();
        }
        else {
            target_url = trigger.attr('data-iframe-url') || trigger.attr('href');
        }

        if (target_url) {
            var popup = trigger.siblings('._popup');
            if (popup.size()) {
                // Schon ein Popup vorhanden --> entfernen
                popup.remove();
            }
            else {
                var group_id = trigger.attr('data-group-id');
                if (group_id) {
                    // schließen der "anderen" Popups
                    var selector = '._open_in_inline_iframe[data-group-id="' + group_id + '"]';
                    jQuery('a' + selector + ', form' + selector).not(trigger).each(function (index, element) {
                        jQuery(element).siblings('._popup').remove();
                    });
                }

                // Popup erstellen
                var html  = '<div class="popup _popup">';
                    html += '   <div class="container show_loader">';
                    html += '       <iframe src="' + target_url + '" frameborder="0"></iframe>';
                    html += '   </div>';
                    html += '   <div class="close _close"></div>';
                    html += '</div>';

                // Popup ins DOM einfügen
                var wrapper;
                wrapper = jQuery(html);
                trigger.after(wrapper);

                // Pointer Background Grafik richtig setzen
                //console.log(trigger.position());

                //var pointer_position = -trigger.outerWidth() / 2;
                //pointer_position -= 40;
                //console.log(pointer_position);
                //wrapper.css({backgroundPosition: pointer_position + "px 0"});

                // Alles anzeigen
                wrapper.show();
                wrapper.find('iframe').get(0).focus();
                //console.log(wrapper.position()['left'] + wrapper.outerWidth());

                // Close Button
                wrapper.find('._close').click(function(close_event) {
                    var close_button = jQuery(this);
                    if (close_button.parent().siblings('._open_in_inline_iframe').attr('data-reload-page-on-close')) {
                        window.location.reload();
                    }
                    else {
                        close_button.parents('._popup').remove();
                    }
                    
                    close_event.stopPropagation();
                    close_event.preventDefault();
                });
            }

            event.stopPropagation();
            event.preventDefault();
        }
    });
    
    /*
        ===================
        Boxen die wie Links aggieren sollen (block links)
        ===================

        Trigger: Elemente mit der Klasse '_link_whole_box' und dem Attribut data-href
        
        Wenn in data-href ein Anchor angegeben ist, wird das entsprechende Element im Browser gesucht und ein click event simuliert.

        Beispiel:
            <li class="_link_whole_box" data-href="http://www.google.de/">...</li>
            <li class="_link_whole_box" data-href="#mein_toller_anchor">...</li>

    */    
    jQuery('._link_whole_box').each(function (index,element) {
        var link = jQuery(element);
        if (link.attr('data-href')) {
            var href = link.attr('data-href');
            
            link.attr('tabindex', 0); // antabbar            
            
            link
                .bind('mouseover focus', function(event) {
                    link.addClass('hover');
                    link.css('cursor', 'pointer');
                    window.status = href;
                })
                .bind('mouseout blur', function(event) {
                    link.removeClass('hover');
                    link.css('cursor', '');
                    window.status = '';
                })
                .bind('click keypress', function(event) {
                    if (!event.keyCode || (event.keyCode && event.keyCode === 13)) { // onclick oder "onenter"
                        if (href.indexOf('#') == 0) {
                            jQuery(href).trigger('click');
                        }
                        else {
                            window.location.href = href;
                        }
                    }
                })
            ;
        }
    });
});


function prepare_dom_for_product_detail_page() {
    // Hier kommen alle Sachen rein, die nach jedem Ajax Request auf der Produkt Detailseite neu initialisiert werden müssen.

    //body.produktdetail .jcarousel a,
    jQuery("._open_product_zoom").each(function(index, element) {
        element = jQuery(element);
        var product_zoom_fancybox_config = jQuery.extend(true, {}, fancybox_config); // deep copy of std_dialog_config, see http://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-clone-a-javascript-object
        if (element.attr('data-zoom-has-carousel')) {
            product_zoom_fancybox_config.width = 552;
        }

        element.fancybox(product_zoom_fancybox_config);
    });

    init_lightboxes();
}

function init_lightboxes() {
    var lightbox_config = jQuery.extend(true, {}, fancybox_config); // deep copy of std_dialog_config, see http://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-clone-a-javascript-object
    lightbox_config.width = 510;
    lightbox_config.titleShow = false;
    jQuery("._open_in_lightbox").fancybox(lightbox_config);
}

function flyout() {
    var menupoint = jQuery(this);

    //flyout abstand links und rechts zum rand
    var flyoutOffset = 9;

    //listen abstand innerhalb flyout
    var listOffset   = 20;

    //flyout breite
    var flyoutWidth = 0;
    menupoint.children(".flyout").children('ul').children("li").each(function(i){
        var submenupoint = jQuery(this);
        flyoutWidth += submenupoint.width()+listOffset;
    });

    //flyout breite setzen
    if (menupoint.find('.flyout>ul').hasClass('_no_third_level')) {
        var width = menupoint.outerWidth();
        menupoint.children('.flyout').css("width", width + 'px');
        flyoutWidth = width;
    }
    else {
        menupoint.children('.flyout').css("width", flyoutWidth+2);
        menupoint.children('.flyout').children("ul").css("width", flyoutWidth);
    }

    //position aktueller li
    var currentPos = menupoint.position();

    //button breite
    var buttonWidth = menupoint.width();

    //center aktuelle li - absolut!
    var buttonCenter = currentPos.left + buttonWidth/2;

    //flyout position
    var flyoutPos   = flyoutWidth/2 - buttonWidth/2;

    //shopnavwidth
    var shopNavWidth = $("#shopnav").width();

    //abstand des buttoncenters zum rechten rand
    var buttonCenterDistanceRight = shopNavWidth-buttonCenter;

    //flyout überlappung
    var fOverSize =  buttonCenterDistanceRight-flyoutWidth/2;
    //console.log(fOverSize);

    //wenn überlappung rechts vorhanden
    if(fOverSize < 0){
        flyoutPos = flyoutPos - fOverSize + flyoutOffset;
    }

    // abstand des buttons links zum rand
    var buttonCenterDistanceLeft = currentPos.left + buttonWidth/2;

    //wenn überlappung links vorhanden
    if(flyoutPos >= currentPos.left){
        flyoutPos = flyoutPos - (flyoutWidth/2  - buttonCenterDistanceLeft) - flyoutOffset;
    }

    //hover status zum a
    menupoint.children("a").addClass("hover");
    //background positionieren
    menupoint.children('.flyout').children('.flyout-top').css('backgroundPosition', flyoutPos-500+buttonWidth/2+'px 8px');
    //flyout positionieren
    menupoint.children('.flyout').css({'left' : -flyoutPos+'px', 'z-index':999});
    //flyout anzeigen
    menupoint.children('.flyout').css('display','block');
}


/*
    SelectorLayer
        der Komplette Layer
    SelectorMask
        Hintergrund
    SelectorHeadline
        Kopfzeile oder Schliessen-Bereich (SelectorLayer, wenn nicht angegeben)
*/
function NwsShowLayer(params) {

     if ( !params.headline ) {
        params.headline = params.layer;
    }

    var maskW  = $(window).width();
    var maskH  = $(document).height();
    var winW   = $(window).width();
    var winH   = $(window).height();
    var layerW = $(params.layer).width();
    var layerH = $(params.layer).height();

    $(params.mask).css({'width':maskW,'height':maskH});
    $(params.mask).fadeIn(1000);
    $(params.mask).fadeTo('slow', 0.8);

    if ( params.left ) {
        $(params.layer).css('left', params.left );
    }
    else if ( params.right ) {
        $(params.layer).css('left', winW - layerW - params.right );
    }
    else {
        $(params.layer).css('left', winW / 2 - layerW / 2);
    }

    if ( params.top ) {
        $(params.layer).css('top', params.top);
    }
    else if ( params.bottom ) {
        $(params.layer).css('top',  winH - layerH - params.bottom );
    }
    else {
        $(params.layer).css('top',  winH / 2 - layerH / 2);
    }

    $(params.layer).fadeIn(2000);

    $(params.headline).click(function(){
        $(params.mask).hide();
        $(params.layer).hide();
    });

    $(params.mask).click(function(){
        $(params.mask).hide();
        $(params.layer).hide();
    });

}


function NwsToolTip(t) {

    $(t).hover(function(e){
        $('#' + this.id + '_show')
            .css("top",  (e.pageY - 20) + "px")
            .css("left", (e.pageX + 25) + "px")
            .show();
        },
        function(){
            $('#' + this.id + '_show')
            .hide();
        }
    );

    $(t).mousemove(function(e){
         $('#' + this.id + '_show')
            .css("top",  (e.pageY - 20) + "px")
            .css("left", (e.pageX + 25) + "px");
    });

};





function init_lister_save_number_of_products ()
{
	var forms=$('.lister-save-number-of-products');
	if(forms.length>0)
	{
		for(var i=0; i<forms.length; i++)
		{
			add_onchangeevent_to_selects_by_form(forms[i]);
		}
	}
}

function init_lister_change_pageviewtype ()
{
	var forms=$('.lister-change-pageviewtype');
	if(forms.length>0)
	{
		for(var i=0; i<forms.length; i++)
		{
			add_onchangeevent_to_selects_by_form(forms[i]);
		}
	}
}

function add_onchangeevent_to_selects_by_form(form)
{
	var button=form.getElementsByTagName("button")[0];
	button.className="hide";

	//okay, the nice way would be to use Prototype's observe function, but this doesn't work in IE. So we do it the old-fashioned way...
	form.getElementsByTagName("select")[0].onchange=function() { this.form.submit(); }; //in this case, "this" relates to the select element
}

function product_detail_thumb_clicked(imgLinkObj) {
    var colorId = jQuery(imgLinkObj).attr('data-color');
    if (!isNaN(colorId)) {
        //set color in select box and trigger onchange
        jQuery('select[name="farbe"]').val(colorId).trigger('change');
    }

    return false;
}