SqueezeBox = null;
quoteAccordian = null;
sectionOneAcc = null;
sectionTwoAcc = null;
sectionThreeAcc = null;

fxApplied = false;

var _gaq = _gaq || [];

/**
 * Add the event to a button
 */
document.addEvent('domready', function(){
	if($chk($('btn-quick-quote'))){
		$('btn-quick-quote').addEvent('click', function (){
			start_quick_quote();
		});
	}
});

/**
 * Open the popup on the first section
 */
function start_quick_quote(){

	_gaq.push(['_trackPageview', '/open-form']);
	
	// Create quick quote
	quickQuote = new Element('div', { 'id' : 'quick-quote' });

	// Construct the pop up pieces
	closeButton = new Element('div', { 'id' : 'quote-close', events : { click: function(){ SqueezeBox.close(); fxApplied = false; } } }).inject(quickQuote); // Close button
	quoteForm = new Element('form', { 'id' : 'quote-form', 'action' : '/quick-quote/', 'method' : 'post' }).inject(quickQuote); // Form tags
	claimInside = new Element('div', { 'id' : 'quote-inside' }).inject(quoteForm); // Tab area
	
	// Add first section heading
	tabHeading = new Element('img', { 'id' : 'tab-one-heading', 'src' : 'skin/anvic/images/quick-quote/panel-intro-text.gif' }).inject(claimInside);
	
	// Construct sections 1-3
	sectionOne = get_tab_area('one').inject(claimInside);
	sectionTwo = get_tab_area('two').inject(claimInside);
	sectionThree = get_tab_area('three').inject(claimInside);
	
	// Open the box
	SqueezeBox.open(
		quickQuote, {
			onOpen : function(){
				var myChain = new Chain();
				myChain.chain(
					add_fx(),
					show_section_one()
				);
			},
			handler: 'adopt',
			size: {
				x: 940, 
				y: 467
			}
		}
	);
}

/**
 * Add the Fx.Slides to each section
 */
function add_fx(){
	// Add 'accordian' Fx for sections 1-3
	if(fxApplied==false){
		sectionOneAcc = new Fx.Slide($('quote-tab-stretch-one'), { mode : 'vertical', resetHeight : true }).hide();
		sectionTwoAcc = new Fx.Slide($('quote-tab-stretch-two'), { mode : 'vertical', resetHeight : true }).hide();
		sectionThreeAcc = new Fx.Slide($('quote-tab-stretch-three'), { mode : 'vertical', resetHeight : true }).hide();
		fxApplied = true;
	}
}

/**
 * Show the first section
 */
function show_section_one(){
	
	//_gaq.push(['_trackPageview', '/']);
	
	sectionTwoAcc.slideOut();
	sectionThreeAcc.slideOut();
	sectionOneAcc.slideIn();
}

/**
 * Show the second section
 */
function show_section_two(){
	
	//_gaq.push(['_trackPageview', '/']);
	
	// Hide intro heading
	$('tab-one-heading').setStyle('display', 'none');
	
	// Set title to faded
	$('quote-tab-top-one').addClass('quote-tab-top-off');
	$('quote-tab-top-two').removeClass('quote-tab-top-off');
	
	// Insert appropriate content
	//myContent = get_tab_content('two', false);
	//myContent.inject('quote-tab-stretch-two');
	
	sectionTwoAcc.slideIn();
	sectionThreeAcc.slideOut();
	sectionOneAcc.slideOut();
}

/**
 * Show the third section
 */
function show_section_three(){
	
	//_gaq.push(['_trackPageview', '/']);
	
	// Set title to faded
	$('quote-tab-top-two').addClass('quote-tab-top-off');
	$('quote-tab-top-three').removeClass('quote-tab-top-off');
	
	sectionTwoAcc.slideOut();
	sectionThreeAcc.slideIn();
	sectionOneAcc.slideOut();
}

/**
 * Show the Possible Claim Value section
 */
function show_section_four(){

	//_gaq.push(['_trackPageview', '/']);
	
	// Hide other html
	$('quote-inside').setStyle('display', 'none');
	
	finalSection = new Element('div', { 'id' : 'quick-quote-final' }).inject('quote-form');
	
	headingImage = new Element('img', { 'src' : 'skin/anvic/images/quick-quote/section-four-intro.gif', 'alt' : 'Thank you.' }).inject(finalSection);

	// Form html (form tags already set)
	resForm = new Element('div', { 'id' : 'quick-res-form' }).inject(finalSection);
	
	resErrors = new Element('div', { 'id' : 'quick-quote-error' }).inject(resForm);
	
	resFieldSurround1 = new Element('div', { 'class' : 'quick-field-surround' }).inject(resForm);
	resField1 = new Element('div', { 'id' : 'quick-res-form-label-name', 'class' : 'quick-label', 'html' : 'Your name:' }).inject(resFieldSurround1);
	resInputDiv1 = new Element('div', { 'class' : 'quick-field-area' }).inject(resFieldSurround1);
	resInput1 = new Element('input', { 'id' : 'quick-res-form-input-name', 'class' : 'quick-input', 'value' : '', 'type' : 'text', 'name' : 'details[name]'}).inject(resInputDiv1);
	
	resFieldSurround3 = new Element('div', { 'class' : 'quick-field-surround' }).inject(resForm);
	resField3 = new Element('div', { 'id' : 'quick-res-form-label-phone', 'class' : 'quick-label', 'html' : 'You email address:' }).inject(resFieldSurround3);
	resInputDiv3 = new Element('div', { 'class' : 'quick-field-area' }).inject(resFieldSurround3);
	resInput3 = new Element('input', { 'id' : 'quick-res-form-input-email', 'class' : 'quick-input', 'value' : '', 'type' : 'text', 'name' : 'details[email]'}).inject(resInputDiv3);
	
	resFieldSurround2 = new Element('div', { 'class' : 'quick-field-surround' }).inject(resForm);
	resField2 = new Element('div', { 'id' : 'quick-res-form-label-email', 'class' : 'quick-label', 'html' : 'Your telephone number:' }).inject(resFieldSurround2);
	resInputDiv2 = new Element('div', { 'class' : 'quick-field-area' }).inject(resFieldSurround2);
	resInput2 = new Element('input', { 'id' : 'quick-res-form-input-phone', 'class' : 'quick-input', 'value' : '', 'type' : 'text', 'name' : 'details[phone]'}).inject(resInputDiv2);
	
	resInput4 = new Element('input', {
		'type' : 'image',
		'src' : 'skin/anvic/images/quick-quote/btn-submit.gif', 
		'alt' : 'Click to go to the next step',
		'id' : 'next-step-one',
		'class' : 'btn-quote-continue',
		events : {
			click : function(e){
				_gaq.push(['_trackPageview', '/filled-details']);
				e.stop();
				process_form();
			}
		}
	}).inject(resForm);
	
/*	// Show heading image

	// Result
	resBracket = arInjuries[$('id-fld-injury-id').get('value')];
	myValues = resBracket['minimum'] + ' <span>and</span> ' + resBracket['maximum'];

	$('id-fld-value').set('value', myValues); // Set to hidden field
	
	resBottomText = new Element('p', { 'class' : 'quick-res-text', 'html' : '<b>Please note</b> that compensation amounts awarded can differ greatly from case to case depending on the injuries suffered, so the above figures are there to help as a simple guideline only and could vary. Also the amounts listed do not include other financial losses such as loss of earnings or on-going medical costs, which <span>Legal Request</span> will strive to recover for you.' }).inject('quote-inside'); 
*/	
}

/**
 * process the form
 */
function process_form(){
	
	var errors = false;
	
	remove_errors();
	
	// Quick error checks
	if($('quick-res-form-input-name').value==''){ errors = true; }
	if($('quick-res-form-input-phone').value==''){ errors = true; }
	if(!isValidEmail($('quick-res-form-input-email').value)){ errors = true; }
	
	// Submit or display message
	if(errors==true){
		display_error();
	}else{
		remove_errors();
		$('quote-form').submit();
	}
	
}

/**
 * Display error message
 */
function display_error(){
	error = new Element('p', { 'html' : 'Please ensure all fields are completed and a valid email address has been entered.' }).inject('quick-quote-error');
}

/**
 * Remove any error messages
 */
function remove_errors(){
	if($chk($('quick-quote-error'))){
		$('quick-quote-error').set('html', '');
	}
}

/**
 * Get tab area
 * @param string name - name to use for classes, ids and image filename (no spaces)
 */
function get_tab_area(name){
	
	var tabArea;

	tabArea = new Element('div', { 'id' : 'quote-section-' + name, 'class' : 'quick-panel' });
	
	extraClass = (name!='one') ? 'quote-tab-top-off': '';
	tabTop = new Element('div', { 'id' : 'quote-tab-top-' + name, 'class' : 'quote-tab-top ' + extraClass }).inject(tabArea);

	tabStretchSurround = new Element('div', { 'id' : 'quote-tab-stretch-surround-' + name, 'class' : 'quote-tab-stretch-surround' }).inject(tabArea);

	tabStretch = new Element('div', { 'id' : 'quote-tab-stretch-' + name, 'class' : 'quote-tab-stretch' }).inject(tabStretchSurround);
	
	tabContent = get_tab_content(name, true);
	tabContent.inject(tabStretch);

	tabBottom = new Element('div', { 'id' : 'quote-tab-bottom-' + name, 'class' : 'quote-tab-bottom' }).inject(tabArea);

	return tabArea;
}


/**
 * Get tab content
 * @param string name - name to use (no spaces)
 * @param string html - The existing html to inject into
 * @param boolean showTitle - show title (true) or not (false)
 */
function get_tab_content(name, showTitle){
	
	showTitle = (showTitle==true)? true : false;
	tabContent = new Element('div', { 'id' : 'quote-tab-content-' + name, 'class' : 'quote-tab-content' });
	
	switch(name){
		case "one": // Location
			
			tabQuestion = new Element('p', { 'html' : '<b>Where would you prefer to be based?</b>' }).inject(tabContent);
			
			// Radio buttons
			tabRadio1 = new Element('input', { 'type' : 'radio', 'value' : 'Manchester', 'name' : 'location_city', 'id' : 'location-radio-manchester' }).inject(tabContent);
			tabLabel1 = new Element('label', { 'for' : 'location-radio-manchester', 'class' : 'location-radio radio-left', 'html' : 'Manchester' }).inject(tabContent);
			
			tabRadio2 = new Element('input', { 'type' : 'radio', 'value' : 'Burnley', 'name' : 'location_city', 'id' : 'location-radio-burnley' }).inject(tabContent);
			tabLabel2 = new Element('label', { 'for' : 'location-radio-burnley', 'class' : 'location-radio', 'html' : 'Burnley' }).inject(tabContent);

			br = new Element('div', { 'class' : 'break1', 'html' : '&nbsp;' }).inject(tabContent);

			// City centre checkbox
			tabCheck1 = new Element('input', { 'type' : 'checkbox', 'value' : 'City Centre Checked', 'name' : 'location_city_centre', 'id' : 'location-check' }).inject(tabContent);
			tabLabel1 = new Element('label', { 'for' : 'location-check', 'class' : 'location-radio', 'html' : 'I would like to be based in the city centre' }).inject(tabContent);

			br = new Element('div', { 'class' : 'break1', 'html' : '&nbsp;' }).inject(tabContent);
			
			// Next step button
			tabBtnNext = new Element('img', { 
				'src' : 'skin/anvic/images/quick-quote/btn-next-step.gif', 
				'alt' : 'Click to go to the next step',
				'id' : 'next-step-one', 
				'class' : 'btn-quote-continue',
				events : {
					click: function(){
						_gaq.push(['_trackPageview', '/chosen-location']);
						show_section_two();
					}
			    }
			}).inject(tabContent);

			break;
			
		case "two": // Numbers

			tabQuestion = new Element('p', { 'html' : '<b>Let me get an idea of who we need to accomodate...</b>' }).inject(tabContent);
			
			// Paragraphs
			para1 = new Element('p', { 'class' : 'quote-para', 'html' : 'How many people do you need to accomodate? <input type="text" name="accom_how_many" class="quote-small-box" value="" /> <span>Required</span>' }).inject(tabContent);
			
			para2 = new Element('p', { 'class' : 'quote-para', 'html' : 'How many square feet do you think you will need? <input type="text" name="accom_square_feet" class="quote-small-box" value="" /> <span>Required</span>' }).inject(tabContent);
			
			para3 = new Element('p', { 'class' : 'quote-para', 'html' : 'Do you need space for anything else other than workstations? &nbsp;&nbsp;' });
			tabRadio1 = new Element('input', { 'type' : 'radio', 'value' : 'Yes', 'name' : 'extra_space', 'id' : 'extra-space-yes' }).inject(para3);
			tabLabel1 = new Element('label', { 'for' : 'extra-space-yes', 'class' : 'location-radio radio-left', 'html' : 'Yes' }).inject(para3);
			tabRadio2 = new Element('input', { 'type' : 'radio', 'value' : 'No', 'name' : 'extra_space', 'id' : 'extra-space-no' }).inject(para3);
			tabLabel2 = new Element('label', { 'for' : 'extra-space-no', 'class' : 'location-radio', 'html' : 'No' }).inject(para3);
			para3.inject(tabContent);
			
			para4 = new Element('p', { 'class' : 'quote-para', 'html' : 'When do you need space from? &nbsp;&nbsp;' });
			tabRadio1 = new Element('input', { 'type' : 'radio', 'value' : 'Urgently', 'name' : 'availability_date', 'id' : 'extra-space-urgently' }).inject(para4);
			tabLabel1 = new Element('label', { 'for' : 'extra-space-urgently', 'class' : 'location-radio-short', 'html' : 'Urgently' }).inject(para4);
			tabRadio2 = new Element('input', { 'type' : 'radio', 'value' : '1 - 3 months', 'name' : 'availability_date', 'id' : 'extra-space-one-to-three' }).inject(para4);
			tabLabel2 = new Element('label', { 'for' : 'extra-space-one-to-three', 'class' : 'location-radio-short', 'html' : '1-3 months' }).inject(para4);
			tabRadio2 = new Element('input', { 'type' : 'radio', 'value' : '3 - 6 months', 'name' : 'availability_date', 'id' : 'extra-space-three-to-six' }).inject(para4);
			tabLabel2 = new Element('label', { 'for' : 'extra-space-three-to-six', 'class' : 'location-radio-short', 'html' : '3-6 months' }).inject(para4);
			tabRadio2 = new Element('input', { 'type' : 'radio', 'value' : 'Don\'t know', 'name' : 'availability_date', 'id' : 'extra-space-dont-know' }).inject(para4);
			tabLabel2 = new Element('label', { 'for' : 'extra-space-dont-know', 'class' : 'location-radio-short', 'html' : 'Don\'t know' }).inject(para4);
			para4.inject(tabContent);
			
			// Next step button
			tabBtnNext = new Element('img', { 
				'src' : 'skin/anvic/images/quick-quote/btn-next-step.gif',
				'alt' : 'Click to go to the next step',
				'id' : 'next-step-two', 
				'class' : 'btn-quote-continue',
				events : {
					click: function(){
						show_section_three();
					}
			    }
			}).inject(tabContent);

			break;
			
		case "three": // Wishlist

			tabQuestion = new Element('p', { 'html' : '<b>Now please tell me which features/services you would like...</b>' }).inject(tabContent);
			
			box1 = new Element('div', { 'class' : 'cbox-left' });
			tabCheck1 = new Element('input', { 'type' : 'checkbox', 'value' : 'Yes', 'name' : 'wishlist[parking]', 'id' : 'id-like-parking' }).inject(box1);
			tabLabel1 = new Element('label', { 'for' : 'id-like-parking', 'html' : 'Would you like parking?' }).inject(box1);
			box1.inject(tabContent);
			
			box2 = new Element('div', { 'class' : 'cbox-right' });
			tabCheck2 = new Element('input', { 'type' : 'checkbox', 'value' : 'Yes', 'name' : 'wishlist[meeting-rooms]', 'id' : 'id-like-meeting-rooms' }).inject(box2);
			tabLabel2 = new Element('label', { 'for' : 'id-like-meeting-rooms', 'html' : 'Would you like access to meeting rooms?' }).inject(box2);
			box2.inject(tabContent);
			
			box3 = new Element('div', { 'class' : 'cbox-left' });
			tabCheck3 = new Element('input', { 'type' : 'checkbox', 'value' : 'Yes', 'name' : 'wishlist[reception-services]', 'id' : 'id-like-reception' }).inject(box3);
			tabLabel3 = new Element('label', { 'for' : 'id-like-reception', 'html' : 'Would you like Reception services?' }).inject(box3);
			box3.inject(tabContent);
			
			box4 = new Element('div', { 'class' : 'cbox-right' });
			tabCheck4 = new Element('input', { 'type' : 'checkbox', 'value' : 'Yes', 'name' : 'wishlist[furnished]', 'id' : 'id-like-furnished' }).inject(box4);
			tabLabel4 = new Element('label', { 'for' : 'id-like-furnished', 'html' : 'Would you like to move into furnished space?' }).inject(box4);
			box4.inject(tabContent);
			
			box5 = new Element('div', { 'class' : 'cbox-left' });
			tabCheck5 = new Element('input', { 'type' : 'checkbox', 'value' : 'Yes', 'name' : 'wishlist[telephone-system]', 'id' : 'id-like-telephone' }).inject(box5);
			tabLabel5 = new Element('label', { 'for' : 'id-like-telephone', 'html' : 'Will you need a telephone system?' }).inject(box5);
			box5.inject(tabContent);
			
			box6 = new Element('div', { 'class' : 'cbox-right' });
			tabCheck6 = new Element('input', { 'type' : 'checkbox', 'value' : 'Yes', 'name' : 'wishlist[secretarial-support]', 'id' : 'id-like-secretarial' }).inject(box6);
			tabLabel6 = new Element('label', { 'for' : 'id-like-secretarial', 'html' : 'Would you like secretarial support if needed?' }).inject(box6);
			box6.inject(tabContent);
			
			box7 = new Element('div', { 'class' : 'cbox-left' });
			tabCheck7 = new Element('input', { 'type' : 'checkbox', 'value' : 'Yes', 'name' : 'wishlist[broadband]', 'id' : 'id-like-broadband' }).inject(box7);
			tabLabel7 = new Element('label', { 'for' : 'id-like-broadband', 'html' : 'Will you need broadband?' }).inject(box7);
			box7.inject(tabContent);
			
			box8 = new Element('div', { 'class' : 'cbox-right' });
			tabCheck8 = new Element('input', { 'type' : 'checkbox', 'value' : 'Yes', 'name' : 'wishlist[tea-and-coffee-facilities]', 'id' : 'id-like-tea-coffee' }).inject(box8);
			tabLabel8 = new Element('label', { 'for' : 'id-like-tea-coffee', 'html' : 'Would you like access to tea and coffee-making facilities?' }).inject(box8);
			box8.inject(tabContent);

			br = new Element('div', { 'class' : 'break1', 'html' : '&nbsp;' }).inject(tabContent);
			
			// Next step button
			tabBtnComplete = new Element('img', {
				'src' : 'skin/anvic/images/quick-quote/btn-complete.gif',
				'alt' : 'Click to go to the next step',
				'id' : 'next-step-three', 
				'class' : 'btn-quote-continue',
				events : {
					click: function(){
						show_section_four();
					}
			    }
			}).inject(tabContent);
			break;
	}
	
	return tabContent;
}

/**
 * Remove all whitespace from a string
 */
function removeSpaces(string){
	return string.split(' ').join('');
}

/**
 * Make sure an email address is valid
 */
function isValidEmail(email){
   var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
   return reg.test(email);
}