// open en laad de lightbox
function loadlightbox(imageurl,org){
   var imageserver = false;              // als de imageserver gebruikt wordt. worden images verkleind zodat ze altijd binnen het venster passen
   var windowh = jQuery(window).height();   // hoogte browserwindow
   var windoww = jQuery(window).width();    // breedte van browserwindow
   var imagecontainer = jQuery('#imagecontainer')
   imagecontainer.empty();
   var pos = imageurl.lastIndexOf('?');
   if (pos>0){
      imageurl = imageurl.substring(0,pos);
   }
   var myImage = new Image();
   myImage.onload = getWidthAndHeight;
   myImage.src = imageurl;             
   function getWidthAndHeight() {
      this.onload = null;
      imagew = this.width;
      imageh = this.height;
      var imageserverstring = '';
      if (imageserver){
         var maxw = windoww - 50;
         var maxh = windowh - 80;
         if (imagew > maxw){
           imageh=(maxw/imagew)*imageh;
           imagew=maxw;
         }
      
         if (imageh > maxh){
           imagew=(maxh/imageh)*imagew;
           imageh=maxh;
         }
         imageserverstring = '?hid=img;mxw='+maxw+';mxh='+maxh;
      }
      var imageboxh = imageh + 40;
      var imageboxw = imagew + 20;
      var margl = -imagew/2;
      var margh = -imageh/2;
      var text = org.attr('title');
      imagecontainer.animate({height:imageboxh,width:imageboxw,marginLeft:margl,marginTop:margh},function(){
         var ofst = imagecontainer.offset();
         var t = ofst.top;
         if (t<20){
            csstop = imageh+margh+20;
            imagecontainer.animate({top:csstop});
         }
         // plaats image
         imagecontainer.prepend('<img src="'+imageurl+imageserverstring+'" alt="" id="theBigPicture" style="display:none" />');
         jQuery('#theBigPicture',imagecontainer).fadeIn();
         // gallery - navigatievlakken
         if (org.hasClass('galleryimg')){ 
            var index = jQuery(".gallery .galleryimg").index(org);
            var total = jQuery(".gallery .galleryimg").length;
            text = text + "<p class='teller'>Foto "+(index+1)+" van "+total+"</p>"
            var navwidth =imagew/2;
            var next = jQuery('img.galleryimg:eq('+(index+1)+')');
            var righturl = next.attr('src');
            var paddingtop = imageh + 3;
            if (righturl){
               imagecontainer.append('<div id="right"><a href="#">volgende &raquo;</a></div>');
               jQuery('#right',imagecontainer).hover(function(){
                  jQuery(this).addClass('hover');
               },function(){
                  jQuery(this).removeClass('hover');
               }).css({width:navwidth, paddingTop:paddingtop, left: 1*navwidth+10}).click(function(){
                  jQuery('#theBigPicture',imagecontainer).fadeOut(function(){
                     loadlightbox(righturl,next); 
                  });
                  
               });
            };
            if (index>0){
               var prev = jQuery('img.galleryimg:eq('+(index-1)+')');
               var lefturl = prev.attr('src');
               if (lefturl){
                  imagecontainer.append('<div id="left"><a href="#">&laquo; vorige</a></div>');
                  jQuery('#left',imagecontainer).hover(function(){
                     jQuery(this).addClass('hover');
                  },function(){
                     jQuery(this).removeClass('hover');
                  }).css({width:navwidth, paddingTop:paddingtop}).click(function(){
                     jQuery('#theBigPicture',imagecontainer).fadeOut(function(){
                        loadlightbox(lefturl,prev);
                     });
                  });
               };
            }
            jQuery('#left a, #right a', imagecontainer).click(function(){
               jQuery(this).parent().trigger('click');
               return false;
            });
         }
         // plaats title attr als bijschrift
         if (text){ imagecontainer.append('<div id="ajaxtekst">'+text+'</div>'); }
         var texth = imageboxh + jQuery('#ajaxtekst',imagecontainer).outerHeight();
         // pas hoogte van black aan als het niet meer past
         windowh = texth + t + 40 ;
         var blackh = jQuery('#black').height();
         if(windowh > blackh){
            jQuery('#black').animate({height:windowh});
         }
         imagecontainer.animate({height:texth});
         // sluit
         imagecontainer.append('<a id="close" href="#">Toets "Esc" of klik om te sluiten</a>');
         jQuery('#close',imagecontainer).show()
         .click(function(){    CloseBox(); return false;
         });
         // keybindings
         jQuery(document).unbind('keydown').keydown(function(e){  
            switch(e.keyCode) { 
               // User pressed "left" arrow
               case 37:
                   jQuery('#left').trigger('click');
               break;
               // User pressed "right" arrow
               case 39:
                  jQuery('#right').trigger('click');
               break;
               // User pressed "escape"
               case 27:
                  CloseBox();
               break;
               // User pressed "down" arrow
               case 40:
                  CloseBox();
               break;
            }
       });
         jQuery('#ajaximage',imagecontainer).fadeIn();
         jQuery('#ajaxtekst',imagecontainer).slideDown();
      }); 
   }                 
}
function CloseBox(){
   jQuery('#imagecontainer').empty().hide().attr('style','');
   jQuery('#black').fadeOut();
}


jQuery(document).ready(function(){

   var thumbobject = jQuery('#Content div.column2a') // DIV waar er naar images gezocht moet worden
   var wrapper = jQuery('#DesignTester') // DIV waar alles in zit, die dus de hoogte van de site bepaalt
   
   //plaats imagebox om images
   jQuery('img.imageleft , img.imageright, img.imagecenter').each(function(){
      var subscript = jQuery(this).attr('title');
      if (!subscript==""){ subscript = "<p>"+subscript+"</p>";}
      var clas = jQuery(this).attr('class');
         var posl = clas.lastIndexOf('left');
         var posr = clas.lastIndexOf('right');
         var setzise = false;
         if (posl>0){
            clas = 'imageleft';
            setzise =true;
         } else if (posr>0){
            clas = 'imageright';
            setzise =true;
         } else {
            clas = 'imagecenter';
         }
      jQuery(this).wrap("<div class='imagebox "+clas+"'></div>");
      if (setzise){
         var w = jQuery(this).parent().width();
         jQuery(this).parent().css('width',w);
      }
      jQuery(this).after(subscript).wrap("<a href='' class='lightbox'></a>").after('<span>uitvergroten</span>');
   });
  
   // foto's met lightbox
   if (jQuery('.lightbox', thumbobject).length){      
      // maak achtergrond en container DIV
      jQuery('body').append('<div id="black"></div><div id="imagecontainer"></div>');
      var toph = jQuery('#top').outerHeight(true) + jQuery('#footer').outerHeight(true);      // hoogte website
      jQuery(".lightbox", thumbobject).click(function(){
         windowh = jQuery(window).height();   // hoogte browserwindow
         windoww = jQuery(window).width();    // breedte van browserwindow
         var org = jQuery('img',this);
         var imageurl = org.attr('src');
         var scrollh = jQuery(window).scrollTop();  // verticale scrollafstand 
         var ictop = windowh/2 + scrollh;         // top-positie van ImageContainer
         if (toph > windowh){var blackh=toph;}else{var blackh=windowh;}
         jQuery('#black').css('height',blackh).css('opacity','0.8').fadeIn(function(){
            jQuery('#imagecontainer').css({height:'10px',width:'10px',marginLeft:'-5px',top:ictop}).fadeIn('fast',function(){
               loadlightbox(imageurl,org);
            });
         }).click(function(){
            CloseBox();
         });
         return false;
      });      
   } 
 

});