var MPP = {
  text: 'Click to view more from this shoot',
  opacity: 0.6
};



MPP.application = (function() {
  
  var $containers;
  
  
  function fade(in_or_out, a) {
    var opacity = in_or_out == 'in' ? {text:1, image:MPP.opacity} : {text:0, image:0}, $a = $(a);
    $a.find('.hover-box').stop(true, false).animate({opacity:opacity.image}, 'fast', 'swing');
    $a.find('.hover-text').stop(true, false).animate({opacity:opacity.text}, 'fast', 'swing');
  }
  
  function in_handler(event) {
    fade('in', event.currentTarget);
  }
  
  function out_handler(event) {
    fade('out', event.currentTarget);
  }
  
  function draw() {
    $('<span class="hover-box" /><span class="hover-text">'+MPP.text+'</span>').appendTo('.portfolio-image p').css({opacity:0});
  }
  
  function reference_elements() {
    $containers = $('.portfolio-image a');
  }
  
  function add_listener() {
    $containers.hover(in_handler, out_handler);
  }
  
  function set_overlay_dimensions() {
    $containers.find('img').each(function(index, element) {
      var $element = $(element);
      $element.next().css({height:$element.attr('height'), width:$element.attr('width')});
    });
  }
  
  return {
    
    initialise: function() {
      reference_elements();
      draw();
      add_listener();
      set_overlay_dimensions();
    }
  };
  
}());



$(function() {
  MPP.application.initialise();
});