PublicHome = function(data){
	
	var userList = data['randomUsers'];
	
	var pageNum = 1;
	var pageOneContainer;
	var pageTwoContainer;
	var recaptcha_response_field;
	var form;
	var loginErrorContainer;
	
	//signup controls
	var fullNameTxtbox;
	var emailTxtbox;
	var passwordTxtbox;
	var genderTxtbox;		
	var birthdayBox;
	var signUpErrorContainer;
	var submitBtn;
	var ajaxLoader = new AnkhAJAXLoader("");
	ajaxLoader.id = "AjaxLoader";
	var noPublicSignIn = false;
	
	init = function(){
		var audience = document.getElementById('Audience');
		var audienceTxt = document.createElement('div');
		audienceTxt.innerHTML = "What myTimeWall can do ";
		audienceTxt.style.marginBottom = "5px";
		audience.appendChild(audienceTxt);
		var audienceParts = new Array();
		
		var types = new Array({txt:"For you",url:"WhatWeDoForYou.php"},{txt:"For loving couples",url:"WhatWeDoForCouples.php"},{txt:"For newborn parents",url:"WhatWeDoForParents.php"});
		for(var i = 0;i < types.length;i++){
			var link = new AnkhLink(types[i]['txt'],null,types[i]['url'],null,true,{mouseout:"#1648D5",mouseover:"#55BBEA"});
			if(i != types.length - 1){
			link.style.marginRight = "10px";
			link.style.paddingRight = "10px";
			link.style.borderRight = "1px solid #C1CCB5";
			}
			audienceParts.push(link);
		}
		audience.appendChild(new AnkhDivBuilder(audienceParts));
								
		var loginContainer = document.getElementById("LoginContainer");
		createLoginControls(loginContainer);
		var signupContainer = document.getElementById("SignupContainer");		
		if (noPublicSignIn) {
			createNoSignIn(signupContainer);
		}else {
			createSignupControls(signupContainer);
		}
		
		var seeProfileHeader = document.createElement('div');
		seeProfileHeader.id = "SeeProfileHeader";
		seeProfileHeader.innerHTML = "See their TimeWalls";
		signupContainer.appendChild(seeProfileHeader);
		for(var i = 0;i < userList.length;i++){
			var pic = new FriendControl(userList[i]['profilePic_s'],"","Profile.php?id="+userList[i]['userId'],50,null,null,null,{width:50,content:userList[i]['fullNm']});
			pic.style.cssFloat = "left";
			pic.style.styleFloat = "left";
			pic.style.marginRight = "10px";
			signupContainer.appendChild(pic);
		}		
	};
	
	/**
	 * Purpose: Create the login controls container
	 * @param {Object} parent
	 */
	createLoginControls = function(parent){
		
		var tblStructure = new GenericTable(2,3);
		parent.appendChild(tblStructure.Table);
		
		var emailControl = new AnkhTextBoxWithContent("login[email]","Email");		
		emailControl.style.width = "140px";
		emailControl.tabIndex = "1";	
		tblStructure.insertIntoCell(0,0,emailControl);		
		var pwdControl = new AnkhPasswordWithContent("login[password]","Password",null,tblStructure.getCell(0,1),140);
		pwdControl.setTabIndex("2","3");	
		tblStructure.TBody.childNodes[1].style.verticalAlign = "top";		
		var rememberContainer = document.createElement('div');
		rememberContainer.className = "FloatLeft";
		tblStructure.insertIntoCell(1,0,rememberContainer);			
		var remMe = new AnkhCheckBox("login","remember");
		remMe.tabIndex = "4";		
		rememberContainer.appendChild(remMe);
		
				
		var remMeTxt = document.createTextNode("Remember me");
		rememberContainer.appendChild(remMeTxt);
						
		var forgetPwd = new AnkhLink("forgot password?",null,"ForgetPassword.php",null);
		tblStructure.insertIntoCell(1,1,forgetPwd);		
		tblStructure.getCell(1,1).style.textAlign = "right";
		
		var submitBtn = new AnkhSubmitButton("","login","#3f74c3");
		submitBtn.tabIndex = "5";
		tblStructure.getCell(0,2).rowSpan = "2";
		tblStructure.insertIntoCell(0,2,submitBtn);		
		
		var signUpErrorContainer = new AnkhFormErrorContainer(parent,"LoginError");				
	};
	
	/**
	 * Purpose: Create the sign up controls container
	 * @param {Object} parent
	 */
	createSignupControls = function(parent){
		
		form = new AnkhFormContainer("SignUpForm","Post","");
		if(parent != null){
			parent.appendChild(form);
		}else{
			document.body.appendChild(form);
		}
		EventUtil.addEventHandler(form,"submit",onSignupSubmit);
		
		pageOneContainer = document.createElement('div');
		form.appendChild(pageOneContainer);
		
		var itemList = new Array("Full Name: ","Email: ","Password: ","Gender: ","Birthday: ");
		var tblStructure = new TwoColumnsAnkhTable(itemList);
		tblStructure.table.id = "SignupTbl";
		pageOneContainer.appendChild(tblStructure.table);
				
		fullNameTxtbox = new AnkhInput("signup[fullname]","");
		emailTxtbox = new AnkhInput("signup[email]","");
		passwordTxtbox = new AnkhPwdInput("signup[password]","");
		genderList = new Array("-","Male","Female");
		genderTxtbox = new AnkhSelect(genderList,"signup[gender]","-");	
		genderTxtbox.style.width = "120px";	
		birthdayBox= new AnkhCalendarControl(tblStructure.tBody.childNodes[4].childNodes[1],true,true,true,false,"signup[dob]","-");
		tblStructure.insertIntoRow(0,fullNameTxtbox);
		tblStructure.insertIntoRow(1,emailTxtbox);
		tblStructure.insertIntoRow(2,passwordTxtbox);
		tblStructure.insertIntoRow(3,genderTxtbox);				
		
		pageTwoContainer = document.createElement('div');
		pageTwoContainer.className = "Hidden";
		form.appendChild(pageTwoContainer);
		
		var verificationMechanism = document.createElement('div');
		verificationMechanism.innerHTML = "Last step before your registration completes...";
		pageTwoContainer.appendChild(verificationMechanism);
		
		createCaptcha(pageTwoContainer);
		
		var backLinkContainer = document.createElement('div');
		backLinkContainer.style.marginTop = "10px";
		pageTwoContainer.appendChild(backLinkContainer);
		var backLink = new AnkhLink("< back",onBackClicked,"#",null);		
		backLinkContainer.appendChild(backLink);
						
		var submitBtnContainer = document.createElement('div');
		submitBtnContainer.id = "SignupBtnContainer";
		form.appendChild(submitBtnContainer);
		submitBtnContainer.appendChild(ajaxLoader);
		submitBtn = new AnkhSubmitButton("","Sign up","#ffba01");
		submitBtn.id = "SignupBtn";		
		submitBtnContainer.appendChild(submitBtn);
				
		signUpErrorContainer = new AnkhFormErrorContainer(form,"SignUpError");
	};
	
	/**
	 * Purpose: Create the Captcha container. Warning: Do not rename the id and class starting with recaptcha
	 * @param {Object} parent
	 */
	createCaptcha = function(parent){
		
		var capatcha_Container = document.createElement('div');
		capatcha_Container.id = "capatcha_Container";
		
		parent.appendChild(capatcha_Container);
						
		var incorrectDiv = document.createElement('div');
		incorrectDiv.className = "recaptcha_only_if_incorrect_sol";
		incorrectDiv.style.color = "#BE0000";
		incorrectDiv.innerHTML = "Incorrect. Please try again.";
		capatcha_Container.appendChild(incorrectDiv);
		
		var cannotRead = document.createElement('div');
		cannotRead.style.marginTop = "10px";
		cannotRead.style.paddingBottom = "10px";
		cannotRead.className = "recaptcha_only_if_image";
		cannotRead.innerHTML = "Enter both words below, separated by a space. <br /> Can't read the words? ";
		capatcha_Container.appendChild(cannotRead);
		
		var getAnotherCaptacha = new AnkhLink("Try different word",function x(){Recaptcha.reload();},"#");
		cannotRead.appendChild(getAnotherCaptacha);		
		var or = document.createTextNode(" or ");
		cannotRead.appendChild(or);		
		var getAudioCaptacha = new AnkhLink("an audio captcha",function x(){Recaptcha.switch_type('audio');},"#");		
		cannotRead.appendChild(getAudioCaptacha);
		
		var cannotHear = document.createElement('div');
		cannotHear.style.marginTop = "10px";
		cannotHear.style.paddingBottom = "10px";
		cannotHear.className = "recaptcha_only_if_audio";
		cannotHear.innerHTML = "Can't understand this audio? ";
		capatcha_Container.appendChild(cannotHear);
		
		var getAnotherCaptacha = new AnkhLink("Try different audio",function x(){Recaptcha.reload();},"#");
		cannotHear.appendChild(getAnotherCaptacha);		
		var or = document.createTextNode(" or ");
		cannotHear.appendChild(or);		
		
		var getTextCaptacha = new AnkhLink("a text captcha",function x(){Recaptcha.switch_type('image');},"#");
		getTextCaptacha.className = "recaptcha_only_if_audio";
		cannotHear.appendChild(getTextCaptacha);
		
		var recaptcha_image = document.createElement('recaptcha_image');
		recaptcha_image.id = "recaptcha_image";
		
		recaptcha_image.style.marginLeft = "10px";
		capatcha_Container.appendChild(recaptcha_image);
		
		var instructions = document.createElement('div');
		instructions.style.marginTop = "10px";
		capatcha_Container.appendChild(instructions);
		
		var enterTextWords = document.createElement('span');
		enterTextWords.className = "recaptcha_only_if_image";
		enterTextWords.innerHTML = "Enter the 2 words:";
		instructions.appendChild(enterTextWords);
		
		var enterAudioWords = document.createElement('span');		
		enterAudioWords.className = "recaptcha_only_if_audio";
		enterAudioWords.innerHTML = "Enter the numbers you hear:";
		instructions.appendChild(enterAudioWords);
		
		recaptcha_response_field = new AnkhInput("recaptcha_response_field","");
		instructions.appendChild(recaptcha_response_field);
		
		Recaptcha.create("6LfciQQAAAAAACMJj-OHFcdTQHhocGLLo2YiS2-U",
			"capatcha_Container", {
			   theme: "custom"			   
		});
	};
	/**
	 * Purpose: Handle the event when the submit button is clicked. 
	 * When it is page 1, display page 2. When it is page 2, send AJAX call to verify if Captcha result is true
	 */
	onSignupSubmit = function(){
		if (pageNum == 1) {
			EventUtil.getEvent().preventDefault();
			validateSignUp();			
		}
		else {
			var url = "Captcha/sendCaptcha.php";
			var parameterObj = {recaptcha_response_field:recaptcha_response_field.value,recaptcha_challenge_field:Recaptcha.get_challenge(),recaptcha_response_field:Recaptcha.get_response()};			
			new AnkhAjax(url,"post",parameterObj,captchaReceive,ajaxLoader);
			EventUtil.getEvent().preventDefault();			
		}
	};
	
	/**
	 * Purpose: Validate if the first step of the user's sign up is of valid value
	 */
	validateSignUp = function(){
		ajaxLoader.style.visibility = "visible";
		submitBtn.disabled = true;
		var url = "php/validate_registration.php";
		var parameterObj = $('SignUpForm').serialize(true);		
		new AnkhAjax(url,"post",parameterObj,validateSignUpSuccess,ajaxLoader);
		
	};	
	/**
	 * Purpose: Upon successful validation 
	 * @param {Object} transport
	 */
	validateSignUpSuccess= function(transport){
		
		var result = transport.responseText.evalJSON(true);		
		if (result.success == true) {
			pageNum = 2;		
			pageTwoContainer.className = "Visible";
			pageOneContainer.className = "Hidden";
			signUpErrorContainer.hide();
			recaptcha_response_field.focus();
		}else{			
			signUpErrorContainer.show(result.errMsg);
		}
		submitBtn.disabled = false;
		ajaxLoader.style.visibility = "hidden";
	};
	/**
	 * Purpose: AJAX handler when Captacha returns the result. If fails, result is reloaded.
	 * @param {Object} transport
	 */
	captchaReceive = function(transport){		
		var result = transport.responseText.evalJSON(true);
		if (result.success == true) {
			form.submit();
		}else{
			Recaptcha.reload();
		}
		ajaxLoader.style.visibility = "hidden";
	};
	/**
	 * Purpose: This handles the back button is clicked.
	 */
	onBackClicked = function(){
		pageNum = 1;			
		pageTwoContainer.className = "Hidden";
		pageOneContainer.className = "Visible";				
	};
	
	createNoSignIn = function(parent){
		var container = document.createElement('div');
		container.id = "NoSignIn";		
		parent.appendChild(container);
		
		var contentParts = new Array();
		contentParts[0] = "<p>We are only allowing invited users into myTimeWall. </p>Find out a little more about us and how we can be your time capsule at the ";
		contentParts[1] = new AnkhLink("about us",null,"about.php","");
		contentParts[2] = "&nbsp;page.<p>If you have received an invitation to myTimeWall from your friend, click on the link in the invitation letter to register.</p><p>Already part of us? Log in at the top.</p>";
		contentParts[3] = "If you wish to be part of us, you can now email us at ";
		contentParts[4] = new AnkhLink("contactus@myTimeWall.com",null,"mailto:contactus@myTimeWall.com");
		contentParts[5] = "&nbsp;for an invitation.";
		var content = new AnkhDivBuilder(contentParts);
		container.appendChild(content);
		
	};
	
	init();
};