(function($){

  jQuery.fn.imgPopper = function () {

    var fadeSpeed = 250, // set 1 for almost no animation;)
        curtOpacity = .95;
        navSelectors = 'li.next, li.prev',
        closeSelectors = 'li.close a, div.ipopup-curtain, div.ipopup-container',
        isOpen = false,
        ypos = 0,
        hrefElms = this,
        curtainTemp = '<div class="ipopup-curtain"></div>',
        popupTemp = '<div class="ipopup-container">' +
            '<div class="ipopup-container-wrapper">' +
              '<div class="image">' +
                '<span class="img"><img src="%{img}" alt="%{alt}" /></span>' +
                '<strong class="title">%{title}</strong>' +
                '<div class="desc">%{alt}</div>' +
              '</div>' +
              '<div class="paging">' +
                '<div class="status">' +
                  '<strong>Image</strong> ' +
                  '<span><b>%{num}</b> of %{total}</span>' +
                '</div>' +
                '<ul class="stepper">' +
                  '<li class="next"><a href="#">Next</a></li>' +
                  '<li class="prev"><a href="#">Prev</a></li>' +
                  '<li class="close"><a href="#">Close</a></small></li>' +
                '</ul>' +
              '</div>' +
            '</div>' +
          '<div>';


    hrefElms.click(function()
    {
      var i = hrefElms.index(this),
          img = $(this).find('img');

      var makeHTML = $.inject(
        popupTemp, // html to inject into
        {
          img    : $(this).attr('href'),
          title  : img.attr('title'),
          alt    : img.attr('alt'),
          num    : i+1,
          total  : hrefElms.length
        });
      
      var popup = $(makeHTML),
          curtain = $(curtainTemp);
      
      if(!isOpen) { curtain.css('opacity', '0'); }
      
      $('body')
        .append(curtain)
        .append(popup);

      if(!isOpen) { ypos = $(document).scrollTop() + $(popup).offset().top; }
      
      popup.css('top', ypos).hide();

      if(!isOpen) {
        curtain.animate({ opacity: curtOpacity }, fadeSpeed, function(){ popup.fadeIn(fadeSpeed); }); // animate in
        isOpen = true;
      } else {
        curtain.css('opacity', curtOpacity).show();
        popup.show();
      }

      // next/prev buttons
      $(navSelectors)
          .each(function(j){
              var idx = i + (j?-1:1);

              if(idx < 0 || idx >= hrefElms.length) {
                $(this).addClass('nav-end').click(function(){ return false; }); // both ends of the popup nav
              } else {
                $(this).click(function(){
                
                  curtain.remove();
                  popup.remove();
                
                  hrefElms.eq(idx).trigger('click');
                  return false;
                });
              }
            });
      
      // close popup
      $(closeSelectors).click(function(){
          popup.fadeOut(fadeSpeed, function(){
              curtain.fadeOut(fadeSpeed, function(){
                  popup.remove();
                  curtain.remove();
              });
            }); // animate out
          isOpen = false;
          return false;
        });
        
      return false;

    });
  };
  
})(jQuery);