function showBTNs(n){
	switch(n){
		case 1: $(".sendbutton").filter('#NextBTN').show();break;
		case 2: $(".sendbutton").filter('#NextBTN, #BackBTN').show();break;
		case 3: $(".sendbutton").filter('#NextBTN, #BackBTN').show();break;
		case 4: $(".sendbutton").filter('#BackBTN, .sendbutton[value="Submit"]').show();break;
	}
}

function switchImgHelper(n){
  $("#ProgressImgHelper").attr('src', 'http://movingeverywhere.co.uk/images/step'+n+'.png');
}

jQuery(function($){

	$(".sendbutton[type=submit]")
		.after('<input type="button" class="sendbutton" id="NextBTN" value="Next">')
		.after('<input type="button" class="sendbutton" id="BackBTN" value="Back">')

	$("#NextBTN").click(function(e){
		visiblePart = $("#cforms5form fieldset:visible").attr('class');
		if(visiblePart == 'cf-fs1') $("#imgmap area:eq(1)").trigger('click');
		if(visiblePart == 'cf-fs2') $("#imgmap area:eq(2)").trigger('click');
		if(visiblePart == 'cf-fs3') $("#imgmap area:eq(3)").trigger('click');
	})
	
	$("#BackBTN").click(function(e){
		visiblePart = $("#cforms5form fieldset:visible").attr('class');
		if(visiblePart == 'cf-fs2') $("#imgmap area:eq(0)").trigger('click', [true]);
		if(visiblePart == 'cf-fs3') $("#imgmap area:eq(1)").trigger('click', [true]);
		if(visiblePart == 'cf-fs4') $("#imgmap area:eq(2)").trigger('click', [true]);
	})
	
	$("#imgmap area").click(function(e, firstTime){
		e.preventDefault();
		idx = $("#imgmap area").index(this); idx++;
		if( !firstTime && !validate_form() ){
	    return false;
		}
		$(".sendbutton").hide();
		setTimeout('showBTNs(idx);', 1000);
		$("fieldset[class^=cf-fs]").fadeOut('fast',function(){
		  setTimeout('$("fieldset.cf-fs"+idx).fadeIn("fast");', 500)
		})
		switchImgHelper(idx);
	})
	
	$("#imgmap area:eq(0)").trigger('click', [true]);
	
	
	/* Custom checkboxes */
	elAdd = $('<a class="checkbox-select" href="#">Select</a><a class="checkbox-deselect" href="#">Cancel</a><div class="img"></div>');
	
	$(".cf-ol li:has(input[type=checkbox])").each(function(){ 
		$(this)
			.find('label')
			.remove()
			.appendTo( $(this) )
	}).append( elAdd.clone() ).addClass('checklist');
	
	$(".cf-fs1 ol, .cf-fs2 ol, .cf-fs3 ol").removeClass('cf-ol').addClass('checkol');

	/* see if anything is previously checked and reflect that in the view*/
	$(".checklist input:checked").parent().addClass("selected");

	/* handle the user selections */
	$(".checklist .checkbox-select").click(	function(event) {
		event.preventDefault();
		// To prevent multiple selections
		$(this).parent().parent().find(".checklist").removeClass("selected");
		$(this).parent().parent().find(":checkbox").removeAttr("checked");
		hideApartmentExtraInfo('none');
		
		$(this).parent().addClass("selected");
		$(this).parent().find(":checkbox").attr("checked","checked");
	});

	$(".checklist .checkbox-deselect").click(function(event) {
		event.preventDefault();
		$(this).parent().removeClass("selected");
		$(this).parent().find(":checkbox").removeAttr("checked");
	});

	function validate_form(hardCheck){
      re = {
        alphadash: /^[a-z\-\s]+$/i,
        phone: /^\d+$/,
        email: /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
        date: /^\d{2}\/\d{2}\/\d{4}$/
      }
      if(($(".cf-fs4:visible").length || hardCheck) && ! $("#cf5_field_32").val().match(re.alphadash) ){ // name
      	alert('Name must be in English characters only with no numbers or special characters. ');
      }else if(($(".cf-fs4:visible").length || hardCheck) && ! $("#cf5_field_33").val().match(re.email) ){ // email
      	alert('Please type a valid email.');
      }else if(($(".cf-fs4:visible").length || hardCheck) && ! $("#cf5_field_34").val().match(re.phone) ){ // contact phone
      	alert('Phone should be numeric characters only up to 20 numbers.');
      }else if( ($(".cf-fs4:visible").length || hardCheck) && ! $("#cf5_field_37").val().match(re.date) ){ // zip code
      	alert('You\'ve to provide a valid date for moving, click the calendar icon to choose your date.');
      }else if( ($(".cf-fs1:visible").length) && $("li.checklist.selected", ".checkol:visible").length != 1 ){ // check if a property is selected
      	alert('You have to select one property type.');
      }else if( ($(".cf-fs2:visible").length) && $("li.checklist.selected", ".checkol:visible").length != 1 ){ // check if a property is selected
      	alert('You have to select one property type.');
      }else if( ($(".cf-fs3:visible").length) && $("li#li-5-7.selected", ".checkol").length && ( $("#cf5_field_21").val()=='' || $("#cf5_field_23").val().match(/Yes|No/)==null ) ){ // check if a property is selected
      	alert('As you\'ve selected your property type as Apartment, please fill in the corresponding questions for Apartments ( the first two ).');
      }else if( ($(".cf-fs3:visible").length) && $("li#li-5-7.selected", ".checkol").length && ( $("#cf5_field_22").val()=='' ) ){ // check if a property is selected
      	alert('As you\'ve selected your property type as Apartment, please fill in the bedroom count in the apartment.');
      }else if( ($(".cf-fs3:visible").length || hardCheck) && $(".cf-fs3 option[value='Please select ']:selected").length ){ // check mandatory elements
      	alert('Please complete all the required information.');
      }else{ // return true if none of the above is true
      	return true;
      }
      // else return false; validation fails
      return false;
      
	}
	
	var bedroom_id = '';
	var floor_id = '';	
	
	$("#li-5-7 a.checkbox-select").click(function(e){
		e.preventDefault();
		showDialog('cf5_field_21', 'cf5_field_22');
	})
	
	$("#li-5-16 a.checkbox-select").click(function(e){
		e.preventDefault();
		showDialog('cf5_field_24', 'cf5_field_25');
	})
	
	function showDialog(fid, bid) {
		$(function() {
			floor_id = fid;
			bedroom_id = bid;
			$("#apartmentDialog").remove();
			$('body').append('<div id="apartmentDialog" title="Apartment"><label style="display: block; float: left; width: 100px;">What Floor?</label>&nbsp;&nbsp;<input type="text" name="apart_floor_no" id="apart_floor_no" value="" size="2" style="border: 1px solid #F37024;" /><br /><br /><label style="display: block; float: left; width: 110px;">How many bedrooms?</label> <input type="text" name="apart_bedrooms" id="apart_bedrooms" value="" size="2" style="border: 1px solid #F37024;" /><br /><br /><div style="float: right;"><input type="button" class="sendbutton" name="apart_approve" id="apart_approve" value="Ok" /></div></div>');

			$("#apartmentDialog").dialog({ width: "200px", modal: true });
			
			$( "#apartmentDialog" ).bind( "dialogclose", function(event, ui) {
				if (!verifyOptions()) {
					event.preventDefault();
					event.cancelable = false;
					return false;
				}
			});

			$("#apart_approve").click(function(e) {
				verifyOptions();
			});
		});
	}
	
	function verifyOptions() {
		var floor_no = $("#apart_floor_no").val();
		if (floor_no == '') {
			alert('Please enter What Floor?');
			return false;
		}
		var bedrooms = $("#apart_bedrooms").val();
		if (bedrooms == '') {
			alert('Please enter How many bedrooms?');
			return false;
		}				
		$("#" + floor_id).val(floor_no);
		$("#" + bedroom_id).val(bedrooms);
		$("#apartmentDialog").dialog("close");	
	}
	
	function hideApartmentExtraInfo(display) {
		$("#cf5_field_21").parent().css('display', display);
		$("#cf5_field_22").parent().css('display', display);
		$("#cf5_field_24").parent().css('display', display);
		$("#cf5_field_25").parent().css('display', display);
	}
	
	function cforms_validate(){	return true; }
	
	$("#sendbutton5").click(function(e){
		e.preventDefault();
		if(validate_form(true)){
			$('sendbutton5').css({cursor:"progress"}).attr("disabled","disabled");
      cforms_submitcomment(5)
		}else{
			return false;
		}
	}).attr('onclick', '');
	
	
})