/**
 * @author chasevida
 */

var g_FocusElementStyle = "2px solid #000000";
var g_UnFocusElementStyle = "2px solid #cbcbcb";
var g_FocusBackColor = "#ffc";
//var g_reEmail = /^[\w\.=-]+\@[\w\.-]+\.[a-z]{2,4}$/;
var g_reEmail = /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/;
var g_invalidFields = 0;
var styleReset = "#fff";
var styleValid = "#bfebd5";
var styleInValid = "#f5b5b5";


function initFormElements(sValidElems) {
    var inputElems = document.getElementsByTagName('textarea');
    for (var i = 0; i < inputElems.length; i++) {
        com_chasevida.EVENTS.addEventHandler(inputElems[i], 'focus', highlightFormElement, false);
        com_chasevida.EVENTS.addEventHandler(inputElems[i], 'blur', unHighlightFormElement, false);
        com_chasevida.EVENTS.addEventHandler(inputElems[i], 'focus', showSecurityDiv, false);
    }
    /* add the code for the input elements */
    inputElems = document.getElementsByTagName('input');
    for (var i = 0; i < inputElems.length; i++) {
        if (sValidElems.indexOf(inputElems[i].getAttribute('type')) != -1) {
        	com_chasevida.EVENTS.addEventHandler(inputElems[i], 'focus', highlightFormElement, false);
        	com_chasevida.EVENTS.addEventHandler(inputElems[i], 'blur', unHighlightFormElement, false);
        	com_chasevida.EVENTS.addEventHandler(inputElems[i], 'focus', showSecurityDiv, false);
        }
    }

    /* add the reset and submit handlers */
    com_chasevida.EVENTS.addEventHandler(document.getElementById('form1'), 'reset', function() {
    	
    	document.forms[0].firstName.style.backgroundColor = styleReset;
    	document.forms[0].lastName.style.backgroundColor = styleReset;
    	document.forms[0].address.style.backgroundColor = styleReset;
    	document.forms[0].security.style.backgroundColor = styleReset;
    }, false);
    com_chasevida.EVENTS.addEventHandler(document.getElementById('form1'), 'submit', validateAllFields, false);
    
    /* add the default focus handler */
    //document.getElementsByTagName('input')[0].focus();
    
    /* add the event handlers for validation */
    com_chasevida.EVENTS.addEventHandler(document.forms[0].nameFirst,'blur',validateFirstName,false);
    com_chasevida.EVENTS.addEventHandler(document.forms[0].nameLast,'blur',validateLastName,false);
    com_chasevida.EVENTS.addEventHandler(document.forms[0].email, 'blur', validateAddress, false);
    com_chasevida.EVENTS.addEventHandler(document.forms[0].security, 'blur', validateSecurity, false);
}


function getLabelByID(idStr) {
    var formLabels = document.getElementsByTagName('label');
    var attrName = window.event ? "htmlFor" : "for";
    for (var i = 0; i < formLabels.length; i++) {
        if (formLabels[i].getAttribute(attrName) == idStr)
            return formLabels[i];
    }
    return null;
}

function highlightFormElement(evt) {
    var elem = com_chasevida.EVENTS.getEventTarget(evt);
    if (elem != null) {
        //elem.style.border = g_FocusElementStyle;
        //elem.style.backgroundColor = g_FocusBackColor;
    }
}

function unHighlightFormElement(evt) {
    var elem = com_chasevida.EVENTS.getEventTarget(evt);
    if (elem != null) {
        //elem.style.border = g_UnFocusElementStyle;
        //elem.style.backgroundColor = "#FFC000";
    }
}

function showSecurityDiv() {
	
	var inputElems = document.getElementsByTagName('textarea');
    for (var i = 0; i < inputElems.length; i++) {
        com_chasevida.EVENTS.removeEventHandler(inputElems[i], 'focus', showSecurityDiv, false);
    }
    inputElems = document.getElementsByTagName('input');
    for (var i = 0; i < inputElems.length; i++) {
        com_chasevida.EVENTS.removeEventHandler(inputElems[i], 'focus', showSecurityDiv, false);
    }
    var securityDiv = document.getElementById('securityBox');
    if (securityDiv) {
    	var securityDiv = document.getElementById('securityBox');
    	var blind3 = new Spry.Effect.Blind('securityBox', {duration: 2000, from: '0px', to: '120px', toggle: true});
    	blind3.start();
    }
}

function validateFirstName() {
    var formField = document.getElementById('nameFirst');
    var ok = (formField.value != null && formField.value.length != 0);
    //var theLabel = getLabelByID("subject");
    var theLabel = document.forms[0].nameFirst;
    if (theLabel != null) {
        if (ok) {
            //theLabel.className = "validated";
        	theLabel.style.backgroundColor = styleValid;
        }
        else {
            //theLabel.className = "invalid";
        	theLabel.style.backgroundColor = styleInValid;
        }
    }
    
    return ok;
}

function validateLastName() {
    var formField = document.getElementById('nameLast');
    var ok = (formField.value != null && formField.value.length != 0);
    var theLabel = document.forms[0].nameLast;
    if (theLabel != null) {
        if (ok) {
            //theLabel.className = "validated";
        	theLabel.style.backgroundColor = styleValid;
        }
        else {
            //theLabel.className = "invalid";
        	theLabel.style.backgroundColor = styleInValid;
        }
    }
    
    return ok;
}

function validateSecurity() {
    var formField = document.getElementById('security');
    var ok = (formField.value != null && formField.value.length != 0);
    var theLabel = document.forms[0].security;
    if (theLabel != null) {
        if (ok) {
            //theLabel.className = "validated";
        	theLabel.style.backgroundColor = styleValid;
        }
        else {
            //theLabel.className = "invalid";
        	theLabel.style.backgroundColor = styleInValid;
        }
    }
    
    return ok;
}


function validateAddress() {
    var formField = document.getElementById('email');
    var ok = (formField.value.length != 0 && g_reEmail.test(formField.value));
    //var theLabel = getLabelByID('address');
    var theLabel = document.forms[0].email;
    if (theLabel != null) {
        if (ok) {
            //theLabel.className = "validated";
        	theLabel.style.backgroundColor = styleValid;
        }
        else {
            //theLabel.className = "invalid";
        	theLabel.style.backgroundColor = styleInValid;
        }
    }
    return ok;
}

function validateAllFields(e) {
	
    // need to do it this way to make sure all the functions execute
    var bOK = validateFirstName();
    bOK &= validateLastName();
    bOK &= validateAddress();
    bOK &= validateSecurity();
    
    
    if (!bOK) {
        com_chasevida.EVENTS.preventDefault(e);
    }
}

com_chasevida.EVENTS.addEventHandler(window, "load", function() { initFormElements('text'); }, false);