$(function(){
		var html = '';
		html = html + '<table>';
		html = html + '<tr valign="top">';
		html = html + '<td width="200">';
		html = html + '<label>Second First Name *</label>';
		html = html + '<input type="text" name="member2_firstname" value="" />';
		html = html + '</td>';
		html = html + '<td width="200">';
		html = html + '<label>Second Last Name *</label>';
		html = html + '<input type="text" name="member2_lastname" value="" />';
		html = html + '</td>';
		html = html + '<td width="200" class="phone">';
		html = html + '<label>Second Phone Number*</label>';
		html = html + '(<input type="text" style="width:30px;" name="member2_phone_a" maxlength="3" onFocus="this.select()" onBlur="this.value=chars(this.value,\'1234567890\');" onKeyUp="if(this.value.length==3 && event.keyCode != 9 && event.keyCode != 16)this.form.member2_phone_b.focus();"> )';
		html = html + ' <input type="text" style="width:30px;" name="member2_phone_b" maxlength="3" onFocus="this.select()" onBlur="this.value=chars(this.value,\'1234567890\');" onKeyUp="if(this.value.length==3 && event.keyCode != 9 && event.keyCode != 16)this.form.member2_phone_c.focus();">';
		html = html + '-<input type="text" style="width:40px;" name="member2_phone_c" maxlength="4" onFocus="this.select()" onBlur="this.value=chars(this.value,\'1234567890\');"> ';
		html = html + '</td>';
		html = html + '<td width="200">';		
		html = html + '</td>';
		html = html + '</tr>';			
		html = html + '</table>';

		// Form Validations
		$("#joinForm").validate({
			rules: {
				first_name: "required",
				last_name: "required",
				mem_phone_a: "required",
				mem_phone_b: "required",
				mem_phone_c: "required",
				member2_firstname: "required",
				member2_lastname: "required",
				member2_phone_a: "required",
				member2_phone_b: "required",
				member2_phone_c: "required",
				credit_card_no: "required",
				credit_card_cvs: "required",
				mem_street_number: 
				{
					required: true,
					maxlength: 10
				},
				mem_street_address: "required",
				mem_city: "required",
				mem_state: "required",
				mem_zipcode: "required",
				contract_accepted: "required",
				username: {
					required: true,
					minlength: 5
				},
				password: {
					required: true,
					minlength: 5
				},
				password2: {
					required: true,
					minlength: 5,
					equalTo: "#password"
				},
				mem_email: {
					required: true,
					email: true
				}			
			},
			messages: {
				first_name: "Enter firstname",
				last_name: "Enter lastname",
				mem_phone_a: "",	
				mem_phone_b: "",					
				mem_phone_c: "",	
				member2_firstname: "Enter second firstname",
				member2_lastname: "Enter second lastname",
				member2_phone_a: "",	
				member2_phone_b: "",					
				member2_phone_c: "",	
				credit_card_no: "Enter credit card number",					
				credit_card_cvs: "Enter CVV number",
				mem_street_number: "Enter street num",
				mem_street_address: "Enter street address",
				mem_city: "Enter city",
				mem_state: "Enter state",
				mem_zipcode: "Enter zipcode",
				contract_accepted:  "Please confirm that you accept the terms of the contract",
				username: {
					required: "Enter a username",
					minlength: "Username must be 5 characters or longer"
				},
				password: {
					required: "Please provide a password",
					minlength: "Password must be 5 characters or longer"
				},
				password2: {
					required: "Please provide a password",
					minlength: "Password must be 5 characters or longer",
					equalTo: "Enter same password"
				},
				mem_email: "Enter valid email address"				
			}
		});
		
		// Form Validations
		$("#llSignupForm").validate({
			rules: {
				first_name: "required",
				last_name: "required",
				landlord_type_id: "required",
				ll_street_number: "required",
				ll_street_address: "required",
				ll_city: "required",
				ll_zipcode: "required",
				ll_phone_a: "required",
				ll_phone_b: "required",
				ll_phone_c: "required",
				llterms: "required",
				username: {
					required: true,
					minlength: 5
				},
				password: {
					required: true,
					minlength: 5
				},
				password2: {
					required: true,
					minlength: 5,
					equalTo: "#password"
				},
				ll_email: {
					required: true,
					email: true
				}			
			},
			messages: {
				first_name: "Enter first name",
				last_name: "Enter last name",
				landlord_type_id: "Select landlord type",
				ll_street_number: "Enter street number",
				ll_street_address: "Enter street address",
				ll_city: "Enter city",
				ll_zipcode: "Enter zipcode",				
				ll_phone_a: "",	
				ll_phone_b: "",					
				ll_phone_c: "",	
				llterms:  "Please confirm that you accept the terms and conditions",
				username: {
					required: "Enter a username",
					minlength: "Username must be 5 characters or longer"
				},
				password: {
					required: "Please provide a password",
					minlength: "Password must be 5 characters or longer"
				},
				password2: {
					required: "Please provide a password",
					minlength: "Password must be 5 characters or longer",
					equalTo: "Enter same password"
				},
				ll_email: "Enter valid email address"				
			}
		});
			
		// Rounded Corners
		var settings = {
			tl: {radius:10},
			tr: {radius:10},
			bl: {radius:10},
			br: {radius:10},
			antiAlias: true
		}
		curvyCorners(settings,"h2");

		// Check username
		$("#username").focus(function(){
			$response = $('#response');
			$response.empty();
		});
		$("#check-username").click(function(){
			var username = $(this).siblings("input").val();
			if(username.length >= 5){
				$response = $('#response');
				$response.empty();
				$response.append('<img src="https://www.westsiderentals.com/images/icons/loading.gif" border="0" width="16" height="16" align="absmiddle" /> Please wait..');
				$.ajax({
				   type: "GET",
				   url: "/checkusername.cfm",
				   data: "username="+username,
				   success: function(msg){
					   $response.empty().html(msg);				   
				   }
				});
			}
			return false;
		});
		
		//Check promo code
		$("#promo-button").click(function(){
			var promocode = $("input[name=promocode]").attr("value");			
			var initialSingleRateHandle = $("input[name=initial_single_rate]").attr("value");
			var initialDualRateHandle = $("input[name=initial_dual_rate]").attr("value");
			var initialGoldRateHandle = $("input[name=initial_gold_rate]").attr("value");
			
			if(promocode.length >= 3){
				$response = $('.promo-response');
				$response.empty();
				$response.append('<img src="https://www.westsiderentals.com/images/icons/loading.gif" border="0" width="16" height="16" align="absmiddle" /> Please wait..');
				$.ajax({
				   type: "GET",
				   dataType: "json",
				   url: "/secure/checkpromocode.cfm",
				   data: "promocode="+promocode,
				   success: function(data){
						var $singleRateHandle = $(".single-rate");
						var $dualRateHandle = $(".dual-rate");
						var $goldRateHandle = $(".gold-rate");
						
						if(data.isvalid == true) {
							$response.empty().html('<label class="success">'+data.message+'</label>');
							var discount = data.discount;
							var singleRate = initialSingleRateHandle - discount;
							var dualRate = initialDualRateHandle - discount;
							var goldRate = initialGoldRateHandle - discount;
							$singleRateHandle.text(singleRate);
							$dualRateHandle.text(dualRate);
							$goldRateHandle.text(goldRate);												
						} else {							
							$response.empty().html('<label class="error">'+data.message+'</label>');
							$singleRateHandle.text(initialSingleRateHandle);
							$dualRateHandle.text(initialDualRateHandle);
							$goldRateHandle.text(initialGoldRateHandle);		
						}
				   }
				});
			}
			return false;
		});
		
		// Membership Options Effects
		$(".securejoin ul li div.plan-wrapper div.plan").click(function(){
			$(this).find("input:radio").attr("checked","true");
			var inputValue = $(this).find("input:radio").attr("value");
			$dualId = $("#dual-data");
			if(inputValue == 6){
				$dualId.empty().append(html);
			} else {
				$dualId.empty();
			}
		});		
		$(".securejoin ul li div.plan-wrapper div.plan").mouseover(function(){$(this).addClass("selected");}).mouseout(function(){$(this).removeClass("selected");});	
		
		/*
		$('#preferences').accordion({ 
			header: '.preferences-header', 
			active: false, 
			alwaysOpen: false, 
			animated: false, 
			autoheight: false 
		});
		*/
		
	});	
	
	//Initialize Accordions
	ddaccordion.init({
		headerclass: "preferences-header", //Shared CSS class name of headers group
		contentclass: "preferences-content", //Shared CSS class name of contents group
		collapseprev: false, //Collapse previous content (so only one open at any time)? true/false
		defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
		animatedefault: false, //Should contents open by default be animated into view?
		persiststate: false, //persist state of opened contents within browser session?
		toggleclass: ["closedlanguage", "openlanguage"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
		togglehtml: ["suffix", "<img src='/images/plus.gif' /> ", "<img src='/images/minus.gif' /> "], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
		animatespeed: "fast" //speed of animation: "fast", "normal", or "slow"
	});
	
	ddaccordion.init({
		headerclass: "agreement-header", //Shared CSS class name of headers group
		contentclass: "agreement-content", //Shared CSS class name of contents group
		collapseprev: false, //Collapse previous content (so only one open at any time)? true/false
		defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
		animatedefault: false, //Should contents open by default be animated into view?
		persiststate: false, //persist state of opened contents within browser session?
		toggleclass: ["closedlanguage", "openlanguage"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
		togglehtml: ["suffix", "<img src='/images/plus.gif' /> ", "<img src='/images/minus.gif' /> "], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
		animatespeed: "fast" //speed of animation: "fast", "normal", or "slow"
	});	