$(document).ready(function() {

    // von den versteckten radiobuttons ausgehend ...
    $('div.productSelector input').bind('click', function() { productSelector.showSelect(this) });

    // Der vorgegebenen Selektion entsprechend Stylesheets verteilen
    $('div.productSelector input:checked').each(function() { productSelector.showSelect(this) });

    $('div.productSelector img.preview').bind("mouseover", function(event) { productSelector.over(event) });
    $('div.productSelector img.full').bind("mouseout", function(event) { productSelector.out(event) });


    // IE kommt bei zu "komplizierten" verwandschaften von label und input
    // durcheinander
    if($.browser.msie) {
        $('div.productSelector label img').bind('click', function(event) {
            event.stopPropagation();
            event.preventDefault();
            productSelector.showSelect(
             $(this).parent().prev().find('input').click().click()[0]
            );
        });
        $('div.productSelector label').bind('click', function(event) {
            event.stopPropagation();
            event.preventDefault();
            productSelector.showSelect(
             $(this).prev().find('input').click().click()[0]
            );
        });
    }
});

var productSelector = {

    showSelect: function(radioButton) {
        var id = radioButton.id;
        $(radioButton).parent().parent().parent()
            // alle labels deselektieren
            .find('label').removeClass('selected')

            // alle produktfotos verstecken
            .end().parent().parent().find('.photo')
                .find('li').hide()

            // das korrekte foto finden und anzeigen
            .end().find('li').each(function() {
                if(radioButton.checked) {
                    if(this.attributes['for'].value == id) {
                        $(this).show();
                    }
                    $(radioButton).parent().next().addClass('selected');
                }
            });
    },


    over: function(event) {
        var self = event.target;
        if(!self.zoomblock) {
            self.zoomblock = true;
            var pos = $(self).offset();
            $(self).next().css({left: pos.left, top: pos.top, width: 182, height: 182, opacity: 0}).show()
                .animate({top: "-=91", width: 364, height: 284, opacity: 1}, function() {
                    self.zoomblock = false;
                })[0].parent = self;
        }
    },

    out: function(event) {
        var self = event.target;
        if(!self.shrinkblock) {
            self.shrinkblock = true;
            pos = $(self.parent).offset();
            $(self).animate({top: pos.top, width: 182, height: 182, opacity: 0}, function() {
                $(self).hide();
                self.shrinkblock = false;
            });
        }
    }
};