/* IMAGE BOX       */
/* --------------- */

// Set first image
var imageIndex = 0;  

// Set wrap size
var wrapWidth  = 500;
var wrapHeight = 500;


/**
 * Click on link with image
 */
$("a.lightbox").live("click", function(){

   play    = 0;
   overlayLink = $(this).attr("href");
   descLink    = $(this).attr("title");
   myIndex     = $("a.lightbox").index(this);
   startOverlay(overlayLink, descLink);
   
   
   
   return false;
});

/**
 * Create gray area around image
 */
function startOverlay(overlayLink, descLink){
    $("body").append('<div class="window"></div>') 
    
    $('.window').animate({opacity: 0.8}, 
    {
        duration: 100, 
        specialEasing: {
           width:  'toggle',
           height: 'easeOutBounce'
        }, 
        complete: function() {
          createWrap(overlayLink, descLink, wrapWidth, wrapHeight, myIndex);
        } 
    })
    .css({
          "height":$("body").innerHeight(),
          "width": $("body").innerWidth()});
};


/**
 * Create wrap of images with functional icons
 */  
function createWrap(overlayLink, descLink, wrap_width, wrap_height){
     
     // Value of scrolling from top of document
     var srollTop = ($("html").scrollTop()); 
    
     // Does wrap already exist?  
     if(!$(".wrap").is("div"))
     {
       // Append new DIV 
       $("body").append('<div class="wrap"></div>');
       
       // Set CSS for last created div
       $(".wrap").css({
                        "width": wrap_width,
                        "height":wrap_height-50,
                        "top":   (srollTop),
                        "left":  $("body").innerWidth()/2  - wrap_height/2
       }); 
        
       // Create a user interface   
       $(".wrap").append('<div class="top" style="width:100%; height: 50px;">'+
                              '<div class="up-info"></div>'+
                              ''+
                              '</div><div id="imageContent"></div>'+
                          '');
           
        $(".wrap div#imageContent").append('<img id="image" src="'+overlayLink+'" alt="'+descLink+'" />');
        
        $(".wrap").append('<div class="image_description"></div>'+
                              '<div class="close"></div>'+
                              '<div class="next"></div>'+
                              '<div class="nextFake"></div>'+
                              '<div class="previous"></div>'+
                              '<div class="previousFake"></div>'+
                              '');
        
         // Set CSS for last created div
       $(".wrap").css({
                        "top":   srollTop,
                        "left":  $("body").innerWidth()/2  - wrap_height/2
       }); 
      }
    
      checkButton();
      change_image(overlayLink, descLink);
      
      $("html").keydown(function(e){
        if(e.keyCode==27)
          exit();
      })
      
      $(".window").click(function(){ exit(); }); 
      
      $(".wrap .close").click(function(){ exit(); });
      
      $(".wrap .previous").click(function(){ prevImage(); });
      
      $(".wrap .next").click(function(){ nextImage(); });
      
      $(".start").click(function () {
           myIndex = -1;
           nextImage();
      });
         
      $(".wrap .resize").click(function () {
         window.location=$(".wrap img#image").attr("src");
      });
      
      $(".wrap div#imageContent img").click(function(){ nextImage(); });//.live("click",function(){ exit(); });
} 





//var id            = 1;
var play          = 0;
var play_interval = 3000;

 function refresh_upInfo(){
    $(".up-info").html((myIndex+1)+'/'+($("a.lightbox").length)); 
 } 
  
 function refresh_footer(){
   // $(".image_description").html(descLink+' ('+$(".wrap img#image").width()+'px x '+$(".wrap img#image").height()+'px )'); 
 } 
  
 function nextImage(){
     var num_images = $("a.lightbox").length;
     
     var src   = $("html").find("a.lightbox").eq(++myIndex).attr("href");
     var title = $("html").find("a.lightbox").eq(myIndex).attr("title");
     
     change_image(src, title); 
      
     checkButton();
  }
  
  function checkButton(){
     var num_images = $("a.lightbox").length;
  
     if((myIndex+1) < num_images){  $(".wrap .next").show(); $(".wrap .nextFake").hide(); } 
     else                        {  $(".wrap .next").hide(); $(".wrap .nextFake").show(); }
    
     if(myIndex > 0)             {  $(".wrap .previous").show(); $(".wrap .previousFake").hide(); }
     else                        {  $(".wrap .previous").hide(); $(".wrap .previousFake").show(); }
  }
  
  function prevImage(){
     
     var num_images = $("a.lightbox").length;
     
     var src   = $("html").find("a.lightbox").eq(--myIndex).attr("href");
     var title = $("html").find("a.lightbox").eq(myIndex).attr("title");
     
     change_image(src, title); 
      
     checkButton();
  } 
  
  function change_image(src, title){
     $("img#image").remove();
    
     $(".wrap div#imageContent").html('<img id="image" src="'+src+'" alt="'+title+'" />');
     $("img#image").show().css({
         "max-width":  "500px", 
         "max-height": "400px", 
         "position":   "absolute",
         "top":  200 - $("img#image").innerHeight()/2+10,
         "left": 250 - $("img#image").innerWidth()/2 
     });
        
     $("img#image").load(function(){ 
       /*$(".wrap").css({
         "width": $("img#image").innerWidth(),
         "height": "auto" 
       });  */
       
       refresh_footer();
       refresh_upInfo();
     });
  }
      
  function exit(){
     $(".wrap div").remove(); 
     $(".wrap img").remove();
     $(".wrap").remove();
     $(".window").remove();
  }