

var switchingForm = {

	html: false,

	init:function(){
	
		// First set up a cookie so we can check if cookies are enabled on the users browser
		jQuery.cookie('test cookie',true);

		if(jQuery.cookie('test cookie')){		// Cookies are enabled
			jQuery.cookie('test cookie',null);	// Delete test cookie
			
			if(!jQuery.cookie('switchingFormPosted')) {		// If the form hasn't yet been submitted build it and prepend it to the .rightCol and add validation and uniform stlying
			
				this.buildFormHTML();
				this.addValidation();
				$('.switchingForm select, .switchingForm input:checkbox,').uniform();
			
			}
			
		}

	},
	buildFormHTML:function(){

		var formHTML = [
			'<form action="/switching/apply/" class="switchingForm" id="switchingForm" method="post">',
				'<div class="blurb">',		
					'<div class="top">&nbsp;</div>',
					'<div class="mid">',
						'<h2>Find out more about switching...</h2>',
						'<h3 class="noPad">Fill in your details below to receive more information:</h3>',
						'<p class="requiredMsg">* required fields</p>',
						
						'<div class="row">',
							'<label for="switchingName">Name <span>*</span></label>',
							'<div class="field">',
								'<input type="text" name="switchingName" id="switchingName" />',
							'</div>',
						'</div>',
						'<div class="row">',
							'<label for="switchingEmail">Email <span>*</span></label>',
							'<div class="field">',
								'<input type="text" name="switchingEmail" id="switchingEmail" />',
							'</div>',
						'</div>',
						'<div class="row">',
							'<label for="switchingTelephone">Telephone <span>*</span></label>',
							'<div class="field">',
								'<input type="text" name="switchingTelephone" id="switchingTelephone" />',
							'</div>',
						'</div>',
						'<div class="row">',
							'<label for="switchingCES">Current Energy Supply<span>*</span></label>',
							'<select id="switchingCES" name="switchingCES">',
								'<option value="">Select an option</option>',
								'<option value="oil">Oil</option>',
								'<option value="electric">Electric</option>',
								'<option value="solid-fuel">Solid Fuel</option>',
								'<option value="gas">Gas</option>',
							'</select>',
						'</div>',

					'</div>',
					'<div class="mid div">',
						'<div class="checkboxRow">',
							'<div class="clrNM">',
								'<div class="check"><input type="checkbox" name="privacyAgree" id="privacyAgree"  /></div>',
								'<div class="label">',
									'<label for="privacyAgree">I have read and agree to the Calor <a href="/about-calor/legal/privacy-policy/" target="_blank">Privacy Policy</a> and I agree that Calor may contact me.</label>',
								'</div>',
							'</div>',
						'</div>',
					'</div>',
					'<div class="mid div">',
						'<div class="submit clrNM">',
							'<input type="submit" value="" id="submit" class="submit">',
						'</div>',
					'</div>',
					'<div class="bottom">&nbsp;</div>',
					'<div class="pointer">&nbsp;</div> <!-- hub -->',
				'</div>',
			'</form>'

		];

		$('.rightCol:first').prepend(formHTML.join(''));
		
	},
	addValidation:function(){
	
	
		$('.switchingForm').validate({
						
			rules: {
				switchingName: {
					required: true
				},
				switchingEmail: {
					required: true,
					email: true
				},
				switchingTelephone: {
					required: true,
					number: true
				},
				switchingCES: {
					required: true
				},
				privacyAgree: {
					required: true
				}
			},
			messages: {
				switchingName: {
					required: 'Please enter your name'
				},
				switchingEmail: {
					required: 'Please enter your email address',
					email: 'Please enter a valid email address'
				},
				switchingTelephone: {
					required: 'Please enter your telephone num',
					number: 'Please enter numbers only'
				},
				switchingCES: {
					required: 'Please choose an option'
				},
				privacyAgree: {
					required: 'You must agree to the privacy policy'
				}
			},
			errorPlacement: function(error, element) {
			
				if($(element).attr('name') == 'switchingCES'){
					element.parents('.row').append(error); 
				}
				else if($(element).attr('name') == 'privacyAgree'){
					element.parents('.checkboxRow').append(error); 
				}
				else {
					element.parents('.field').after(error); 
				}
			
			}

		});
		
		$('.switchingForm input[type=submit]').click(function(){
			if($(".switchingForm").valid()) {
				jQuery.cookie('switchingFormPosted',true);
			}
		});

	}
	
}

