<?php
	include('views/_header.tpl.php');
	
	if (isset($msg)) {
		//echo "<center><b>$msg</b></center><br /><br />";
		$msg = htmlentities(strip_tags($msg));
	}

	if (isset($_GET['reg_ok'])) {
		$msg = 'Registration Successful. <a href="/auth/login" style="color:#00a0ff;">Login...</a>';
	}

	if (isset($_GET['msg'])) {
		$msg = htmlentities(strip_tags($_GET['msg']));
	}
?>

<style type="text/css">
	html {
		/*background:#000 url('/static/images/lbstartup.jpg') no-repeat center center !important;*/
		background:#eee;
		background-size: cover;
		background-color: #eee !important;
		/*overflow:hidden !important;*/
		height:100%;
	}
	div.spacer { padding-top:57px; }
	label {
		font-size: 12px;
	}
	a, a:active, a:visited, a:link { 
		color:#3698d7; /* 2778ff */
	}
	a:hover {
		color: #40b6ff;
	}
	input[type="submit"] {
		color: #eee;
		font-size:16px;
		font-weight:300;
		background: #000;
		height: 48px;
		border-radius: 50px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
		-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
		-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	}
	input[type="submit"]:hover {
		background:#2493fe;
		border:1px solid #2493fe;
	}
	input[type="text"], input[type="password"] {
		margin-top: 7px;
		font-size:17px;
		/*border:1px solid rgba(255,255,255,.3) !important;*/
		border: 0px solid #eee !important;
		background: #fff;
		padding:10px;
		height:28px;
		color: #222;
		border-radius: 8px;
		-moz-border-radius: 8px;
		-webkit-border-radius: 8px;
	}
	input[type='checkbox'] {
		transform: scale(1.5);
	} 	
	::placeholder {
		/* Chrome, Firefox, Opera, Safari 10.1+ */
		color: #bbb;
		opacity: 1; /* Firefox */
	}

	:-ms-input-placeholder {
		/* Internet Explorer 10-11 */
		color: #bbb;
	}

	::-ms-input-placeholder {
		/* Microsoft Edge */
		color: #bbb;
	}
	.cleanlink a, .cleanlink a:active, .cleanlink a:visited {
		text-shadow:0px 1px 0px rgba(0,0,0,.4);
		box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px !important;
		-webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px !important;
		-moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px !important;		
	}
	#errordiv a,
	#errordiv a:active,
	#errordiv a:visited {
		background: #21bb29;
		color: #eee;
		border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px;
		padding: 3px 10px;
		font-weight: 800;
		box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
		-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
		-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	}

	#errordiv a:hover {
		color: #fff;
		background: #26e12f;
	}	
	
	.clearref a,
	.clearref a:active,
	.clearref a:visited {
		display:block;
		max-width:100px;
		margin:0 auto;
		font-size:12px;
		background:#eee;
		padding:5px 15px;
		border:1px solid #ddd;
		border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px;
		box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
		-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
		-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	}
	.clearref a:hover {
		background:#2778ff;
		color:#fff;
	}
	
	h1 {
		font-size: 22px;
		line-height:27px;
		font-weight:600;
		border-bottom:0px solid #ccc;
		padding-bottom:10px;
		letter-spacing: 2px;
	}
	.simpletext {
		max-width:85%;
		font-size:19px; line-height:27px;	
	}
	.videoWrapper {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 0px;
		height: 0;
	}
	.videoWrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.desktop_ref {
		display:block;
	}
	.mobile_ref {
		display: none;
	}
		
/* ########################################################################## */
/*                               MOBILE STYLES                                */
/* ########################################################################## */

/******************************************************************************/ 
/***************        LARGE DESKTOP DISPLAY SCREENS         *****************/
/******************************************************************************/ 
/* So, iMac is 2554 */
/*@media screen and (min-width:  1367px), screen and (max-width:  3200px) { */
@media (min-width: 2554px) and (max-width: 3200px) {
	.container_12 {
		width:100%;
		max-width:1700px; margin:0 auto;
	}
}	

/******************************************************************************/ 
/***************      VERY LARGE DESKTOP DISPLAY SCREENS      *****************/
/******************************************************************************/ 
/* This is the 2nd screen connected to the iMac */
/*@media screen and (min-width:  1367px), screen and (max-width:  3200px) { */
@media (min-width: 1922px) and (max-width: 2553px) {
	.container_12 {
		width:100%;
		max-width:1700px; margin:0 auto;
	}
}	

/******************************************************************************/ 
/***************      VERY LARGE DESKTOP DISPLAY SCREENS      *****************/
/******************************************************************************/ 
/* This is the 2nd screen connected to the iMac */
/*@media screen and (min-width:  1367px), screen and (max-width:  3200px) { */
@media (min-width: 1920px) and (max-width: 1921px) {
	.container_12 {
		width:100%;
		max-width:1700px; margin:0 auto;
	}
}	
	
/******************************************************************************/ 
/***************        LARGE DESKTOP DISPLAY SCREENS         *****************/
/******************************************************************************/ 

/*@media screen and (min-width:  1367px), screen and (max-width:  3200px) { */
@media (min-width: 1441px) and (max-width: 1919px) {
	.container_12 {
		width:100%;
		max-width:1700px; margin:0 auto;
	}
}		

/******************************************************************************/ 
/***************        MACBOOK AIR DISPLAY SCREENS         *****************/
/******************************************************************************/ 

/*@media screen and (min-width:  1367px), screen and (max-width:  3200px) { */
@media (min-width: 1367px) and (max-width: 1440px) {
	.container_12 {
		width:100%;
		max-width:1500px; margin:0 auto;
	}
}	

/******************************************************************************/ 
/***************      SMALLER THAN FULL SCREEN MACBOOK        *****************/
/******************************************************************************/ 

@media (min-width: 1364px) and (max-width: 1366px) {

}	
	
/******************************************************************************/ 
/***************       MACBOOK AIR SCREENS AND 1280 X 800     *****************/
/******************************************************************************/ 

@media (min-width: 1280px) and (max-width: 1363px) {

}		

/******************************************************************************/ 
/********************             Larger iPads           **********************/
/******************************************************************************/ 

	@media (min-width: 1024px) and (max-width: 1279px) {

	}
		
	/* Landscape tablet to iPads */
	@media (min-width: 980px) and (max-width: 1023px) {

	}

	/* Portrait tablet to landscape and desktop */
	@media (min-width: 768px) and (max-width: 979px) {
		.blockit {
			display:block;
			width: 100%;
			-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
			border-right:0px;
			padding:0 !important;
		}
		.grid_4 {
			margin: 0 !important; padding:0 !important; border-left:0px;
		}

	}

	/* Landscape phone to portrait tablet */
	@media (max-width: 767px) {
		.blockit {
			display:block;
			width: 100%;
			-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
			border-right:0px;
			padding:0 !important;
		}
		.grid_4 {
			margin: 0 !important; padding:0 !important; border-left:0px;
		}		
	}

	/* Landscape phones and down */
	@media (max-width: 586px) {
		#bizinputs { max-width:330px !important; }
		.simpletext { 
			max-width:100%;
			padding:0 15px;
			-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
		}
		.desktop_ref {
			display:none;
		}
		.mobile_ref {
			display: block;
		}
	}

	/* Landscape phones and down */
	@media (max-width: 480px) {
		.groupinvite a {
			color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,.4);
			background:#00cf0f;
			border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px;
			padding:5px 25px;
			font-size:18px;
			height:40px;
			line-height:40px;
			font-weight:600;
			display:inline-block;
			margin:10px 0;
			text-align:center;
		}
	}	

	/* Older phones with super small screens */
	@media (max-width: 320px) {

	}		
</style>

<img src="<?php if (!empty($website_options['mobile_background'])) : ?>/<?= $website_options['mobile_background'] ?><?php else : ?>/static/images/mobbg.jpg<?php endif; ?>" style="position:absolute; background:cover; object-fit:cover; top:0; left:0; bottom:0; right:0; min-height:100%; height:100vh; width: auto; min-width:100%; padding-top:0px !important; padding-bottom:0px !important; margin-bottom:0px !important; z-index:-999;" alt="BG" />

 <div class="home-feature-category" style="background:#f0f0f0; border:none; overflow:hidden;">
	 <div class="container_12 clearfix" style="<?= $hidesignup ?>" style="">
	
		<div class="titletext" style="line-height:50px; text-align:center; color:#222; margin:0px 0;">
			 
			<a href="/"><img src="/<?= $website_options['footer_logo'] ?>" alt="Home"
			style="max-width:350px; width:75%; padding:0 10px; margin-top:30px; 
			margin-bottom:0px"></a>

		</div>
		<div class="grid_12 blockit" style="background:none; border-left:0px solid #ccc; 
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
		
			<div class="simpletext" style="max-width:500px; padding:20px 15px 0; margin:0 auto;">
				<div class="mobile_ref">
					<?php
						if (isset($mobile_message)) {
							echo "<div id='errordiv' style='line-height:25px; text-align:left;
									background:none; color:#222; padding:0px 15px 5px;
									margin:0px 5px 10px 5px; font-weight:300; font-size:15px;'>
									$mobile_message
								</div>";
						}
					?>
				</div>

				<div class="desktop_ref">
					<?php
						if (isset($desktop_message)) {
							echo "<div id='errordiv' style='line-height:25px; text-align:left;
									background:none; color:#222; padding:0px 15px 5px;
									margin:0px 5px 10px 5px; font-weight:300; font-size:15px;'>
									$desktop_message
								</div>";
						}
					?>
				</div>
				<div class="clear"></div>
			</div>
			<!-- SIMPLE TEXT ENDS -->
	
		<!-- removed id="form" | but might need to add this: action="" enctype="multipart/form-data" -->
		<form method="post" id="signup-form" action="" enctype="multipart/form-data" 
			action="" enctype="multipart/form-data"
			style="color:#000; text-align:center; width:98%; 
			max-width:390px; margin:0 auto !important; -webkit-box-sizing: border-box; 
			-moz-box-sizing: border-box; box-sizing: border-box;">
					
				<h1 style="margin-top:0px; margin-bottom:5px; padding:0;">
					Sign Up free
				</h1>	
				
				<?php if (!$_GET['ref']) : ?>
					<div style="font-size:16px; margin-bottom:0px;">
							Enter referral code (optional)	
					</div>
											
					<input type="text" id="userefcode" name="refby" 
					placeholder="Enter referral code (optional)" style="width:85%;" maxlength="23" />
				<?php elseif ($_GET['ref']) : ?>	
					<span style="font-size:14px;">Referred eh? Their code is loaded below:</span><br />
					<input type="text" id="userefcode" name="refby" 
					value="<?= $_GET['ref'] ?>" maxlength="23"
					placeholder="Enter referral code (optional)" style="width:85%;" />
				<?php endif; ?>		
							
				<br />
				
				<a href='/auth/join?clearref' style='font-size:12px; color:#777'>Clear Referral</a>
				<br />
				
				<div style="display:inline-block; width:50px; border-top:1px solid #ccc; 
				margin-bottom:5px;"></div>
				<div style="display:inline-block; width:50px; font-size:13px;">&nbsp;</div>
				<div style="display:inline-block; width:50px; border-top:1px solid #ccc; 
				margin-bottom:5px;"></div>
				<br />
				
				<span style="font-size:15px">Choose a unique @username/referral code:</span><br />
				<input name="refcode" id="ref" class="noSpacesField" maxlength="23"
				type="text" placeholder="Type username (without @)" 
				style="margin-top:7px; width:85%;" />
				<br />
				<!-- removed: text-shadow:0px -1px 1px rgba(0,0,0,.5) -->
				<div id="username_availability_result"
				style="height:25px; line-height:25px; font-size:15px; margin-bottom:5px;"></div>
				
				<input name="usertype" id="" type="hidden" placeholder="Consumer" value="Consumer" 
				style="width:85%;" />
				
				<input name="list_group" id="" type="hidden" placeholder="ListGroup (Optional)" 
				style="width:85%;" value="<?php if (isset($_GET['grp'])) { echo $list_group; } ?>" />
				
				<input name="group_id" id="" type="hidden" placeholder="" 
				style="width:85%;" value="<?php if (isset($_GET['grp'])) { echo $_GET['grp']; } ?>" />
				
				<!--<input name="owner" id="" type="hiddenxxx" placeholder="" 
				style="width:85%;" value="<?php if (isset($_GET['ref'])) { echo $_GET['grp']; } ?>" />-->

				<label>Business Name (optional):</label>
				<input name="occupation_at" id="" type="text" placeholder="Business Name" 
				style="width:85%;" />
				<br /><br />
				
				<!--<label>Business Type:</label><br />-->
				<select name="bus_type" id="bizinputs" class="txt" style="width:100%; max-width:353.5px;
				height: 48px; font-size:15px; font-weight:300;
				border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;
				line-height: 35px; padding: 5px; border: 1px solid #eee; background: #fff;">				
					<option value="">Select Business Type (optional)</option>
					<option value="FT">FantasyTrivia, LLC</option>
					<option value="LLC">LLC</option>
					<option value="Corp">Corporation</option>
					<option value="SCorp">S Corp</option>
					<option value="SoleProp">Sole Proprietor</option>
					<option value="Other">Other</option>		
				</select>
				<br /><br />
				
				<select name="acct_type" id="bizinputs" class="txt" style="width:100%; 
				max-width:353.5px; height: 48px; font-size:15px; font-weight:300;
				border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;
				line-height: 35px; padding: 5px; border: 1px solid #eee; background: #fff;">
					<option value="">Select Account Type (optional)</option>
					<option value="CollegeRep">MSU Student</option>
					<option value="CollegeRep">College Rep</option>
					<option value="CollegeRep">Creator</option>
					<option value="Artist">Artist</option>
					<option value="MusicianBand">Musician/Band</option>
					<option value="Blogger">Blogger</option>
					<option value="ClothingBrand">Clothing/Brand</option>
					<option value="Community">Community</option>
					<option value="Digital Creator">Digital Creator</option>
					<option value="Education">Education</option>
					<option value="Entrepreneur">Entrepreneur</option>
					<option value="HealthBeauty">Health/Beauty</option>
					<option value="Editor">Editor</option>
					<option value="Writer">Writer</option>
					<option value="Personal Blog">Personal Blog</option>
					<option value="Product/Service">Product/Service</option>
					<option value="Gamer">Gamer</option>
					<option value="Restaurant">Restaurant</option>
					<option value="BeautyCosmetic">Beauty, Cosmetic & Personal Care</option>
					<option value="Grocery Store">Grocery Store</option>
					<option value="Photographer">Photographer</option>
					<option value="Shopping & Retail">Shopping & Retail</option>
					<option value="Video Creator">Video Creator</option>
					<option value="Dance Studio">Dance Studio</option>
					<option value="Gymnastics">Gymnastics</option>
					<option value="Default">Other</option>
					<!--<option value="Default">Default</option>-->
				</select>
				<br /><br />
					
				<label>First or Full Name:</label>
				<input name="name" id="txt_name" type="text" placeholder="full name" 
				style="width:85%;" />
				
				<br /><br />
				<input type="text" name="email" placeholder="your email" id="email" 
				style="width:85%;" />
				<br /><br />
				<input type="text" name="phone" placeholder="phone (optional): ###-###-####" 
				id="phone" maxlength="12" onblur="formatPhoneNumber()" style="width:85%;" />
				 <br /><br />
				<input type="password" name="password" placeholder="password" id="password" 
				style="width:75%; float:left; margin-left:17px" />
				
				<input type="checkbox" name="lastname" value="1"
				style="display:none !important" tabindex="-1" autocomplete="off">
				
				<img src="/static/system/icons/eye_icon_closed.png" id="eye" alt="Show" 
				align="right" style="height:15px; width:25px; margin-top:25px; margin-left:-12px; 
				margin-right:10px" onclick="myFunction()" />
				<div class="clear"></div>
				<br />
                <!--<input type="hidden" name="account_type" value="Person" />-->
                <span style="text-align:left; font-size:14px;">
               	<!-- removed name="check_terms" -->
				<input id="check_terms" class="txt" type="checkbox" 
				style="width:25px; margin-bottom:1px" />
				I Agree to the <a href="/terms" style="">Terms</a>.
				</span>
				<br /><br />			
				<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
				<input type="submit" value="Register" id="signup-submit" 
				class="btn-o register-trigger"
				style="width:80%; padding-left:10px; padding-right:10px; margin:7px 0;" />
				
				<br /><br />
				<div style="display:inline-block; width:50px; border-top:1px solid #ccc; 
				margin-bottom:5px;"></div>  
				<div style="display:inline-block; width:50px; font-size:13px;"> <i>or</i> </div>
				<div style="display:inline-block; width:50px; border-top:1px solid #ccc; 
				margin-bottom:5px;"></div>

                <br /><br />
				<span style="font-size:18px;">Already have an account?</span> <a href='/auth/login' 
				style='font-size:18px;'>Login &raquo;</a>
				<br /><br />
				<a href="/" style='font-size:17px;'>&laquo; Back to Home</a>
				<br /><br /><br /><br /><br />
			</form>
			
		</div><!-- GRID 4 -->
		<div class="clear"></div>
		<br />
	</div><!-- CONTAINER 12 -->
</div><!-- HOME FEATURE -->

<!-- ////////////////////////////////////////////////////////////// -->
<script>
	$(document).ready(function() {
		
		$(function() {
			$('.noSpacesField').bind('input', function() {
				$(this).val(function(_, v) {
					return v.replace(/\s+/g, '');
				});
			});
		});	
	}); 
	
	function myFunction() {
	  //alert(window.document.eye.src);
	  var x = document.getElementById("password");
	  var eye = document.getElementById("eye");	
	  if (x.type === "password") {
	    x.type = "text";
		eye.src = "/static/system/icons/eye_icon.png";
	  } else {
	    x.type = "password";
		eye.src = "/static/system/icons/eye_icon_closed.png";
	  }
	};
	
	// DOCUMENT READY ENDS		
	///////////////////////////////////////////////////////////
		
	function validateEmail($email){
		var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
		return emailReg.test( $email );
	}		
	
	// SIMPLER PHONE FORMATTING // USE maxlength="12" in the input tag
	$('#phone').keydown(function(e){
	             var key = e.charCode || e.keyCode || 0;
	             $text = $(this); 
	             if (key !== 8 && key !== 9) {
	                 if ($text.val().length === 3) {
	                     $text.val($text.val() + '-');
	                 }
	                 if ($text.val().length === 7) {
	                     $text.val($text.val() + '-');
	                 }
	             }
	             return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
	});

	// FORMAT PHONE NUMBERS
	function formatPhoneNumber() {
	  	var phone = $("#phone").val();
		var cleaned = ('' + phone).replace(/\D/g, ''); // 3125551234
		//alert(cleaned.length);

		if(cleaned.length < 10) {
	        alert('Looks like you entered ' + cleaned.length + ' digits, instead of 10. Please enter your phone number like ###-###-####');
	    } 
		return null;
	}	
	
	//IF THE USER ENTERS A REFERRAL CODE
	var code = $("#userefcode").val();
	
	// if there's already a referral code in the input field
	if (code) {
		check_org();
	}

	$('form').on('keyup', '#userefcode', function(){	  
		//e.preventDefault();
		check_org();
	});

	// once the user starts entering something, do this
	function check_org(){
		var code = $("#userefcode").val();
		
		//alert('Code: ' + code);
		
//		var ref_length = $("#userefcode").val().length;
//		if (ref_length === 0) {
//			$("#userefcode").css("background", "rgba(0,0,0,.4);");
//		} 
		//alert('Length: ' + ref_length);

		$.ajax({
		  url: "/auth/validatePC",
		  type: "POST",
		  data: {c: code},
		  success: function(d) {
				//alert('Typing..');
				//alert(d);
				if (d > 0) {
				  //alert('We found your Referral Code!');	
				  $("#userefcode").val(code); 
				  $("#userefcode").css("background", "#27C427");
				  //$("#refmsg").html("Your Organization Name looks valid!");
				  //$('#username_availability_result').html('<span style="color:#29CE29; font-weight:bold;">' + ref + '</span>' + ' is Available!');
				} else {
					//alert('No');
				  //alert('Ooops we could not find that Organization.');
				  $("#userefcode").css("background", "#cd1000");
				  //$("#refmsg").html("Continue typing until the background turns green, which indicates your Company Name is valid.");
				} 
				return false;
		  }// success
		}); // ajax
		return false;
    }
	
	// NOW, LET'S CHECK TO SEE IF THE USER'S CUSTOM REFERRAL CODE ALREADY EXISTS
	//when button is clicked or keyup
	$("#ref").keyup(function(){  
		var user_slug = $("#ref").val().toLowerCase().replace(/[^a-zA-Z0-9 _]/g,'');

//		var user_slug = $('input[name="refcode"]').val();
//		user_slug = user_slug.toLowerCase().replace(/[^a-zA-Z0-9 _]/g,'');
		$('input[name="refcode"]').val(user_slug);	
		
		//the min chars for ref
		var min_chars = 3;

		//result texts
		var characters_error = 'Minimum amount of chars is 3';
		var checking_html = 'Checking...';

		// $('#check_username_availability').click(function(){  
		//run the character number check  
		if($('#ref').val().length < min_chars){  
			//if it's bellow the minimum show characters_error text '  
			$('#username_availability_result').html(characters_error);  
		}else{  
			if ($('#ref').val().length > 23) {
				alert('Oooops, 23 characters is the limit. Keep it short and sweet!');
			}
			//else show the cheking_text and run the function to check  
			$('#username_availability_result').html(checking_html);  
			check_availability();  
		}  
	});  

	// CHECK TO SEE IF THE CUSTOM REF IS AVAILABLE
	//function to check ref availability  
	function check_availability(){  
		//get the ref  
		var ref = $("#ref").val().toLowerCase().replace(/[^a-zA-Z0-9 _]/g,''); 
		//var ref1 = isValidEmailAddress(reffield); 
		
		if(ref) {
			$.ajax({
			  url: "/auth/checkRef",
			  type: "POST",
			  data: {ref: ref},
			  success: function(result) {
				if (result == 1) {
					$('#username_availability_result').html('<span style="color:#29CE29; font-weight:bold;">' + ref + '</span>' + ' is Available!');  	
				}
				else {
					$('#username_availability_result').html('Sorry, <span style="color:#ff0000; font-weight:bold;">' + ref + '</span>' + ' is not Available');
				}
				return false;
			  }
			});
			return false;
		}			
  
		//use ajax to run the check  
		//$.post("check_username.php", { username: username },  
		//	function(result){  
				//if the result is 1  
		//		if(result == 1){  
					//show that the username is available  
		//			$('#username_availability_result').html(username + ' is Available!');  
		//		}else{  
					//show that the username is NOT available  
		//			$('#username_availability_result').html(username + ' is not Available');  
		//		}  
		//});  
	  
	}   		
</script>

<!--<script src="https://www.google.com/recaptcha/api.js"></script>-->
<script src="https://www.google.com/recaptcha/api.js?render=6LczIiAqAAAAAKj5ZaJ8rHmoKFeg5d8JQIJZERPG"> </script>

<script>

	window.onload = function() {
		$('#signup-submitXXX').click(function ($event) {
			$event.preventDefault();
			//alert('Sign up submit...Click detected...');
			
			if (! $("#txt_name").val().length) {
				$event.preventDefault();
				alert('You must enter your first name or full name.');
				return false;
			}	
			
			//$('#signup-form').submit();
		});
		
		$('#check_terms').click(function () {
			//alert('Terms checked!');
			grecaptcha.ready(function() {
				grecaptcha.execute('6LczIiAqAAAAAKj5ZaJ8rHmoKFeg5d8JQIJZERPG', {action: 'submit'}).then(function(token) {
					$('#g-recaptcha-response').val(token);
					//$('#signup-form').submit();
				});
			});
		});
		$('#signup-submit').click(function (e) {
			//alert('Sign up submit...Click detected... captcha version');
			//$('#signup-form').submit();
			//alert('Signup form submitted');
			//alert('Submit button clicked...');
//			if (!document.getElementById('signup-form').checkValidity()) {
//				alert('Not valid...');
//				//return;
//			} else {
//				alert('Valid');
//			}

			e.preventDefault();
			
			if (! $("#ref").val().length) {
				e.preventDefault();
				alert('You must enter a username.');
				return false;
			}
			
			if (! $("#txt_name").val().length) {
				e.preventDefault();
				alert('You must enter your first name or full name.');
				return false;
			}

			if (! $("#email").val().length) {
				e.preventDefault();
				alert('You must enter an email addressssss.');
				return false;
			}

			var email = $("#email").val();
			//alert("Email: " + email);

			if ( !validateEmail(email)) {
				alert(email + ' does not appear to be a valid Email Address. Please double-check it...');
				return false;
			} else {
				if (/\.(com|net)\/?$/i.test(email)) {
					//alert('Email entered: ' + email);
				} else {
					alert('FYI - Your email did not end in .com. If your email is correct, ignore this message.');
				}
			}

			if (! $("#password").val().length) {
				e.preventDefault();
				alert('You must enter a password.');
				return false;
			}

			if ($("#password").val().length < 7) {
				e.preventDefault();
				alert('You must enter a password that is at least 7 characters or more.');
				return false;
			}

			if (! $("#check_terms").is(":checked")) {
				e.preventDefault();
				var confirm_box = confirm('You must check the Terms checkbox.');
				return false;
			}
			//return true;

			grecaptcha.ready(function() {
				grecaptcha.execute('6LczIiAqAAAAAKj5ZaJ8rHmoKFeg5d8JQIJZERPG', {action: 'submit'}).then(function(token) {
					// add token value to form
					//document.getElementById('g-recaptcha-response').value = token;
					$('#g-recaptcha-response').val(token);
					
					$('.loader').show();
				 
					$('#signup-form').submit();
				});
			});
		});
	}
 </script>

<?php include('views/_footer_m.tpl.php'); ?>