//function defined to preload images
jQuery.preloadImages = function() {
  for(var i = 0; i<arguments.length; i++) jQuery("<img>").attr("src", arguments[i]);
}

//function to get query variable;
function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  }
}

//function to reset form 
function resetForm(id) {
	$('#'+id).each(function(){
	        this.reset();
	});
}

//jquery
$(document).ready(function(){
    
	//image rollover script
	//attachRollOverEvent = function(imageId){
	//		$(imageId).mouseover( function(){ $(this).attr("src", $(this).attr("src").split('.gif').join('-mo.gif')) } );
	//		$(imageId).mouseout( function(){ $(this).attr("src", $(this).attr("src").split('-mo.gif').join('.gif')) } );
	//	}
	//	attachRollOverEvent("img.rollover");
	
	var popper;
	popper = getQueryVariable("p");
	if (popper=="taf") {
		resetForm("tafform");
		$("#tafholder").show();
		$("#tafthankholder").hide();
		$("#modal_taf").show();
	}
	
	$.preloadImages("i/box_right.png","i/box_wrong.png","i/bg_modal.png","i/bg_form.png","i/bg_warning.png", "i/bg_skytower.png");
	
	$("#btn_takequiz").click(function() {
		//reset form before opening
		$("img#q1result").attr("src","i/box_none.jpg");
		$("img#q2result").attr("src","i/box_none.jpg");
		$("img#q3result").attr("src","i/box_none.jpg");
		$("#successholder").hide();
		$("#warning").hide();
		$("#scoreholder").show();
		$("#formholder").hide();
		$("input[name='q1']").attr("disabled",false);
		$("input[name='q2']").attr("disabled",false);
		$("input[name='q3']").attr("disabled",false);		
		resetForm("quizquestionform");
		resetForm("registerForm");
		//open quiz box
		$("#modal_quiz").show();
	});
	$("#close_quizform").click(function() {
		$("#modal_quiz").hide();
	});
	$("#btn_taf").click(function() {
		resetForm("tafform");
		$("#tafholder").show();
		$("#tafthankholder").hide();
		$("#modal_taf").show();
	});
	$("#btn_success2").click(function() {
		resetForm("tafform");
		$("#tafholder").show();
		$("#tafthankholder").hide();
		$("#modal_quiz").hide();
		$("#modal_taf").show();
	});
	$("#close_taf").click(function() {
		$("#modal_taf").hide();
	});	
	
	
	//populate select fields
	function generateOptions(startnum, endnum) {
		var tmpOpt;
		if (startnum < endnum) {
			for (i=startnum; i<=endnum; i++) tmpOpt = tmpOpt + "<option value='"+i.toString()+"'>"+i.toString()+"</option>"
		} else {
			for (i=startnum; i>=endnum; i--) tmpOpt = tmpOpt + "<option value='"+i.toString()+"'>"+i.toString()+"</option>"
		}
		return tmpOpt;
	}
	var strDay = "<option value=''>DD</option>";
	var strMonth = "<option value=''>MM</option>";
	var strYear = "<option value=''>YYYY</option>";
	strDay = strDay + generateOptions(1, 31);
	$("#dobday").html(strDay);
	strMonth = strMonth + generateOptions(1, 12);
	$("#dobmonth").html(strMonth);
	strYear = strYear + generateOptions(1991, 1909);
	$("#dobyear").html(strYear);
	
	//quiz script
	function validateQuiz() {
		var score=0;
		
		ans1 = $("input[name='q1']:checked").val();
		ans2 = $("input[name='q2']:checked").val();
		ans3 = $("input[name='q3']:checked").val();
		
		if (ans1 == "B") score++;
		if (ans2 == "C") score++;
		if (ans3 == "A") score++;
		
		if(score == 3) {
			$("#formholder").show();
			$("#scoreholder").hide();
			$("input[name='q1']").attr("disabled",true);
			$("input[name='q2']").attr("disabled",true);
			$("input[name='q3']").attr("disabled",true);
		} else {
			$("#formholder").hide();
			$("#scoreholder").show();
			$("input[name='q1']").attr("checked","");
			$("input[name='q2']").attr("checked","");
			$("input[name='q3']").attr("checked","");
			$("#scoreholder p.text").html("You've not answered all the questions correctly. Please try again.");
		}
	}
	
	function numQuizAnswered() {
		var qcount = 0;
		if ($("input[name='q1']:checked").val() != null) qcount ++;
		if ($("input[name='q2']:checked").val() != null) qcount ++;
		if ($("input[name='q3']:checked").val() != null) qcount ++;
		
		if (qcount == 1) return "2 questions left";
		if (qcount == 2) return "1 question left";
		if (qcount == 3) return "No question left";
	}

	function allAnswered() {
		return $("input[name='q1']:checked").val() != null && $("input[name='q2']:checked").val() != null && $("input[name='q3']:checked").val() != null;
	}
	
	$("input[name='q1']").click(function() {
		$("#scoreholder p.text").html(numQuizAnswered());
		if (allAnswered())	validateQuiz(); 
	});
	
	$("input[name='q2']").click(function() {
		$("#scoreholder p.text").html(numQuizAnswered());
		if (allAnswered())	validateQuiz();	});
	
	$("input[name='q3']").click(function() {
		$("#scoreholder p.text").html(numQuizAnswered());
		if (allAnswered())	validateQuiz();	});
	
	
	//validate details form + submit
	var validator = $("#registerForm").validate({
			rules: {
				pname: "required",
				pemail: {
					required: true,
					email: true
				},
				pcontact: {
					required: true,
					digits: true
				},
				pnric: "required",
				pdob_day: "required",
				pdob_month: "required",
				pdob_year: "required",
				paddress1: "required",
				pcode: "required"
			},
			messages: {
				pname: "Please enter your name",
				pemail: {
					required: "Please enter your email",
					email: "Please enter a valid email"
				},
				pcontact: {
					required: "Please enter your contact number",
					digits: "Please enter a valid contact number"
				},
				pnric: "Please enter your NRIC number",
				pdob_day: "Please enter your birth day",
				pdob_month: "Please enter your birth month",
				pdob_year: "Please enter your birth year",
				paddress1: "Please enter your address",
				pcode: "please enter your postalcode"
			},
			wrapper: "li",
			errorContainer: "#warning",
			errorLabelContainer: "#warning ul",
			submitHandler: function() {
				//form.submit();
				var dataString = $("#registerForm").serialize();
				$.ajax({  
					type: "GET",  
					url: "processform.asp",  
					data: dataString,  
					error: function() {
						alert("Error in submitting, please try again");
					},
					success: function() {  
						$("#successholder").show();
					}  
				}); 
				//alert(dataString);
			}
	});
	
	//validate details form + submit
	$.validator.addMethod("hasFriends", function() { 
		var checkfriend1 = ($("input[name='f1name']").attr("value") != "");
		var checkfriend2 = ($("input[name='f2name']").attr("value") != "");
		var checkfriend3 = ($("input[name='f3name']").attr("value") != "");
		var overall = (checkfriend1 || checkfriend2 || checkfriend3);
		//alert(overall);
		return overall;
	}, "Please enter a friend's name");
	
	var validator2 = $("#tafform").validate({
			debug: true,
			groups: {
				friendnames: "f1name f2name f3name"
			},
			rules: {
				yname: "required",
				yemail: {
					required: true,
					email: true
				},
				f1name: {
					hasFriends:true
				},
				f2name: {
					hasFriends:true
				},
				f3name: {
					hasFriends:true
				},
				f1email: {
					required: {
						depends: function() {
							return ($("input[name='f1name']").attr("value") != "");
						}
					},
					email: true
				},
				f2email: {
					required: {
						depends: function() {
							return ($("input[name='f2name']").attr("value") != "");
						}
					},
					email: true
				},
				f3email: {
					required: {
						depends: function() {
							return ($("input[name='f3name']").attr("value") != "");
						}
					},
					email: true
				}
			},
			messages: {
				yname: "Please enter your name",
				yemail: {
					required: "Please enter your email",
					email: "Please enter a valid email"
				},
				f1email: {
					email: "Please enter a valid email for your friend (1st row)"
				},
				f2email: {
					email: "Please enter a valid email for your friend (2nd row)"
				},
				f3email: {
					email: "Please enter a valid email for your friend (3rd row)"
				}
			},
			wrapper: "li",
			errorContainer: "#warningtaf",
			errorLabelContainer: "#warningtaf ul",
			submitHandler: function() {
				//form.submit();
				var dataString = $("#tafform").serialize();
				//alert(dataString);
				$.ajax({  
					type: "GET",  
					url: "sendfriend.asp",  
					data: dataString,  
					error: function() {
						alert("Error in submitting, please try again");
					},
					success: function() {  
						$("#tafholder").hide();
						$("#tafthankholder").show();
					}  
				}); 
				
			}
	});
	
});