document.observe('dom:loaded', function() { 
  buttonReplacer.formatPage();
});

var ButtonReplacement = Class.create({
  initialize: function() {
    this.that = this;
  },

	formatPage: function() {
    // Replace all the submit buttons with a class of replace with a button tag
    $$('input[type="submit"].replace').each(function(button) {
      this.formatInput(button);
    }.bind(this));

    // Replace all links with a class of button
    $$('a.button').each(function(link) {
      this.formatLink(link)
    }.bind(this));
	},
	
	formatInput: function(id) {
    // <div class="button_wrapper">
    //   <div>
    //     <input type="submit" value="Checkout" name="commit"/>
    //   </div>
    // </div>
	  var button = $(id);
	  if (button.up('.button_wrapper') != undefined) return;
	  var classNames = $(id).removeClassName('replace').className;
    if (ie) {
      var hidden_ancestors = button.ancestors().select(function(e){return !e.visible();});
      // if the button is not displayed we have to display it before we can get the width.
      // this may be a bug in prototype
      if (hidden_ancestors.size() > 0 || !button.visible()) { hidden_ancestors.invoke('show'); }
      
      if (button.hasClassName("cart_button") || button.hasClassName("continue")) {
        var wrapper_width = button.getWidth() + 45;
      } else {
        var wrapper_width = button.getWidth() + 25;
      }
      
      if (hidden_ancestors.size() > 0 || !button.visible()) { hidden_ancestors.invoke('hide'); }
      
      var inner_div = new Element.wrap(button, 'div');
      var outer_div = new Element.wrap(inner_div, 'div',{ style: 'width:'+wrapper_width+'px;' });
      outer_div.addClassName('button_wrapper '+classNames);
    } else {
      var inner_div = button.wrap('div');
      inner_div.wrap('div', {
        className: 'button_wrapper '+classNames
      })                
    }
    
    // If the input has a class of single_click then restrict the button to one click only
    if (button.hasClassName('single_click')) {
      button.onclick = function() {
        this.onclick = function(event) {
          Event.stop(event);
        }
        return true;
      }
    }    
	},
	
	formatLink: function(id) {
    // <div class="button_wrapper">
    //   <div>
    //     <a class="button" href="#">Continue Shopping</a>
    //   </div>
    // </div>    
	  var button = $(id);
	  if (button.up('.button_wrapper') != undefined) return;
    if (ie) {
      var hidden_ancestors = button.ancestors().select(function(e){return !e.visible();});
      // if the button is not displayed we have to display it before we can get the width.
      // this may be a bug in prototype
      if (hidden_ancestors.size() > 0 || !button.visible()) { hidden_ancestors.invoke('show'); }
            
      var wrapper_width = button.getWidth() + 30;
      if (hidden_ancestors.size() > 0 || !button.visible()) { hidden_ancestors.invoke('hide'); }
      
      var inner_div = new Element.wrap(button, 'div');
      new Element.wrap(inner_div, 'div', { style: 'width:'+wrapper_width+'px' }).addClassName('button_wrapper');
    } else {
      var inner_div = button.wrap('div');
      inner_div.wrap('div', {
        className: 'button_wrapper'
      });                
    }
    button.removeClassName('button');	  
	}
});
var buttonReplacer = new ButtonReplacement();