/* ----------------------------------------------------------------
 @name:     corners - add spans to style round corners
 @version:  0.1
 @release:  2010-01-05
 @type:     jQuery plugin
 @author:   Jan Panschab
---------------------------------------------------------------- */
$(function() {
  $.fn.corners = function(options) {
    var opts = $.extend({}, $.fn.corners.defaults, options);

    $.fn.log = function (msg) {
      if (opts.debug && window.console && window.console.log) {
        if (msg) {
          console.log('[corners] %s: %o', msg, this);
        } else {
          console.log('[corners] ' + this);
        }
      } else {
        if (msg) {
          alert('[corners] '+ msg +': '+ this);
        } else {
          alert('[corners]: '+ this);
        }
      }
      return this;
    };

    function log(variable, msg) {
      if (opts.debug) {
        if (window.console && window.console.log) {
          if (msg) {
            console.log('[corners] %s: %o', msg, variable);
          } else {
            console.log('[corners] ' + variable);
          }
        } else {
          if (msg) {
            alert('[corners] '+ msg +': '+ variable);
          } else {
            alert('[corners]: '+ variable);
          }
        }
      }
    }

    function getNumber(css) {
      var parseCss = parseInt(css);
      if (isNaN(parseCss)) {
        return 0;
      } else {
        return parseCss;
      }
    }

    return this.each(function() {
      var $this = $(this),
          borderWidth,
          isIE7 = ($.browser.msie && ($.browser.version < 8.0));
      if (opts.wrap) {
        borderWidth = [0, 0, 0, 0]
      } else {
        borderWidth = [ getNumber($this.css('border-top-width')),
                        getNumber($this.css('border-right-width')),
                        getNumber($this.css('border-bottom-width')),
                        getNumber($this.css('border-left-width')) ];
      }
      // build spans for corners
      var $corners = $('<span />')
                          .addClass('cs')
                          .css({
                            'display': 'block',
                            'position': 'absolute'
                          })
                          .width(opts.width)
                          .height(opts.height);
      if (opts.topLeft) { var $cornerTL = $corners.clone(); }
      if (opts.topRight) { var $cornerTR = $corners.clone(); }
      if (opts.bottomLeft) { var $cornerBL = $corners.clone(); }
      if (opts.bottomRight) { var $cornerBR = $corners.clone(); }
      if (opts.topLeft) {
        $cornerTL.addClass('tl').css({'top': '-'+ borderWidth[0] +'px', 'left': '-'+ borderWidth[3] +'px'});
      }
      if (opts.topRight) {
        $cornerTR.addClass('tr').css({'top': '-'+ borderWidth[0] +'px', 'right': '-'+ borderWidth[1] +'px'});
      }
      if (opts.bottomLeft) {
        $cornerBL.addClass('bl').css({'bottom': '-'+ borderWidth[2] +'px', 'left': '-'+ borderWidth[3] +'px'});
      }
      if (opts.bottomRight) {
        $cornerBR.addClass('br').css({'bottom': '-'+ borderWidth[2] +'px', 'right': '-'+ borderWidth[1] +'px'});
      }

      // wrap element
      if (opts.wrap) {
        // position of wrapper for spans
        var position = $this.css('position') === 'absolute' ? 'absolute' : 'relative';

        // get css properties from $this element
        var margin = $this.css('margin-top') + ' ' + $this.css('margin-right') + ' ' + $this.css('margin-bottom') + ' ' + $this.css('margin-left');
        var width = getNumber($this.width()) + getNumber($this.css('border-left-width')) + getNumber($this.css('border-right-width')) + getNumber($this.css('padding-right')) + getNumber($this.css('padding-left'));
        var floating = $this.css('float');
        /*if (!isIE7) {
          padding = $this.css('padding-top') + ' 0 ' + $this.css('padding-bottom') + ' 0';
        }*/
        var fontSize = $this.css('font-size');
        var classes = $this.attr('class');
        // reset css properties on $this element
        $this.css({
          'display': opts.display,
          'margin': '0px',
          'font-size': '1em'
        });

        $this
          .wrap('<span></span>')
          .parent()
          .css({
            'display': opts.display,
            'width': width,
            'margin': margin,
            'fontSize': fontSize,
            'position': position,
            'float': floating
          })
          .addClass('c '+ classes)
          .append($cornerTL)
          .append($cornerTR)
          .append($cornerBL)
          .append($cornerBR);

        // block element
        /*if (opts.display == 'block') {
          // get css properties from $this element
          var margin = $this.css('margin-top') + ' ' + $this.css('margin-right') + ' ' + $this.css('margin-bottom') + ' ' + $this.css('margin-left');
          var floating = $this.css('float');
          var classes = $this.attr('class');
          // reset css properties on $this element
          $this
          .css({'margin': '0px'})
          .removeClass(classes);
          // get width and width of left and right border and left and right padding
          var width = getNumber($this.width()) + getNumber($this.css('border-left-width')) + getNumber($this.css('border-right-width')) + getNumber($this.css('padding-right')) + getNumber($this.css('padding-left'));

          $this
            .wrap('<span class="c"></span>')
            .parent()
            .css({
              'margin': margin,
              'padding': padding,
              'float': floating
            })
            .addClass(classes)
            .append(corners);

        // inline element
        } else if (opts.display == 'inline') {
          // get css properties from $this element
          var margin = $this.css('margin-top') + ' ' + $this.css('margin-right') + ' ' + $this.css('margin-bottom') + ' ' + $this.css('margin-left');
          var padding = '0';
          if (!isIE7) {
            padding = $this.css('padding-top') + ' 0 ' + $this.css('padding-bottom') + ' 0';
          }
          var fontSize = $this.css('font-size');
          var classes = $this.attr('class');
          // reset css properties on $this element
          $this.css({
            'margin': '0px',
            'font-size': '1em'
          });

          $this
            .wrap('<span class="c"></span>')
            .parent()
            .css({
              'margin': margin,
              'padding': padding,
              'fontSize': fontSize
            })
            .addClass(classes)
            .append(corners);
        }*/
      } else { // nowrap
        // position of wrapper for spans
        if ($this.css('position') === 'static') {
          $this.css('position', 'relative');
        }
        // add class and append spans
        $this
          .addClass('c')
          .append($cornerTL)
          .append($cornerTR)
          .append($cornerBL)
          .append($cornerBR);
      }

    });
  };
  // corners defaults
  $.fn.corners.defaults = {
    wrap: false,
    display: 'block',
    width: '5px',
    height: '5px',
    topLeft: true,
    topRight: true,
    bottomLeft: true,
    bottomRight: true,
    debug: false
  };
});