/** Custom validation type to do password verification. */
Validation.add('password-verify', 'Your passwords do not match', {
     equalToField : 'password' // value is equal to the form element with this ID
});

/** Custom validation type to ensure that blank and   are also required */
Validation.add('required2', 'This is a required field', {
     isNot : '&nbsp',
     isNot : ''
});

var StyledForm = Class.create();

StyledForm.prototype =
{
  initialize: function(el, options)
  {
    this.el = $(el);
    this.validObj = null;

    this.options = $H({
      formError: null,
      onSubmitSuccess: Prototype.emptyFunction,
      chromeBlendColor: "gray",  // Supports "gray" and "white"
      ajax: false
    }).merge(options);

	// The validation script we're using has been modified to use this
	// so that the error icon uses the right bg color.
	this.el.setAttribute("chromeBlendColor", this.options.chromeBlendColor);

    this.options.ajax = MeincUtil.getBool(this.options.ajax, false);

    this.el.setAttribute("chromeBlendColor", this.options.chromeBlendColor);

    if (this.options.formError)
    {
      this.options.formError = $(this.options.formError);
      this.options.formError.toggleClassName("formError");
      this.options.formError.toggle();
    }

    this.initValidation();

    //this.el.focusFirstElement();
    formEls = this.el.getElementsBySelector('textarea', 'input["type=text"]', 'input["type=password"]');

    var i, count = formEls.length;

    for (i = 0; i < count; i++)
    {
      inputEl = formEls[i];
      Event.observe(inputEl, "focus", function(evt)
                                      {
                                        var el = Event.element(evt);
                                        el.setAttribute("focusedEl", true);
                                        el.select();
                                        el.setStyle({borderStyle: "dotted",backgroundColor: "white"});
                                      }
      );

      Event.observe(inputEl, "blur", function(evt)
                                      {
                                        var el = Event.element(evt);
                                        el.setAttribute("focusedEl", null);
                                        el.setStyle({borderStyle: "solid"});
                                      }
      );

      Event.observe(inputEl, "mouseover", function(evt)
                                          {
                                            var el = Event.element(evt);

                                            if (!el.readAttribute("focusedEl"))
                                              el.setStyle({backgroundColor: "#ece4fa"}); //e4daf8
                                          }
      );

      Event.observe(inputEl, "mouseout", function(evt)
                                         {
                                           var el = Event.element(evt);
                                           el.setStyle({backgroundColor: "white"});
                                         }
      );
    }
  },
  reset: function()
  {
    this.el.reset();

    if (this.options.formError)
      this.options.formError.hide();
    if (this.validObj)
      this.validObj.reset();
  },
  initValidation: function()
  {
	  var formId = this.el.readAttribute("id");
	  var formStr = this.el.innerHTML;
	  var splitEls = formStr.split("<" + "!" + "-" + "-@");
	  var str, i, count = splitEls.length;
	  var splitValidAttrs, validAttr;

	  if (count > 0)
	  {
	    this.validObj = new Validation(formId, {immediate:true, onSubmit:false});
	    Event.observe(this.el, "submit", this.formSubmitted.bind(this), false);
	  }

	  for (i = 0; i < count; i++)
	  {
	    str = splitEls[i];
	    idx = str.indexOf("-" + "-" + ">")
	    if (idx > -1)
	    {
	      splitValidAttrs = str.substring(0, idx);
	      if (!splitValidAttrs)
	        continue;

	      splitValidAttrs = splitValidAttrs.strip().split(" ");
	      if (splitValidAttrs.length > 0)
	      {
	        validAttr = splitValidAttrs[0].toLowerCase();
	        if ((validAttr == "validate") && (splitValidAttrs.length > 1))
	        {
	          validAttr = splitValidAttrs[1].toLowerCase();
	          if (validAttr == "required")
	            this.initRequiredEl(str);
	        }
	        else if (validAttr == "reset")
	        {
	          //initSubmitEl(str);
	        }
	      }
	    }
	  }
	},
	submit: function()
	{
	  this.formSubmitted(null);
	},
	formSubmitted: function (evt)
	{
	  var formId = this.el.readAttribute("id");

	  if (this.validObj)
	  {
	    if (this.validObj.validate())
	    {
	    	if (this.options.ajax)
	    	{
		      if (this.options.formError)
		       this.options.formError.hide();

	        this.el.request({onSuccess: this.onSubmitSuccess.bind(this)})

	        if (evt)
		      Event.stop(evt);
	    	}
	    	else
	    	{
	    		this.el.submit();
	    	}
	    }
	    else
	    {
	      if (evt)
	    	Event.stop(evt);

	      if (this.options.formError)
	      {
	        var str = '<span class="' + this.options.chromeBlendColor + '">&nbsp;&nbsp;</span>';
	        this.options.formError.update('Please correct each ' + str + 'marked field.').show();
	      }
	    }
	  }
	},
	onSubmitSuccess: function(transport)
	{
    var json = null;

		try
		{
		  json = eval("(" + transport.responseText + ")");
		}
		catch(errMsg)
		{
		  if (this.options.formError)
		    this.options.formError.update("An unexpected error has occurred.  Please try back later.").show();

		  return;
		}

		if (json.success)
		{
		  this.options.onSubmitSuccess(json);
		}
		else if (json.redirectToUrl)
		{
		  if (json.type == "LOGIN")
		    alert("It's been too long since your last operation.  Please login again before continuing.");

      window.location = json.redirectToUrl;
      return;
		}
		else if (json.message)
		{
		  if (json.type == "VALIDATION")
		  {
		    if (this.options.formError)
		    {
		      this.options.formError.update(json.message).show();
		    }
		  }
		  else if (json.type == "UNRECOVERABLE")
		  {
		    if (this.options.formError)
		      this.options.formError.update(json.message).show();
		  }
		  else if (json.type == "DEFAULT")
		  {
		    //TODO:
		  }
		}
		else if (json.execFunc)
		{
		  json.execFunc();
		}
	},
  initRequiredEl: function (str)
	{
	  var reg = /\bid="?([a-zA-Z0-9_]+)/;
	  var ar = reg.exec(str);
	  var elId = RegExp.$1;
	  var labelEl = $$('label[for="' + elId + '"]');
	  if (labelEl.length == 1)
	  {
	    caption = labelEl[0].cleanWhitespace().innerHTML;
	    labelEl[0].update('<span class="required">*</span>' + caption);
	  }
	}

}



/*
function redirectBrowser(url)
{
  window.location = url;
}

function initSubmitEl(formEl, str)
{
  var reg = /\bid="?([a-zA-Z0-9_]+)/;
  var ar = reg.exec(str);
  var elId = RegExp.$1;
  var submitEl = $$(elId);
  if (submitEl.length == 1)
  {

    caption = submitEl[0].cleanWhitespace().innerHTML;
    labelEl[0].update('<span class="required">*</span>' + caption);
  }
}

function initResetEl(formEl)
{
  if (validObj == null)
    return;

  var RESET_STR = "<" + "!-" + "-@Reset-" +  "->";
  var elId, elStr = formEl.innerHTML;
  var idx = elStr.indexOf(RESET_STR);
  var el, ar, reg = /\bid="?([a-zA-Z0-9_]+)/;
  if (idx > -1)
  {
    elStr = elStr.substring(idx + RESET_STR.length);
    ar = reg.exec(elStr);
    elId = RegExp.$1;
    Event.observe($(elId), "click", function(evt)
                                    {
                                      var formErr = $("formError");
                                      if (formErr)
                                        formErr.hide();

                                      validObj.reset();
                                    }
    );
  }
}
*/