<?php
global $website_options;
include('views/_header.tpl.php');
?>

<script type="text/javascript">
	$(document).ready(function() {
		//	$({ Counter: 0 }).animate({
		//		Counter: $('.mybalance').val()
		//	}, {
		//		duration: 1000,
		//		easing: 'swing',
		//		step: function() {
		//			$('.animatedbalance').text(Math.ceil(this.Counter).toLocaleString('en'));
		//		}
		//	});
		var totalLoaded = $('.mybalance').val();
		$({ Counter: 0 }).animate({
			Counter: totalLoaded
		}, {
			duration: 1000,
			easing: 'swing',
			step: function() {
				//$('.animatedcoins').text(Math.ceil(this.Counter).toFixed(2).toLocaleString('en'));
				$('.animatedbalance').text(Math.ceil(this.Counter*100)/100).toLocaleString('en');
			},
			complete : function() {
				$('.animatedbalance').text(parseFloat(totalLoaded, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());
			}
		});

		var totalTickets = $('.myloyaltytix').val();
		$({ Counter: 0 }).animate({
			Counter: totalTickets
		}, {
			duration: 1000,
			easing: 'swing',
			step: function() {
				//$('.animatedcoins').text(Math.ceil(this.Counter).toFixed(2).toLocaleString('en'));
				//$('.animatedloyaltytix').text(Math.ceil(this.Counter*100)/100).toLocaleString('en');
				$('.animatedloyaltytix').text(Math.ceil(this.Counter).toLocaleString('en'));
			},
			complete : function() {
				$('.animatedloyaltytix').text(Math.ceil(this.Counter).toLocaleString('en'));
				//$('.animatedloyaltytix').text(parseFloat(totalTickets, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());
			}
		});

		//	$('#add-to-cart').submit(function() {
		//		//alert('Yes');
		//		$.ajax({
		//			type: 'POST',
		//			url: $(this).attr('action'),
		//			dataType: 'json',
		//			success: function(json) {
		//				alert('Redirect');
		//				window.location.href = "https://joincrossfireiq.com/checkout";
		//			}
		//		})
		//		return false;
		//	});
	});
</script>

<style type="text/css">
	html {
		/*overflow: hidden !important;*/
	}
	body {
		background: url('/static/bgmount.jpg') no-repeat;
		background-size: cover;
	background-position: center center;
		background-color: #000 !important;
		height: 100%;
		/*overflow: hidden;*/
	}

	.btn-o, .btn-oo a {
		color: #FFF;
		text-transform: uppercase;
		font-weight: 700;
		background: #0297CF;
		color: #fff;
		border: 1px solid #0088bb;
		padding: 15px 10px;
		width: 150px;
		display: inline-block;
		font-family: 'Open Sans', Montserrat,Arial,sans-serif;
		font-size: 14px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
	}

	.btn-o:hover {
		background: #00a5e4;
	}

	input[type="text"], input[type="number"] {
		height: 30px;
		background: #eee;
		color: #000;
		font-weight: 700;
		text-shadow: 0px 1px 0px #fff;
		font-size: 15px;
		-webkit-appearance: textfield;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		border: 0px !important;
		padding: 10px;
	}
	.links a {
		color: #ccc;
	}
	.links a:hover {
		color: #fff;
	}
	.half {
		float: left;
	width: 50%;
	display: inline-block;
	overflow: hidden;
	}
	.logintext {
		margin-bottom: 7px;
	}
	.balancediv {
		width: 50%;
	}

	/* ################################### */
	/*            MOBILE STYLES            */
	/* ################################### */

	/* Portrait tablet to landscape and desktop */
	@media (min-width: 980px) and (max-width: 1024px) {
		.logintext {
			margin-bottom: 7px;
		}
	}

	/* Portrait tablet to landscape and desktop */
	@media (min-width: 768px) and (max-width: 979px) {

	}

	/* Landscape phone to portrait tablet */
	@media (max-width: 767px) {
		.logintext {
			margin-bottom: 7px;
		}
	}

	/* Landscape phones and down */
	@media (max-width: 586px) {
		.spacer {
			padding-top: 56px !important;
		}
		.logintext {
			margin-bottom: 7px;
		}
		.half {
			float: none;
	width: 100%;
	display: block;
	overflow: hidden;
	padding-bottom: 35px;
		}
		#leftbalancediv {
			margin-bottom: 0px;
		}
		.balancediv {
			width: 100%;
	display: block;
		}
	}

	/* Landscape phones and down */
	@media (max-width: 480px) {
		.logintext {
			margin-bottom: 7px;
		}
	}

	/* Older phones with super small screens */
	@media (max-width: 320px) {
		.logintext {
			margin-bottom: 7px;
		}
	}
</style>

<div class="mobileheaderfiller" style="display:none; position:absolute; height:40px; background:#000; width:100%;">
	&nbsp;
</div>
<div class="home-feature-category" style="border:none; color:#000; background:none;
font-family:Montserrat,'Open Sans',Raleway,Helvetica,Verdana,sans-serif;">
	<div class="container_12 clearfix">
		<div class="grid_12 marked-category">

			<div id="loader-container">
				<div id="loader"></div>
			</div>

			<!--<a href="#" style="color:#aaa; display:block;">LINKED TITLE
			<i class="fa fa-angle-left" aria-hidden="true"></i></a>-->

			<center><a href="/"><img src="/<?= $website_options['website_logo'] ?>"
				alt="<?= $website_options['short_title'] ?>"
				onerror="this.src='/static/system/base_pages_logo.png'"
				style="max-width:350px; width:85%; margin-bottom:0px"></a></center>

			<div class="logintext" style="text-align:center; font-size:22px; line-height:28px;">
				<div style="line-height:28px; padding:10px 0 10px; max-width:90%; margin:0 auto 5px;
				color:#fff;">
					<?php
					if ($_SESSION['loggedin'] && $_SESSION['user_id']) {
					} else {
					} ?>
				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>

			<br /><br /><br /><br />

			<div style="border-bottom:1px solid #ccc; max-width:200px; margin:0 auto"></div>

			<div class="links" style="color:#aaa; text-align:center; max-width:90%; margin:0 auto;
				line-height:40px;">

				<a href="/" style="font-size:17px;">
					<i class="fa fa-home"
				aria-hidden="true"></i> HOME</a> &nbsp;|&nbsp;

				<a href="/faqs" style="font-size:17px;">
					<i class="fa fa-credit-card"
				aria-hidden="true"></i> FAQs &rsaquo;</a> &nbsp;|&nbsp;

				<a href="/how-it-works" style="font-size:17px;">
					<i
				class="fa fa-question-circle" aria-hidden="true"></i> HOW IT WORKS &rsaquo;</a>

				<br />
			</div>
			<div class="clear"></div>

			<div style="width:100%; height:170px; background:none; text-align:center; padding:15px 25px;
			font-family: Montserrat,Arial, sans-serif; box-sizing:border-box; -moz-box-sizing:border-box;
			-webkit-box-sizing:border-box; color:#fff; font-size:1`px; font-weight:400;
			letter-spacing:2px; text-transform: uppercase;">
				powered by<br />

				<a href="/" style="font-size:17px;"><img
				src="/<?= $website_options['crest'] ?>"
				onerror="this.src='/static/system/crest_base_pages.png'"
				alt="<?= $website_options['short_title'] ?>"
				style="width:60px; height:60px; margin-bottom:5px" /></a>

			</div>
			<div class="clear"></div>
			<center>
				<a href="javascript:top.frames.location.reload();"
					class="refresh" style="color:#ccc; font-weight:800; font-size:17px;">
					<i class="fa fa-refresh"></i></a></center>

			<br /><br /><br /><br /><br /><br /><br /><br /><br />
			<!--<h1 style="text-shadow:0px 1px 1px rgba(0,0,0,.7);">PAGE TITLE</h1>-->

		</div><!-- GRID 12 DIV ENDS HERE -->
	</div><!-- CONTAINER 12 DIV END HERE -->
</div><!-- HOME FEATURE CATEGORY DIV ENDS HERE -->

<script type="text/javascript">
	$(document).ready(function() {

		$('.amount').keyup(function () {
			this.value = this.value.replace(/[^0-9\.]/g,'');
		});

		$('.amounttix').keyup(function () {
			this.value = this.value.replace(/[^0-9\.]/g,'');

			var load_amount =  $(".amounttix").val();
			//alert('Load Amount : ' + load_amount);

			if (load_amount >= 1) {
				var ticketsAmt = load_amount * 100;
				var tixFormatted = parseInt(ticketsAmt).toLocaleString("en");
				//alert('It should update');
				$(".LoyaltyTix").val(tixFormatted + ' FlipMob Loyalty Tickets');
				$(".howmanytix").html('<b>' + tixFormatted + '</b>');
			}
		});

		$("#checkoutandpay").click(function(e) {

			//			alert('Clicked');
			//			e.preventDefault();
			//			return false;

			var load_amount =  $(".amount").val();
			//alert('Tokens: ' + token_amount);

			//if (token_amount < 10) {
			//	e.preventDefault();
			//	alert('The minium load amount is $10.');
			//	return false;
			//}
			if (load_amount > 100) {
				e.preventDefault();
				alert('The maximum load amount is $100.');
				return false;
			}

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

			//alert('Tokens: ' + token_amount);

			//return true;
		});

		$("#checkoutandpay2").click(function(e) {

			var load_amount =  $(".amounttix").val();
			var checkTixAmt = $(".LoyaltyTix").val();

			if (load_amount > 100) {
				e.preventDefault();
				alert('The maximum load amount is $100 or 10,000 Tickets.');
				return false;
			}

			if (! $(".amounttix").val().length) {
				e.preventDefault();
				alert('You must enter an amount of Tickets first...');
				return false;
			}

			if (load_amount >= 100 && !checkTixAmt) {
				//alert('There is no LT Amt');
				var ticketsAmt = load_amount * 100;
				var tixFormatted = parseInt(ticketsAmt).toLocaleString("en");
				//alert('It should update');
				$(".LoyaltyTix").val(tixFormatted + ' Loyalty Tickets');
				$(".howmanytix").html('<b>' + tixFormatted + '</b>');
			}
			//alert('Tokens: ' + token_amount);
			//return true;
		});

	});
</script>

<!-- MORE INFO -->
<div style="display:none;">
	<div id="moreinfo" style="max-width:560px;">
		<div class="overlay-bl-bg"></div>
		<div class="container_6 pop-contentXXXX" style="background:none !important;">
			<div class="" style="background:none !important;">
				<div class="formXXX login-formXXX">
					<!-- CONTENT CONTAINER STARTS HERE -->
					<div class="box-white" style="border:0px; min-width:250px; max-height:300px;
					height:auto; padding:0px; background:none !important; margin-top:-30px !important;">

						<div style="background:#fff; float:left; padding:25px; color:#444;
							font-size:16px; font-weight:300; text-align:left; font-weight:normal;
							font-family: Montserrat,'Open Sans',sans-serif; line-height:24px;">

							<h2 style="text-align:center; margin:0 auto 10px; line-height:25px;
								font-size:17px; font-weight:700; max-width:400px;
								font-family: Montserrat,'Open Sans',sans-serif;">
								MORE INFO
							</h2>

							This is a lightbox popup that you can use (or not use).

							<br /><br />

						</div>
					</div>
					<div class="clear"></div>
				</div>
			</div>
		</div>
	</div>
</div>

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