/***********************************************************************************/
// myLightbox - mylittlehomepage.net
// based on the tutorial "Building your own lightbox" by Adrian "yEnS" Mato Gondelle
// http://kilianvalkhof.com/2008/javascript/building-your-own-lightbox-part-1/
/***********************************************************************************/

// Images:
images = new Object();
images['throbber'] =           '/Bilder/Grafiken/Lightbox/throbber.gif';
images['previous'] =           '/Bilder/Grafiken/Lightbox/previous.png';
images['previous_inactive'] =  '/Bilder/Grafiken/Lightbox/previous_inactive.png';
images['next'] =               '/Bilder/Grafiken/Lightbox/next.png';
images['next_inactive'] =      '/Bilder/Grafiken/Lightbox/next_inactive.png';
images['close'] =              '/Bilder/Grafiken/Lightbox/close.png';

// Settings:
settings = new Object();
settings['position_top'] =        30;
settings['next_link'] =           '[»]';
settings['next_link_title'] =     '';
settings['previous_link']       = '[«]';
settings['previous_link_title'] = '';
settings['close_link'] =          '[x]';
settings['close_link_title'] =    '';

// myLightbox HTML:
myLightbox_html = '<div id="mylightbox">\
<div id="photoboxheader">\
<div id="title"></div>\
<div id="nav"></div>\
<div id="close"><a href="#" id="mylightbox-close" onclick="return false"><img src="'+images['close']+'" alt="'+settings['close_link']+'" title="'+settings['close_link_title']+'" /></a></div>\
</div>\
<div id="photo"></div>\
<p class="description"></p>\
</div>';

// Background:
myLightbox_background = '<div id="mylightbox-background"></div>';

// preload images:
throbber_img = new Image();
throbber_img.src = images['throbber'];
previous_img = new Image();
previous_img.src = images['previous'];
previous_inactive_img = new Image();
previous_inactive_img.src = images['previous_inactive'];
next_img = new Image();
next_img.src = images['next'];
next_inactive_img = new Image();
next_inactive_img.src = images['next_inactive'];

//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup()
 {
	//loads popup only if it is disabled
		
  if(popupStatus==0)
   {
    $("body").append(myLightbox_background);
    $("body").append(myLightbox_html);
    
    $("#mylightbox-background").css({
	   "opacity": "0.7"
    });

    $("#mylightbox-background").fadeIn("fast");
    $("#mylightbox").fadeIn("fast");
		
    // center popup on window resize:
    $(window).bind('resize', function() {
     centerPopup($("#mylightbox").width(),$("#mylightbox").height());
    });
				
    // close on click on close button:
    $("#mylightbox-close").click(function(){
     disablePopup();
    });

    // close on click on background:
    $("#mylightbox-background").click(function(){
     disablePopup();
    });

    // close on ESC key
    $(document).keypress(function(e){
     if(e.keyCode==27 && popupStatus==1){
      disablePopup();
     }
    });    
    
    popupStatus = 1;
	 }
 }

function disablePopup()
 {
  //if(popupStatus==1){
	$("#mylightbox").fadeOut("fast", remove);
  $("#mylightbox-background").fadeOut("fast", remove);
	popupStatus = 0;
	//}
}

// callback function to remove box and background:
function remove()
 {
  $(this).remove();
 }

function centerPopup(imgWidth,imgHeight)
 {
	//request data for centering
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
  if(typeof pageYOffset != 'undefined') // Mozilla
   {
    var top = pageYOffset + settings['position_top'];
   }
  else // IE
   {
    var top = document.documentElement.scrollTop + settings['position_top'];
   }
  //centering
	$("#mylightbox").css({
		"width":imgWidth,
    "position": "absolute",
		//"top": windowHeight/2-(imgHeight+100)/2,
    "top": top+"px",
		"left": windowWidth/2-(imgWidth+20)/2
	});
	//only need force for IE6
	$("#mylightbox-background").css({
		"height": windowHeight
	}); 
 }

function doit(e,t)
 {
	e.preventDefault();

  var prev = $(t).prev(".mylightbox").get();
  var next = $(t).next(".mylightbox").get();
  var alt = $(t).find("img").attr("alt");
  var title = $(t).find("img").attr("title");
  var src = $(t).attr("href");
  
  loadPopup();
  centerPopup($("#mylightbox").width(),$("#mylightbox").height());
   
  // previous and next buttons:
  if(prev!='' && next!='')
   {
    $("#mylightbox #nav").html('<a class="prev" href="'+prev+'"><img src="'+images['previous']+'" alt="'+settings['previous_link']+'" title="'+settings['previous_link_title']+'" /></a> &nbsp; <a class="next" href="'+next+'"><img src="'+images['next']+'" alt="'+settings['next_link']+'" title="'+settings['next_link_title']+'" /></a>');
   }
  else if(next!='') 
   {
    $("#mylightbox #nav").html('<img src="'+images['previous_inactive']+'" alt="" /> &nbsp; <a class="next" href="'+next+'"><img src="'+images['next']+'" alt="'+settings['next_link']+'" title="'+settings['next_link_title']+'" /></a>');
   }
  else if(prev!='') 
   {
    $("#mylightbox #nav").html('<a class="prev" href="'+prev+'"><img src="'+images['previous']+'" alt="'+settings['previous_link']+'" title="'+settings['previous_link_title']+'" /></a> &nbsp; <img src="'+images['next_inactive']+'" alt="" />');
   }
  else
   {
    $("#mylightbox #nav").html('&nbsp;');
   }
    
  $("#mylightbox #title").html('');
  $("#photo").html('<div style="text-align:center;"><img src="'+images['throbber']+'" style="padding:100px;" /></div>');
  $("#mylightbox p.description").html('');
		
  var objImagePreloader = new Image();
	objImagePreloader.onload = function() 
   {
    centerPopup(objImagePreloader.width,objImagePreloader.height);
    $("#mylightbox #title").html(alt);
    $("#photo").hide();
    $("#photo").html('<img src="'+src+'" />');
    $("#photo").fadeIn("fast");
    $("#mylightbox p.description").html(title);
    objImagePreloader.onload=function(){};
   };
  objImagePreloader.src = src;

  $("#mylightbox #nav .next").click(function(e){ 
   var tx = $(t).next(".mylightbox").get();
   doit(e,tx);
  }); 
    
  $("#mylightbox #nav .prev").click(function(e){ 
   var tx = $(t).prev(".mylightbox").get();
   doit(e,tx);
  });     
    
 }

$(function() {

 // add onlock events to thumbnail links:
 $(".mylightbox").click(function(e){
  doit(e,this);
 });

});