$(function() {
        //current thumb's index being viewed
        var current      = -1;
        //cache some elements
        var $btn_thumbs = $('#fp_thumbtoggle');
        var $loader    = $('#fp_loading');
        var $btn_next    = $('#fp_next');
        var $btn_prev    = $('#fp_prev');
        var $thumbScroller  = $('#thumbScroller');
        
        //total number of thumbs
        var nmb_thumbs    = $thumbScroller.find('.content').length;
        
        //preload thumbs
        var cnt_thumbs     = 0;
        for(var i=0;i<nmb_thumbs;++i){
          var $thumb = $thumbScroller.find('.content:nth-child('+parseInt(i+1)+')');
          $('<img/>').load(function(){
            ++cnt_thumbs;
            if(cnt_thumbs == nmb_thumbs)
        //display the thumbs on the bottom of the page
        showThumbs(500);
          }).attr('src',$thumb.find('img').attr('src'));
        
        }
        //makeScrollable();
        
        //make the document scrollable
        //when the the mouse is moved up/down
        //the user will be able to see the full image
        
        
        //clicking on a thumb...
        $thumbScroller.find('.content').bind('click',function(e){
          var $content= $(this);
          var $elem   = $content.find('img');
          //keep track of the current clicked thumb
          //it will be used for the navigation arrows
          current   = $content.index()+1;
          //get the positions of the clicked thumb
          var pos_left   = $elem.offset().left;
          var pos_top   = $elem.offset().top;
          //clone the thumb and place
          //the clone on the top of it
          var $clone   = $elem.clone()
          .addClass('clone')
          .css({
            'position':'fixed',
            'left': pos_left + 'px',
            'top': pos_top + 'px'
          }).insertAfter($('BODY'));
          
          var windowW = $(window).width();
          var windowH = $(window).height();
          
          //animate the clone to the center of the page
          $clone.stop()
          .animate({
            'left': windowW/2 + 'px',
            'top': windowH/2 + 'px',
            'margin-left' :-$clone.width()/2 -5 + 'px',
            'margin-top': -$clone.height()/2 -5 + 'px'
          },500,
          function(){
            var $theClone   = $(this);
            var ratio    = $clone.width()/400;
            var final_w    = 400*ratio;
            
            $loader.show();
            
            //expand the clone when large image is loaded
            $('<img class="fp_preview"/>').load(function(){
              var $newimg     = $(this);
              var $currImage   = $('#fp_gallery').children('img:first');
              $newimg.insertBefore($currImage);
              $loader.hide();
              //expand clone
              $theClone.animate({
                'opacity'    : 0,
                'top'      : windowH/2 + 'px',
                'left'      : windowW/2 + 'px',
                'margin-top'  : '-200px',
                'margin-left'  : -final_w/2 + 'px',
                'width'      : final_w + 'px',
                'height'    : '400px'
              },1000,function(){$(this).remove();});
              //now we have two large images on the page
              //fadeOut the old one so that the new one gets shown
              $currImage.fadeOut(2000,function(){
                $(this).remove();
              });
              //show the navigation arrows
              showNav();
                showimg();
            }).attr('src',$elem.attr('alt'));
          });
          //hide the thumbs container
          hideThumbs();
          e.preventDefault();
          hidesfondo();
         
          
        });
        
        //clicking on the "show thumbs"
        //displays the thumbs container and hides
        //the navigation arrows
        $btn_thumbs.bind('click',function(){
          showThumbs(500);
          hideNav();
          hideimg();
          showsfondo();
          
          
        
        
        
        
          
          
        });
        
        
        
        
        
        
        function hideimg(){
          $('#fp_gallery').stop().hide();
      
        }
     
     function hidesfondo(){
          $('#bg').stop().hide();
      
        }
     
      function showsfondo(){
          $('#bg').stop().show();
      
        }
        function showimg(){
          $('#fp_gallery').stop().show();
      
        }
        
        function hideThumbs(){
          $('#thumbScroller').stop().hide();
          showThumbsBtn();
        }

        function showThumbs(speed){
          $('#thumbScroller').stop().show();
          hideThumbsBtn();
        }
        
        function hideThumbsBtn(){
          $btn_thumbs.stop().animate({'bottom':'-50px'},500);
        }

        function showThumbsBtn(){
          $btn_thumbs.stop().animate({'bottom':'0px'},500);
        }

        function hideNav(){
          $btn_next.stop().animate({'right':'-50px'},500);
          $btn_prev.stop().animate({'left':'-50px'},500);
        }

        function showNav(){
          $btn_next.stop().animate({'right':'0px'},500);
          $btn_prev.stop().animate({'left':'0px'},500);
        }

        //events for navigating through the set of images
        $btn_next.bind('click',showNext);
        $btn_prev.bind('click',showPrev);
        
        //the aim is to load the new image,
        //place it before the old one and fadeOut the old one
        //we use the current variable to keep track which
        //image comes next / before
        function showNext(){
          ++current;
          var $e_next  = $thumbScroller.find('.content:nth-child('+current+')');
          if($e_next.length == 0){
            current = 1;
            $e_next  = $thumbScroller.find('.content:nth-child('+current+')');
          }
          $loader.show();
          $('<img class="fp_preview"/>').load(function(){
            var $newimg     = $(this);
            var $currImage     = $('#fp_gallery').children('img:first');
            $newimg.insertBefore($currImage);
            $loader.hide();
            $currImage.fadeOut(1000,function(){$(this).remove();});
          }).attr('src',$e_next.find('img').attr('alt'));
        }
        
        function showPrev(){
          --current;
          var $e_next  = $thumbScroller.find('.content:nth-child('+current+')');
          if($e_next.length == 0){
            current = nmb_thumbs;
            $e_next  = $thumbScroller.find('.content:nth-child('+current+')');
          }
          $loader.show();
          $('<img class="fp_preview"/>').load(function(){
            var $newimg     = $(this);
            var $currImage     = $('#fp_gallery').children('img:first');
            $newimg.insertBefore($currImage);
            $loader.hide();
            $currImage.fadeOut(1000,function(){$(this).remove();});
          }).attr('src',$e_next.find('img').attr('alt'));
        }
        
                function makeScrollable(){
          $(document).bind('mousemove',function(e){
                        
                                                    
            var top = (e.pageY - $(document).scrollTop()/4) ;
            $(document).scrollTop(top);
            enable();
                    });
        }
        
        
        
         function makeScrollable2(){
          $(document).bind('mousemove',function(e){
                        
                                                    
            var top = (e.pageY - $(document).scrollTop()/2) ;
            $(document).scrollTop(top);
          
                    });
        }
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
            });