/* 
	Cheap Visitors Form Validation & User Input Feedback
*/

	var originalmsg = "";
	var regexphtml = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
	var regexpurl = /http(s?)\:\/\/([\w\-]+)/i;
	var regexpurl2 = /http(s?)\:\/\//i;
	var regexdomain = /\.(com|net|org|uk|biz|info)/i;
	var regexpurldot = /http(s?)\:\/\/[\w\-]+\.[\w\-]+/i;
	$(document).ready(function(){
		/* When the page is ready for DOM manipulation...	*/
		
		$("#sitename").keyup(function(){updateprice();});
		$("#webaddress").keyup(function(){updateprice();});
		$(".updateit").change(function(){updateprice();});
		
		$("#campaign").change(function(){updateprice();});
		originalmsg = $("#errormsg").html();
		// When the form is submitted, we intercept the submission
		$("#orderbtn").click(function(){
			return validateform();
		});
		
		
	
		/*
		///////////////////////////////
		PAGE BEHAVIOUR
		///////////////////////////////

		AJAX (should change page as user types or clicks)

		Campaign - Selected amount on dropdown should affect total price in base bar (prices above). Also affects basket contents

		Description - Should replace "Example Text Here" and link should open new frame test window to Web Address

		Web Address - Should replace http://www.example.com


		Checkboxes - Each should add $1.00 to total price in base bar and add to Extras

		0 Extras = Clear space, for example - 10,000 Visitors

		1 Extra = Non-plural, for example - 10,000 Visitors + 1 Extra

		2 to 6 Extras = Plural, for example - 10,000 Visitors + 2 Extras  or  10,000 Visitors + 6 Extras

		Bold Checkbox - Makes example text (advert description) bold / strong

		Highlight Checkbox - Changes advert background colour to #FFFBE9 and border colour to #F6C500
		
		
		*/

		// Live preview of Advert
		
		// NB we've wrapped <span> tags around the various elements with the IDs exampletext, exampleurl, exampletable


		// insert a button if the user has JS enabled
		$('div.updatebutton').html('<input type="button" class="update" onmouseover="this.className=\'buttonOn\'" onmouseout="this.className=\'buttonOff\'" value="Update Total" />');
		
		/*$('#prsubmit').attr("disabled", "disabled");
		$('#confirm').change(function() {
			if ($('#confirm').is(":checked")) {
				$('#prsubmit').removeAttr("disabled");
			} else {
				$('#prsubmit').attr("disabled", "disabled");
			}
		});*/
		
		$('#campaign2').change(function() {
			updateCampaignPrice();
			var cid = $('#campaign2').val();
			switch(parseInt(cid)) {
				case 1:
					ordertext = "1000";
					break;
				case 2:
					ordertext = "2000";
					break;
				case 3:
					ordertext = "5000";
					break;				
				case 4:
					ordertext = "10,000";
					break;
				case 5:
					ordertext = "50,000";
					break;
			}
			$('#viscount').text(ordertext);
		});
		
		$('#disptimeC').change(function() {
			var secs = $('#disptimeC').val();
			$('#seccount').text(secs);
			updateCampaignPrice();
		});
		
		$('#boldtxt').change(function() {
			updateDisplayPrice();
		});
		$('#hlbox').change(function() {
			updateDisplayPrice();
		});
		
		$('#disptime').change(function() {
			updateDisplayPrice();
		});
		$('#boldtxtC, #hlboxC, #sexC, #verifiedC, #age1C, #age2C, #region1, #region2, #region3, #region4, #region6, #region7, #region8, #region9, #region10').change(function() {
			updateCampaignPrice();
		});
		
		$('#age1, #age2').change(function() {
			if ($("#age1").val() > 0 && $("#age2").val() == 0) {
				$('#errormsg').html("<strong>Please select an upper age limit</strong>");
				$('#errortbl').show();
			} else if ($("#age1").val() == 0 && $("#age2").val() > 0) {
				$('#errormsg').html("<strong>Please select a lower age limit</strong>");
				$('#errortbl').show();
			} else if ($('#age1').val() > $('#age2').val()) {
				$('#errormsg').html("<strong>Lower age limit must be less than upper age limit</strong>");
				$('#errortbl').show();
			} else {
				$('#errortbl').hide();
			}
		});
	});
	
	function updateCampaignPrice() {
		var currentprice = 0;
		var extras = 0;
		var additions = 0;
		var campaign = $('#campaign2').val();
		var time = $('#disptimeC').val();
		
		if ($('#boldtxtC').is(":checked")) {
			additions = additions + 0.50;
			extras++;
		}
		if ($("#hlboxC").is(":checked")) {
			additions = additions + 0.50;
			extras++;
		}
		if ($("#verifiedC").is(":checked")) {
			additions = additions + 1;
			extras++;
		}
		
		if ($("#sexC").val() > 0) {
			additions = additions + 1;
			extras++;
		}
		
		if ($("#age1C").val() > 0 && $("#age2C").val() == 0) {
			$('#errormsg').html("<strong>Please select an upper age limit</strong>");
			$('#errortbl').show();
		} else if ($("#age1C").val() == 0 && $("#age2C").val() > 0) {
			$('#errormsg').html("<strong>Please select a lower age limit</strong>");
			$('#errortbl').show();
		} else if ($('#age1C').val() > $('#age2C').val()) {
			$('#errormsg').html("<strong>Lower age limit must be less than upper age limit</strong>");
			$('#errortbl').show();
		} else if ($("#age1C").val() > 0 && $("#age2C").val() > 0) {
			additions = additions + 1;
			extras++;
			$('#errortbl').hide();
		} else {
			$('#errortbl').hide();
		}
		
		if ($("#region1").is(":checked") || $("#region2").is(":checked") || $("#region3").is(":checked") || $("#region4").is(":checked") || $("#region6").is(":checked") || $("#region7").is(":checked") || $("#region8").is(":checked") || $("#region9").is(":checked") || $("#region10").is(":checked")) {
			additions = additions + 1;
			extras++;			
		}
		
		if ($('#boldtxtC').is(":checked")) {
			$("#exampletext").css("font-weight","900");
		} else {
			$("#exampletext").css("font-weight","normal");
		}
				
		if ($("#hlboxC").is(":checked")) {
			$("#exampletable").css("background-color","#FFFBE9").css("border-color","#F6C500");
		} else {
			$("#exampletable").css("background-color","#EDF5FB").css("border-color","#73AEDB");
		}
		
		if (time == 15) {
			switch(parseInt(campaign)) {
			case 1:
				currentprice = 9.99;
				break;
			case 2:
				currentprice = 18.99;
				break;
			case 3:
				currentprice = 44.99;
				break;				
			case 4:
				currentprice = 84.99;
				break;
			case 5:
				currentprice = 399.99;
				break;
			}
		} else if (time == 30) {
			switch(parseInt(campaign)) {
			case 1:
				currentprice = 19.99;
				break;
			case 2:
				currentprice = 37.99;
				break;
			case 3:
				currentprice = 89.99;
				break;				
			case 4:
				currentprice = 169.99;
				break;
			case 5:
				currentprice = "Contact Us";
				break;
			}
		} else {
			switch(parseInt(campaign)) {
			case 1:
				currentprice = 39.99;
				break;
			case 2:
				currentprice = 75.99;
				break;
			case 3:
				currentprice = 179.99;
				break;				
			case 4:
				currentprice = 339.99;
				break;
			case 5:
				currentprice = "Contact Us";
				break;
			}
		}
		var newtotal = currentprice + additions;
		$('#newtotal').text(newtotal);
		
		var extratxt = '';
		if (extras > 0) {
			extratxt = "+ " + extras + " Extra";
		}
		if (extras > 1) {
			extratxt = extratxt + "s";
		}
		
		$('#extracount').text(extratxt);
	}
	
	function updateDisplayPrice() {
		var currentprice = 0;
		var additions = parseInt($('#additions').val());
		
		var time = $('#disptime').val();
		var cost = $('#prevtotal').text();
		var campaign = $('#campaign').val();
		
		if ($('#boldtxt').is(":checked")) {
			additions = additions + 0.50;
		}
		if ($("#hlbox").is(":checked")) {
			additions = additions + 0.50;
		}
		$("#boldtxt").change(function() {
			if ($('#boldtxt').is(":checked")) {
				$("#exampletext").css("font-weight","900");
			} else {
				$("#exampletext").css("font-weight","normal");
			}
		});
		
		$('#hlbox').change(function() {
			if ($("#hlbox").is(":checked")) {
				$("#exampletable").css("background-color","#FFFBE9").css("border-color","#F6C500");
			} else {
				$("#exampletable").css("background-color","#EDF5FB").css("border-color","#73AEDB");
			}
		});
			
			if (time == 15) {
				switch(parseInt(campaign)) {
				case 1:
					currentprice = 9.99;
					break;
				case 2:
					currentprice = 18.99;
					break;
				case 3:
					currentprice = 44.99;
					break;				
				case 4:
					currentprice = 84.99;
					break;
				case 5:
					currentprice = 399.99;
					break;
				}
			} else if (time == 30) {
				switch(parseInt(campaign)) {
				case 1:
					currentprice = 19.99;
					break;
				case 2:
					currentprice = 37.99;
					break;
				case 3:
					currentprice = 89.99;
					break;				
				case 4:
					currentprice = 169.99;
					break;
				case 5:
					currentprice = "Contact Us";
					break;
				}
			} else {
				switch(parseInt(campaign)) {
				case 1:
					currentprice = 39.99;
					break;
				case 2:
					currentprice = 75.99;
					break;
				case 3:
					currentprice = 179.99;
					break;				
				case 4:
					currentprice = 339.99;
					break;
				case 5:
					currentprice = "Contact Us";
					break;
				}
			}
		var newtotal = currentprice + additions;
		$('#newtotal').text(newtotal);
	}

	function validateform() {
			// We create a flag to signify the status of the validation routine:
			var theflag = false;
			
			/*	
			
			We've added an ID of "orderform" to the form we're interested in...
			We've also wrapped the current text message inside a span called "errormsg" which we'll dynamically replace
			with the new text according to the user input. We'll set up a reference to this element for easy access: 
			
			*/
			
			var message = $("#errormsg");
			/* 
 			///////////////////////////////
 			USER INPUT VALIDATION
			///////////////////////////////
			We have a series of criteria the form must meet to be submitted:
			1. Description - No HTML allowed (< > markup, etc) - "Error: Description contains HTML"
			2. Description - No web addresses (http:// .com, etc) - "Error: Description contains web address" 
			3. Description - Should be more than 10 characters - "Error: Description under 10 characters"
 
			4. Web Address - Should start http:// or https:// - "Error: Web Address must start http:// or https://"
			5. Web Address - Should have something after http:// or https:// - "Error: Web Address missing"
			6. Web Address - Must contain at least one dot - "Error: Web Address invalid"

			*/
			
			var textdesc = $("#sitename").val();
			// Added id="sitename" to site name field
			if (regexphtml.test(textdesc)) {
				// there is HTML in the field which is not allowed = FAIL
				// Add a class to the element to indicate it's causing the error
				$("#sitename").addClass("error");
				if ($("#errtbl tr").attr("class") == "erryellow") {
					$("#errtbl tr").removeClass("erryellow").addClass("errred");
				}
				// Update message with error text
				message.html("<strong>HTML not allowed in Site Description</strong>");
				// Set flag to true to indicate validation failed
				theflag = true;
			}
			
			if(textdesc.length<10) {
				$("#sitename").addClass("error");
				if ($("#errtbl tr").attr("class") == "erryellow") {
					$("#errtbl tr").removeClass("erryellow").addClass("errred");
				}
				message.html("<strong>Site Description should be 10+ characters</strong>");
				theflag = true;
			} else if (regexpurl.test(textdesc)) {
				$("#sitename").addClass("error");
				if ($("#errtbl tr").attr("class") == "erryellow") {
					$("#errtbl tr").removeClass("erryellow").addClass("errred");
				}
				message.html("<strong>Site Description cannot be a URL</strong>");
				theflag = true;
			} else if (regexdomain.test(textdesc)) {
				$("#sitename").addClass("error");
				if ($("#errtbl tr").attr("class") == "erryellow") {
					$("#errtbl tr").removeClass("erryellow").addClass("errred");
				}
				message.html("<strong>Site Description cannot be a URL</strong>");
				theflag = true;
			}
			if (!theflag) {
				// To this point validation is good, so remove any existing error class assigned to tested field
				$("#sitename").removeClass("error");
				if ($("#errtbl tr").attr("class") == "errred") {
					$("#errtbl tr").removeClass("errred").addClass("erryellow");
				}
			}
			
			var url = $("#webaddress").val();
			// Added id="webaddress" to real name field
			if(!regexpurl.test(url)) {
				// Add a class to highlight the error
				$("#webaddress").addClass("error");
				if ($("#errtbl tr").attr("class") == "erryellow") {
					$("#errtbl tr").removeClass("erryellow").addClass("errred");
				}
				// Update the message field
				message.html("<strong>Web Address must begin http:// or https://</strong>");
				// Set flag to true as validation failed
				theflag = true;
			} else {
				if (url!=="http://"){
					if(url.length<10) {
						$("#webaddress").addClass("error");
						if ($("#errtbl tr").attr("class") == "erryellow") {
							$("#errtbl tr").removeClass("erryellow").addClass("errred");
						}
						message.html("<strong>Web Address is incomplete</strong>");
						theflag = true;				
					}
					if(!regexpurldot.test(url)) {
						$("#webaddress").addClass("error");
						if ($("#errtbl tr").attr("class") == "erryellow") {
							$("#errtbl tr").removeClass("erryellow").addClass("errred");
						}
						message.html("<strong>Web Address is invalid</strong>");
						theflag = true;
					} 			
				} else {
					$("#webaddress").addClass("error");
					if ($("#errtbl tr").attr("class") == "erryellow") {
						$("#errtbl tr").removeClass("erryellow").addClass("errred");
					}
					message.html("<strong>Web Address is incomplete</strong>");
					theflag = true;	
				}
			}
			
			var daily = $("#sitedescription").val();
			if(daily=='' || daily<100 || isNaN(parseInt(daily)) ) {
				$("#sitedescription").addClass("error");
				if ($("#errtbl tr").attr("class") == "erryellow") {
					$("#errtbl tr").removeClass("erryellow").addClass("errred");
				}
				message.html("<strong>Daily Max should be 100+</strong>");
				theflag = true;
			}
			
			if (theflag) {
				// Our validation has failed, so we prevent submission of the form.
				return false;								
			} else {
				// Our validation has been passed, so we allow the form to be submitted
				// Clean up validation pointers...
				$("#sitename").removeClass("error");
				$("#webaddress").removeClass("error");
				if ($("#errtbl tr").attr("class") == "errred") {
					$("#errtbl tr").removeClass("errred").addClass("erryellow");
				}
				message.html(originalmsg);
				return true;
			}		
		
	}
	
	function updateprice() {
			// alert("Validation");
			var costpercheckbox = 1;
			var currentprice = 0;	
			var ordertext = "";
			var counter = 0;
			// Get campaign selection
			var campaign = $("#campaign option:selected").attr("value");
			switch(parseInt(campaign)) {
				case 1:
					ordertext = "1000 Visitors";
					currentprice = 9.99;
					break;
				case 2:
					ordertext = "2000 Visitors";
					currentprice = 18.99;
					break;
				case 3:
					ordertext = "5000 Visitors";
					currentprice = 44.99;
					break;				
				case 4:
					ordertext = "10,000 Visitors";
					currentprice = 84.99;
					break;
				case 5:
					ordertext = "50,000 Visitors";
					currentprice = 399.99;
					break;
			}
			

			// Count up the number of selected checkboxes
			$(".updateit:checked").each(function(){
				counter++;
			});
			
			// Add the price per checkbox ticked
			// if checkboxes have been ticked, add this to the description
			if (counter>0) {
				currentprice = currentprice + (counter*costpercheckbox);
				ordertext = ordertext + " + "+counter+" Extra";
				if (counter>1) { ordertext+="s"; }
			}
			
			// UPDATE ALL THE VARIOUS BITS OF TEXT AROUND THE PAGE
			$("#ordersummary").html(ordertext);
			$("#orderprice").html(currentprice);
			$("#exampletext").html($("#sitename").val().replace(regexphtml,""));
			$("#exampleurl").html($("#webaddress").val())
			$("#exampletext").css("font-weight","500");
			$("#exampletable").css("background-color","#EDF5FB").css("border-color","#73AEDB");
			if ($("#bold").is(":checked")) {
				$("#exampletext").css("font-weight","900");
			}
			if ($("#highlighted").is(":checked")) {
				$("#exampletable").css("background-color","#FFFBE9").css("border-color","#F6C500");
			}	
			// Validate the form
			validateform();
		}
	