$(document).ready(function() {
  var thumbs = $("#content .gallery img.small");
  var idx = 0;
  var total = thumbs.length;
  var NUM_IMAGES = 4;

   $("#content .gallery img.small").click(
     function() {
       var small_src = $(this).attr('src');
       var medium_src = small_src.replace(/small/, 'medium');
       var full_src = small_src.replace(/small/, 'full');
             
       $('#content .medium-image img').attr("src", medium_src);
       $('#content .medium-image img').attr("alt", $(this).attr('alt'));
       $('#content .medium-image img').parent().attr('title', $(this).attr('alt'));
       $('#content .medium-image img').parent().attr('href', full_src);
       
        return false;
     }
   );

  //Left scroll button
  $('#content .gallery a.scroll-left').click(function(){
     if (idx > 0) {
     
       --idx;
       for (i = 0; i < total; ++i) {
         if (i < idx || i >= (idx + NUM_IMAGES)) {
           $(thumbs[i]).hide();
         }
         else {
           $(thumbs[i]).show();
         }
       }
       
     }
     return false;
   });


  //Right scroll button
  $('#content .gallery a.scroll-right').click(function(){ 
     if (idx < total - NUM_IMAGES) {
       ++idx;
       for (i = 0; i < total; ++i) {
         if (i < idx || i >= (idx + NUM_IMAGES)) {
           $(thumbs[i]).hide();
         }
         else {
           $(thumbs[i]).show();
         }
       }
     }
     
     return false;
   });


});