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

<style type="text/css">
	body { color:#333; -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; }
	span, a, a:active, a:hover {
	    -webkit-font-smoothing: antialiased;
	    -moz-osx-font-smoothing: grayscale; 
	}
	#header .wrap-top-menu { z-index: 99999999999999 !important; }
	
	#mmen, footer, #footer { display:none; }
	
	#wrapper {
		background: #fff;
	}
	.nestedbutton a, .nestedbutton a:active, .nestedbutton a:link, .nestedbutton a:visited {
		background: #eee;
		min-height: 45px;
		line-height: 45px;
		color: #444;
		display: block;
		text-shadow: 0px 1px 0px #fff;
		font-size:17px;
		font-weight:500;
	}
	.nestedbutton a:hover, a#loadnow:hover {
		background:#2996cc;
		color:#fff;
		text-shadow: 0px 0px 0px #fff;
	} 
/*	.bottomicons, .bottomtray {
		display: nonexx;
	}*/

	.savedcard, .selectedcard { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; 
		border:2px solid #aaa; background:#fff; }
	
	.chosencard { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; border:2px solid #17c812;
		background:#b9ffcd; }
	
/*	.selectedcard label {
		background: #ff0000;
		cursor: pointer;
	}*/

/*	.selectedcard input[type="radio"]:checked+label {
		background: #ffff00;
	}*/
	

/*	input#radio.selectedcard, input[type="radio"], .selectedcard input[type="radio"] {
		margin-top: 0px;
		margin-bottom: 10px;
		margin-right: 5px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		float: left;
		display: inline-block;
		width: 25px;
		height: 25px;
		padding: 2px;
		background-clip: content-box;
		border: 2px solid #bbbbbb;
		background-color: #fafafa;
		border-radius: 50%;
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
	}*/
/*	input#savedcardradio.selectedcard {
		margin-top: 0px;
	}*/
	
/*	input[type="radio"] {
		margin-top: 0px !important;
		background-color: #fff;
	}*/
	
	/** savedcardradio **/
	/** input#radio.selectedcard:checked input[type="radio"]:checked 
	input[type="checkbox"]:not(:checked)
	**/
/*	input[type="radio"]:checked {
		background-color: #93e026 !important;
	}*/
	
	/** selectedcard, savedcardradio **/

/* ########################################################## */
/* ####### DATETIMEPICKER AND LABELS FOR BOOKING FORM ####### */
/* ########################################################## */    

    .xdsoft_datetimepicker  .xdsoft_timepicker{
        /* changed from 58px */
        width: 88px;
        float:left;
        text-align:center;
        margin-left:8px;
        margin-top:0px;
    }
    .xdsoft_datetimepicker  .xdsoft_timepicker .xdsoft_prev,
    .xdsoft_datetimepicker  .xdsoft_timepicker .xdsoft_next{
        float:none;
        background-position:-40px -15px;
        height: 15px;
        width: 30px;
        display: block;
        /* changed from 14px */
        margin-left:29px;
        margin-top:7px;
    }
  .label{
    text-align:right;
    font-weight:300;
  }
  #submit{
    text-align:center;
  }
  input { padding:10px; height:30px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border:1px solid #aaa; }
  textarea#body {  -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border:1px solid #aaa; }
  td { padding-top:10px; padding-bottom:10px; }
  button { border:1px solid rgba(255,255,255,.1); padding:15px 0; width:200px; margin:0; border-radius:25px ; -moz-border-radius:25px; -webkit-border-radius:25px;
    font-family: 'Open Sans', Montserrat,Arial,sans-serif; background: #42B54C; font-size:18px; text-align:center;
    color:#fff; text-shadow:0px -1px 1px rgba(0,0,0,.3); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
  button:hover { background:red; }

/* ########################################################## */
/* ########################################################## */

div.spacer { }
.pricingpage a, .pricingpage a:active, .pricingpage a:link, .pricingpage a:visited {
	color: #2996cc;
	text-shadow: none;
} /* OLD BLUE 0072C4 */
#introsection a:hover {
	color: #2eacee; 
}
a.loginpop.introlinks, a.loginpop.introlinks:active, a.loginpop.introlinks:link, a.loginpop.introlinks:visited { 
    color:#0072C4; }
a.loginpop.introlinks:hover { color:#fff; }
.pricingpage a:hover {
	color: #000;
}
a[href^=tel] {
    color:#0194fb; 
    text-shadow:0px -1px 0px rgba(0,0,0,.3);
}
.fancybox-close {
    top: -10px;
    right:-26px;
}
div.fancybox-skin {
    top: 0px;
}
.fancybox-skin { padding:7px !important; background:rgba(0,0,0,.4); }
.fancybox-outer, .fancybox-inner { }

h2.pricing-header  { 
    font-weight: 800px;
    font-size: 36px;
    font-family: Montserrat,sans-serif;
    margin-bottom:15px;
}

.pricing-header-div {
    display: block;
    text-align: center;
    height: 2px;
    width: 70px;
    background-color: #2996cc;
    margin: 0 auto;
    margin-bottom: 15px;
}

h2.author-byline {
    background: url('/static/images/byline.png');
    text-transform: uppercase;
    font-family: 'Open Sans',Futura, sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 2px;
    margin: 0 0 3rem 0;
    font-size: 15px;
}
span.author-byline-inside {
    padding: 3px 20px 3px 0;
    background: white;
}
.fancybox-next span {
  right: 5px;
  position:fixed;
}
.fancybox-prev span {
  left: 5px;
  position:fixed;
}
.fancybox-nav span {
    visibility:visible;
}
a.fancybox-nav.fancybox-next { 
    position:fixed;
    right:0px;  
    width:25px;
}
a.fancybox-nav.fancybox-prev { 
    position:fixed;
    left:0px;   
    width:25px;
}
.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%;
}
/* ### CENTERED BYLINE ### */
h2.author-byliner {
    background: url('/static/images/byline.png');
    text-transform: uppercase;
    font-family: 'Open Sans',Futura, sans-serif;    
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 2px;
    margin: 0 3%;
    margin-bottom:10px;
    font-size:15px;
    display:block;
    text-align:center;
    width:94%;
}
span.author-byline-insider {
    padding: 3px 10px 3px 10px;
    background: white;
    margin:0 auto;
    display:inline-block;
}
input[type="submit"] {
    border-radius:25px ; -moz-border-radius:25px; -webkit-border-radius:25px;
}
.rounded2 a { 
    background:#2996cc;
    /** GREEN background:#00AF14; **/
    color:#fff;
    border-radius:25px ; -moz-border-radius:25px; -webkit-border-radius:25px;
    padding:15px 70px;
    font-size:16px;
    display:inline-block;
}
.rounded3 a { 
    background:#ccc;
    color:#444;
    text-shadow:0px 1px 0px #fff;
    border-radius:25px ; -moz-border-radius:25px; -webkit-border-radius:25px;
    padding:15px 70px;
    font-size:16px;
    display:inline-block;
}
.rounded2 a:hover, .rounded3 a:hover { 
    color:#fff;
    background:#00355B;
    text-shadow: 0px 0px 0px rgba(0,0,0,.4);
}
.rounded a { 
    background:#eee;
    border-radius:25px ; -moz-border-radius:25px; -webkit-border-radius:25px;
    padding:15px 20px;
    font-size:15px;
    display:inline-block;
}
.rounded a:hover { 
    color:#fff;
    background:#00355B;
    text-shadow: 0px 0px 0px rgba(0,0,0,.4);
}
#loading_image {
    display:none;
    height: 100%;
    width: 100%;
    position:fixed;
    top: 0; 
    right:0;
    bottom:0;
    left: 0;
    z-index: 999999999 !important;
    background: #1A87C5 url(/static/images/blue-loader.gif) no-repeat center center;
    background-size: 400px auto;
    /* rgba(255,255,255,.80) rgba(0,0,0,.85) */
}
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
span.processing { 
    color:#fff;
    /* GREEN color:#00D315; */
    /* text-shadow:0px 1px 0px rgba(255,255,255,.55); */
    text-shadow:0px -1px 0px rgba(0,0,0,.3); 
    text-align:center;
    font-size:22px;
    font-family: 'Open Sans',Futura, sans-serif;
    font-weight:500;
    position:absolute; 
    width:100%; 
    top:37%; 
    display:block; 
}
.featureslist a, .featureslist a:active, .featureslist a:visited, .featureslist a:hover { font-weight:bold; }
h1 { 
    text-shadow:0px 1px 0px rgba(255,255,255,.6); 
    color:#5c666b; 
    padding:10px 0; 
    font-weight:500; 
    font-size:40px; 
    line-height:48px; 
}
h1, h2, h3, h4, h5, h1 span, h2 span, h3 span, h4 span, h5 span {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; 
}
h1, h2 { text-align:center; }
h2 { line-height:28px; }
h1.mobileh1 { margin-top:15px; font-weight:100; }
h3 { font-weight:500; font-size:17px; line-height:25px; margin-bottom:5px; }
h4 { font-size:28px; margin-bottom:11px; }

/* padding:15px 30px 10px; margin-bottom:7px; margin-top:20px; font-family:'Open Sans',Futura,'Arial Black',sans-serif; font-weight:300; font-size:20px; color:#fff; text-shadow:0px -1px 1px rgba(0,0,0,.3); */
.btn-o , .btn-oo a { border:1px solid #fff; padding:15px 0; width:94%; margin:0 3%; display:inline-block; 
font-family: 'Open Sans', Montserrat,Arial,sans-serif; background: #42B54C; font-size:18px; text-align:center;
color:#fff; text-shadow:0px -1px 1px rgba(0,0,0,.3); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; 
}
.btn-o:active, .btn-o:hover, .btn-oo a:hover, .btn-oo a:active { border:1px solid #fff; background: #00D315; }

.btn-light, .btn-light a { border:1px solid #fff; padding:15px 0; width:90%; margin:0 3%; display:inline-block; 
font-family: 'Open Sans', Montserrat,Arial,sans-serif; background: #eee; font-size:18px; text-align:center;
color:#777; text-shadow:0px -1px 1px rgba(0,0,0,.3); 
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; 
}
.btn-light:active, .btn-light:hover, .btn-lighter:hover, .btn-lighter a:hover { border:1px solid #fff; background: #ccc; }

.btn-lighter, .btn-lighter a {
	border:1px solid #fff; padding:15px 0; width:90%; margin:0 3%; display:inline-block; 
	font-family: 'Open Sans', Montserrat,Arial,sans-serif; background: #f7f7f7; font-size:18px; text-align:center;
	color:#777; text-shadow:0px -1px 1px rgba(0,0,0,.3); 
	-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; 
}
span.tip { display:none; }
button {
    height:42px;
    padding:1px 12px;
    border:0px;
    color:#fff;
    background:#00AF14; 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;   
    border-radius:4px ; -moz-border-radius:4px; -webkit-border-radius:4px;
}
button:hover {
    background:#00355B;
}
#footer { padding-top:0px; }    
.main-footer { display:none; }  

#header {
    border-bottom: 0px solid #d4d4d4;
}
hr {
 border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(128, 128, 128, 0), rgba(128, 128, 128, 0.75), rgba(128, 128, 128, 0));
    width:85%;
}

ul.benefits li {
	line-height:30px;
	margin-bottom: 15px;
	text-shadow:0px 1px 0px #fff;
}

/* ############### SLIDER ############## */

    #slider {
      width:281px;
      height:500px;
      position: relative;
      overflow: hidden;
      margin:91px 0 0 2px;
      background:none;
    }
    #slider ul { 
        width:281px;
        height:500px;
        position: relative;
        margin: 0;
        background:none;
        padding: 0;
        list-style: none;
    }
    #slider ul li {
        width:281px;
        height:500px;
        position: relative;
        display: block;
        float: left;
        margin: 0;
        padding: 0;
    }
a.control_prev, a.control_next {
      position: absolute;
      top: 35%;
      z-index: 999;
      display: block;
      padding: 3% 3%;
      width: auto;
      height: auto;
      background: #2a2a2a;
      color: #fff;
      text-decoration: none;
      font-weight: 600;
      font-size: 18px;
      opacity: 0.3;
      cursor: pointer;
      font-family:'Times New Roman',Arial,sans-serif;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  border-radius: 0 4px 4px 0;
}

a.control_next {
  right: 0;
  border-radius: 4px 0 0 4px;
}

/* ############### SLIDER ENDS ############## */

img.guarimg { width:70px; }
.speakwith { margin-bottom:55px; }

.spacer {
    padding-top: 35px;
}
.iframevid { width:560px; height:315px; }

/* SCROLL BARS */
.fancybox-inner {
    -webkit-overflow-scrolling: touch !important;
    background:#fff;
}

.col1icon { margin-right:0px; margin-left:10px; }
.leftcol1, .rightcol3 { padding-top:55px; }

button.greensubmit{ display:block; width:100%; }

.squishtext { padding:0 200px; }

.maintagline { font-weight:300; color:#222; font-size:22px; line-height:30px; text-align:center; padding:0px 15px; margin-top:0px; }
.subtagline { font-size:15px; line-height:22px; margin-top:10px; }

.recommended { 
	background-color: #BA00F1;
	background-image: linear-gradient(45deg, #BA00F1, #FD0172);
	text-shadow: -1px -1px -1px rgba(0,0,0,.5);
	padding:5px 0;
	font-size:12px;
	letter-spacing: 2px;
}

.beta { font-size:17px; line-height: 25px; }

	#blockit {
		max-width: 400px;
	}
	.blockit-left {
		display: inline-block;
		width: 50%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		min-height: 100% !important;
		background: url('/static/client/bg_food.jpg') no-repeat;
		background-size: cover;
		float: left;
	}
	.blockit-right {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: 50%;
		height: auto;
		min-height: 100%;
		background: #f3f3f3;
		float: left;
		overflow-y: scroll;
	}

	.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%;
	}
	a.btn-o, a.btn-o:active, a.btn-o:visited, a.btn-o:link {
		color:#eee !important;
	}
	a.btn-o:hover {
		color: #fff !important;
	}	
	.btn-o, .btn-o a, .btn-o a:link, .btn-o a:active, .btn-o a:visited, .btn-oo a {
		border: 3px solid #29baff;
		background-color: #8b248d;
		background-image: linear-gradient(45deg, #8b248d, #099bf2);
		text-shadow: -1px -1px -1px rgba(0,0,0,.5);
		padding: 10px 15px;
		width: 150px;
		height: 20px;
		line-height: 20px;
		display: inline-block;
		font-family: 'Open Sans', Montserrat,Arial,sans-serif;
		font-weight: 300;
		font-size: 15px;
		color: #fff;
		-webkit-border-radius: 50px;
		-moz-border-radius: 50px;
		border-radius: 50px;
		box-shadow: 0 3px 10px rgb(0 0 0 / 30%);
	}

	.btn-o:active, .btn-o:hover, .btn-oo a:hover, .btn-oo a:active {
		border: 3px solid #fff;
		/*background: #82be55; */
		background-color: #099bf2;
		background-image: linear-gradient(45deg, #099bf2, #8b248d);
		text-shadow: -1px -1px -1px rgba(0,0,0,.5);
	}
	
	ul.lifetimelist {
		background: none;
		padding-left: 22px;
		padding-right: 0px;
		line-height: 24px;
		text-align: left;
		max-width: 500px;
		margin: 0 auto;
	}

	ul.lifetimelist li {
		margin-bottom: 15px;
		background: none;
	}
	
	.expanddiv {
		background:#fff; font-size:17px; line-height:26px;
		padding:15px 20px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius:8px;
		font-family:Montserrat,Raleway,'Open Sans',Helvetica,Verdana,sans-serif; margin-top:15px;
		border:3px solid #ddd;
	}
	
	.fa-chevron-down {
		color: #ccc;
	}
	
	#errordiv a,
	#errordiv a:active,
	#errordiv a:visited {
		background: #fff;
		color: #333;
		border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px;
		padding: 3px 20px;
		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: #222;
		background: #7edcbf;
	}	

/* ################################################################################ */
/* ###########################      MOBILE STYLING      ########################### */
/* ################################################################################ */

@media screen and (min-width: 2400px) {
    #lpcontainer { background-size:100% 745px !important; }
}
/* ########################## */
/* ########################## */
@media screen and (max-device-width:  1160px), screen and (max-width:  1160px) {
    center#planslogo { display:none; }
    .spacer { padding-top: 65px; }  
    .layout-2cols { }
    #devicecontainer { margin-left:0px; margin-right:0; width:340px; }
}
/* ########################## */
/* ########################## */
@media screen and (max-device-width:  1024px), screen and (max-width:  1024px) {
	.maintagline { font-weight:300; color:#222; font-size:22px; line-height:28px; text-align:center; padding:0px 5px; margin-top:0px; }
	.subtagline { font-size:14px; line-height:20px; margin-top:10px; }
    center#planslogo { display:none; }
    .spacer { padding-top: 65px; }  
    .layout-2cols { }
    #devicecontainer { margin-left:0px; margin-right:0; width:340px; }
	ul.benefits {
		/*		background:red;*/
		margin-block-start: .5em;
		margin-block-end: .5em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		padding-inline-start: 20px;
		padding-inline-end: 20px;
	}
	ul.benefits li {
		/*background:red;*/
		width: 100%;
		font-weight: 400;
		color: #333;
		text-shadow: 0px 1px 0px #fff;
		margin-right: 0px;
		line-height: 29px;
		font-size: 21px;
		margin-bottom: 15px;
	}
}
/* This was 854px, but I'm changing it to 980 */
/* ########################## */
@media (max-width: 980px) {
    html,body { background:#fff; }
    .spacer { padding-top: 65px; }  
    .layout-2cols { }
    .grid_4 { width:100%; display:block; }
    .iframevid { width:270px; height:152px; }
    #leftsidecol { margin-left:0px; }
    .leftcol1, .rightcol3 { width:312px; margin:0 auto; }
    .leftcol1 { padding:0; margin-bottom:25px; }
    #devicecontainer { width:100%; text-align:center; }
    /* BACKGROUND IMG background: #ccc url(/static/images/bgmount.jpg) no-repeat top center; */ 
    #rightsidecol { padding-bottom:50px; width:100%; margin-left:0px; margin-right:0px; }   
    .rightcol3 { padding-top:40px; }
    .col1icon, .col1text { float:left !important; }
    .col1icon { margin-right:10px; margin-left:0px; }
    .col1text { text-align:left !important; }   
    h1.mobileh1 { margin-top:5px; font-size:22px; line-height:30px; padding:0 20px; }
    .long-field { font-size:16px; }
    span.tip { display:block; }
    .or { margin:10px 0 5px; }
    img.guarimg { width:50px; }
    .speakwith { margin-bottom:25px; }
    .sharebuttons a {
        margin:15px 5px 15px 0;
    }
    .squishtext { padding:0 20px; }
}
/* ########################## */
/* ########################## */
@media (max-width: 585px) {
    .leftcol1 { margin-top: -40px !important; }
    #rightsidecol { margin-top: -60px !important; padding-top:0px !important; }
    input#email { margin-left:0px !important; margin-right:0px !important; font-family: 'Open Sans',sans-serif; max-width:250px; }
    button.greensubmit{ display:block; width:100%; }
    .squishtext { padding:0 20px; }
	.pricingpage {
		padding: 0 20px;
	}
	.beta { font-size:15px; line-height: 22px; }
	.grid_8 {
		display: block; width:100%;
	}
	ul.benefits {
/*		background:red;*/
		margin-block-start: .5em;
	    margin-block-end: .5em;
	    margin-inline-start: 0px;
	    margin-inline-end: 0px;
	    padding-inline-start: 20px;
		padding-inline-end: 20px;
	}
	ul.benefits li {
		/*background:red;*/
		width:100%;
		font-weight:400;
		color:#333;
		text-shadow:0px 1px 0px #fff;
		margin-right:0px;
		line-height: 26px;
		font-size:19px;
		margin-bottom: 15px;
	}
}
/* ########################## */
/* ########################## */
@media (max-width: 480px) {
    .leftcol1 { margin-top: -40px !important; }
    #rightsidecol { margin-top: -60px !important; padding-top:0px !important; }
    input#email { margin-left:0px !important; margin-right:0px !important; 
    font-family: 'Open Sans',sans-serif; max-width:250px; }
    button.greensubmit{ display:block; width:100%; }
    .squishtext { padding:0 20px; }
	.pricingpage {
		padding: 0 20px;
	}
	.beta { font-size:15px; line-height: 22px; }
}
/* ########################## */
/* ########################## */
@media (max-width: 375px) {
	#lpcontainer {
		padding: 0 10px;
	}
}
</style>

<link rel="stylesheet" type="text/css" href="/static/css/loader.css">

<div id="loader-containerx"
	style="
	position: fixed;
	top: 0;
	left: 0;
	right:0;
	bottom:0;
	width: 100%;
	height: 100%;
	z-index: 9999999999999999 !important;
	vertical-align:middle;
	background: rgba(0, 0, 0, 0.92);
	display:none;
	text-align:center !important;
	color:#fff; font-weight:300;">
	<div id="loader"></div>
	<div id="loadertext">Processing...</div>
</div>

<!-- REMAINING TO DO FOR THIS FEATURE 
1. LOOP THE CARDS ✔
2. PASS THE PARAMS ✔
3. INSERT THE TRANSACTION ✔
3A. INSERT THE AMOUNT OF COINS...
4. UPDATE THE CREDITS BALANCE IN THE USERS TABLE
5. UPDATE THE SESSION CREDITS
-->

<!-- START OF MAIN DIV -->
<div style="text-align:center; height:auto; padding-top:6px; padding-bottom:100px;">
    <?php if(isset($_GET['reg_ok'])): ?>
	    <div style="width:97%; background:#cd1000; color:#fff; margin:30px auto 0; 
	    border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius:8px;">
	        <div style="padding:15px; font-weight:300; font-size:15px;">
	            Welcome. You are now signed in.
	        </div>
	    </div>
    <?php endif; ?>
    
	<?php if(isset($_GET['cardDeleted'])): ?>
	    <div id="errordiv" style="width:97%; background:#cd1000; color:#fff; margin:30px auto 0; 
	    border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius:8px;">
	        <div style="padding:15px; font-weight:300; font-size:15px;">
	            Your card has been deleted. - <a href="/profile/load">Ok</a>
	        </div>
	    </div>
    <?php endif; ?>
  
    
	<!-- PAGE CONTAINER -->
	<div id="lpcontainer" class="pricingpage" style="background: #fff; overflow:hidden;">
		<!-- #1 FULL WIDTH CONTAINER STARTS HERE -->
		<div style="width:100%; height:auto; background:none;">

			<!-- CONTAINER_12 STARTS HERE-->
			<div class="layout-2cols">
				<div id="introsection" class="content grid_12" style="background:none; margin-top:20px; margin-bottom:0px;
			padding:0;">

					<a href="/profile/edit"style="font-weight:500; color:#aaa;"
					title="Go Back">
					<div style="position:absolute; margin-top:10px; left: 10px; width:30px; height:30px; background:none;
					font-size:28px; text-align:center;">
							<i class="fa fa-angle-left" aria-hidden="true"></i>
						</div></a>

					<!--				<div style="text-align:center;">
					<a href="/challenges"><img src="/static/chattrbox/passphrase_logo.gif" alt="PassPhrase"
					style="max-width:400px; margin:0 auto 10px; width:70%;
					border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius:8px;"></a>
					</div>-->

					<!--				<div class="beta" style="display:none; border:1px solid #ccc; padding:15px; font-weight:300; margin-bottom:20px;
					font-family:  Montserrat, 'Open Sans',Helvetica, 'Helvetica Neue', Verdana, Arial,sans-serif;">
					<span style="font-weight:600; color:#de1000">CHATTRBOX BETA</span> (4/16/2023) - While we put the
					finishing touches on the ChattrBox Platform, we invite
					you to join our Early Adopters BETA Program where members will get instant access to all ChattrBox&rsquo;s
					features (and services) +
					receive/split a share of 5% Equity, plus monthly RevShare payouts. See BETA Membership packages below...
					<!--<a href="#" style="font-weight:600;" title="Join BETA Now">Join BETA now &raquo;</a>-->
					<!--</div>-->

					<div class="maintagline" style="background:none; text-align:center;
					color:#000; padding:5px 20px; font-weight:600; font-size:24px; line-height:34px;
					font-family: Montserrat, 'Open Sans',Helvetica, 'Helvetica Neue', Verdana, Arial,sans-serif;">

						Load Funds to your Account Balance

					</div>
					<div class="clear"></div>
					<div style="background:none; text-align:center;
					color:#000; padding:5px 20px; font-weight:500; font-size:17px; line-height:27px;
					font-family: Montserrat, 'Open Sans',Helvetica, 'Helvetica Neue', Verdana, Arial,sans-serif;">
					
						to use for escrowing funds (for buying/making purchases), as well as reserving guaranteed 
						spots in flipmobs
					</div>
				</div><!-- END OF INTRO SECTION -->

				<!--            <div class="grid_4">
				Sidebar...
				</div> -->
			</div><!-- END OF LAYOUT 2 COLS -->

		</div><!-- FULL WIDTH CONTAINER ENDS HERE -->

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

		<!-- ################################################### -->
		<!-- ########  FULL WIDTH CONTAINER STARTS HERE  ####### -->
		<!-- ################################################### -->
		
		<div style="width:100%; height:auto; background:none; overflow:hiddenxx;
		box-sizing:border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;">
			<div class="layout-2cols" style="background:none;
			box-sizing:border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;">
				<div class="grid_8" style="position:relative; background:#f0f0f0; max-height:750px; overflow:hidden; 
				-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; padding:0; margin:20px 0 30px;
				-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
				
					<div class="maintaglinexx" style="text-align:left; background:none; text-align:center;
						margin:0 0 -10px; padding:0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; 
						box-sizing: border-box; height:auto; min-height:300px;">
						
						<!--min-height:300px is new
						<br /><br />
						The New Card doubles the session balance and keeps saving the card.
						<br /><br />
						The instant load method seems correct except you have to refresh the balance to
						see the updated balance.
						<br /><br />
						Detach all cards<br />
						https://stackoverflow.com/questions/68447522/prevent-stripe-api-from-saving-duplicate-cards-on-customer-->

						<video id="myVideo" style="max-width:750px; width:100%; height:auto; margin:0px;"
						controls playsinline muted loop="true" autoplay="autoplay">
							<source src="/flipmob_promo.mp4" type="video/mp4" />
							Your browser does not support the video tag.
						</video>

					</div>
					<div class="clear"></div>
				</div>
				
				<!-- ################################################### -->
				<!-- ########      RIGHT COLUMN STARTS HERE      ####### -->
				<!-- ################################################### -->

				<div class="grid_4" style="min-height:500px; background:none; margin:0;
					box-sizing:border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; ">
					<div class="paymentbox" style="background:#fff; padding:0px 0 0; overflow:hidden; position:relative;
					-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
					-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
					width:auto; display:nonex; min-height:200px; max-width:400px; margin:0 auto">

						<div id="smart-button-container" style="display:nonex; width:90%; margin:0 5%;">
							<div style="text-align: center;">
								<div style="margin-bottom: .75rem; display:nonex; text-align:center;">

									<h1 style="font-size:26px; line-height: 35px; color:none;
										text-shadow: 0px 0px 0px rgb(0 0 0 / 0%); margin:0px 10px 5px; 
										padding: 0px 0 0px">
										<span style="font-family: Montserrat, 'Open Sans',Helvetica, 'Helvetica Neue', Verdana, Arial,sans-serif; font-weight:600; color:#000" class="vmtext">LOAD FUNDS
										</span>
									</h1>
<!--									<div style="color:#777; line-height:20px;">
										Note: We currently use Paypal because we have a
										special designation with extremely low transaction fees
										for small amounts (ie. $.25-$5). <span style="color:#ee1000">
										After checking out your balance will be updated within 30 minutes.</span>
									</div>-->
									<div id="purchsuccess" style="display:none; width:97%; background:#17c812;
										color:#fff; margin:0 auto; border-radius: 8px; 
										-moz-border-radius: 8px; -webkit-border-radius:8px;
								font-family:'Bai Jamjuree',Montserrat,Raleway,'Open Sans',Helvetica,Verdana,sans-serif;">
										<div style="padding:10px; font-weight:400; font-size:17px;">
											<span class="purchasesuccess">Your purchase was successful!</span>
										</div>
									</div>
									<br />
									
									<div style="">
										<!--<img src="/static/chattrbox/gold/gold_coin_sparkle.gif" alt="C" align="absmiddle"
										style="height:35px; margin-top:-12px; margin-right:5px">-->
										<span class="animatedcoins" style="font-size:28px; font-weight:400; color:#555;
										font-family:'Bai Jamjuree',Montserrat,Raleway,'Open Sans',Helvetica,Verdana,sans-serif;">
										$<?= number_format(($user['virtual_balance']/100),2,'.',','); ?></span> 
									</div>
									<div class="clear"></div>
									<br />
									<!--<input class="mycoinbalance" type="hidden" value="<?= $_SESSION['user']['credits'] ?>">-->

<!--									<center style="color:#000; font-size:14px;">Your registered email
										(
										<a href="#login" class="loginpop">Login</a> |
										<a href="/auth/join" class="linkonwhite"
								title="Signup free">Signup</a>):</center>
									<input type="text" class="txt" id="comment_box" name="comment_box"
									onblur="myBlurFunction()" placeholder="Your registered Passphrase email"
									<?php if ($_SESSION['loggedin'] && $_SESSION['user_id']) : ?>
									value="<?php echo $_SESSION['user']['email'] ?>"
									<?php endif; ?>
									style="padding:10px; width:94%; max-width:94%; margin:1% 3% 0;
									-webkit-box-sizing: border-box; border:1px solid #ccc;
									-moz-box-sizing: border-box; box-sizing: border-box; font-size:15px; height:50px;">
									
									<br /><br />-->
									<div style="border-top:2px solid #eee; width:50%; margin:0 auto">&nbsp;</div>
									<?php if ($user['stripe_id']) {
										// If this is true, the form below will be hidden
									?>
									<div style="font-size:14px; font-weight:400;
                         			font-family: Montserrat, 'Open Sans',Raleway,sans-serif; 
                         			text-transform: uppercase; color:#444;">
										 <i class="fa fa-credit-card"></i> <a href="/profile/load" 
										 class="refresh" style="color:#555;">My Saved Card(s):</a>
									</div>

									<?php
									if ($cards) {
										$i = 0;
										foreach ($cards as $card) {
											//echo "<pre>";
											//print_r($card);
											$i++;
											//										echo "<pre>";
											//										print_r($card);
											//										echo "<br />";
											if ($card->card->brand == "visa") {
												$icon = "<img src='/static/images/creditcardicons/visa.png' alt='VISA' align='middle' style='height:30px; margin:-5px 5px 0 0' />";
											} elseif($card->card->brand == "mastercard"){
												$icon = "<img src='/static/images/creditcardicons/mastercard.png' alt='MC' align='middle' style='height:30px; margin:-5px 5px 0 0' />";
											} elseif($card->card->brand == "amex"){
												$icon = "<img src='/static/images/creditcardicons/amex.png' alt='AMEX' align='middle' style='height:30px; margin:-5px 5px 0 0' />";
											} else {
												$icon = "<img src='/static/images/creditcardicons/discover.png' alt='DISC' align='middle' style='height:30px; margin:-5px 5px 0 0' />";
											}
									?>

									<div style="float:right; height:29px;
									margin:7px 0 0 7px; line-height:29px; width:10px; padding:10px;">
										<a href="/profile/load?deleteCard=<?= $card->id ?>"><img 
										src="/static/system/delete_icon_red.png" alt="X" /></a>
									</div>
									<div class="selectedcard" data-id="<?= $i ?>" 
									data-pmtid="<?= $card->id ?>"
										data-custid="<?= $card->customer ?>" id="selected_card-<?= $i ?>"
										style="position:relative; float:none; overflow: hidden;
										height:49px; -webkit-box-sizing: border-box; 
										-moz-box-sizing: border-box; box-sizing: border-box;
										border-radius: 10px; -moz-border-radius: 10px; 
										-webkit-border-radius:10px; padding:10px; margin:7px auto; 
										line-height:25px; font-weight:300; color:#333; max-width:800px;">
										<div style='float:left;'>
											<a href="#" title="<?= $card->card->brand ?>"><?= $icon ?></a>
											**** **** **** <?= $card->card->last4 ?>
										</div>

										<div style="float:right; margin-right:5px">
											<?= $card->card->exp_month ?>/<?= substr($card->card->exp_year,2); ?>
										</div>
										<div class="clear"></div>
									</div>
									<div class="clear"></div>
									<?php } ?><!-- END FOREACH -->
							
								 	<?php } else { ?><!-- IF / ELSE CARDS -->
								 	<!--<br />-->
									 <div style="font-size:16px; line-height:24px; font-family:'Bai Jamjuree',Montserrat,
									 'Open Sans',sans-serif; text-align:center;">
									 	<span style="font-weight:600">No saved cards.</span> Use a new card,
									 	check save &amp; buy credits faster next time.
									 </div>
									<?php } ?><!-- END IF CARDS -->
									
									<div style="display:none">
										<input type="text" name="pmt_id" value="" id="pmt_id">
										<input type="text" name="cust_id" value="" id="cust_id">
										<a href="javascript:;" class="savedcardcheck">Check</a>
									</div>	
<!--									<?= $cards->data[0]->customer ?><br />
									<?= $cards->data[0]->id ?>-->
									
<!--									<div class='savedcard mycard-<?= $i ?>' style="background:#fff;
									 height:25px; width:300px; padding:10px; margin:7px auto; 
									 line-height:25px; font-weight:300; color:#333;
									 border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;">
									
									<input class='selectedcard' id='savedcardradio' type='radio' 
									name='saved_credit_cards' value=''
									data-cardid='<?= $saved_card['card_id'] ?>' 
									data-cardbrand='<?= $saved_card['brand'] ?>' 
									data-cardlast4='<?= $saved_card['last4'] ?>'
									data-num='<?= $i ?>' style='background:none;' />
									
									</div>
									<br /><br />-->
									
									<!--<a href='#' id='showCardForm' class='btn btn-green'>Click to update</a>-->
									<!--<span style="font-size:15px; font-weight:400; font-family:Lato, 'Open Sans', sans-serif; color:#ff0000;">To change your saved card, simply add another card &amp; click Save Card.</span> -->
									<?php } else { ?>
									<!--<span style="color:#ff0000; font-size:15px; font-weight:200; font-family: 'Open Sans',Raleway,sans-serif;">Note: Use Test Card: 4242 4242 4242 4242 &amp;
									this month or later, plus 123 + any 3-digit code</span>
									<br /><br />-->
									
									<div style="font-size:16px; line-height:24px; font-family:'Bai Jamjuree',Montserrat,
										'Open Sans',sans-serif; text-align:left;">
										+Load Funds with a new card and you can optionally save that
										card to load funds instantly next time!
									</div>

									<?php } ?>
									
									<!--<br />-->
									<div style="max-width:600px; min-height:20px; background:#fff; 
									color:#cd1000; font-weight:600; margin:0 auto; padding:5px; 
									box-sizing:border-box; -webkit-box-sizing: border-box; 
									-moz-box-sizing: border-box; margin-bottom:2px; 
									text-shadow:0px 1px 0px #fff">
										<span class="notify"></span>
									</div>
									<!--150 coins minimum ($0.50)-->
									<div class="loadfeature" style="max-width:600px; 
									border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius:8px;
									min-height:55px; background:#eee; margin:0 auto; padding:5px;
									box-sizing:border-box; -webkit-box-sizing: border-box; 
									-moz-box-sizing: border-box;">
										<div style="width:50%; display:inline-block; background:#fff; 
											float:left; min-height:45px; overflow:hidden;">
											<input type="text" class="txt" name="coins" id="coins"
											placeholder="How much?" inputmode="numeric"
											style="margin-right:10px; margin-bottom:0px; border:0px;
											background:#fff; height:45px !important; 
											max-height:45px !important; 
											line-height:45px; padding:0 10px !important;
											border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px;">
										</div>
										<div style="width:50%; display:inline-block; background:white; 
										float:left; min-height:45px;">
											<div class="nestedbutton">
												<a href="javascript:;" id="loadnow" style="outline:none;">Load Funds</a>
											</div>
										</div>
									</div> 
									<div class="clear"></div>
									<br /> 
									<div style="font-size:17px; font-weight:400;">
										<!--<a href="javascript:;" style="font-weight:500; outline:none; 
										color:#2996cc"><img src="/static/images/icons/calculator_icon.png" 
											alt="#" style="height:25px; margin-top:-5px; 
											outline:none;" /> Update</a> --> 
											Total: $<span class="howmuch">0</span>
									</div> 
									<div class="clear"></div>
							</div>
						</div>
					</div>
					
					<div style="border-top:2px solid #eee; max-width:150px; margin:10px auto 0;">&nbsp;</div>
					
					<a href="/paynow/" id="paynow" style="display:block; font-weight:500; margin:0 auto"
							title="Learn more" class="btn-light">Use New Card
						<i class="fa fa-angle-right" aria-hidden="true"></i></a>
					<span style="color:#aaa;">includes the option to save card</span>
					<br /><br /> 	
					
					<!--<a href="javascript:;" id="animate" style="display:block; font-weight:500; 
					margin:0 auto" title="Learn more" class="btn-light">Animate
						<i class="fa fa-angle-right" aria-hidden="true"></i></a>-->
					
					<div style="display:none">  
<!--						<input type="text" id="ordTotal" value="0">
						<input type="text" id="ordCoins" value="0">-->
						
						<input type="text" id="ordTotal" value="<?php
						if (isset($_SESSION['chkout_amount'])) {
							echo $_SESSION['chkout_amount'];
						} else {
							echo 0;
						} ?>">
						<input type="text" id="ordCoins" value="<?php
						if (isset($_SESSION['chkout_coins'])) {
							echo $_SESSION['chkout_coins'];
						} else {
							echo 0;
						} ?>">
						<!--<a href="javascript:;" class="savedcardcheck">Check</a>-->
					</div>				
					
					<!-- ################################################### -->
					<!-- ########       OTHER PAYMENT OPTIONS        ####### -->
					<!-- ################################################### -->
					
					<div style="display:nonex;">
						<hr /><br />
						
						<div style="font-size:14px;  font-weight:400; color:#444;
	                    font-family: Montserrat, 'Open Sans',Raleway,sans-serif; text-transform: uppercase;">
							<i class="fa fa-credit-card"></i> OTHER PAYMENT OPTIONS
						</div><br />
						
						<img src="/static/images/icons/paypal_icon.png" alt="Paypal"
						style="max-width:70%; max-height:40px;" />
						<br /> 
						<span style="color:#aaa;">Load Funds with Paypal</span>
						<a href="/load"
						style="display:block; font-weight:500; margin:0 auto"
								title="Load with Paypal" class="btn-lighter">Choose amount
							<i class="fa fa-angle-right" aria-hidden="true"></i></a>
						<!-- /buycredits - I wonder if this somehow flows through the IPN, so
						that if I use a quick form of theirs it somehow processes correctly -->
						<!--<br />
						<div style="font-size:14px;  font-weight:400; color:#444; margin-bottom:7px;
	                    font-family: Montserrat, 'Open Sans',Raleway,sans-serif; text-transform: uppercase;">
							<i class="fa fa-credit-card"></i> BECOME A MEMBER
						</div>

						<a href="/pricing" style="display:block; font-weight:500; margin:0 auto"
								title="Learn more" class="btn-lighter">View Pricing
							<i class="fa fa-angle-right" aria-hidden="true"></i></a>
						<br />-->
					</div>
					<!--<a href="/profile/load" class="refresh" style="color:#ccc;">
						<i class="fa fa-refresh"></i></a> &nbsp; --><span style="color:#ccc;"></span> &nbsp;
						<a href="javascript:top.frames.location.reload();" style="color:#ccc;">
							<i class="fa fa-refresh"></i></a>
						<br />
				</div><!-- GRID 4 ENDS HERE -->
			</div><!-- LAYOUT-2-COLS ENDS HERE -->
			<div class="clear"></div>
		</div><!-- FULL WIDTH CONTAINER ENDS HERE -->

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

		<!-- full width -->
		<div style="width:100%; height:auto; background:none;">
			<div class="layout-2cols" style="background:none;">
				<div class="grid_12">
					<div class="maintagline" style="background:none; text-align:left">

						<br />
						<div style="border-top:3px solid #ccc; max-width:200px; margin:0 auto;">&nbsp;</div>

						<span style="font-weight:600; text-transform: uppercase; font-size:17px;
						font-family:Montserrat,'Open Sans', Helvetica, Verdana, sans-serif;">OTHER
						PAYMENT OPTIONS</span>
						<br />
						If you&rsquo;d like another payment option, we take plenty of other
						payment options - like Paypal, Stripe, Venmo, Zelle, Cash App, Apple Cash, ACH, 
						Invoice, etc. <!--We also have a
						<a href="#"
							style="font-weight:500;">Square Checkout page here
							<i class="fa fa-angle-right" aria-hidden="true" style=""></i></a>.-->
						<br /><br />

						<span style="font-weight:600; text-transform: uppercase; font-size:17px;
						font-family:Montserrat,'Open Sans', Helvetica, Verdana, sans-serif;">WANT TO CHAT?
						OR GET A LIVE DEMO? GET IN TOUCH</span>
						<br />
						If you&rsquo;d like to speak to someone or would like a
						tour and demo of the FlipMob Platform and Services, please feel free to email us at
						<a href="mailto:contact@flipmob.com?subject=FlipMob" title="Click to email"
						style="font-weight:500;">contact@flipmob.com</a> or call us at
						<a href="tel:312-857-3511" title="Click to call"
						style="font-weight:500;">312-857-3511</a> (Chicago Local).

						<br />
						
						<div style="font-weight:300; font-size:15px; line-height:24px;
						font-family: Montserrat, 'Open Sans',sans-serif; padding:0 15px; color:#777; 
						margin:30px 0 0; text-align:center;">
							<i class="fa fa-lock" aria-hidden="true" style=""></i> Note: We use SSL encryption to protect
							your credit card(s) and information. And, we never
							actually store your credit card number(s) on our servers, but instead store them securely
							on the state of the art 3rd party servers of our Payment Partners, Square, Stripe &amp; Paypal.
							As such, you will only ever see the last 4 of your saved Credit Card.
						</div>
						 
						<br /><br /><br /><br /><br />
						
						<div style="display:none; background:#eee; padding:15px; text-align:left;">

							CARDS:
							<br />

							<?php echo "<pre>"; print_r($cards); ?>
							<br /><br />

						</div> 
						
						<div style="display:none; background:#eee; padding:15px; text-align:left;">

							TEST CARDS:
							<br />

							<?php echo "<pre>"; print_r($testcards); ?>
							<br /><br />

						</div> 
						
					</div>
				</div>
			</div>
		</div>
	</div>  <!-- END OF PAGE CONTAINER -->
	<div class="clear"></div> 
                        
</div><!-- END OF MAIN DIV -->
<div class="clear"></div> 

<script src="https://js.stripe.com/v3/" type="text/javascript"></script>

<!--<script src="/static/js/stripenew.js"></script>-->

<link rel="stylesheet" href="/static/css/stripe.css"></link>

<script type="text/javascript">
	$(document).ready(function() {
		
//		var $radios = $('input[type="radio"][name="saved_credit_cards"]')
//		$('#savedcardradio').click(function() {
//			alert('Radio clicked!');
//			var $checked = $radios.filter(':checked');
//			var $next = $radios.eq($radios.index($checked) + 1);
//			if (!$next.length) {
//				$next = $radios.first();
//			}
//			$next.prop("checked", true);
//		});

//		$('.selectedcard').each(function() {
//			// Do stuff with each div
//			var saved_card_id = $(this).data('id');//current data layer value
//			alert(saved_card_id);
//		});
		
		// LET'S POPULATE OUR SAVED CARD FORM INPUTS
		$('.selectedcard').click(function () {
			//alert($(this).data("id"));
			var saved_card_id = $(this).data("id"); 
			
			$('.selectedcard').removeClass("active"); // remove from any and all others
			$(this).addClass("active"); // add it to THIS one
			//$('#selected_card-' + saved_card_id).toggleClass("chosencard");
			$('.selectedcard').removeClass("chosencard"); // remove from any and all others
			$(this).toggleClass("chosencard"); // add it to THIS one
			
			var payment_id =  $(this).data('pmtid');
			var customer_id =  $(this).data('custid');
			$("#pmt_id").val(payment_id);
			$("#cust_id").val(customer_id);		
		});

		// FOR TESTING THE LOADER
		$(".savedcardcheck").click(function() {
			//alert('Loader...');
			preloaderFadeOutTime = 2000;//was 1000
			$('#loader-containerx').show();
			//return true;			
			hidePreloader();
		}); 

		$('#coins').keyup(function() {
			if (event.which >= 37 && event.which <= 40)
				return;

			// format number
			$(this).val(function(index, value) {
				return value
				.replace(/\D/g, "")
				.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
			});
			
			//var coins = value.replace(/,/g,'');
			//var coinsnum = $(this).val();
			//var coins = coinsnum.replace(/,/g,'');

		});

		$('#coins').blur(function() {
			//alert('Clicked coins...');
			//var phone = $(this).val();
			// COINS ARE NOW LIKE DOLLARS
			var cost = 0;
			var coinsnum = $(this).val();
			var coins = coinsnum.replace(/,/g,''); // remove comma, we may have to force to be int
			//alert('Coinsnum = ' + coinsnum);
			//$(".notify").text(coins.toFixed(2) + ' coins minimum');
			
			if (coinsnum < 1) {
				alert('Please enter 5 or more (zero condition).');
				return false;
			} else {
				var cents = coins * 100;
				var fee = (cents * .029) + 30;
				var cost = coins + fee; // .00127
				//alert('Load Amount: ' + cost);
			}
			
			if (!cost) {
				$(".howmuch").text('5'); 
				//alert('No cost');	
			} else {
				var costInDollars = (cost/100).toFixed(2);
				//alert('Formatted Cost ' + costInDollars);
				$(".howmuch").text(costInDollars);
			}	
			var itemDescrip = ' Load $' +  coinsnum + ' to FlipMob Acct';
			var total_in_cents = Math.ceil(cost); // already in cents
//			alert('Ceil: ' + total_in_cents);
//			//var total_in_cents = Math.ceil(cost * 100);
			//alert('ItemD: ' + itemDescrip + ' TotalinCents: ' + total_in_cents + ' Coins: ' + coins);
			savetoSession(itemDescrip,total_in_cents, coins);
		}); 
		
		$('#animate').click(function () {
			var newbal = 26780;
			//var newbal= parseFloat(newbal_value.toFixed(2)).toLocaleString().replace(/\.([0-9])$/, ".$10");
			// THIS WORKS
			//var newbal = parseFloat(newbal_value, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString();
			
			//var newbal2 = newbal_value.toLocaleString('en');
			//var newbal2 = parseFloat(newbal_value).toFixed(2).toLocaleString('en');
			
			//var newbal2 = newbal_value.toLocaleString('en-US', {maximumFractionDigits: 2});
			//var newbal = newbal2.toFixed(2);
			//var newbal = newbal2.toLocaleString('en');
			//alert(newbal);
			
			$({ Counter: 0 }).animate({
				Counter: newbal
				}, {
					duration: 1000,
					easing: 'swing',
					step: function() {
						//$('.animatedcoins').text(Math.ceil(this.Counter).toFixed(2).toLocaleString('en'));
						$('.animatedcoins').text(Math.ceil(this.Counter*100)/100).toLocaleString('en');
					},
					complete : function() {
						//alert('animation complete');
						$('.animatedcoins').text(parseFloat(newbal, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());
						//$('.animatedcoins').text(newbal().toFixed(2));
						//$('.animatedcoins').text(newbal().toFixed(2).toLocaleString('en'));
						//$('.animatedcoins').text(newbal()*100/100).toLocaleString('en').toFixed(2);
					}
			});	
		
		}); // end click
		
		//$('#dynamic-number').text(Math.ceil(this.numberValue*100)/100); 
	
		$('#loadnow').click(function () {
			//alert('Load click works...');
			var coinsnum = $("#coins").val();
			var thecoins = coinsnum.replace(/,/g,'');
			
			if (!thecoins) {
				$(".notify").text('Please enter an amount.');
				alert('Please enter an amount.');
				return false;
			} else {
				//alert('Coins = ' + thecoins);
				if ($(".selectedcard").hasClass('active')) {
					//alert('Selected');
				} else {
					alert('Please select a saved card or use new card.');
					$(".notify").text('Please select a saved card or use new card.');
					return false;
				}	
			}
			
			var payment_id  = $("#pmt_id").val();
			var customer_id = $("#cust_id").val();
			
			var confirm_box = confirm('You are about to make this purchase to load funds to your Account Balance. Are you sure?');
		    
		    if (confirm_box) {
		    	   
		    } else {
				return false;
		    }
			//$(".notify").text('150 coins minimum');
			//cost = .50; // .00127
			//alert('150 coins is the minimum');
			//var coins = 500;
			//$(".notify").text(coins + ' coins minimum');
			//alert('Load Now Clicked');
//			var thecoins = $("#coins").val();
//			alert('Coins = ' + thecoins);
//			if (thecoins < 150) {
//				//alert('150 coins is the minimum');
//				var thecost = 50;
//				$(".howmuch").text(thecost.toFixed(2));
//				$(".notify").text(thecoins.toFixed(2) + ' coins minimum');
//			} 
//			var entrant_id = $("#entrant_id").val();
//			var chattr_id = $(this).data('id');
			//alert('AJAX Coins: ' + thecoins + ' PmtID: ' + payment_id + ' CustID: ' + customer_id);
			//return false;
//			var status  = "";
//			var newbal 	= "";
//			var amount 	= "";
//			var status  = "";
			
			$.ajax({
				type: "POST",
				url: "/profile/quickLoad",
				data: { coins: thecoins, payment_id: payment_id, customer_id: customer_id},
				success : function(d) {
					//alert('Ok Ajax works...' + d);
					var result = $.parseJSON(d);
					var status = result.success;
					var coins  = result.coins;
					var dollars = coins/100;
					var totalLoaded = parseFloat(dollars).toFixed(2);
					var totalFormatted = parseFloat(dollars, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString();
					var pmtid  = result.payment_id;
					var custid = result.customer_id;
					var amount = result.amount;
					//alert('Status is: ' + status + ' and Coins is: ' + coins);
					//alert('Amount is: ' + amount + ' and Coins is: ' + coins);
					
					if (status==1) {
						preloaderFadeOutTime = 2000;
						$('#loader-containerx').show();
						hidePreloader();
						
//						setTimeout(function() { 
//							alert("Your purchase was successful! You now have " + coins + " coins."); 
//						}, 2200);
						setTimeout(function() { 
							$('.purchasesuccess').html("Your purchase was successful! Your balance is now: <strong>$" + totalFormatted + "</strong>.");
							$('#purchsuccess').show();
						}, 2200);
						
						setTimeout(function() {
							$("#purchsuccess").delay(500).fadeOut("fast");
						}, 4200);		
						
						// ANIMATE THE USER'S CURRENT BALANCE
						$({ Counter: 0 }).animate({
							Counter: totalLoaded
						}, {
							duration: 1000,
							easing: 'swing',
							step: function() {
								//$('.animatedcoins').text(Math.ceil(this.Counter).toFixed(2).toLocaleString('en'));
								$('.animatedcoins').text(Math.ceil(this.Counter*100)/100).toLocaleString('en');
							},
							complete : function() {
								//alert('animation complete');
								$('.animatedcoins').text(parseFloat(totalLoaded, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());
								//$('.animatedcoins').text(newbal().toFixed(2));
								//$('.animatedcoins').text(newbal().toFixed(2).toLocaleString('en'));
								//$('.animatedcoins').text(newbal()*100/100).toLocaleString('en').toFixed(2);
							}
						});	

//						setTimeout(function() {
//							animateCoins(coins);
//						}, 4200);	
						//location.reload();								
						//alert('Your purchase was successful! You now have ' + coins + ' coins. PmtID: ' + pmtid + ' CustID: ' + custid);
					} else {
						alert('Hmmm, something went wrong. Please try again or contact us at support@flipmob.com');
					}
//					var objJSON = JSON.parse(result);
//					alert(objJSON.name);
//					alert(objJSON.type);
					
					//alert(result);
//					var coins = result.coins;
//					var status = result.result;
//					var newbal = result.new_balance;
					//alert(status);
					//alert('Result: ' + status + ' Coins: ' + coins + ' Bal: ' + newbal);
					//if (status == 0) {
						//alert('Status is 0');
						//alert('E: ' + entrants + 'Result: ' + status);
//						$("#withdrawn").show();
//						$("#total_entrants").html(entrants);
//						$("#totalentrants").load(" #totalentrants");
//						//alert('New Bal: ' + newbal);
//						// NOW UPDATE THE USER'S CREDITS BALANCE INSTANTLY...BITCH
//						$({ Counter: 0 }).animate({
//							Counter: newbal
//						}, {
//							duration: 1000,
//							easing: 'swing',
//							step: function() {
//								$('.animatedbalance').text(Math.ceil(this.Counter).toLocaleString('en'));
//								$('.animatedcoins').text(Math.ceil(this.Counter).toLocaleString('en'));
//							},
//							complete : function() {
//								$('.animatedbalance').text(newbal().toLocaleString('en'));
//								$('.animatedcoins').text(newbal().toLocaleString('en'));
//							}
//						});
//						setTimeout(function() {
//							$("#withdrawn").fadeOut("slow");
//						}, 500);
//						$("#joinbutton").load(location.href+" #joinbutton>*","");
						//$("#joinit").show();
						//location.reload();
						//getEntrants();
						//$("#subemail").val("");
					//} else {
//						$("#showtheerror-" + chattr_id).show();
//						$("#showtheerror-" + chattr_id).html('You are no longer in this Challenge.');
//						setTimeout(function() {
//							$("#showtheerror-" + chattr_id).fadeOut("slow");
//						}, 500);
						//alert('Sorry, something went wrong.');
					//}

				}
			});
		}); // end click
		
		$('#paynow').click(function() {
			//e.preventDefault(); 
			
			//alert('Clicked Use New Card');
			//var phone = $(this).val();
			var orderAmount = $("#ordTotal").val();
			var orderCoins = $("#ordCoins").val();
			
			//$("#ordTotal").load(" #ordTotal");
			//$("#ordCoins").load(" #ordCoins");
			$("#ordTotal").load(location.href+" #ordTotal>*","");
			$("#ordCoins").load(location.href+" #ordCoins>*","");
			
			if (orderAmount == 0 || orderCoins == 0) {
				//alert('Please make sure you enter how many coins...');
				//var confirm_box = confirm('Please make sure you enter how many coins...');
				$(".notify").text('Please enter an amount to load.');
				//return false;
			}
		});
		
	}); // END DOC READY
	
	function hidePreloader(){
		var preloader = $('#loader-containerx');
		//preloader.fadeOut(preloaderFadeOutTime); // original, but the fade was too slow
		preloader.delay(preloaderFadeOutTime).fadeOut("fast");
		//$("#status").fadeOut("slow");
		//$("#loader").delay(500).fadeOut();
	}
	
	function savetoSession($itemDescription,$orderAmount, $orderCoins){
		$.ajax({
			type: "POST",
			url: "/profile/payNow",
			data: { item_description: $itemDescription, order_amount: $orderAmount, order_coins: $orderCoins },
			success : function(d) {
				//alert('Ok Ajax works...' + d);
				$(".notify").text('Click Load Funds now or Use New Card');
			} // END SUCCESS
		}); // END AJAX
	}
</script>	   

<?php
include 'views/_footer.tpl.php';
?>