//  Simply Buttons, version 1.0
//  (c) 2007-2008 Kevin Miller
//
//  This script is freely distributable under the terms of an MIT-style license.
// 
/*-----------------------------------------------------------------------------------------------*/
// 
// * Adjusts the buttons so that they will not have an outline when they are pressed.
// * If the browser is mobile then we replace the buttons with inputs for compatibility.
// * Disables the text in the buttons from being selected.
// * The default styles here are meant for use with the Sliding Doors technique http://alistapart.com/articles/slidingdoors/
//     to be used for IE so we can have nice states with a horrid browser too!
// 
//
// TODO: Make this system not rely on a javascript framework.
//
/*-----------------------------------------------------------------------------------------------*/

var Buttons = Class.create({

  initialize: function(options) {
    this.options = Object.extend({
      hyperlinkSelector: 'a.button',
      activeButtonClass: 'button_active',
      states: {
        outer: {
          active: {
            backgroundPosition: 'bottom left'
          },
          inactive: {
            backgroundPosition: 'top left'
          }
        },
        inner: {
          active: {
            backgroundPosition: 'bottom right'
          },
          inactive: {
            backgroundPosition: 'top right'
          }
        }
      }
    }, options || {});
    this.process($$('button'));
    this.process($$(this.options.hyperlinkSelector));
  },

  process: function(elements) {
    elements.each(function(element) {
      if (element.tagName == 'BUTTON') {
        this.checkMobile(element);
      }
      this.disable(element.down('span span'));
      this.adjust(element);
    }.bind(this));
  },

  disable: function(element) {
    element.observe('selectstart', function() {return false;}, true);
    element.unselectable = 'on';
    element.setStyle({
      MozUserSelect: 'none',
      KhtmlUserSelect: 'none',
      UserSelect: 'none',
      cursor: 'pointer'
    });
  },

  checkMobile: function(element) {
    if (Prototype.Browser.MobileSafari) {
      element.parentNode.insertBefore(
        new Element('input', {
          type: element.getAttribute('type') == 'submit' ? 'submit' : 'button', 
          id: element.getAttribute('id'), 
          name: element.getAttribute('name'),
          value: element.getAttribute('value'),
          className: element.getAttribute('class')
        }).setStyle({
          marginLeft: element.getStyle('marginLeft'),
          marginRight: element.getStyle('marginLeft')
        }), 
        element.nextSibling
      );
      element.remove();
    }
  },
  
  adjust: function(element) {
    if (Prototype.Browser.IE) {
      element.observe(element.tagName == 'BUTTON' ? 'focus' : 'mousedown', this.toggle.bindAsEventListener(this, true), true);
      element.observe('mouseup', this.toggle.bindAsEventListener(this, false), true);
    } else {
      element.observe('focus', this.blur.bindAsEventListener(this), true);
    }
  },

  toggle: function(event, active) {
    var element = $(Event.element(event));
    var button = (element.tagName == 'BUTTON' ? element : element.up('a'));
    if (active) {
      button.addClassName(this.options.activeButtonClass);
      button.down('span').setStyle(this.options.states.inner.active);
      button.down('span span').setStyle(this.options.states.outer.active);
      button.blur();
    } else {
      button.removeClassName(this.options.activeButtonClass);
      button.down('span').setStyle(this.options.states.inner.inactive);
      button.down('span span').setStyle(this.options.states.outer.inactive);
    }
  },

  blur: function(event) {
    $(Event.element(event)).blur();
  }

});