$(document).ready(function(){
    
  var id      = 1;
  var myIndex = 1;  
  var play    = 0;
  var play_interval = 3000;
  
  $("a.lightbox").click(function(){ 
       play    = 0;
       overlayLink = $(this).attr("href");
	     descLink = $(this).attr("title");
	     myIndex  = $(this).index();
        if(myIndex == 0) myIndex = 1;
	     startOverlay(overlayLink, descLink);
	    
	   return false;
  });
  
  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, 300, 300, myIndex);
        } 
    })
    .css({"height":$("body").width()+100});
  };
  
  function createWrap(overlayLink, descLink, wrap_width, wrap_height){
     var srollTop = ($("html").scrollTop()); 

     if(!$(".wrap").is("div"))
     {
     $("body").append('<div class="wrap"></div>');
     
        $(".wrap").css({
              "width": wrap_width,
              "height":wrap_height,
              "top": srollTop+wrap_width/2,
              "left":$("html").width()/2-wrap_height/2
        }) 
      
      
      
      $(".wrap").append('<div class="top" style="width:100%; height: 50px;">'+
                            '<div class="up-info"></div>'+
                            '<div class="close"></div>'+
                            '<div class="resize"></div>'+
                            '<div class="play"></div>'+
                            '<div class="start"></div>'+
                        '</div>'+
                        '<div class="next"></div><div class="previous"></div>');
         
      $(".wrap").append('<img style="display: none" id="image" src="'+overlayLink+'" alt="'+descLink+'" />');
      $(".wrap").append('<div class="image_description"></div>');
      }   //if end
    
      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 = 0;
           nextImage();
      });
         
      $(".play").click(function () {
         play = !play;
         
         if(play == true)
         {
           setTimeout( function() { nextImage(); }, play_interval );
           $("div.play").addClass("active");
         }
         else
          $("div.play").remoteClass("active");
      });
      
      $(".wrap .resize").click(function () {
         window.location=$(".wrap img#image").attr("src");
      });

  } 

 function refresh_upInfo(){
    $(".up-info").html(myIndex+'/'+($("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;
     
     if(num_images>myIndex)
     {
       if(play == true)
          setTimeout( function() { nextImage(); }, play_interval );
       else
          $("div.play").removeClass("active");
           
        var src   = $("html").find("a.lightbox").eq(myIndex).attr("href");
        var title = $("html").find("a.lightbox").eq(myIndex).attr("title");
        change_image(src, title);
        myIndex++;  
      }
      else
      {
        play = false;
        $("div.play").removeClass("active");
      } 
      
      checkButton();
  }
  
  function checkButton(){
  
     var num_images = $("a.lightbox").length;
  
     if(myIndex < num_images)  $(".wrap .next").show(); 
     else                      $(".wrap .next").hide();
    
     if(myIndex > 1)           $(".wrap .previous").show(); 
     else                      $(".wrap .previous").hide();
        
  }
  
  function prevImage(){
     
     if(myIndex>1)
      {     
        myIndex--;   
        var src   = $("html").find("a.lightbox").eq(myIndex-1).attr("href");
        var title = $("html").find("a.lightbox").eq(myIndex-1).attr("title");
       
        change_image(src, title);
      } 
      
      checkButton();
  } 
  
  function change_image(src, title){
     
     $("#image").attr("src",src);
     
     $("#image").removeAttr("width"); 
     $("#image").removeAttr("height");
    
     $("#image").load(function(){
          var pic_real_width  = $("#image").width();
          var pic_real_height = $("#image").height();
          
          $(".wrap img#image").css({"width":"auto", "height":"auto"});
              
              $(".wrap").animate({
                   width:  pic_real_width,
                   height: pic_real_height+$(".top").height()+$(".description_image").height()+50,
                   "top":  ($("html").scrollTop()),
                   "left": screen.availWidth/2-pic_real_width/2
                },{
                  duration: 500,
                  complete: function() {
                     $(".wrap img#image").hide(); 
                     $(".wrap img#image").css({"display":"block"});
                     $(".wrap img#image").show();
                     
                    refresh_footer();
                    refresh_upInfo();
                  }
                } 
              );  
     });      
     
    
   }
      
  function exit(){
     $(".wrap div").remove(); 
     $(".wrap img").remove();
     $(".wrap").remove();
     $(".window").remove();
  }

});