var numberOfImages = 13;
var numberOfMiniatures = 5;
var currentPhoto = 0;
var miniature_prefix = "small";
var image_prefix = "f";

var images = function(e)
{
   function mouseMove()
   {
      this.setStyle('background-color', '#252525');
   }

   function mouseOut()
   {
      this.setStyle('background-color', '#000000');
   }

   function getStringFromNumber(i)
   {
      var k = '';
      if (i < 10)  k += "0";
      if (i < 100) k += "0";
      k += i;
      return k;
   }

   function setCurrentPhoto(cur)
   {
     currentPhoto = cur;

     if (currentPhoto < 0)
       currentPhoto = 0;

     if (currentPhoto > numberOfImages - numberOfMiniatures)
       currentPhoto = numberOfImages - numberOfMiniatures;
   }

   function loadPhotos()
   {
      $('mini').empty();

      new Asset.image('../images/prev.jpg', {id:'prev'}).injectInside('mini');

      var imageArray = new Array();

      var j = 0;
      for (i = currentPhoto; (i < currentPhoto + numberOfMiniatures) && (i < numberOfImages); i++)
      {
         var number = getStringFromNumber(i);
         var name = miniature_prefix + number;
         imageArray[j++] = '../images/fotos/' + name + '.jpg';
      }

      var j = 0;
      for (i = currentPhoto; (i < currentPhoto + numberOfMiniatures) && (i < numberOfImages); i++)
      {
         var number = getStringFromNumber(i);
         var inumber = "" + (i + 1);
         var name = 'small' + number;
         new Asset.image(imageArray[j++], {id:name}).injectInside('mini');

         $(name).inumber = inumber;
         $(name).number = number;
         $(name).addEvent('click', function(e)
         {
            e = new Event(e).stop();
            $('legenda').setHTML('Carregando imagem... <img src="../images/loader.gif" class="img_loading_photo"></img>');
            $('photo').empty();
            $('photoNumber').empty();

            var img = new Asset.image('../images/fotos/' + image_prefix + this.number + '.jpg',
            {
               id: 'foto',
               onload: function ()
               {
                  img.injectInside('photo');
                  new Ajax('../images/fotos/legenda' + this.number + '.txt', { method: 'get', update: $('legenda') }).request();
                  $('photoNumber').setText(this.inumber);
               },
               onerror: function()
               {
                  $('legenda').setText('Error loading image!');
               }
            });
            img.number = this.number;
            img.inumber = this.inumber;
         });

         $(name).addEvent('mousemove', mouseMove);
         $(name).addEvent('mouseout', mouseOut);
         $(name).setStyles('border: 1px solid #303030');
      }

      new Asset.image('../images/next.jpg', {id:'next'}).injectInside('mini');

      $('prev').setStyles('position:absolute; left:10%;');
      $('prev').addEvent('click', function(e)
      {
         e = new Event(e).stop();
         setCurrentPhoto(currentPhoto - numberOfMiniatures);
         loadPhotos();
      });
      $('prev').addEvent('mousemove', mouseMove);
      $('prev').addEvent('mouseout', mouseOut);

      $('next').setStyles('position:absolute; right: 10%;');
      $('next').addEvent('click', function(e)
      {
         e = new Event(e).stop();
         setCurrentPhoto(currentPhoto + numberOfMiniatures);
         loadPhotos();
      });
      $('next').addEvent('mousemove', mouseMove);
      $('next').addEvent('mouseout', mouseOut);
   }

   var loadGalleryPage = function()
   {
      return new XHR(
      {
         method: 'get',
         onSuccess: function()
         {
            $('content').setHTML(this.response.text);
            loadPhotos();
         }
      })
   }

   var url = "galeria.html";
   var myXHR = loadGalleryPage();
   myXHR.send(url);   
}