(function($) {
  function fullSizePreview(url, height) {
    $.modal(function(cancelFullSize) {
      var img = $('<img/>').attr({ src: url });
      var item = $('<div></div>').addClass('full-size-preview');
      var cancel = $('<a>Close Preview</a>').attr({ href: '#' });

      cancel.bind('click', cancelFullSize);

      item.append(img);
      item.append($('<br>'));
      item.append(cancel);
      item.css({
        position: 'absolute',
        width: '925px',
        'margin-top': '300px',
        height: height + 'px'
      });

      return item;
    });
  }
  
  function triggerPreview(event) {
    var elem = $(event.target).closest('a');
    var href = elem.attr('href');
    var height = elem.attr('rel');
    fullSizePreview(href, height);
    return false;
  }
  
  $(document).ready(function() {
    $('.preview-image .full-size').live('click', triggerPreview);
    $('.preview-image img').fadeIn();
    $('.preview-image .cancel').live('click', function(e) {
      var elem = $(e.target).closest('.cancel');
      var parent = elem.parents(".preview-image");
      $('#' + parent.attr('rel')).remove();
      parent.remove();
      $('#preview_image').show().val('').get();
      return false;
    });
  });
  
})(jQuery);