﻿// JavaScript File
// requires webservices.js
// requires mootools.js

window.addEvent('domready', function(){
    // loop though all forms on the page      
    var forms = $$('div').filterByClass('uniForm');

    for ( var i = 0; i < forms.length; i++ ){

        // set on click action on all labels to point to it's input field
        var formLabels = $ES('label',forms.id);
        for ( var l = 0; l < formLabels.length; l++ ){
            formLabels[l].set({
                'events': {
                    'click': function(){
                        var children = this.getParent().getChildren();
                        var done = false;
                        
                        // see if atleast 1 subling element is a text box or password
                        for ( var c = 0; c < children.length; c++ ){
                            if (children[c].type == "text" || children[c].type == "password" || children[c].getTag() == 'select' || children[c].getTag() == 'textarea') {
                                children[c].focus();                            
                                return;
                            } else if (children[c].type == "hidden") {
                                richDropDownToggle(forms.id, children[c].name);
                            }
                        }

                        // Get This Items' children
                        var children = this.getChildren();
                        for ( var c = 0; c < children.length; c++ ){
                            
                            if (children[c].type == "radio") {
                                this.getParent().removeClass('error');
                                this.getParent().addClass('focused');
                                children[c].focus();
                                children[c].checked = true;
                                return;
                            }  else {
                                //alert('Label Click');
                                this.getParent().removeClass('error');
                                this.getParent().addClass('focused');
                                children[c].focus();
                                if (children[c].checked){
                                   children[c].checked = false;
                                } else {
                                    children[c].checked = true;
                                }
                                return;  
                            }
                        } // end child item loop                                               
                    } // end click function
                } // end events
            }); // end label set
        } // end labels for loop
        
        // set on click action on all labels to point to it's input field
        var formInput = $ES('input',forms.id);
        for ( var l = 0; l < formInput.length; l++ ){
            if (formInput[l].type == 'radio') {
                formInput[l].set({ // actions for radio buttons
                    'events': {
                        'click': function(){
                            this.getParent().getParent().removeClass('error');     // remove the error class if there was an error and field edited                    
                            this.getParent().getParent().addClass('focused');
                        }, // end focus function
                        'blur': function(){
                            this.getParent().getParent().removeClass('focused');
                        } // end blur function                     
                    } // end events
                }); // end input set            
            } else if (formInput[l].type == 'checkbox') {
                formInput[l].set({
                    'events': {
                        'click': function(){
                            //alert('Checkbox Focus');
                            this.getParent().getParent().removeClass('error');      // remove the error class if there was an error and field edited                           
                            this.getParent().getParent().addClass('focused');
                            if (this.checked){
                                this.checked = false;
                            } else {
                                this.checked = true;
                            }  
                        }, // end focus function
                        'blur': function(){
                            //alert('Checkbox On Blur');
                            this.getParent().getParent().removeClass('focused');
                        } // end blur function                     
                    } // end events
                }); // end input set            
            } else { // actions for text and passwords
                formInput[l].set({
                    'events': {
                        'focus': function(){
                            this.getParent().removeClass('error');      // remove the error class if there was an error and field edited                           
                            this.getParent().addClass('focused');
                        }, // end focus function
                        'blur': function(){
                            this.getParent().removeClass('focused');
                        } // end blur function                     
                    } // end events
                }); // end input set  
            }                  
        } // end input for loop

        formElements = $ES('textarea',forms.id);
        for (var x = 0; x < formElements.length; x++){
            formElements[x].set({
                'events': {
                    'focus': function(){
                        this.getParent().removeClass('error');      // remove the error class if there was an error and field edited                           
                        this.getParent().addClass('focused');
                    }, // end focus function
                    'blur': function(){
                        this.getParent().removeClass('focused');
                    } // end blur function                     
                } // end events            
            });            
        }
        
        formElements = $ES('select',forms.id)
        for (var x = 0; x < formElements.length; x++){
            formElements[x].set({
                'events': {
                    'focus': function(){
                        this.getParent().removeClass('error');      // remove the error class if there was an error and field edited                           
                        this.getParent().addClass('focused');
                    }, // end focus function
                    'blur': function(){
                        this.getParent().removeClass('focused');
                    } // end blur function                     
                } // end events            
            });
        }
    } // end form for loop
}); // end add event function

function ajaxWebFormSubmit(webServiceURL, webServiceFunction, formName, onSuccess /* container object id */){      
    applyLoadingOverlay(formName);
    var params = new Hash();
    
    var formElements = $ES('input',formName);
    for (var x = 0; x < formElements.length; x++){
        if (formElements[x].type == "text" || formElements[x].type == "password" || formElements[x].type == "hidden"){
            params.set(formElements[x].name, formElements[x].value);
            formElements[x].getParent().removeClass('error');
        }else if (formElements[x].type == "radio") {
            if (formElements[x].checked){
                params.set(formElements[x].name, formElements[x].value);
            }
            formElements[x].getParent().getParent().removeClass('error');
        }else{
           // checkbox
           params.set(formElements[x].name, formElements[x].checked);
           formElements[x].getParent().getParent().removeClass('error');
        }              
    }
    
    formElements = $ES('textarea',formName);
    for (var x = 0; x < formElements.length; x++){
        params.set(formElements[x].name, formElements[x].value);
        formElements[x].getParent().removeClass('error');
    }
    
    formElements = $ES('select',formName)
    for (var x = 0; x < formElements.length; x++){
        params.set(formElements[x].name, formElements[x].options[formElements[x].selectedIndex].value);
        formElements[x].getParent().removeClass('error');
    }   
    
    params.set('FormName', formName);
    params.set('OnSuccess', onSuccess);

    callWebService(webServiceURL, webServiceFunction, 'ajaxWebFormResponse', params)
}

function ajaxWebFormResponse(ajaxResponse){
    removeLoadingOverlay(ajaxResponse.formName);
        
    if (ajaxResponse.commands != null){
        if (ajaxResponse.commands.length > 0){
            var ContainsError = false;
            for (var x = 0; x < ajaxResponse.commands.length; x++){
                if (ajaxResponse.commands[x].command == 'FieldChange'){
                    // change values
                    adjustFormField(ajaxResponse.formName, ajaxResponse.commands[x].fieldName, ajaxResponse.commands[x].newValue, false);
                }else if (ajaxResponse.commands[x].command == 'PushError'){
                    // set error style
                    // change values
                    ContainsError = true;
                    adjustFormField(ajaxResponse.formName, ajaxResponse.commands[x].fieldName, ajaxResponse.commands[x].newValue, true);
                }
            }
            if (ContainsError){
                $(ajaxResponse.formName).getElements('div')[0].setStyle('display', 'block');
                $(ajaxResponse.formName).getElements('div')[0].setHTML(ajaxResponse.errorSummary);                
            } else {
                $(ajaxResponse.formName).getElements('div')[0].setStyle('display', 'none');
                $(ajaxResponse.formName).getElements('div')[0].setHTML('');                
            }
        } else {
            $(ajaxResponse.formName).getElements('div')[0].setStyle('display', 'none');
            $(ajaxResponse.formName).getElements('div')[0].setHTML('');
        }
    }    
        
    // Flash Loading Done
    var fx = new Fx.Style($(ajaxResponse.formName), 'background-color', {
	    duration: 800,
		transition: Fx.Transitions.Quad.easeOut
	});
	
	var originalBackground = $(ajaxResponse.formName).getStyle('background-color');
	fx.addEvent('onComplete', function(){$(ajaxResponse.formName).setStyle('background-color', originalBackground);})
    fx.start('#fb9393', 'f8f8f8');   
    if (ajaxResponse.FormValid) eval(ajaxResponse.onSuccess)
}

function hideFormField(formname, field){
    var formElements = $(formname).getElement('[name=' + field + ']');   
    if (formElements.getParent().getTag() == 'div'){
        formElements.getParent().setStyle('display', 'none')    
    }else if (formElements.getParent().getParent().getTag() == 'div'){
        formElements.getParent().getParent().setStyle('display', 'none')   
    }else if (formElements.getParent().getParent().getParent().getTag() == 'div'){
        formElements.getParent().getParent().getParent().setStyle('display', 'none')
    }
}

function showFormField(formname, field){
    var formElements = $(formname).getElement('[name=' + field + ']');   
    if (formElements.getParent().getTag() == 'div'){
        formElements.getParent().setStyle('display', 'block')    
    }else if (formElements.getParent().getParent().getTag() == 'div'){
        formElements.getParent().getParent().setStyle('display', 'block')   
    }else if (formElements.getParent().getParent().getParent().getTag() == 'div'){
        formElements.getParent().getParent().getParent().setStyle('display', 'block')
    }
}

function focusFormField(formname, field){
    var formElement = $(formname).getElement('[name=' + field + ']');
    if (formElement.type == "text" || formElement.type == "password" || formElement.getTag() == 'select' || formElement.getTag() == 'textarea'){
        formElement.focus();
    }else if (formElement.type == "hidden"){
        richDropDownToggle(formname, field);
    }else if (formElement.getTag() == 'input' && formElement.type == 'checkbox'){
        formElement.getParent().getParent().removeClass('error');
        formElement.getParent().getParent().addClass('focused');
        formElement.focus();
    }else if (formElement.getTag() == 'input' && formElement.type == 'radio'){
        formElement.getParent().getParent().removeClass('error');
        formElement.getParent().getParent().addClass('focused');
        formElement.focus();
    }    
}

function getFormFieldValue(formName, control){
    var formElements = $(formName).getElements("[name=" + control + "]");
    if (formElements.length == 1)
        return formElements[0].value;
}

function adjustFormField(formName, field, value, IsError){
    var formElements = $ES('input',formName);
    for (var x = 0; x < formElements.length; x++){
        var ClassSet = false;
        if (formElements[x].name == field){
            if (formElements[x].type == "text" || formElements[x].type == "password" || formElements[x].type == "hidden"){
                // text box
                if (IsError) formElements[x].getParent().addClass('error');
                if (formElements[x].type == "hidden"){
                    if (value != null) {
                        formElements[x].value = value.split("|")[0];
                  		$$("a", formName).filterByAttribute("name", "=", field + 'SelectedText')[0].setHTML(value.split("|")[1]);
                    }
                }else {
                    if (value != null) formElements[x].value = value;
                }
                return            
            } else {
                if (ClassSet == false){
                    ClassSet = true;
                    if (IsError) formElements[x].getParent().getParent().addClass('error');
                    if (value == null) {
                        return
                    } else {
                        if (formElements[x].type == "radio"){
                            if (formElements[x].value == value){
                                formElements[x].checked = true;
                            }else{
                                formElements[x].checked = false;
                            }                       
                        } else {
                            // checkbox
                            if (value == "true"){
                                formElements[x].checked = true;
                            }else{
                                formElements[x].checked = false;
                            }
                            
                        }
                    }
                }
            }
        }
    }
    
    formElements = $ES('textarea',formName);
    for (var x = 0; x < formElements.length; x++){
        if (formElements[x].name == field) {
            if (IsError) formElements[x].getParent().addClass('error');
            if (value != null) formElements[x].value = value;
        }
    }
    
    formElements = $ES('select',formName)
    for (var x = 0; x < formElements.length; x++){
        if (formElements[x].name == field) {
            if (IsError) formElements[x].getParent().addClass('error');
            if (value != null){
                for (var opt = 0; opt < formElements[x].options.length; opt++) {
                    if (formElements[x].options[opt].value == value) {
                        formElements[x].selectedIndex = opt;
                        return;
                    }                
                }
            }
        }
    }   
}

function applyLoadingOverlay(targetObject){       
    new Element('div', {
    'styles': {
        'width': $(targetObject).getSize().size.x + 'px',
        'height': $(targetObject).getSize().size.y + 'px'
    },
    'class': 'transparent'
    }).setHTML('<img src="http://static.usedgolfballs.com/images/icons/ajax-loader.gif" style="margin-top:' + (($(targetObject).getSize().size.y / 2) - 14) + 'px;">').injectTop($(targetObject));   
}

function applyDisableOverlay(targetObject){       
    new Element('div', {
    'styles': {
        'width': $(targetObject).getSize().size.x + 'px',
        'height': $(targetObject).getSize().size.y + 'px'
    },
    'class': 'transparent'
    }).injectTop($(targetObject));   
}

function removeLoadingOverlay(targetObject){
    var divs = $ES('div',targetObject).filterByClass('transparent');
    for ( var l = 0; l < divs.length; l++ ){       
        divs[l].remove();
    }        
}

function clearForm(formName){
    var formElements = $ES('input',formName);
    for (var x = 0; x < formElements.length; x++){
        if (formElements[x].type == "text" || formElements[x].type == "password"){
            adjustFormField(formName, formElements[x].name, '', false);
        }else if (formElements[x].type == "checkbox"){
            adjustFormField(formName, formElements[x].name, false, false);              
        }else if (formElements[x].type == "radio"){
            adjustFormField(formName, formElements[x].name, null, false);    
            formElements[x].checked = false;          
        }
    }
    
    formElements = $ES('textarea',formName);
    for (var x = 0; x < formElements.length; x++){       
        adjustFormField(formName, formElements[x].name, '', false);              
    }    
    
    formElements = $ES('select',formName);
    for (var x = 0; x < formElements.length; x++){       
        adjustFormField(formName, formElements[x].name, formElements[x].options[0].value, false);              
    }    

}

function richDropDownSelect(form, control, value, displayValue){
		richDropDownToggle(form, control);		
		$$("input", form).filterByAttribute("name", "=", control)[0].value = value;
		$$("a", form).filterByAttribute("name", "=", control + 'SelectedText')[0].setHTML(displayValue);
}
	
function richDropDownToggle(form, control){
        var list = $ES("ul", form).filterByAttribute("name", "=", control + 'ItemList')[0];		
		if (list.getStyle('display') == 'block') {
		    // HIDE DROP DOWN
			list.setStyle('display', 'none');
			list.getParent().getParent().removeClass('error');
			list.getParent().getParent().removeClass('focused');			      
		} else {
		    // SHOW DROP DOWN
			list.setStyle('display', 'block');
			list.getParent().getParent().removeClass('error');
			list.getParent().getParent().addClass('focused');			
		}
}

function richDropDownClearAllOptions(form, control){
    var list = $ES("ul", form).filterByAttribute("name", "=", control + 'ItemList')[0].getChildren();
    
    for (var x = 0; x < list.length; x++)
        list[x].remove();   
}

function richDropDownAddOption(form, control, html){
    var newli = new Element('li');
    newli.setHTML(html);
    newli.injectInside($ES("ul", form).filterByAttribute("name", "=", control + 'ItemList')[0]);
}

function getControlHolder(con){
    con = con.getParent();
    if (con.hasClass('ctrlHolder')) {
        return con;
    } else {
        return getControlHolder(con);
    }
}

function textBoxKeyPress(me, input){
    if (input.keyCode == 13) nextField(me);
}

function nextField(me){
    var ctl = getControlHolder(me);
    var next = null;
    
    var lastCtl = true;
    while (ctl.getNext()) {
        if (ctl.getNext().hasClass('ctrlHolder') && lastCtl){
            lastCtl = false;
            next = ctl.getNext();
        }
        ctl = ctl.getNext()        
    }
        
    if (lastCtl) {
        getControlHolder(me).removeClass('focused');
        eval(ctl.getParent().getParent().getProperty('onSubmit'));
    } else {
    
        focusFormField(next.getParent().getParent().getProperty('id'), next.getChildren().filterByTag('label')[0].getProperty('for'));        
    }
}

