//Funktion um die echten Abmaßungen des Bildes zu erhalten
function getImgSize(imgSrc, callback) {
    var newImg = new Image();
    newImg.onload = function() {
      var imgWidth=newImg.width;
      var imgHeight=newImg.height;
      //Setze die echte Breite, sofern diese nicht breiter ist als der aktuelle Bildausschnitt
      if(imgWidth>jQuery(window).width()){
        //Berechne die neue Höhe indem die natürliche Höhe mal einem Faktor genommen wird der sich aus natürliche Breite / Bildausschnit Breite ergibt
        var neoHeight=imgHeight*(jQuery(window).width()/imgWidth);
        jQuery('#polaroid_lightbox img[src="'+imgSrc+'"]').css('width',jQuery(window).width());
        jQuery('#polaroid_lightbox, #polaroid_lightbox img[src="'+imgSrc+'"]').css('height',neoHeight);  
      }
      else{
        jQuery('#polaroid_lightbox img[src="'+imgSrc+'"]').css('width',imgWidth);
        jQuery('#polaroid_lightbox, #polaroid_lightbox img[src="'+imgSrc+'"]').css('height',imgHeight);  
      }  
      //Mache Callback, NACHDEM die obigen Operationen abgeschlossen sind
      callback();
    }
    newImg.src = imgSrc; // this must be done AFTER setting onload
}
function close_lightbox(){
    //Lasse die Lightbox langsam verschwinden und entferne den HTML-Coode dafür aus dem DOM
    jQuery('#polaroid_wrapper,#the_shadow').fadeOut('slow',function(){jQuery('#polaroid_wrapper, #the_shadow').remove();});
}

function set_widthes(img_nr){
    var img_src=jQuery('#image_lightbox[data-img_nr="'+img_nr+'"]').attr('src');
    //Setze die Dimensionen des Bildes
    var img_dimensions=getImgSize(img_src,function(){
        //Setze die top position der Lightbox
        jQuery('#polaroid_wrapper').css('right',((jQuery(window).width()/2)-(jQuery('#polaroid_wrapper').width()/2)));
        //Setze die Höhe des DIVs - 2px für den Rahmen
        jQuery('#polaroid_lightbox').css('height',(jQuery('#image_lightbox[data-img_nr="'+img_nr+'"]').css('height')-2));
        // Setze den negativen margin und die breite für den Beschreibungstext
        jQuery('#text_lightbox').css('width',jQuery('#image_lightbox[data-img_nr="'+img_nr+'"]').css('width')+'px');
        // Add left&right controls in image
        var wrapper_post=jQuery('#polaroid_wrapper').offset();
        var nav_string='';
        console.log('Img nr: '+img_nr);
        if(img_nr>1){
            nav_string+='<div id="lightbox_big_left" class="prev" onmouseover="jQuery(this).css({\'cursor\':\'pointer\',\'opacity\':\'1\'});" onmouseout="jQuery(this).css({\'cursor\':\'default\',\'opacity\':\'0\'});" style="opacity:0;height:'+(jQuery('#polaroid_wrapper').height()-2)+'px;width:'+(jQuery('#polaroid_wrapper').width()/5)+'px;position:absolute;left:0;top:0;background-color:rgba(255,255,255,0.2);line-height:'+jQuery('#lightbox_big_left').height()+';" onclick="toggle_images('+img_nr+',\'-\');">&lt;</div>';
        }
        var anz=jQuery('#polaroid_lightbox img').length;
        console.log('Anzahl: '+anz);
        if(img_nr<anz){
            nav_string+='<div id="lightbox_big_right" class="nex" onmouseover="jQuery(this).css({\'cursor\':\'pointer\',\'opacity\':\'1\'});" onmouseout="jQuery(this).css({\'cursor\':\'default\',\'opacity\':\'0\'});" style="opacity:0;height:'+(jQuery('#polaroid_wrapper').height()-2)+'px;width:'+(jQuery('#polaroid_wrapper').width()/5)+'px;position:absolute;right:0;top:0;background-color:rgba(255,255,255,0.2);line-height:'+jQuery('#lightbox_big_right').height()+';font-size:'+(jQuery('#lightbox_big_right').css('height')/2)+';color:rgba(0,0,0,0.4);text-align:center;" onclick="toggle_images('+img_nr+',\'+\');">&gt;</div>';
        }
        jQuery('#lightbox_big_nav').html(nav_string);
    });
}
function toggle_images(act_number,direction){
    //act_number=parseInt(act_number);
    if(direction=='-'){act_number--;}
    else{act_number++;}
    jQuery('#polaroid_wrapper img#image_lightbox').removeAttr('id').fadeOut('slow');
    jQuery('#polaroid_wrapper #text_lightbox').removeAttr('id').fadeOut('slow',function(){
        jQuery('#polaroid_wrapper').css('right',0);
        jQuery('#polaroid_wrapper img[data-img_nr="'+act_number+'"]').attr('id','image_lightbox');
        jQuery('#polaroid_wrapper div[data-img_nr="'+act_number+'"]').attr('id','text_lightbox');
        jQuery('#polaroid_wrapper img[data-img_nr="'+act_number+'"]').fadeIn('slow'); 
        jQuery('#polaroid_wrapper div[data-img_nr="'+act_number+'"]').fadeIn('slow',set_widthes(act_number));
    });
}
function lightbox_nav(){
    
}
jQuery(function(){
    jQuery('.lightbox').mouseover(function(){jQuery('.lightbox').css('cursor','pointer')});
    jQuery('.lightbox').click(function(){
        var doc_height=jQuery('body').height();
        if(doc_height<jQuery(window).height()){doc_height=jQuery(window).height();}
        var img_height=jQuery(this).height();
        var img_width=jQuery(this).width();
        var clicked_element_src=jQuery(this).attr('src');
        var prepend_string='';
        //Polaroid wrapper + polaroid_lightbox
        prepend_string+='<div id="polaroid_wrapper" style="position:absolute;margin:3rem 0 0;z-index:10000;display:none;" onclick="return false;"><div id="polaroid_lightbox" style="border:1px solid gray;"><div id="lightbox_big_nav"></div>';
        //Schließer
        prepend_string+='<div id="close_lightbox" onmouseover="jQuery(this).css(\'cursor\',\'pointer\');" onclick="close_lightbox();" style="border-radius:30px;background-color:#333;color:white;position:absolute;right:3%;top:1%;padding:0 0.5rem;font-weight:bold;border:1px solid white;">X</div>';
        //Bild
        var lightbox_elem=jQuery('.lightbox').length;
        var i=1;
        jQuery('.lightbox').each(function(){
            prepend_string+='<img src="'+jQuery(this).attr('src')+'" data-img_nr="'+i+'" style="width:100%;height:100%;margin:0 auto;max-width:100%;max-height:100%;';
            if(jQuery(this).attr('src')==clicked_element_src){
                prepend_string+='display:block;" id="image_lightbox"'
            }
            else{
                prepend_string+='display:none;"';    
            }
            prepend_string+=' />';
            //Füge das DIV für den Text an
            prepend_string+='<div style="display:block;color:#ddd;padding:0rem 0.5rem;text-align:left;height:0;';
            //Ist die BEschreibung für das aktuell angeklickten Element? => Anzeigen, sonst verstecken
            if(jQuery(this).attr('src')==clicked_element_src){prepend_string+='display:block;"id="text_lightbox"';}
            else{prepend_string+='display:none;"';}
            //Setze Data-attr zum idetifizieren
            prepend_string+=' data-img_nr="'+i+'" class="descr_text">';
            if(i>1){prepend_string+='<div class="prev" onmouseover="jQuery(this).css(\'cursor\',\'pointer\');" style="display:inline-block;padding:0 0.5rem;background-color:#333;border:1px solid gray;border-radius:10px;" onclick="toggle_images('+i+',\'-\');">&lt;</div> ';}
            prepend_string+='('+i+'/'+lightbox_elem+')';
            if(i<lightbox_elem){prepend_string+=' <div class="next" onmouseover="jQuery(this).css(\'cursor\',\'pointer\');" style="display:inline-block;padding:0 0.5rem;background-color:#333;border:1px solid gray;border-radius:10px;" onclick="toggle_images('+i+',\'+\');">&gt;</div>';}
            //Leerzeichen zwischen den Schaltflächen und eventuellem Text
            prepend_string+=' ';
            //Hat das Bild eine Beschreibung (entweder als Figcaption bei einem Figure-Element oder als title im img-Tag) 
            if((jQuery(this).parent().prop("tagName")=='FIGURE' && jQuery(this).parent().siblings('figcaption').length > 0)|| (jQuery(this).attr('title')!='' && jQuery(this).attr('title')!=undefined)){    
                //Befindet sich das zu vergrößernde Bild in einem Figure?
                if(jQuery(this).parent().prop("tagName")=='FIGURE' && jQuery(this).parent().siblings('figcaption').length > 0){
                    //Hole die Figcaption
                    prepend_string+=jQuery(this).parent().siblings('figcaption').html();    
                }
                //Ansonsten..
                else{
                    //..hole Title
                    prepend_string+=jQuery(this).attr('title');
                }
            }
            prepend_string+='</div>';
            i++;
        });
        //Schließe #polaroid_wrapper #polaroid_wrapper + #the_shadow
        prepend_string+='</div></div>';
        //Abdunkler DIV
        prepend_string+='<div id="the_shadow" style="position:fixed;top:0px;left:0px;height:'+doc_height+'px;width:100%;background-color:rgba(0,0,0,0.8);z-index:9999;display:none;text-align:center;" onclick="close_lightbox();"></div>';
        //Setze die Lightbox vor alle anderen Elemente im Body ein
        jQuery('body').prepend(prepend_string);
        set_widthes(jQuery('#image_lightbox').data('img_nr'));   
        //Lasse die Lightbox einfaden
        jQuery('#the_shadow, #polaroid_wrapper').fadeIn('slow');
        //Setze die top position der Lightbox
        jQuery('#polaroid_wrapper').css('top',jQuery(document).scrollTop());
        // Setze den negativen margin und die breite für den Beschreibungstext
        //jQuery('#text_lightbox').css('width',jQuery('#image_lightbox').width()+'px');
    });
});
//Wenn die Größe des Fensters sich ändert
jQuery(window).resize(function(){
    if(jQuery('#the_shadow').length>0){
        //Setze die Breite des Shadows, falls die Fenstergröße verändert wird, damit nicht ggf durch Scrollen Blitzer auftauchen können
        var doc_height=jQuery('body').height();
        if(doc_height<jQuery(window).height()){doc_height=jQuery(window).height();}
        jQuery('#the_shadow').css({'width':jQuery('#skel-panels-pageWrapper').width(),'height':doc_height});
        set_widthes(jQuery('#image_lightbox').data('img_nr'));
        //Setze die Höhe des Bildes entsprechend der Maximalhöhe des Fensters
        jQuery('#polaroid_lightbox').css('height',jQuery('#image_lightbox').height());
    }
});