$(document).ready(function() {
	// validate signup form on keyup and submit
	var validator = $("#signup_form").validate({
		rules: {
			firstName: "required",
			lastName: "required",
			title:"required",
			categories: {
				required: true,
				maxlength:5
			},
			response: {
				required: true,
				minlength: 4
			},
			passwordField: {
				required: true,
				minlength: 6
			},
			password_confirm: {
				required: true,
				minlength: 6,
				equalTo: "#passwordField"
			},
			cv: {
				required: true,
				accept:'pdf|doc|docx|rtf'
			},
			email: {
				required: true,
				email: true
			},
			terms: "required"
		},
		messages: {
			title: "Title is required",
			firstName: "Enter your firstname",
			lastName: "Enter your lastname",
			response: {
				required: "Invalid security code. Please retype. All characters are lower case.",
				rangelength: jQuery.format("Security Code need to be {0} characters long")
			},
			passwordField: {
				required: "Provide a password",
				rangelength: jQuery.format("Enter at least {0} characters")
			},
			password_confirm: {
				required: "Repeat your password",
				minlength: jQuery.format("Enter at least {0} characters"),
				equalTo: "Enter the same password as above"
			},
			email: {
				required: "Please enter a valid email address",
				minlength: "Please enter a valid email address"
			},
			categories: {
				maxlength: jQuery.format("Please select no more than {0} categories")
			},
			terms: {
				required: "To sign up you must agree to terms and conditions"
				}
		},
		// set this class to error-labels to indicate valid fields
		success: function(label) {
			// set   as text for IE
			label.prev().prev().addClass("checked2");
		}
	});
	
	$('#firstName').blur(function(event){
		$(this).val($(this).val().toTitleCase());
	  });
	$('#lastName').blur(function(event){
		$(this).val($(this).val().toTitleCase());
	  });
	$('#positionsSought').keydown(function(event){
		$(this).val($(this).val().toTitleCase());
	});

	$("#signup_form").submit(function() {
        $('#minRate').toNumber()
    });
	$items ="";
	if ($.query.get('error')!=null && $.query.get('error')!=''){
		 $items = $.cookie('positionsSought').split(',')
	}

	$("#positionsSought").tagEditor(
	{
		confirmRemoval: true,
		completeOnSeparator : true,
		items:$items
	});
	$('#minRate').blur(function(event){
		$(this).formatCurrency({symbol:'£'});
	});
	$('#minRate').formatCurrency({symbol:'£'});

	if ($.query.get('error')!=null && $.query.get('error').split('|').length>1){
		$("#dtTitle").empty();
		$('#errors').html('<ul></ul>')
		$errors = $.query.get('error').split('|');
		for(i=0;i<$errors.length;i++){
			$('#errors>ul').append('<li>'+$errors[i]+'</li>');
		}
	}else if ($.query.get('error')!=null && $.query.get('error')!='' && $.query.get('error').split('|').length==1){
		$('#errors').html('<ul><li>'+$.query.get('error')+'</li></ul>')
		$("#title").val($.cookie('title'))
		$("#firstName").val($.cookie('firstName'))
		$("#lastName").val($.cookie('lastName'))
		$("#email").val($.cookie('email'))
		$("#categories").val($.cookie('categories').split(","))
		$("#minRate").val($.cookie('minRate'))
		$("#dtTitle").empty();
		if ($.cookie('acceptPermanent')=='Yes')
			$("#acceptPermanent").attr('checked','checked')
	}else if ($.query.get('message')!=null && $.query.get('message')!=''){
		$('#message').html('<ul><li><strong><span style="font-size:110%">'+$.query.get('message')+'You can login now by <a href="http://www.directtemping.com/worker">clicking here</a>'+'</span></strong></li></ul>')
		$.cookie('title', null);
		$.cookie('firstName', null);
		$.cookie('lastName', null);
		$.cookie('email', null);
		$.cookie('positionsSought', null);
		$.cookie('categories', null);
		$.cookie('minRate', null);
		$.cookie('acceptPermanent',null);
		$("#dtTitle").empty();
	}
	
	});
	
	function storeFormValues(){
		$.cookie('title', $('#title').val());
		$.cookie('firstName', $('#firstName').val());
		$.cookie('lastName', $('#lastName').val());
		$.cookie('email', $('#email').val());
		$.cookie('positionsSought', $('#positionsSought').val());
		$.cookie('categories', $('#categories').val().join(','));
		$.cookie('minRate', $('#minRate').val());
		if ($('#acceptPermanent:checked').val()!= null)
			$.cookie('acceptPermanent','Yes');
	}
			
	var html ='<h3 id="dtTitle">Please complete this form in full (fields marked with * are mandatory):</h3><div id="dtRegForm"><div id="message"></div><div id="errors" class="error"></div>'
		html+='<form id="signup_form" name="signup_form" method="post" onSubmit="storeFormValues()" enctype="multipart/form-data" class="form1" action="http://www.directtemping.com/customSignup/">'
			html +='<fieldset>'
			html +='<label for="title">Title:*</label>'
			html +='<select id="title" class="selectbox" name="title">'
			html +='<option selected="selected" value=""></option>'
			html +='<option value="Mr">Mr</option>'
			html +='<option value="Ms">Ms</option>'
			html +='<option value="Miss">Miss</option>'
			html +='<option value="Mrs">Mrs</option>'
			html +='</select>'
			html +='<label for="firstName">First Name:*</label>'
			html +='<input type="text" value="" name="firstName" class="inputbox" id="firstName">'
		html +='<label for="lastName">Last Name:*</label>'
		html +='<input type="text" value="" name="lastName" id="lastName" class="inputbox">'
		html +='<label for="email">Email:*</label>'
		html +='<input type="text" value="" name="email" id="email" class="inputbox">'
		html +='<label for="passwordField">Password:*</label>'
		html +='<input type="password" name="passwordField" id="passwordField" class="inputbox">'
		html +='<label for="password_confirm">Retype Password:*</label>'
		html +='<input type="password" name="password_confirm" id="password_confirm" class="inputbox">'
		html +='<label for="positionsSought">Positions Sought:* (Please seperate the positions by commas)</label>'
		
		html +='<input type="text" autocomplete="off" class="inputbox" id="positionsSought" name="positionsSought"><ul class="tagEditor"></ul><input type="hidden">'
		html +='<label for="categories">Industry/Sector(Please press CTRL to select up to 5):*</label>'
		html +='<select id="categories" multiple="multiple" class="multiselectbox" name="categories">'
		html +='<option value="1">Accountancy / Book Keeping</option>'
		html +='<option value="2">Admin / Office / Clerical / Reception</option>'
		html +='<option value="3">Automotive</option>'
		html +='<option value="4">Banking / Finance</option>'
		html +='<option value="5">Building Services / Facilities</option>'
		html +='<option value="6">Care / Social Care</option>'
		html +='<option value="16">Catering / Hospitality / Events</option>'
		html +='<option value="7">Charity / Volunteering / Not For Profit</option>'
		html +='<option value="8">Construction</option>'
		html +='<option value="9">Customer Service / Call Centre</option>'
		html +='<option value="39">Data Entry</option>'
		html +='<option value="10">Education / Teaching</option>'
		html +='<option value="11">Engineering</option>'
		html +='<option value="12">Fashion / Design</option>'
		html +='<option value="13">Graphic Design / Creative Media / DTP</option>'
		html +='<option value="14">Health &amp; Safety / Fire Safety</option>'
		html +='<option value="15">Health / Beauty / Fitness</option>'
		html +='<option value="18">HR / Personnel</option>'
		html +='<option value="19">Insurance</option>'
		html +='<option value="20">IT / Telecomms</option>'
		html +='<option value="21">Languages / Translation</option>'
		html +='<option value="22">Legal</option>'
		html +='<option value="23">Leisure / Travel / Tourism</option>'
		html +='<option value="24">Logistics / Driving</option>'
		html +='<option value="25">Manufacturing</option>'
		html +='<option value="26">Marketing</option>'
		html +='<option value="27">Media / PR</option>'
		html +='<option value="28">Medical / Healthcare</option>'
		html +='<option value="40">Money Processors / Cash Counters</option>'
		html +='<option value="29">Public Sector</option>'
		html +='<option value="30">Reception</option>'
		html +='<option value="31">Recruitment</option>'
		html +='<option value="32">Retail</option>'
		html +='<option value="33">Sales</option>'
		html +='<option value="34">Secretarial / PA</option>'
		html +='<option value="35">Security</option>'
		html +='<option value="36">Shipping / Frieght Forwarding</option>'
		html +='<option value="17">Social Housing</option>'
		html +='<option value="37">Training</option>'
		html +='<option value="38">Web / New Media</option>'
		html +='</select>'
		html +='<label for="minRate">Minimum rate/per hour:</label>'
		html +='<input type="text" class="inputbox" value="5.80" name="minRate" id="minRate"> '
		html +='<p>Interested in Permanent Jobs?'
		html +='<input type="hidden" name="_acceptPermanent"><input type="checkbox" id="acceptPermanent" name="acceptPermanent"></p>'
		
		html +='<label for="cv">Upload Full CV (.doc, .docx, .rtf):*</label>'
		html +='<input type="file" name="cv" id="cv"><br/><br/>'
		html +='<img src="http://www.directtemping.com/jcaptcha/jpeg/image">'
		html +='<label for="response">Enter the security code:* (nb all codes are lower case with no spaces.)</label>'
		html +='<input type="text" id="response" value="" name="response" class="inputbox">'
		html +='<p><input type="hidden" name="_terms"><input type="checkbox" id="terms" name="terms">I confirm I am eligible to work in the UK and can provide '
		html +='all necessary documentation.*'
		html +='</p>'
		html +='<p>&nbsp;</p> <span align="center"><input type="submit" value="Register" name="submit" class="submit blue"></span>'
		html +='<p> By clicking "Register", you are indicating that you have read, understood, and agree to our <a href="http://www.directtemping.com/terms.htm">Terms &amp; Conditions</a> and <a href="http://www.directtemping.com/privacy.htm">Privacy Policy</a>.</p>'
		html+='<span style="float:right"><img src="http://www.directtemping.com/images/dt-powered-by.jpg"/></span>'	
		html +='</fieldset>'
		html +='</form>'
		html +='</div>'
		$("#dtFormPop").html(html);