/*
 * jQuery UI Button 1.0.0
 *
 * Created by Negru Nicolae Marian (marian.negru@gmail.com)
 * Modified by Edward Leigh (edward@visualconnections.com)
 *
 * Depends:
 *   ui.core.js
 */
(function($) {
$.widget("ui.button", {

  version: "1.0.1",
  options: {
    showTextShadow : true
  },

  _create: function() {
    var self = this;
    
    this.element.addClass('ui-button');
    
    var scope = this.options.scope ? ' class="' + this.options.scope + '" ' : "";
    this.wrap = this.element.wrap('<span' + scope + ' style="cursor:pointer;display:inline-block;'
                    + ( $.browser.msie && $.browser.version < 7 ? 'width:10px;' : 'position:relative;' ) +
                    '"></span>').parent();
    var hoverParent = this.wrap;
    if($.browser.msie && $.browser.version < 7) {
      this.element.wrap('<div style="position:relative;"></div>');
      hoverParent = this.element.parent();
    }
    
    this.element.wrap('<div class="ui-button-left"><div class="ui-button-right"><div class="ui-button-middle"></div></div></div>');
    
    if(this.options.width)
      this.element.width(this.options.width);
    // set the content width
    var p = this.element.parent();
    p.width(this.element.outerWidth(false));
    
    // add an imaginary input to align th button to text
    $('<input type="text"/>').appendTo(p)
      .css('border', 'solid 1px transparent')
      .css('background', 'transparent')
      .css('width', '1px')
      .attr("autocomplete", "off")
      .attr("readonly", "readonly");
    
    // get the oute width of the button
    var width = this.wrap.outerWidth(false);
    
    this.element.css('position', 'absolute');
    this.element.css('left', '0px');
    this.element.css('top', '0px');
    this.element.css('zIndex', '100');
    this.element.width(width);
    
    // add the hover elements
    this.hoverBox = $('<div class="ui-button-left-hover" style="position:absolute;left:0px;top:0px;display:block;width:' + width + 'px;"><div class="ui-button-right-hover"><div class="ui-button-hover"></div></div></div>').prependTo(hoverParent);
    // add he hover animations
    this.hoverBox.css('opacity', 0);
    this.element.hover(function () {
      // on hover
      self.over.call(self.hoverBox);
      }, function () {
          // off hover
          self.out.call(self.hoverBox);
      });
    
    // add the shadow
    if(this.options.showTextShadow) {
      var left = this._num(this.element.css('left')) + 1;
      var top = this._num(this.element.css('top')) + 1;

      var shadow = $('<div class="ui-button-shadow" style="position:absolute;left:' + left +'px;top:' + top +'px;display:block;width:' + this.element.width() + 'px;"></div>').appendTo(p);
      
      var text = this.element.tagName() == 'A' ? this.element.html() : this.element.val();
      shadow.html(text);

      if( this.element.tagName() == 'INPUT') {
        if(!$.browser.msie)
          this.element.css('top',  '-1px');
        else if ($.browser.msie && $.browser.version <= 7) {
          this.element.css('left',  '-2px');
        }
      }
    }
  },
  _num : function (value) {
    return parseInt(value, 10) || 0;
  },
  destroy: function() {
    this.wrap.remove();
    this.hoverBox.remove();

    $.Widget.prototype.destroy.apply(this, arguments);

  },

  over: function () {
      // on hover
      this.stop().fadeTo(500, 1);
  }, 
  out: function () {
      // off hover
      this.stop().fadeTo(500, 0);
  }

});


$.fn.tagName = function() {
    return this.get(0).tagName;
}

})(jQuery);