var OvalButton = Class.create();

OvalButton.prototype =
{
  initialize: function(el, options)
  {
    this.el = $(el);

    this.options = $H({
      chromeBlendColor: "gray",  // Supports "gray", "white", "blue"
      onAction: Prototype.emptyFunction,
      eventName: null
    }).merge(options);

    var bgColor = this.options.chromeBlendColor;

    if (bgColor == "gray")
      bgColor = "#cdd2e1";
    else if (bgColor == "blue")
      bgColor = "#a6bcdf";
    else
      bgColor = "white";

    this.el.setStyle({backgroundColor: bgColor});

	  var caption;
	  var c = this.options.chromeBlendColor;
	  var startStr = '<table class="' + c + '"><tr class="default"><td class="left">&nbsp;</td><td class="middle"><span>';
	  var endStr = '</span></td><td class="right">&nbsp;</td></tr></table>';

    if (document.all)
      this.hideIeFocusRectangle(this.el);

    this.el.className = "ovalButtonDynamic";
    caption = this.el.cleanWhitespace().innerHTML;

		var accessKey = this.el.readAttribute("accessKey");
    //if (accessKey && accessKey.blank())

    this.el.update(startStr + caption + endStr);

    Event.observe(this.el, "mouseover", this.buttonOver.bind(this));
    Event.observe(this.el, "mouseout", this.buttonOut.bind(this));
    Event.observe(this.el, "mousedown", this.buttonDown.bind(this));
    Event.observe(this.el, "mouseup", this.buttonUp.bind(this));

    if (this.options.eventName || this.options.onAction)
    {
			Event.observe(this.el, "click", this.buttonClick.bind(this));
    }
  },
  setEventNameHiddenInput: function(eventName)
  {
		// If we're in a form, make sure the form hidden input exists.
		var formEl = this.el.up("form");
		var inputEl = null;

		if (formEl)
		{
			inputEl = formEl.getInputs("hidden", "_eventName");
			if (inputEl.length == 0)
			{
				new Insertion.Bottom(formEl, '<input type="hidden" value="" name="_eventName" />')
				inputEl = formEl.getInputs("hidden", "_eventName");

				if (inputEl.length == 1)
				  inputEl = inputEl[0];

				//TODO: what if the input wasn't inserted?  Then what.
			}
			else
			{
				inputEl = inputEl[0];
			}

			if (inputEl != null)
			  inputEl.value = eventName;
		}
  },
  buttonClick: function(evt)
  {
  	if (this.options.eventName)
  	  this.setEventNameHiddenInput(this.options.eventName);

  	if (this.options.onAction)
  	  this.options.onAction();
  },
  buttonOver: function(evt)
	{
	  Event.stop(evt);
	  var buttonEl = Event.findElement(evt, "button");
	  this.toggleButtonImages(buttonEl, "over");
	},
	buttonOut: function(evt)
	{
	  Event.stop(evt);
	  var buttonEl = Event.findElement(evt, "button");
	  this.toggleButtonImages(buttonEl, "default");
	},
	buttonDown: function(evt)
	{
	  Event.stop(evt);
	  var buttonEl = Event.findElement(evt, "button");
	  this.toggleButtonImages(buttonEl, "down");
	},
  buttonUp: function(evt)
	{
	  Event.stop(evt);
	  var buttonEl = Event.findElement(evt, "button");
	  this.toggleButtonImages(buttonEl, "over");
	},
  hideIeFocusRectangle: function (el)
	{
	  el.hideFocus = "true";
	},
	toggleButtonImages: function (buttonEl, state)
	{
	  var trEl = buttonEl.down("tr");
	  trEl.removeClassName(trEl.classNames().min()).addClassName(state);
	}
}