/**
 * jQuery wrShadow-plugin (jquery.wrshadow.js)
 *
 * Modifies object(s), adds PNG-based shadow around object
 *
 * CSS for shadow is required, can be modified for best result
 * Paths to images is specified in CSS
 *
 * @version 0.1
 * @Created: 2010-11-02
 * @Author: Oscar Engström, www.engstream.se
 *
 */
(function($) {
  $.fn.wrShadow = function(options) {
      var opts = $.extend({}, $.fn.wrShadow.defaults, options);

      //Is this a webkit-browser? (like Safari or Chrome)
      if($.browser.webkit){
          //Yes it is, then we need to wait until document is loaded, otherwise it will look messy
          $tmp = this; //Otherwise it won't be recognized in window load-function
          $(window).load(function(){
              return $.fn.wrShadow.logic($tmp);
          });
      } else {
          //No, that's good, just continue
          return $.fn.wrShadow.logic(this);
      }
  };

  $.fn.wrShadow.logic = function(object){
      return object.each(function() {
         $this = $(this);

         //Measurement, this is needed for setting individual widths and heights for objects shadow
         objectWidth = $this.width();
         objectHeight = $this.height();
         borderWidth = parseInt($this.css("borderLeftWidth"), 10) + parseInt($this.css("borderRightWidth"), 10);
         borderHeight = parseInt($this.css("borderTopWidth"), 10) + parseInt($this.css("borderBottomWidth"), 10);
         horizontalWidth = (objectWidth + 2*($.fn.wrShadow.defaults.shadowWidth)) - 2*($.fn.wrShadow.defaults.cornerWidth) + borderWidth;

         //Get margins for image, then remove them from image, we will add the values again later on for shadowWrapper
         tmpMargin = new Array();
         tmpMargin['top'] = $this.css('marginTop');
         tmpMargin['right'] = $this.css('marginRight');
         tmpMargin['bottom'] = $this.css('marginBottom');
         tmpMargin['left'] = $this.css('marginLeft');
         //Remove margins from image
         $this.css('margin', 0);

         tmpObject = $('<span>');
         tmpObject.addClass('shadowWrapper');
         if($this.hasClass('floatLeft')){
             tmpObject.addClass('floatLeft');
         } else if($this.hasClass('floatRight')){
             tmpObject.addClass('floatRight');
         }
         tmpObject.css({
             'width' : objectWidth + 2*($.fn.wrShadow.defaults.shadowWidth) + borderWidth + 'px'
         });

         //Add margin from image
         tmpObject.css('marginTop', tmpMargin['top']);
         tmpObject.css('marginRight', tmpMargin['right']);
         tmpObject.css('marginBottom', tmpMargin['bottom']);
         tmpObject.css('marginLeft', tmpMargin['left']);

         $this.wrap(tmpObject);

         $this.before($.fn.wrShadow.prependMarkup());
         $this.after($.fn.wrShadow.appendMarkup());

     });
  }

  $.fn.wrShadow.prependMarkup = function(){
      tmpContainer = $('<div>');

      tmpObject = $('<span>');
      tmpObject.addClass('shadowTopLeft');
      tmpContainer.append(tmpObject);
      tmpObject = $('<span>');
      tmpObject.addClass('shadowTopMiddle');
      tmpObject.css({
          'width' : horizontalWidth + 'px'
      });
      tmpContainer.append(tmpObject);
      tmpObject = $('<span>');
      tmpObject.addClass('shadowTopRight');
      tmpContainer.append(tmpObject);
      tmpObject = $('<span>');
      tmpObject.addClass('shadowLeft');
      tmpObject.css({
          'height' : objectHeight + borderHeight + 'px'
      });
      tmpContainer.append(tmpObject);
      
      return tmpContainer.html();
  };

  $.fn.wrShadow.appendMarkup = function(){
      tmpContainer = $('<div>');

      tmpObject = $('<span>');
      tmpObject.addClass('shadowRight');
      tmpObject.css({
          'height' : objectHeight + borderHeight + 'px'
      });
      tmpContainer.append(tmpObject);
      tmpObject = $('<span>');
      tmpObject.addClass('shadowBottomLeft');
      tmpContainer.append(tmpObject);
      tmpObject = $('<span>');
      tmpObject.addClass('shadowBottomMiddle');
      tmpObject.css({
          'width' : horizontalWidth + 'px'
      });
      tmpContainer.append(tmpObject);
      tmpObject = $('<span>');
      tmpObject.addClass('shadowBottomRight');
      tmpContainer.append(tmpObject);

      return tmpContainer.html();
  };

  $.fn.wrShadow.defaults = {
    cornerWidth:                11,   //Integer, how wide are the corners?
    shadowWidth:                6   //Integer, how wide are the shadow-effect
  }
})(jQuery);
