/* Functions can be placed outside of the  'domready' event */

/* Accordion Begin */

//look for the functions within the external javascript file

window.addEvent('domready', function() {
// Send the toggle and content arrays to vars.
// This is done to initialize the elements to function as toggles.
// The actual triggering functions of these toggles do not work.
// The user must get to the next toggle by filling in information 
// within the current toggle.
var toggles = $$('.togglers');
var content = $$('.elements');

// Declare the Morph Elements
var morphStepOne = $('stepOne');
var morphStepTwo = $('stepTwo');
var morphStepThree = $('stepThree');

// Declare var's as a Function to Morph the Headings of the Accordion
var morphObjectStepOne = new Fx.Morph(morphStepOne);
var morphObjectStepTwo = new Fx.Morph(morphStepTwo);
var morphObjectStepThree = new Fx.Morph(morphStepThree);

// Declare a CHAIN function to Tween the image out of view and show the Form
var formTween = new Fx.Tween($('middle_left_image'));

var indexPage = 206;



// Test if index.php page	
var urlPath = String(window.location.pathname).split("/");
if((urlPath[urlPath.length-1]!="")&&(urlPath[urlPath.length-1]!="index.php")&&(urlPath[urlPath.length-1]!="form.php")){
	$('upper_left').addEvent('click', function(){
		$('middle_left').setStyle('opacity', '1');
		formTween.start(
			'opacity',0
		)
	});
	indexPage= 228;
}


/* Test if the current page is the form_submit.php page.  If so, set the Opacity for the form elements. */
var urlPath = String(window.location.pathname).split("/");

/* Set Opacity levels for the second form pages */
if(urlPath[urlPath.length-1]=="form_submit_residential.php"){
	new Fx.Tween($('formSubmitInfo')).set('opacity', 0.35);
	new Fx.Tween($('noTransparency')).set('opacity', 1);
}

if(urlPath[urlPath.length-1]=="form_submit_business.php"){
	new Fx.Tween($('formSubmitInfo')).set('opacity', 0.35);
	new Fx.Tween($('noTransparency')).set('opacity', 1);
}

var urlPath = String(window.location.href);
var paramName = "&inputSrvLocation=";
var paramValue = null;

if(urlPath.indexOf(paramName) > 0){
	paramValue = urlPath.substring(urlPath.indexOf(paramName) + paramName.length).split("&");
	if((paramValue[0]) == "Residential")
	{
		$('formSubmitInfo').setStyle('height', '370px');
	}
}


// Declare toggle1 as a Function to allow/disallow clicking of Toggle1
var toggle1 = function(){
		// The next line changes the default text of Toggle 1 when Toggle 1 is 'click'ed 
		/* $('stepOne').innerHTML = 'Getting Started'; // This changes the text after you click the trigger. */
		morphObjectStepOne.start ({
			'color': '#96d0fa',
			'background-color': '#356b96'
		})
		morphObjectStepTwo.start ({
			'color': '#96d0fa',
			'background-color': '#96d0fa'
		})
		morphObjectStepThree.start ({
			'color': '#96d0fa',
			'background-color': '#96d0fa'
		})		
		
	//Will fade the Element out and in twice.
		/*$('testing').fade('.25');  */
		/*($('testing').tween('z-index','-1')).delay(1000);  */
		
		// Below the Fx.tween method allows me to change ONE property of the element		
		/*$('stepOne').tween('background-color','#96d0fa');  */
		// In this case the trigger is clicking the house image.
		// Remove the 'click' event from Toggle 2 that displays Toggle 2 when clicked.
		// This is done specifically for this application as I do not want you to see
		// the contents of Toggle 2 until some event (clicking the button in Toggle 1, in this case) occurs
		$('stepTwo').removeEvent('click',toggle2);
		// Display Toggle 1.  Note that the index is '0' because arrays are 'zero' based.
		AccordionObject.display(0);
		
	}

// Declare toggle2 as a Function to allow/disallow clicking of Toggle2
var toggle2 =  function(){
		morphObjectStepOne.start ({
			'color': '#96d0fa',  
			'background-color': '#96d0fa'  
		})
		morphObjectStepTwo.start ({
			'color': '#96d0fa', 
			'background-color': '#356b96'    
		})
		morphObjectStepThree.start ({
			'color': '#96d0fa',  
			'background-color': '#96d0fa'
		})
		AccordionObject.display(1);  
		} 
		
// Initialize the values of the Morph Objects
morphObjectStepOne.set({
	'color': '#96d0fa',
	'background-color': '#356b96'
});

morphObjectStepTwo.set({
	'color': '#96d0fa',
	'background-color': '#96d0fa'
});

morphObjectStepThree.set({
	'color': '#96d0fa',
	'background-color': '#96d0fa'
});
 
//create a "new" Accordion object var
var AccordionObject = new Accordion(toggles, content,{
		fixedHeight: indexPage	
});

				/* This is the Toggle 1 Heading */
		// Add an event to Toggle1 that when clicked, reopens Toggle 1
		$('stepOne').addEvent('click', toggle1);

				/* This is the House */
		// Add an event to Toggle 1 that opens Toggle 2 		
		$('img_residential').addEvent('click', function(){
		// Change the default text for Toggle 1 to show you have clicked the button inside of it.
		/* $('stepOne').innerHTML = 'Getting Started'; */
		$('inputSelectedSrvLocation').value = 'Residential';
		$('form_service').set('action', 'form_submit_residential.php');
		morphObjectStepOne.start ({
			/*'color': '#356b96',  */
			'background-color': '#96d0fa'  
		})
		morphObjectStepTwo.start ({
			'color': '#96d0fa',
			'background-color': '#356b96'
		})
		// Below the Fx.tween method allows me to change ONE property of the element
		/*$('stepOne').tween('background-color','#356b96');  */
		// Add the 'click' event to Toggle 2 that displays Toggle 2 when clicked.
		// This event is added because the user has successfully completed some event within Toggle 1
		$('stepTwo').addEvent('click',toggle2);
		// Display Toggle 2.  Note that the index is '1' because arrays are 'zero' based.		
		AccordionObject.display(1);
	});

				/* This is the Building */
		// Add an event to Toggle 1 that opens Toggle 2 		
		$('img_business').addEvent('click', function(){
		// Change the default text for Toggle 1 to show you have clicked the button inside of it.
		/* $('stepOne').innerHTML = 'Getting Started'; */
		$('inputSelectedSrvLocation').value = 'Business';		
		$('form_service').set('action', 'form_submit_business.php');
		morphObjectStepOne.start ({
			/*'color': '#356b96',  */
			'background-color': '#96d0fa'  
		})
		morphObjectStepTwo.start ({
			'color': '#96d0fa',
			'background-color': '#356b96'
		})
		// Below the Fx.tween method allows me to change ONE property of the element
		/*$('stepOne').tween('background-color','#356b96');  */
		// Add the 'click' event to Toggle 2 that displays Toggle 2 when clicked.
		// This event is added because the user has successfully completed some event within Toggle 1
		$('stepTwo').addEvent('click',toggle2);
		// Display Toggle 2.  Note that the index is '1' because arrays are 'zero' based.		
		AccordionObject.display(1);
	});	
	
				/* This is the Display button */
		// Add an event to the Display button that opens Toggle 3
		$('display_section3').addEvent('click', function(){	
		morphObjectStepTwo.start ({
			'color': '#96d0fa',  
			'background-color': '#96d0fa'
		})
		morphObjectStepThree.start ({
			'color': '#96d0fa',
			'background-color': '#356b96'
		})
		// Display Toggle 3.  Note that the index is '2' because arrays are 'zero' based.
		$('stepOne').removeEvent('click',toggle1);
		$('stepTwo').removeEvent('click',toggle2);
		AccordionObject.display(2);
		/* Set a 5 second timer and then submit the 'form_service' form */
		/* It automatically goes to the page specified in the 'action=' portion of the html form tag */
		setTimeout('document.form_service.submit();', 5000);
		// Everything else is left alone as you could not have gotten here within the required
		// events having occurred in the previous two toggles.  This also allows the user to go
		// back to either of the previous toggles and make a change.
	});

});




/* Accordion End */