var __DEBUG__ = false; 

var config = {
	tours:{
		wrsp:{
			title:"White River State Park",
			times:[
				"10:00 AM",
				"12:00 PM",
				"2:00 PM",
				"4:00 PM"
			]
		},
		sber:{
			title:"South Bend — East Race",
			times:[]
		}
	}
};

var state = {
	current	: null,
	_list 	: new Array(),
	_steps	: new Array()
};
state.change = function( o, reverse ) {
	var d1={}, d2={};
	var width = 750;

	if( reverse === true ) {
		// moving right
		d1.start	= width*.5;
		d1.end 		= width*1.5;
	
		// moving left
		d2.start	= width*-.5;
		d2.end		= width*.5;
	} else {
		// moving left
		d1.start 	= width*.5;
		d1.end 		= width*-.5;
	
		// moving right
		d2.start 	= width*1.5;
		d2.end 		= width*.5;
	}

	try {
		var tw = new Tween( this.current.style, "left", Tween.regularEaseIn, d1.start, d1.end, .5, "px" ); 
		tw.start();
	} catch(e) {
		handle_exception( e );
	}

	try {
		this.current.onNotCurrent();
	} catch (e){}
	
	this.current = o;

	try {
		this.current.onIsCurrent();
	} catch (e){}

	try {
		var tw = new Tween( this.current.style, "left", Tween.strongEaseInOut, d2.start, d2.end, .5, "px" ); 
		tw.start();
	} catch(e) {
		handle_exception( e );
	}
}

//	This is working sort of, though you can
//	doubleclick on the "next" link and it
//	will skip a step and posibly some validation
//	This needs to be updated asap
state.next = function( validation ) {
	if( typeof validation != "function" ) validation = function(){ return false; }

	if( __DEBUG__ === true )  validation = function() { return true; }

	if( validation() ) {
		var i = this._list.length;
		while( i-- ) if( this.current == this._list[i] ) break; 
		if( i == this._length-1 ) return;
		this.change( this._list[i+1] );
		this.highlightStep( i+1 );
	} else {
		//alert( "Validation Failed" );
	}
}
state.back = function() {
	var i = this._list.length;
	while( i-- ) if( this.current == this._list[i] ) break; 
	if( i == 0 ) return;
	this.change( this._list[i-1], true );
	//this.highlightStep( i-1 );
}
state.highlightStep = function( index ) {
	var tween;
	var steps = this._steps;

	try {
		i=steps.length;
		try {
			tween = new ColorTween( steps[index].style, "color", Tween.strongEaseInOut, "EEEEEE", "B5384F", 1 );
			tween.start();
		} catch( e ) {}
		try {
			tween = new ColorTween( steps[index-1].style, "color", Tween.strongEaseInOut, "B5384F", "999999", 1 );
			tween.start();
		} catch( e ) {}
	
		for( var i=index+1; i<steps.length; i++ ) {
			try {
				steps[i].setStyle({"color":"#EEEEEE" });
			} catch( e ) {}
		}
	} catch( e ) {
		alert( "highlightStep: " + e );
	}
}

function selectTour( tour ) {
	$( "TourLocation" ).value = tour;
	state.next( validateForm1 );
}
function validateOK() { return true; }
function validateForm1() {
	try {
		var tour = $F( "TourLocation" );
		if( config.tours[tour] ) return true;
	} catch( e ) { alert( e ); return false; }
}
function validateForm3() {
	var valid = true;

	if( !$( "NameFirst" ).value ) {
		valid = false;
		$( "NameFirst" ).addClassName( "error" );
	} else {
		$( "NameFirst" ).removeClassName( "error" );
	}
	if( !$( "NameLast" ).value ) {
		valid = false;
		$( "NameLast" ).addClassName( "error" );
	} else {
		$( "NameLast" ).removeClassName( "error" );
	}

	phone = $( "Phone0" ).value + $( "Phone1" ).value + $( "Phone2" ).value;
	if( phone.length != 10 ) {
		valid = false;
		$( "Phone0" ).addClassName( "error" );
		$( "Phone1" ).addClassName( "error" );
		$( "Phone2" ).addClassName( "error" );
	} else {
		$( "Phone0" ).removeClassName( "error" );
		$( "Phone1" ).removeClassName( "error" );
		$( "Phone2" ).removeClassName( "error" );
	}

	if( !isValidEmail( $( "Email" ).value ) ) {
		valid = false;
		$( "Email" ).addClassName( "error" );
	} else {
		$( "Email" ).removeClassName( "error" );
	}
	
	if( !valid ) {
		alert( "There are some incomplete fields on this form." );
	}
	
	return valid;	
}
function validateForm6() {
	if( $( "TourTerms" ).checked ) {
		return true;
	}
	alert( "You must read and agree to the \nSegway of Indiana Tour Policies \nbefore you can continue." );
	return false;
}

//	This still needs some work, it still isn't elegant when
//	navigating by the keyboard.
//	I want to restrict character entry to only NUMERIC, 
//	with ALPHABET keys being ignored.
function checkFieldLength( element, length ) {
	element = $( element );
	if( element.value.length == length ) {
		var i=element.form.length;
		while( i-- ) {
			if( element.form[i] == element ) {
				element.form[i+1].focus();
			}
		}
	}
	return;
}
function isValidEmail( x ) {
	//var x = document.forms[0].email.value;
	var filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
	if ( filter.test(x) ) {
		return true; //alert('YES! Correct email address');
	} else {
		return false; // alert('NO! Incorrect email address');
	}
}
function handle_exception( e ) {
	//alert( e );
}
function initialize() {
	//	Initialize Form Containers, Called "States" here
	var i, c, s;
	var containers = document.getElementsByClassName( "FormContainer" );
	var steps = document.getElementsByClassName( "ProgressStep" );

	for( i=0; i<containers.length; i++ ) {
		c = $( containers[i] );
		s = $( steps[i] );
	
		try {
			s.setStyle( {"color":"#EEEEEE"} );
		} catch( e ) {}
	
		state._list.push( c );
		state._steps.push( s );
	
	}
	state.change( containers[0] );
	state.highlightStep( 0 );

	$( "FormContainer2" ).onIsCurrent = fillTourTimes;
	$( "FormContainer6" ).onIsCurrent = fillConfirmFields;
	$( "FormContainer7" ).onIsCurrent = submitForm;
}
function submitForm() {
	
	try { 
		var form = $( "TourReservationForm" );

		var request = {
			method:form.method || "post",
			parameters: form.serialize(),
			onSuccess:function( r ) {
				//alert( r.responseText );
				var o = eval( '(' + r.responseText + ')' );
				$( "ProcessResult" ).update( o.message );
				if( o.code == 0 ) {
					//alert( o.errors );
				}
				state.next( validateOK );
			},
			onFailure:function( r ) {
				alert( "There was an error submitting your reservation." );
			}
		};
		
		new Ajax.Request( form.action, request );
		
	} catch( e ) {
		alert( e ); 
	}
}
function fillTourTimes() {

	var tour = $F( "TourLocation" );
	var tourTimes = config.tours[tour].times;

	if( typeof tourTimes == "undefined" ) {
		e = new Exception( "fillTourTimes: No valid tour selected" );
		throw( e );
	} else {
		var timeSelect = $( "TourTime" );
		var i=timeSelect.options.length;
		var option;
		try { 
			while( i-- ) {
				timeSelect.remove( i );
			}
		} catch( e ) { alert( "Exception removing options:" +  e ); }
		try { 
			for( i=0; i<tourTimes.length; i++ ) {
				option = new Option( tourTimes[i], tourTimes[i] );
				timeSelect.add( option );
			}
		} catch( e ) { 
			for( i=0; i<tourTimes.length; i++ ) {
				option = new Option( tourTimes[i], tourTimes[i] );
				timeSelect.add( option, null );
			}
		}
	}
}

function fillConfirmFields() {
	
	//  Tour Selection
	$( "Confirm_tickets" ).update( $F( "TourTickets" ) );
	$( "Confirm_tour" ).update( config.tours[ $F( "TourLocation" ) ].title );
	$( "Confirm_date" ).update( $F( "TourDate" ) );
	$( "Confirm_time" ).update( $F( "TourTime" ) );

	//  Pricing 
	$( "Confirm_pricesub" ).update( $( "TourPrice_sub" ).innerHTML );
	$( "Confirm_pricetax" ).update( $( "TourPrice_tax" ).innerHTML );
	$( "Confirm_pricetotal" ).update( $( "TourPrice_total" ).innerHTML );

	// 	Contact 
	$( "Confirm_firstname" ).update( $F("NameFirst") );
	$( "Confirm_lastname" ).update( $F("NameLast") );
	$( "Confirm_email" ).update( $F("Email") );

	$( "Confirm_phone0" ).update( $F("Phone0") );
	$( "Confirm_phone1" ).update( $F("Phone1") );
	$( "Confirm_phone2" ).update( $F("Phone2") );
	$( "Confirm_phonetype" ).update( $F( "PhoneType" ) );

	
	if( $( "contactPreference_phone" ).checked ) {
		$( "Confirm_contactPrefPhone" ).show();
		$( "Confirm_contactPrefEmail" ).hide();
	} else if( $( "contactPreference_email" ).checked ) {
		$( "Confirm_contactPrefPhone" ).hide();
		$( "Confirm_contactPrefEmail" ).show();
	} else {
		$( "Confirm_contactPrefPhone" ).hide();
		$( "Confirm_contactPrefEmail" ).hide();
	}	
	
	//}
}