$(function() {
      /**
      * interval : time between the display of images
      * playtime : the timeout for the setInterval function
      * current  : number to control the current image
      * current_thumb : the index of the current thumbs wrapper
      * nmb_thumb_wrappers : total number of thumbs wrappers
      * nmb_images_wrapper : the number of images inside of each wrapper
      */
      var interval         = 8000;
      var playtime;
      var current          = 0;
      var current_thumb    = 0;
      var nmb_thumb_wrappers  = 1;
      var nmb_images_wrapper  = 3;
      /**
      * start the slideshow
      */
      play();

      /**
      * show the controls when mouseover on the main container
      */
      slideshowMouseEvent();
      function slideshowMouseEvent(){
         $('#msg_slideshow').unbind('mouseenter').bind('mouseenter',showControls).andSelf().unbind('mouseleave').bind('mouseleave',hideControls);
      }

      /**
      * clicking the grid icon,
      * shows the thumbs view, pauses the slideshow, and hides the controls
      
      $('#msg_grid').bind('click',function(e){
         hideControls();
         $('#msg_slideshow').unbind('mouseenter').unbind('mouseleave');
         pause();
         $('#msg_thumbs').stop().animate({'top':'0px'},500);
         e.preventDefault();
      });
      */

      /**
      * closing the thumbs view, shows the controls
      
      $('#msg_thumb_close').bind('click',function(e){
         showControls();
         slideshowMouseEvent();
         $('#msg_thumbs').stop().animate({'top':'-230px'},500);
         e.preventDefault();
      });
      */

      /**
      * pause or play icons
      
      $('#msg_pause_play').bind('click',function(e){
         var $this = $(this);
         if($this.hasClass('msg_play'))
            play();
         else
            pause();
         e.preventDefault();  
      });
      */

      /**
      * click controls next or prev, pauses the slideshow and displays the next or previous image
      
      $('#msg_next').bind('click',function(e){
         pause();
         next();
         e.preventDefault();
      });
      $('#msg_prev').bind('click',function(e){
         pause();
         prev();
         e.preventDefault();
      });
      */

      /**
      * show and hide controls functions
      */
      function showControls(){
         $('#msg_controls').stop().animate({'right':'-305px'},500);<!--posicion de los controles de imagen-->
      }
      function hideControls(){
         $('#msg_controls').stop().animate({'right':'-450px'},500);
      }

      /**
      * start the slideshow
      */
      function play(){
         next();
         $('#msg_pause_play').addClass('msg_pause').removeClass('msg_play');
         playtime = setInterval(next,interval)
      }

      /**
      * stops the slideshow
      
      function pause(){
         $('#msg_pause_play').addClass('msg_play').removeClass('msg_pause');
         clearTimeout(playtime);
      }
      */

      /**
      * show the next image
      */
      function next(){
         ++current;
         showImage('r');
      }

      /**
      * shows the previous image
      */
      function prev(){
         --current;
         showImage('l');
      }

      /**
      * shows an image
      * dir : right or left
      */
      function showImage(dir){
         /**
         * the thumbs wrapper being shown, is always the one containing the current image
         */
         alternateThumbs();

         /**
         * the thumb that will be displayed in full mode
         */
         var $thumb = $('#msg_thumbs .msg_thumb_wrapper:nth-child('+current_thumb+')')
         .find('a:nth-child('+ parseInt(current - nmb_images_wrapper*(current_thumb -1)) +')').find('img');
         if($thumb.length){
            var source = $thumb.attr('alt');
            var $currentImage = $('#msg_wrapper').find('img');
            if($currentImage.length){
               $currentImage.fadeOut(function(){
                  $(this).remove();
                  $('<img />').load(function(){
                     var $image = $(this);
                     resize($image);
                     $image.hide();
                     $('#msg_wrapper').empty().append($image.fadeIn());
                  }).attr('src',source);
               });
            }
            else{
               $('<img />').load(function(){
                  var $image = $(this);
                  resize($image);
                  $image.hide();
                  $('#msg_wrapper').empty().append($image.fadeIn());
               }).attr('src',source);
            }
         }
         else{ //this is actually not necessary since we have a circular slideshow
            if(dir == 'l')
               ++current;  
            alternateThumbs();
            return;
         }
      }

      /**
      * the thumbs wrapper being shown, is always 
      * the one containing the current image
      */
      function alternateThumbs(){
         $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')').hide();
         current_thumb = Math.ceil(current/nmb_images_wrapper);
         /**
         * if we reach the end, start from the beggining
         */
         if(current_thumb > nmb_thumb_wrappers){
            current_thumb  = 1;
            current     = 1;
         }  
         /**
         * if we are at the beggining, go to the end
         */             
         else if(current_thumb == 0){
            current_thumb = nmb_thumb_wrappers;
            current = current_thumb*nmb_images_wrapper;
         }

         $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')').show(); 
      }

      /**
      * click next or previous on the thumbs wrapper
      */
      $('#msg_thumb_next').bind('click',function(e){
         next_thumb();
         e.preventDefault();
      });
      $('#msg_thumb_prev').bind('click',function(e){
         prev_thumb();
         e.preventDefault();
      });
      function next_thumb(){
         var $next_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb+1)+')');
         if($next_wrapper.length){
            $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')').fadeOut(function(){
               ++current_thumb;
               $next_wrapper.fadeIn();                         
            });
      }
   }
   function prev_thumb(){
      var $prev_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb-1)+')');
      if($prev_wrapper.length){
         $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')').fadeOut(function(){
            --current_thumb;
            $prev_wrapper.fadeIn();                         
         });
      }           
   }

   /**
   * clicking on a thumb, displays the image (alt attribute of the thumb)
   */
   $('#msg_thumbs .msg_thumb_wrapper > a').bind('click',function(e){
      var $this = $(this);
      $('#msg_thumb_close').trigger('click');
      var idx = $this.index();
      var p_idx = $this.parent().index();
      current = parseInt(p_idx*nmb_images_wrapper + idx + 1);
      showImage();
      e.preventDefault();
   }).bind('mouseenter',function(){
      var $this = $(this);
      $this.stop().animate({'opacity':1});
   }).bind('mouseleave',function(){
      var $this = $(this);  
      $this.stop().animate({'opacity':0.5});
   });

   /**
   * resize the image to fit in the container (width x height)
   */
   function resize($image){
      var theImage = new Image();
      theImage.src = $image.attr("src");
      var imgwidth = theImage.width;
      var imgheight = theImage.height;
      var containerwidth = 795;
      var containerheight = 486;

      if(imgwidth > containerwidth){
         var newwidth = containerwidth;
         var ratio = imgwidth / containerwidth;
         var newheight = imgheight / ratio;
         if(newheight > containerheight){
            var newnewheight = containerheight;
            var newratio = newheight/containerheight;
            var newnewwidth =newwidth/newratio;
            theImage.width = newnewwidth;
            theImage.height= newnewheight;
         }
         else{
            theImage.width = newwidth;
            theImage.height= newheight;
         }
      }
      else if(imgheight > containerheight){
         var newheight = containerheight;
         var ratio = imgheight / containerheight;
         var newwidth = imgwidth / ratio;
         if(newwidth > containerwidth){
            var newnewwidth = containerwidth;
            var newratio = newwidth/containerwidth;
            var newnewheight =newheight/newratio;
            theImage.height = newnewheight;
            theImage.width= newnewwidth;
         }
         else{
            theImage.width = newwidth;
            theImage.height= newheight;
         }
      }
      $image.css({
         'width'  :theImage.width,
         'height':theImage.height
      });
   }
});