$().ready(function() {
    // hover effect for different buttons (popup, search etc)
    $('#Product form button, #FormButtonCancel, #FormButtonSend, #SearchSubmit, #LoginForm .btn-box button').mouseover(function(){$(this).addClass('hover');}).mouseout(function(){$(this).removeClass('hover');}); 
    
    
    // hover effect for the product history
    $('li','#ProductHistory').each(function() {
        // adding the required html syntax (clickable container and text)
        $(this).append('<div class="clickE"></div><div class="show-details">Details ansehen</div>');
    });
    $('#Gutschein','#Bestseller').each(function() {
        // adding the required html syntax (clickable container and text)
        $(this.parentNode).append('<div class="couponE"></div><div class="coupon-details">Details ansehen</div>');
    })
    $('.couponE').mouseover(function() {
        $(this.parentNode).addClass('productActive');
        $('.coupon-details',this.parentNode).fadeIn('slow');
         $('#Gutschein').fadeTo("slow", 0.3);
    }).mouseout(function() {
        $(this.parentNode).removeClass('productActive');
         $('.coupon-details',this.parentNode).hide();
         $('#Gutschein').fadeTo("slow",1);
    }).click(function(){
        // on click perform the href of a link element inside the history element
        if($('#Gutschein').size()>0) {
            location.href=$('#Gutschein')[0].href;
        }
    });
    // adding the actions...
    $('.clickE','#ProductHistory').mouseover( function() {
        // display text and image fade out
        $(this.parentNode).addClass('productActive');
        $('.show-details',this.parentNode).fadeIn('slow');
        $('div.product-icon, div.product-info p',this.parentNode).fadeTo("slow", 0.3);
    }).mouseout(function(){
        // hide text and image fade in
        $(this.parentNode).removeClass('productActive');
            $('.show-details',this.parentNode).hide();
            $('div.product-icon, div.product-info p',this.parentNode).fadeTo('slow',1);
    }).click(function(){
        // on click perform the href of a link element inside the history element
        if($('a',this.parentNode).size()>0) {
            location.href=$('a',this.parentNode)[0].href;
        }
    });
    // hover effect for the Bestseller list, simular to the on above
    $('.product-icon','#Bestseller').each(function() {
        $(this).append('<div class="clickE"></div><div class="show-details">Details ansehen</div>');
    });
    $('.clickE','#Bestseller').mouseover( function() {
       $(this.parentNode.parentNode.parentNode).addClass('productActive');
        $('.show-details',this.parentNode).fadeIn('slow');
        $('img',this.parentNode).fadeTo("slow", 0.3);
    }).mouseout(function(){
        $(this.parentNode.parentNode.parentNode).removeClass('productActive');
            $('.show-details',this.parentNode).hide();
            $('img',this.parentNode).fadeTo('slow',1);
        
    }).click(function(){
        if($('a',this.parentNode).size()>0) {
            location.href=$('a',this.parentNode)[0].href;
        }
    });
    
});