/* 
  Sign up form

	AutoclearField and SignUp track the state of each field by 
	setting its class to edited, error, or no class.  No class
	indicates the default state when nothing is entered.  The 
	color of the text field in each state is determined by the CSS. 
*/

var AutoclearField = {
	setup: function(field, defaultText) {
		var field = $(field);
		field.value = defaultText;
		field.defaultText = defaultText;  
		field.observe('focus', AutoclearField.onFocus);
		field.observe('blur', AutoclearField.onBlur);
	},
	
	onFocus: function(event) {
		var field = event.element();
		if (field.className != 'edited') {
			field.className = 'edited';
			field.clear(); 
		}
	}, 
	
	onBlur: function(event) {
		var field = event.element();
		if (!field.present()) {
			field.className = ''; 
			field.value = field.defaultText; 
		}	
	}
};

var SignUp = {
	setup: function() {
		$('hoppingNewsForm').observe('submit', this.onSubmit);
		AutoclearField.setup('signupFirstName', 'First Name');
		AutoclearField.setup('signupLastName', 'Last Name');
		AutoclearField.setup('signupEmail', 'Email');
	}, 
	
	onSubmit: function(event) {
		event.stop();
		var hoppinForm = document.forms['hoppingNewsForm'];
		//var hoppinForm = document.hoppingNewsForm;
		//var hoppinForm = document.forms[2];
		//var hoppinForm = $('hoppingNewsForm');
		if (SignUp.validate()) {
			hoppinForm.submit();
			$('hoppinNewsHomeBd').innerHTML = '<p style="padding:15px; height:97px; color:#666666;">Thank you. <br />You will receive your first issue of our newsletter soon. <br/><br/><a href="/content/newsletters/newsletter_current.html" style="margin:0">View latest issue ></a></p>';
		}
	}, 
	
	validate: function() {
		var isValid = true; 
		
		if (SignUp.isEmpty('signupFirstName')) {
			$('signupFirstName').className = "error";
			$('signupFirstName').value = "Please Enter First Name";
			isValid = false; 
		} 
		
		if (SignUp.isEmpty('signupLastName')) {
			$('signupLastName').className = "error"; 
			$('signupLastName').value = "Please Enter Last Name";
			isValid = false; 
		}
		
		if (SignUp.isEmpty('signupEmail')) {
			$('signupEmail').className = "error"; 
			$('signupEmail').value = "Please Enter Email";
			isValid = false; 
		} else if (SignUp.isInvalidEmail('signupEmail')) {
			$('signupEmail').className = "error";			
			$('signupEmail').value = "Please Enter Valid Email";
			isValid = false; 
		}
		
		return isValid; 
	}, 
	
	isEmpty: function(field) {
		field = $(field);
		return field.className != 'edited' || !field.present(); 
	}, 
	
	isInvalidEmail: function(field) {
		field = $(field);
		var filter = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
		return !filter.test(field.value);
	}
}

/* Popup Menu */

d = document;

LEAPFROG = {};

LEAPFROG.selectFormCssStatus = false;
LEAPFROG.selectFormCss = function(selectID, divID){
	var optionValue = d.getElementById(selectID).getElementsByTagName('option');
	var _ul = d.getElementById(divID).getElementsByTagName('ul')[0];
	var _span = d.getElementById(divID).getElementsByTagName('span')[0];
	
	_span.onmouseout  = function(){LEAPFROG.selectFormCssStatus = false;}
	_span.onmouseover  = function(){LEAPFROG.selectFormCssStatus = true;}

	
	_span.innerHTML = optionValue[0].innerHTML;
	_span.onclick = function(){
		
		if(_ul.style.display == 'block'){
			_ul.style.display = 'none';
			this.parentNode.style.zIndex = '0';
		}else{
			// close open drop down, if any
			LEAPFROG.selectFormCssStatus = false;
			LEAPFROG.selectFormCssClose();
			
			LEAPFROG.selectFormCssStatus = true;
			LEAPFROG.selectFormCssStatusCombo = true;
			this.parentNode.style.zIndex = '100';
			_ul.style.display = 'block';	
		}
		
	}
	

	for(i=0; i < optionValue.length; i++){
			_li = d.createElement('li');
			_a = d.createElement('a');
			_a.innerHTML = optionValue[i].innerHTML;
			_a.className = optionValue[i].value;
			
			_a.onmouseout  = function(){LEAPFROG.selectFormCssStatus = false;}
			_a.onmouseover  = function(){LEAPFROG.selectFormCssStatus = true;}
			
			_a.href = "#";
			_li.appendChild(_a);
			_ul.appendChild(_li);
			_a.onclick = function(){
				d.getElementById(selectID).value = this.className;
				_span.innerHTML = this.innerHTML;
				_ul.style.display = 'none';
				this.parentNode.parentNode.parentNode.style.zIndex = '0';
				return false;
			}
	}
};

LEAPFROG.selectFormCssInit=function(){
	LEAPFROG.selectFormCss('browseBySelects', 'selectByInstructionalDiv');
	LEAPFROG.selectFormCss('browseByGrade', 'selectByGradeDiv');	
	LEAPFROG.selectFormCss('browseByPrice', 'selectByPriceDiv');	
};

LEAPFROG.selectFormCssClose=function(){
	if(LEAPFROG.selectFormCssStatus==false){
		var _ul = d.getElementsByTagName('ul');
		for(i=0; i<_ul.length; i++){
			if(_ul[i].className == 'selectCss'){
				_ul[i].parentNode.style.zIndex = '0';
				_ul[i].style.display = 'none';
			}	
		}
	}
}

LEAPFROG.shopSchoolProductsHome = function(){
	_form = d.getElementById('findProducts');
	_inputs = _form.getElementsByTagName('input');
	_inputsValues = new Array;
	for(i=0; i<_inputs.length; i++){
		if(_inputs[i].type=="image"){
			_inputs[i].onclick=function(){
					_inputsTemp = _form.getElementsByTagName('select');
					for(i=0; i<_inputsTemp.length; i++){
						_inputsValues[i] = _inputsTemp[i].value;
					}
				
				//alert('function: LEAPFROG.shopSchoolProductsHome \nForm values: ' + _inputsValues + '\nRemove "return false" to submit form' );
				//return false;
			}		
		}
	}
}


LEAPFROG.init = function(){
	LEAPFROG.selectFormCssInit();
	LEAPFROG.shopSchoolProductsHome();
};

window.document.onclick = function(){
	LEAPFROG.selectFormCssClose();
}

window.onload=function(){
	LEAPFROG.init();
	SignUp.setup(); 
};