/*
	USAGE:
	
			<script type="text/javascript" src="/js/validation.js"></script>
			<input name="name" type="text" id="name" />
			
			<script type="text/javascript">
				
				var loginObj 				= new Object;
				loginObj.errorStyles 		= new Object;
				loginObj.errorCssClassOff	= 'errorFieldOff';
				loginObj.useEffects			= true;
				loginObj.requiredFields 	= new Object;
				
				loginObj.requiredFields.name = "Name is Required.";
				
				loginObj.errorStyles.backgroundColor = "#f26423";
				loginObj.errorStyles.color = "#ffffff";
				
			
			TODO :: NEW WAY TO DO IT
				
				loginFormObj = {
					
					objInfo: {
						formName: "frmLogin"
					}
					
					errorStyles: {
						backgroundColor: "#f26423",
						color: "#ffffff",
						
					}
					
					requiredFields: {
						firstName: {
							errorMsg: "Name is Required",
							useEffect: true,
							displayInAlert: true,
							displayInField: true
						}	
					}
					
					numberFields: {
						phone: {
							errorMsg: "Phone is Required",
							useEffect: true,
							displayInAlert: true,
							displayInField: false,
							isRequired: true
						}
						fax: {
							errorMsg: "Fax is Required",
							useEffect: true,
							displayInAlert: true,
							displayInField: false,
							isRequired: false
						}
					}
					
					emailFields: {
						email: {
							errorMsg: "Email is Required",
							useEffect: true,
							displayInAlert: true,
							displayInField: true,
							isRequired: true
						}
					}
					
					matchFields: {
						password: {
							errorMsg: "Passwords must match.",
							useEffect: true,
							displayInAlert: true,
							displayInField: false,
							isRequired: true,
							matchField: passwordConfirm
						}
					}
					
					radioFields: {
						gender: {
							fields: { maleOption, femailOption }
							errorMsg: "You must pick a gender.",
							displayInAlert: true
						}
					}
					
					rangeFileds: {
						age: {
							errorMsg: "Age must be between 10 to 100.",
							useEffect: true,
							displayInAlert: true,
							displayInField: false,
							isRequired: true,
							minValue: 10,
							maxValue: 100
						}
						someLargeRange: {
							errorMsg: "Range must be between 100 to Infinity.",
							useEffect: true,
							displayInAlert: true,
							displayInField: false,
							isRequired: true,
							minValue: 100,
							maxValue: Infinity
						}
						someSmallRange: {
							errorMsg: "Range must be between -100 to -Infinity.",
							useEffect: true,
							displayInAlert: true,
							displayInField: false,
							isRequired: true,
							minValue: -Infinity,
							maxValue: -100
						}
					}
					
				}
							
				for(var obj in blah){
				 console.log( obj+'=>'+ blah[obj] );
				}
			
			</script>
	
	*/
	
	//var requiredFields 		= new Object;
	//var emailFields 		= new Object;
	//var numberFields 		= new Object;
	//var matchFields		= new Object;
	//var radioFields		= new Object;
	
	//var errorStyles 		= new Object; // add as many DOM styles as you want
	
	//var errorCssClassOff	= 'errorFieldOff';
		
	//var useEffects 			= true;
		
		
	function addErrorEffect( fld, errorMsg, obj ) {
		var fldObj = $(fld);
		
		// loop through and aply all error styles
		for (var style in obj.errorStyles) {
			fldObj.setStyle(style, obj.errorStyles[style] );
		}
		
		//fldObj.setStyle('background-color', errorBackgroundColor);
		//fldObj.setStyle('color', errorFontColor);
		
		fldObj.value = errorMsg;
		fldObj.title = "error";
		
		fldObj.addEvent('click', function(e){
			if (this.title=='error') {
				new Event(e).stop();
				this.value = '';
				this.title = '';
				var myMorph = new Fx.Morph(this.name, {wait: false, duration: 1000, transition: Fx.Transitions.Sine.easeInOut});
				myMorph.start(obj.errorCssClassOff);
			}
		});
		
		fldObj.addEvent('focus', function(e){
			if (this.title=='error') {
				new Event(e).stop();
				this.value = '';
				this.title = '';
				var myMorph = new Fx.Morph(this.name, {wait: false, duration: 1000, transition: Fx.Transitions.Sine.easeInOut});
				myMorph.start(obj.errorCssClassOff);
			}
		});
		
	}
	
	function validateForm( frmName, obj ) {
	
		var isError = false;
		var errorMsg = '_____________________________________\n\nThe following error(s) occured:\n_____________________________________     \n';
	
		// required validation
		for (var fld in obj.requiredFields) {
		  //alert(requiredFields[fld]);
		  if ( ! $(fld).value ) {
			isError = true;
			errorMsg += "\n" + obj.requiredFields[fld];
			if (obj.useEffects) {
				addErrorEffect( fld, obj.requiredFields[fld], obj );
			}
		  }		  
		}
		
		// email validation
		for (var fld in obj.emailFields) {
		  if ( ! $(fld).value ) {
			isError = true;
			if (obj.emailFields[fld]) errorMsg += "\n" + obj.emailFields[fld];
			if (obj.useEffects) {
				addErrorEffect( fld, obj.emailFields[fld], obj );
			}
		  } else if ( $(fld).value.indexOf('@') < 1 || $(fld).value.indexOf('.') < 1 ) {
			isError = true;
			if (obj.emailFields[fld]) errorMsg += "\n" + obj.emailFields[fld];
			if (obj.useEffects) {
				addErrorEffect( fld, obj.emailFields[fld], obj );
			}
		  }
		}
		
		// number validation
		for (var fld in obj.numberFields) {
		  if ( ! $(fld).value ) {
			isError = true;
			if (obj.numberFields[fld]) errorMsg += "\n" + obj.numberFields[fld];
			if (obj.useEffects) {
				addErrorEffect( fld, obj.numberFields[fld], obj );
			}
		  } else if ( isNaN($(fld).value) ) {
			isError = true;
			if (obj.numberFields[fld]) errorMsg += "\n" + obj.numberFields[fld];
			if (obj.useEffects) {
				addErrorEffect( fld, obj.numberFields[fld], obj );
			}
		  }
		}
		
		// matching fields
		for (var fld in obj.matchFields) {
			var matchData = obj.matchFields[fld];
			if ( ! $(matchData.fieldOneName).value || ! $(matchData.fieldTwoName).value ) {
				isError = true;
				errorMsg += "\n" + matchData.fieldError;
				if (obj.useEffects) {
					addErrorEffect( matchData.fieldOneName, matchData.fieldError, obj );
					addErrorEffect( matchData.fieldTwoName, matchData.fieldError, obj );
				}
			} else if ( $(matchData.fieldOneName).value != $(matchData.fieldTwoName).value ) {
				isError = true;
				errorMsg += "\n" + matchData.fieldError;
				if (obj.useEffects) {
					addErrorEffect( matchData.fieldOneName, matchData.fieldError, obj );
					addErrorEffect( matchData.fieldTwoName, matchData.fieldError, obj );
				}
			}
		}
		
		// radio fields
		for (var grp in obj.radioFields) {
			var radioGroup = obj.radioFields[grp];
			var anySelected = false;
			for (var fld in radioGroup) {
				if ( $(fld).checked ) anySelected = true;
			}
			if ( ! anySelected ) {
				isError = true;
				if (obj.useEffects) {
					addErrorEffect( grp, '', obj );					
				}
				/*
				for (var fld in radioGroup) {
					errorMsg += "\n" + radioGroup[fld];
					if (obj.useEffects) {
						addErrorEffect( fld, radioGroup[fld], obj );					
					}
				}
				*/
				
			}
		}
		
		// combo box fields
		for (var selectBox in obj.selectFields) {
			if ( $(selectBox).options[$(selectBox).selectedIndex].value == -1 ) {
				isError = true;
				errorMsg += "\n" + obj.selectFields[selectBox];
				if (obj.useEffects) {
					addErrorEffect( selectBox, '', obj );
				}
			}
		}
		
		// error handle
		if (isError) {
			// if ( ! obj.useEffects ) alert(errorMsg);
			alert(errorMsg);
		} else {
			//alert('ok to submit');
			$(frmName).submit();
		}
	
	}
	
	
	Fx.Morph = Fx.Styles.extend({
 
		start: function(className){
	 
			var to = {};
	 
			$each(document.styleSheets, function(style){
				var rules = style.rules || style.cssRules;
				$each(rules, function(rule){
					if (!rule.selectorText.test('\.' + className + '$')) return;
					Fx.CSS.Styles.each(function(style){
						if (!rule.style || !rule.style[style]) return;
						var ruleStyle = rule.style[style];
						to[style] = (style.test(/color/i) && ruleStyle.test(/^rgb/)) ? ruleStyle.rgbToHex() : ruleStyle;
					});
				});
			});
			return this.parent(to);
		}
	 
	});
 
	Fx.CSS.Styles = ["backgroundColor", "color"];