var dt = (Date.now()); 
  //onproxdt = dt;
var onproxdtc = dt -  300000;


console.log("proximity alert- ++ \n pon=" + new Date(onproxdt)  + " + \n chk=" + new Date(onproxdtc)  + " + \n cur=" + new Date(dt)  );

console.log(dat);
console.log(proxdata);

var curatspot = proxdata.indexOf("at");
var popatspot = dat.indexOf("at");


console.log("already at a spot "+curatspot);
console.log("arrived at a spot "+popatspot);
var shownewanyway =0;



if (curatspot < popatspot) {
	shownewanyway =10;
}
if (curatspot > popatspot) {
	shownewanyway =10;
}


if ((onprox < 1 || onproxdt < onproxdtc || shownewanyway > 0) && (dat != proxdata)  && (onprox < 3)) {

proxdata = dat;
$("#alerthead").html("#YYCBeerCrew Proximity Alert! ");
$("#alerttools").html(proxfoot);
//$(".alertcontent").html("");
var brwkey = document.getElementById("logkey").value;
	$.get('/cms_proximity_slide.asp?brwkey='+brwkey+'&lat='+globalGLat+'&lon='+globalGLon+''+dat, function(data) {   
           $('#alertcontent').html(data);
		    $("#proxwait").css("display", "none");
 
			setTimeout("adjustwid()",500);
			
			
 
        });


openprox();

} else { 

console.log("user moved, but too soon with open prox- ++ " + onproxdt  + " + " + onproxdtc  );
}


}


var stopdoublemapclicks =0;

function mapiconclick(url) {

if (stopdoublemapclicks===0) {
stopdoublemapclicks = 1;

urs = url.split("/");

console.log(urs[2]);
var bid;
bid  = urs[2];
	if (bid==='') {
		bid = 0
	}
var brwkey = document.getElementById("logkey").value;

	$.get('/ajax/mpz2?action=22&bid='+bid+'&brwkey='+brwkey+'&lat='+globalGLat+'&lon='+globalGLon+''+proxdata, function(data) {   
		
		document.location.href=url;
	
	  });
 
}
}

function outterpophandler(bid) {
console.log('icon click');
var brwkey = document.getElementById("logkey").value;
	$.get('/ajax/mpz2?action=21&bid='+bid+'&brwkey='+brwkey+'&lat='+globalGLat+'&lon='+globalGLon+''+proxdata, function(data) {   
	  });
 
} 

function adjustwid() {

var proxwid = $("#headwidth").width();
			console.log(proxwid);
			$('.proxwidehide').width(proxwid - 90);
}

</script>


<style>

.dealslidebox {

padding-top:5px;
background:#dfedf0;
background: linear-gradient(165deg, rgba(2,0,36,0.1) 0%, rgba(9,9,121,0.1) 35%, rgba(0,212,255,0.1) 100%);
border-bottom:1px solid silver;
width:100%;
display:block;
text-align:left;
}



.brewslidebox {

padding-top:5px;
background:#dfedf0;
background: linear-gradient(165deg, rgba(2,0,36,0.1) 0%, rgba(9,9,121,0.1) 35%, rgba(0,212,255,0.1) 100%);
border-bottom:1px solid silver;
width:100%;
display:block;
text-align:left;
}


.alertcontent h2 {
font-weight:bold;padding:4px; color:#337ab7;background-color:#dddddd;font-size:15px;
}

.alertcontent .dealjumpbutton {
    font-size: 14px;
    color: #212121;
    display: inline-block;
    background-color: rgba(77, 183, 254,0.8);
    border: 1px solid #666666;
    border-radius: 8px;
    margin: 6px;
    margin-bottom: 6px;
	padding-left:12px;padding-right:12px;

}

.alertcontent table td div {
white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display:block;

}




.alertcontent table, .alertcontent table *  {
vertical-align: top;
padding:3px;

}

	.alerttools {   
	 position: relative;
	
   
	}
	.alertcontent {
	  position: relative;
	  width: 100%; /* 100% width */
	  text-align: center; /* Centered text/links */
	  border:1px solid rgba(0,0,0,0.1);
	

	   overflow-y:scroll;
	}
	

.alertcontent .dealclaimbox td,
.alertcontent .dealclaimbox td div
 {
font-size:16px;
border:1px solid rgba(0,0,0,0);
padding:8px;
white-space: normal !important;
  overflow: show !important;
  text-overflow: ellipsis;
  display:table-cell;
  text-align:left;

}



.dealclaimboxholder {

background: linear-gradient(165deg, rgba(2,0,36,0.1) 0%, rgba(9,9,121,0.1) 35%, rgba(0,212,255,0.1) 100%);

}

@media screen and (max-width: 600px) {

	.alerthead {
		background-color: #337ab7;
		padding-top:22px;font-size:18px;font-weight:bold;color:#ffffff;
	border-radius:8px 8px 0px 0px;
	}

	.btn.prox.btn-success {
	 font-size:15px;
	 color:#eeeeee;
	 display:block;
	 background-color:#337ab7;
	 border:1px solid #dddddd;
	 border-radius:8px;
		margin:8px;
		margin-bottom:8px;
	}
	
		.alertholder {
		display:block;
		position:relative;
		top:30px;
		border:1px solid silver;
		border-radius:10px;
		width:80%;
		left:10%;
		min-width:240px;
		height:82%;
		background-color:#fefefe;

		}
		
	.alerttools {height:112px; }
		
	
}

@media screen and (max-width: 360px) { 

.alerthead { font-size:13px;}

.alertcontent .dealclaimbox td,
.alertcontent .dealclaimbox td div
 {
font-size:13px;
border:1px solid rgba(0,0,0,0);
padding:5px;
white-space: normal !important;
  overflow: show !important;
  text-overflow: ellipsis;
  display:table-cell;
  text-align:left;

}


}

@media screen and (min-width: 601px) {

	.alerthead {
		background-color: #337ab7;
		padding-top:20px;font-size:22px;font-weight:bold;color:#ffffff;
		border-radius:8px 8px 0px 0px;
	}

	.alerttools {height:90px;padding-top:20px }
	.btn.prox.btn-success {
	 font-size:15px;
	 color:#eeeeee;
	 display:inline;
	 background-color:#337ab7;
	 border:1px solid #dddddd;
	 border-radius:8px;
		margin:8px
	}
	
	.alertholder {
		display:block;
		position:relative;
		top:30px;
		border:1px solid silver;
		border-radius:10px;
		width:80%;
		max-width:550px;
		left:10%;
		min-width:240px;
		height:90%;
		background-color:#fefefe;

		}

		
}
.alerthead {
    position: relative;
    top: 0px;
    height: 68px;
   
    border-bottom: 1px solid silver;
}


.lds-ripple {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #337ab7;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
  }
}


</style>
	<div id="proximityscreen" class="alertfloater">
	<a href="javascript:void(0)" class="closebtn" onclick="closeprox()">&times;</a>
	<div id="alertholder" class="alertholder">
		<div style="height:100%">
			<div id="alerthead" class="alerthead"></div>
			<div id="alertcontent" class="alertcontent">
			
			
			<div id="proxwait" style="display:none;width:69px;height:89px;border:1px solid rgba(0,0,0,0);position:absolute;top:46%;left:46%;padding:2px;">
			<div class="lds-ripple"><div></div><div></div></div>
			<br>Loading..</div>
			
			</div>
			<div id="alerttools" class="alerttools" >
			
			</div>
		</div>
	
	</div>
	
	</div>
<script>


function scrolldealtohelp() {


$('#alertcontent').animate({
        scrollTop: $("#helpscrollpoint").offset().top
    }, 1000);
}


window.onresize = function(event) {
    heightenprox();
};


function crewcheckin () {
var brwkey = document.getElementById("logkey").value;

$.get('/cms_crewcheckin.asp?brwkey='+brwkey+'&lat='+globalGLat+'&lon='+globalGLon+''+proxdata, function(data) {   
 // alert(data);
 closeproxpoints();
        });

}

function crewcheckinplusdeal(dealid) {

var brwkey = document.getElementById("logkey").value;

$.get('/cms_crewcheckin.asp?brwkey='+brwkey+'&lat='+globalGLat+'&lon='+globalGLon+''+proxdata, function(data) {   
 // alert(data);
 closeproxdeals(dealid);
        });

}


function killprox(h) {

var brwkey = document.getElementById("logkey").value;

$.get('/cms_proximity_hider.asp?brwkey='+brwkey+'&h='+h+'&lat='+globalGLat+'&lon='+globalGLon+''+proxdata, function(data) {   
 // alert(data);
        });


//alert('close prox for '+h+'hr for data points '+proxdata);
closeprox();


}

function heightenprox() {

 
  var gh =  $('#alertholder').height();

  var hh =  $('#alertcontent').height();
  var ch =  $('#alerttools').height();
  var th =  $('#alerthead').height();
  
  
  var nh  = gh - ch - th -10;
   document.getElementById("alertcontent").style.height = nh +'px';
   
   
}


function logdate() {

	console.log(onprox + " ++ " +onproxdt );
	setTimeout("logdate()",1000);


}

setTimeout("logdate()",1000);




function openprox() {

if (openprox === 0) {
onprox = 1;
}
  var dt = (Date.now()); 
  onproxdt = dt;
  


heightenprox();

  document.getElementById("proximityscreen").style.width = "100%";
  
    $("#proxwait").css("display", "block");
 
  
  //alert(gh);
  
}

function closeproxpoints() {

$("#alerthead").html("Checked In!");
$('#alertcontent').html("<Center><h2>Thanks for checking in!</h2><BR><b> Don't forget to check for nearby deals while you enjoy your brews!<BR><BR><h2>Don't Drink and Drive!</h2><BR>Drink a bit much and need a ride home?!?!<BR>Scroll to the bottom and pick \"Find a Ride Home!\"  </center>");
  $("#proxwait").css("display", "none");
$("#alerttools").html(checkeditfoot);


setTimeout("closeprox",10000);

}

function closeproxdeals(dealid) {

$("#alerthead").html("Checked In!");
$('#alertcontent').html("<Center><h2>Thanks for checking in!</h2><BR><b> Don't Forget to <a class='btn prox  btn-success' onclick='claimdeal(\"deal=" +dealid+ "\");' >Claim Your Deal Here</a><BR><BR><h2>Don't Drink and Drive!</h2><BR>Drink a bit much and need a ride home?!?!<BR>Scroll to the bottom and pick \"Find a Ride Home!\"  </center>");
  $("#proxwait").css("display", "none");
$("#alerttools").html(checkeditfoot);


setTimeout("closeprox",10000);

}


/* Close when someone clicks on the "x" symbol inside the overlay */
function closeprox() {
  document.getElementById("proximityscreen").style.width = "0%";
  onprox = 0;
  var dt = new Date('1969-01-11');
  onproxdt = dt;
}

function geoping() {
console.log(map);
}




</script>
<style>
.alertfloater a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.alertfloater a:hover, .alertfloater a:focus {
  color: #f1f1f1;
}

/* Position the close button (top right corner) */
.alertfloater .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

.alertfloater {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */    
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 231; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.8); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
.alert-content {
  position: absolute;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
  
  
}


</style>
		
    </body>
</html>