//$(document).ready(function(){
// have to usie window.load instead of ready, since the images load also after the DOM is already ready.
$(window).load(function () {
// resize the images to thumbnails  
$("#wunschliste div.funda_imageboxleft img").each(function(index) {
    
    var thumbSize = 165;
    
    var w = $(this).width();
    var h = $(this).height();
    //save the original w and h on the img dom element using .data() AWESOME!
    $(this).data('w', w);
    $(this).data('h', h);
    
    
    if (w > h) {
        // Breitformat
        $(this).height(thumbSize);
        var percentOfOriginalSize = thumbSize/h;
        $(this).css({"margin-left":($(this).width()-thumbSize)/-2});
    } else {
        $(this).width(thumbSize);
        var percentOfOriginalSize = thumbSize/w;
        $(this).css({"margin-top":($(this).height()-thumbSize)/-2});
    }
      
    

    if ($(this).attr("alt").toLowerCase() == "verschenkt") {
        $(this).before("<img class='verschenkt' src='/images/verschenkt_badge.png' width='107' height='107' />");
        
        // console.log($(this).parent().css({"border":"1px solid red"}));
    }
    
    if ($(this).attr("class") != "verschenkt") {
           $(this).wrap("<div class='innerFrame'>");
    }
    
    $(this).css("visibility", "visible");
});

$("#wunschliste div.funda_imageboxleft").each(function(index) {
    
   $(this).click( function() {
        var pic = $(this).find(".innerFrame img");
        var picSrc = pic.attr("src");
        $("#viewer img.big").attr("src", picSrc);

        var description = $(this).find(".funda_imagetext").text();
        $("#viewer div.description p").text(description);
        viewerWidth = pic.data("w");
              
                
        $("#viewer div.innerViewer").width(viewerWidth);
        $("#viewer").css("marginLeft", -viewerWidth/2);
        // $("#viewer").css({"left": "50%"});
        // console.log("viewerWidth: " + viewerWidth);
        
        // add drop shadows to images:
        

        
        
        $("#viewer").show(0, function(){

            if ($("div.sh").html() == null) {
                $("#viewer .innerViewer").wrap("<div class=\"sh\"></div>");
                $("#viewer .innerViewer").after("<div class=\"br shp\"></div><div class=\"bl shp\"></div><div class=\"tl shp\"></div><div class=\"tr shp\"></div>");
            }
            $("div.shp").each(function (){
                    //first set all divs containing shadow bg to the width of the image
                    var w = $(".innerViewer").width();
                    var h =  $(".innerViewer").height();
                    // console.log("innerViewer width: " + w);
                    $(this).width(w);
                    $(this).height(h);
                    //set the .sh (shadow container) to the img width plus the width/height of the shadow
                    $("div.sh").width(w+36);
                    $("div.sh").height(h+36);

                    // f*** you very mucho, m$
                    // if (isIE7){
                    //     var margin = (650-36-$(this).find("img").height() )/2;
                    //     $(this).css({"margin-top": margin + "px"});
                    // }
            });

            viewerHeight = $("#viewer").height();
            $("#viewer").css("marginTop", -viewerHeight/2);
            // console.log(viewerHeight + " X " + viewerWidth);
            
             
            
            
        });
        $("#viewer").hide();
       $("#viewer").fadeIn(200);
        
        // strange enough: viewerHeight isn't set until the viewer has shown up.
        //viewerHeight = $("#viewer").height();
        
        
        // $("#viewer").hide();
        //         $("#viewer").fadeIn(200);
        
        if ($(this).find(".innerFrame img").attr("alt").toLowerCase() == "verschenkt") {
             $("#viewer .verschenkt").fadeIn(200);
        } else {
            $("#viewer .verschenkt").fadeOut(200);
        }
        

        

   });

});





$("#viewer").click( function() {
        $(this).hide();
});


/*  $("#wunschliste div.funda_imageboxleft").each(function(index) {
          
          var picSrc = $(this).find("img").attr("src");
          console.log(picSrc);
          $(this).css({'background-image' : 'url('+picSrc+')'});    
      });
*/
  
  
});