/*
  String.format()
  Apply a format to a string using Regular Expressions.
  http://stackoverflow.com/questions/610406/javascript-printf-string-format/3492815#3492815
*/
String.prototype.format = function()
{
  // Temporary string.
  var formatted = this;

  /*
    Attempt to insert as many arguments as are passed to format.
    Each argument replaces {0}, {1}, {2}, etc.
  */
  for (var i = 0; i < arguments.length; i++)
  {
    var regexp = new RegExp('\\{'+i+'\\}', 'gi');
    formatted = formatted.replace(regexp, arguments[i]);
  }

  return formatted;
};



$(document).ready(function(){
  
  $('#serving_opportunities_descriptions li:nth-child(2n)').addClass('nth_child_2n');
  
  $bg_helper = $('#background_helper');
  $body = $('body');

  $(window).scroll(function() {
    var x = $(this).scrollTop();
    $bg_helper.css('background-position', '25% ' + parseInt(x / 10) + 'px');
    $body.css('background-position', '50% ' + parseInt(x / 4) + 'px');
  });
  
  var preloadedImages = [];
  $('#photos a').each(function(index,item){
    var loopImage = new Image();
    loopImage.src = $(item).attr('href');
    preloadedImages.push(loopImage);
  });


  /* OVERLAY
  ----------*/
  
  // Use the jQuery Tools method for show image thumbnails.
  // The element that will hold all the overlays.
  $("body").append('<div id="overlay"><a id="overlay_close" class="close overlay_nav">&times; Close</a><div id="overlay_content"></div><a id="overlay_nav_prev" class="overlay_nav">&larr; Previous Photo</a><a id="overlay_nav_next" class="overlay_nav fr">Next Photo &rarr;</a></div>')

  // The photo overlay, and related actions.
  var OVERLAY = 
  { currentPhotoId: 0
  , totalPhotos: $('[rel=#overlay]').length
  , preloadId: function(id)
    {
      var preload = new Image();

      if (id < 10) { id = "0" + id; } // Quick fix, 2 digit, leading zero format.
      preload.src = "./images/jesus_prom_2011_{0}.jpg".format(id);
      
      return preload;
    }
  , loadPhoto: function(id)
    {
      OVERLAY.currentPhotoId = id;

      $("#overlay_content").html(OVERLAY.preloadId(id));
      
      OVERLAY.preloadSurroundingPhotos(OVERLAY.currentPhotoId);
    }
  , advancePhoto: function(reverse)
    {
      var direction = (!reverse) ? 0 : -2;                
      var newId = ( OVERLAY.currentPhotoId + OVERLAY.totalPhotos + direction ) % OVERLAY.totalPhotos + 1;
      
      OVERLAY.loadPhoto(newId);
    }
  , preloadSurroundingPhotos: function(id)
    {
      var surroundingPhotos = [];
      surroundingPhotos.push(( OVERLAY.currentPhotoId + OVERLAY.totalPhotos ) % OVERLAY.totalPhotos + 1); // Next Photo
      surroundingPhotos.push(( OVERLAY.currentPhotoId + OVERLAY.totalPhotos - 2 ) % OVERLAY.totalPhotos + 1); // Previous Photo
      
      $.each(surroundingPhotos, function(index, item){
        OVERLAY.preloadId(item);
      });
    }
  };
  
  // Add triggers for next/previous photo
  $("#overlay_content, #overlay_nav_next").click(function(e){OVERLAY.advancePhoto(); e.preventDefault();});
  $("#overlay_nav_prev").click(function(e){OVERLAY.advancePhoto(true); e.preventDefault();});

  // Make the overlay triggers
  $('[rel=#overlay]').overlay(
    { oneInstance: true
    , fixed: false
    , onBeforeLoad: function()
      {
        // TODO check for width... Mobile
        overlay = this.getOverlay();

        var trigger = this.getTrigger();
        OVERLAY.loadPhoto(trigger.data('overlay-id'));
      }
    , onClose: function()
      {      
        $("#overlay_content").html("");
      }
    }
  );
  
});