function preLoad(){

	// display the loading div
	Qdisplay("preloader");
	
	// create an array of the images, and an array for the loadedimages
	imageArray = new Array;
	preImages = new Array()
	
	//ADD IMAGES TO ARRAY
	
	// load important images first
	bg = new Image();bg.src = imageDir + "bg.jpg";
	imageArray[0] = imageDir + "hover.png";
	// add question images to array
	for(i =1; i <=10; i++){
		
		imageArray[i] = imageDir + "q" + i + ".png"; 
	}
	// add answer images to array
	j = 10;
	for(i =1; i <=10; i++){
		j++; imageArray[j] = imageDir + "q" + i + "_a.png"; 
		j++; imageArray[j] = imageDir + "q" + i + "_b.png"; 
		j++; imageArray[j] = imageDir + "q" + i + "_c.png"; 
	}	
	// add other images to array
	i = imageArray.length;
	imageArray[i] = imageDir + "lets_see.png"; i++; 
	imageArray[i] = imageDir + "results.png"; i++;	
	imageArray[i] = imageDir + "challenge.png"; i++;
	imageArray[i] = imageDir + "sent.png"; i++;	

	
	// loop through the image array, creating image objects
	for (i = 0; i < imageArray.length; i++) { 
		preImages[i] = new Image()
		preImages[i].src = imageArray[i];
		checkLoad();
	}
	//document.write(imageArray);
	
}
function checkLoad(){
	// check to see if all images are loaded
	if(preImages.length ==imageArray.length){
		setTimeout ("start()", 3000 );
		return;
	}
		
}
function start() {
		
	// hide the preloader div
	Qhide("preloader");
	
	// hide the results elements if coming from play again
	Qhide("scorebox");
	Qhide("playAgain");
	Qhide("friend");
	Qhide("friendForm");
	Qhide("closePopup");
	document.getElementById("shr").style.marginLeft = "295px"; // move the logo back
	
	
	// set the image for the background
	document.getElementById("title").style.backgroundImage = "url(" + imageDir + "bg.jpg)";
	
	// set question number to 0
	qnum =0;
	// set the score to 0
	score =0;
	
	// call the question function to display the first question
	q();
		
}
function q() {
	
	// add one count to question number
	qnum = qnum +1;
	
	if(qnum >1){
		// turn the blue dot off
		document.getElementById("ans" + ansID).style.backgroundImage = "none";
	}
		
	if(qnum <=10){	
		// set the class for the answer boxes
		document.getElementById("ansWrap").className = "ansWrap" + qnum;
		document.getElementById("ansA").className = "ans" + qnum + "A";
		document.getElementById("ansB").className = "ans" + qnum + "B";
		document.getElementById("ansC").className = "ans" + qnum + "C";
		
		// hide popup box and any links that may be displayed inside
		Qhide("popup");
		Qhide("passport");
		Qhide("contraception");
		
		// display the buttons
		Qdisplay("ansWrap");
		
		// select the question image and display the question	
		document.getElementById("q").style.backgroundImage = "url(" + imageDir + "q" + qnum + ".png)";
		Qdisplay("q");
	}else{
		// if question number 11, call the end function
		end();
	}
}
function a(ans) {
	
	//set the ans background hover image
	ansID = ans.toUpperCase();
	document.getElementById("ans" + ansID).style.backgroundImage = "url(" + imageDir + "hover.png)";

	// call the add point function
	addPoints(qnum, ans);
	
	// call the popup function	
	popup(qnum, ans);
	
}
function popup(qnum, ans){
	
	// select the popup image and display the popup box
	document.getElementById("popup").style.backgroundImage = "url(" + imageDir + "q" + qnum + "_" + ans + ".png)";
	Qdisplay("popup");
	Qdisplay("next");
	
	// display the passport link	
	if(qnum ==2 && ans =='c'){
		Qdisplay("passport");	
	}
	// display the contraception link	
	if(qnum ==9 && ans =='c'){
		Qdisplay("contraception");	
	}

}
function addPoints(qnum, ans){
	
	// add points for questions
	
	if(qnum ==1){
		if(ans =='a'){score = score + 0;}
		if(ans =='b'){score = score + 3;}
		if(ans =='c'){score = score + 2;}
	}
	if(qnum ==2){
		if(ans =='a'){score = score + 3;}
		if(ans =='b'){score = score + 2;}
		if(ans =='c'){score = score + 0;}
	}
	if(qnum ==3){
		if(ans =='a'){score = score + 3;}
		if(ans =='b'){score = score + 2;}
		if(ans =='c'){score = score + 0;}
	}
	if(qnum ==4){
		if(ans =='a'){score = score + 1;}
		if(ans =='b'){score = score + 3;}
		if(ans =='c'){score = score + 1;}
	}
	if(qnum ==5){
		if(ans =='a'){score = score + 1;}
		if(ans =='b'){score = score + 2;}
		if(ans =='c'){score = score + 3;}
	}
	if(qnum ==6){
		if(ans =='a'){score = score + 3;}
		if(ans =='b'){score = score + 1;}
		if(ans =='c'){score = score + 2;}
	}
	if(qnum ==7){
		if(ans =='a'){score = score + 2;}
		if(ans =='b'){score = score + 1;}
		if(ans =='c'){score = score + 3;}
	}
	if(qnum ==8){
		if(ans =='a'){score = score + 2;}
		if(ans =='b'){score = score + 3;}
		if(ans =='c'){score = score + 0;}
	}
	if(qnum ==9){
		if(ans =='a'){score = score + 2;}
		if(ans =='b'){score = score + 3;}
		if(ans =='c'){score = score + 0;}
	}
	if(qnum ==10){
		if(ans =='a'){score = score + 3;}
		if(ans =='b'){score = score + 2;}
		if(ans =='c'){score = score + 0;}
	}
		
}
function end(){
	
	// hide the buttons
	Qhide("ansWrap");	
	// hide popup box
	Qhide("popup");
	
	// select the finish image and set to display display with liink on get score
	document.getElementById("q").style.backgroundImage = "url(" + imageDir + "lets_see.png)";
	Qdisplay("q");
	Qdisplay("getscore");
	
	document.getElementById("linksBox").style.top = "280px";
}
function getscore(){
	
	// hide the getscore link
	Qhide("getscore");
	
	// set the results bg image
	document.getElementById("q").style.backgroundImage = "url(" + imageDir + "results.png)";
	// Write the score to score div and display 
	document.getElementById("scorebox").innerHTML = "<h1>" + score + "</h1>";
	Qdisplay("scorebox");
	
	// display the email friend and play again links
	Qdisplay("playAgain");
	Qdisplay("friend");
	document.getElementById("shr").style.marginLeft = "40px";
	
}
function friend(){
	// Write the score to score div and display 
	
	document.getElementById("scorebox").innerHTML = "<h1>" + score + "</h1>";
	
	// position and display the challenge a friend box
	document.getElementById("popup").style.backgroundImage = "url(" + imageDir + "challenge.png)";
	// display the popup box with form inside
	Qdisplay("popup");
	Qdisplay("friendForm");
	// Write the score to score div and display 
	document.getElementById("challengeScore").innerHTML = "<h2>" + score + "</h2>";
	
	Qdisplay("challengeScore");
	
	
	//document.getElementById("popup").style.top = "0px";
	
}
function emailSent(score){
	
	Qhide("ansWrap");
	Qhide("friendForm");
	Qhide("next");
	
	Qdisplay("q");
	Qdisplay("popup");
	Qdisplay("sentLinks");
	Qdisplay("closePopup");
	Qdisplay("scorebox");
	// display the email friend and play again links
	Qdisplay("playAgain");
	Qdisplay("friend");
	document.getElementById("shr").style.marginLeft = "40px";
	
	// Write the score to score div and display 
	document.getElementById("scorebox").innerHTML = "<h1>" + score + "</h1>";
	
	// set the image for the background
	document.getElementById("title").style.backgroundImage = "url(" + imageDir + "bg.jpg)";
	document.getElementById("q").style.backgroundImage = "url(" + imageDir + "results.png)";
	document.getElementById("popup").style.backgroundImage = "url(" + imageDir + "sent.png)";

}
function closePopup(){
	Qhide("popup");	
	Qhide("sentLinks");
	Qhide("closePopup");
}


function hoveron(button){
	
	// display the hover image for button
	document.getElementById("ans" + button).style.backgroundImage = "url(" + imageDir + "hover.png)";
}
function hoveroff(button){
	
	// if the pop up is NOT displayed, hover off when mouse leaves button
	if(document.getElementById("popup").style.display == "none"){
		document.getElementById("ans" + button).style.backgroundImage = "none";
	}
}
function Qhide(ID){
	document.getElementById(ID).style.display = "none";
}
function Qdisplay(ID){
	document.getElementById(ID).style.display = "block";
}

// Form handling
function setpassScoreValue(){ 
	document.friendForm.score.value = score; 
}  
function validateForm(){
	
	valid = true;
	// put email into var for tetsting
	var email = document.friendForm.email.value;

	//alert(document.friendForm.score.value);
	
	// validate yourName
	if ( document.friendForm.yourName.value == "" ){
		alert ( "Please enter your name." );
		valid = false;
	// validate friendName
	}else if ( document.friendForm.friendName.value == "" ){
		alert ( "Please enter your friends name." );
		valid = false;
	// validate email
	}else if ( document.friendForm.email.value == "" ){
		alert ( "Please enter your friends email address." );
		valid = false;
	}else if (!validateEmail(email)){
		alert ( "Please enter a valid email address." );
		valid = false;
	}
	
	return valid;
}
function validateEmail(email){
   var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
   return emailPattern.test(email);
 }