<?php include_once($_SERVER['DOCUMENT_ROOT'] . "/admin/inc/sessionStartGeneral.php") ?>
<?php
  function strtotitle($title, $separator){
	$smallwordsarray = array('of','a','the','and','an','or','nor','but','is','if','then','else','when',	'at','from','by','on','off','for','in','out','over','to','into','with');
	
	$words = explode($separator, $title);
	
	foreach ($words as $key => $word){
	  if ($key == 0 or !in_array($word, $smallwordsarray))
	  $words[$key] = ucwords($word);
	}
	
	$newtitle = implode(' ', $words);
	
	return $newtitle;
  }
  
  $theSiteParts = explode(".", $_SERVER['HTTP_HOST']);
  $theSite = $theSiteParts[0];
  
  
  $pageTitle = "Peterson's Personal Shopper";
  $pageDescription = "Online shopping for in-store pickup is now at Petersons!";
  $pageKeywords = "Groceries, online shopping, pickup, petersons personal shopper";
?>
<?php
  include_once($_SERVER['DOCUMENT_ROOT'] . "/common/header.php"); 
?>
<script src="/Kickstrap/js/jquery.h5validate.js" type="text/javascript"></script>
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false&key=AIzaSyBF3b8TQW8k0aozUhzCi6sukOG4vONxXDo"></script> 

<style>
	  #mainContent.row .span12{
			width: 97%;
	  }
	  
	  #departmentOffset .row .span9{
		width:64%;
		margin-right: 1%;
		border: 1px solid #085977;
	  }
	  
	  
	  #departmentOffset .row .span3{
		width:28%;
	  }
	  
	  fieldset input, fieldset textarea, fieldset select{
		width: 93%;
	  }
	  
	  table tr td{
		padding: 3px 12px 12px 0;
	  }
	  
	  .anywhereSection{
		min-height:200px;
		color: #085977;
		font-weight:bold;
	  }
	  
	  .anywhereSection.noHeightLimit{
		min-height: 0;
	  }
	  
	  .anywhereSection h2{
		margin-top: 0;
		color: #085977;
	  }
	  
	  .oneReason{
		width:46%;
		margin: 0 2% 20px;
		float: left;
	  }
	  
	  .oneReason img{
		width: 54px;
		margin-right:15px;
		margin-bottom:10px;
		float: left;
	  }
	  
	  .oneReason h4{
		margin: 0;
		font-weight:bold;
	  }
	  
	  .sidebarSection{
		margin-bottom:20px;
		padding-bottom: 20px;
		border-bottom: dashed 1px #65c8c6;
	  }
	  
	  .sidebarSection h3{
		font-weight: bold;
		font-size: 19px;
	  }
	  
	  p.majorPadding{
		padding: 0 10%;
		font-size:14px;
		line-height:1.5em;
	  }

    .bigButton {
        color: #fff;
        background: #000;
        letter-spacing: .15em;
        padding: 20px;
        font-size: 35px;
        display: inline-block;
        border: 2px #fff dashed;
    }

	  #startshoppingbtn{
		width: 83.5%;
		margin-top:10px;
	  }
	  
	  .sidebarSection .btn{
		width: 83.5%;
	  }
	  
	  h3.extraPadBottom{
		padding-bottom:6px;
	  }
    .biggerText {
        font-size: 14px;
    }

    @media (max-width: 580px) {
        h1.offsetPadLeftx2 {
            padding-left: 10px;
        }

        .bigButton {
            font-size: 16px;
        }

        #startshoppingbtn {
            width: 65%;
            margin-top: 10px;
        }

        .sidebarSection .btn {
            width: 65%;
        }
    }

    #distanceCalc label {
        display: inline-block;
    }

    .usedRate {
        font-size: 18px;
    }
</style>

<?php require($_SERVER['DOCUMENT_ROOT'] . '/common/mainNav.php'); ?>

    <section class="container">
      <div id="blankBuffer"></div>
      <section class="row" id="mainContent">
		<div class="span12">
		  <div id="departmentOffset" class="clearfix">
			<div class="row">
				<?php include('https://afsshareportal.com/siteContent/online-shopping.php?theSite=' . $theSite); ?>
			</div>
		  </div> 
		</div>
	  
	    
	    <div class="span12">
			<br><br>
			<div id="distanceCalc">
			  <h2>Calculate Your Distance</h2>
			  <div id="formSide" class="span3">
				<label for="your-address">Your Address</label>
				<input type="text" name="your-address" id="your-address" />
				<hr>
				<h4>Choose Your Store</h4>
				<input type="radio" name="location" value="riverton" id="l1"> <label for="l1">Riverton</label>
				<br><br>
				<p><a href="#" id="calcDistance" class="btn btn-primary">Calculate Distance</a></p>
				<br>
				
			  </div>
			  <div id="mapSide" class="span4 offset1">
				<div id="map_canvas" style="height: 300px"></div>
			  </div>
			  <div id="costsSide" class="span3" style="padding-left:20px;">
				<h3>Delivery Rates:</h3>
				<p id="rate1" class="aRate"><b>$6.99:</b> 0-2 Miles from Store</p>
				<p id="rate2" class="aRate"><b>$8.99:</b> 2-4 Miles from Store</p>
				<p id="rate3" class="aRate"><b>$10.99:</b> 4-6 Miles from Store</p>
				<p id="rate4" class="aRate"><b>$12.99:</b> 6-8 Miles from Store</p>
				<p id="rate5" class="aRate"><b>$14.99:</b> 8-10 Miles from Store</p>
			  </div>
			  <div style="clear:both;"></div>
			  <br>
			  <div id="endDistance" class="span8 hideObject">
				<h4 class="center-text">You are <span id="theFinalDist"></span> miles from <span id="selectedLoc"></span></h4>
				<h3 class="center-text"><span id="finalCost"></span></h3>
			  </div>
			</div>
			<div style="clear:both;"></div>
			<br>
		  </div>
      </section>
      
    </section>
    
    
    
  <script>
	function getStoreLocations(){
		 $.ajax({
			 type: "POST",
			 url: "/admin/lookUp.php",
			 data: "action=getStoreLocations",
			 dataType: "json",
			 success: function(theResponse){
				 var theHTML = "";
				 theHTML += "<option>Choose Location</option>";
				 //console.log("num locations: " + theResponse.length);
				 //console.log(theResponse);
				 
				 var alreadyHas = ["1"];
				 if(theResponse.length > 1){
				   $.each(theResponse, function(){
						if($.inArray(this.store_id, alreadyHas) != -1){
							theHTML += "<option>" + this.store_name + "</option>";
						}
				   });
				   
				   $("#location").append(theHTML);
				 }else{
				   $("#location").closest("div").remove();
				 }
			 }
		 });
	 }
	 
	 getStoreLocations();
	
	 $('#contactForm').h5Validate();
			 
	 $("#contactForm").submit(function(event){
		 event.preventDefault();
		 
		 var myResult = validateForm("contactForm");
		 
		 var theLocation = $("#location").val();
		 
		 if(myResult == true)
		 {
			 var self = $(this);	
			 self.unbind('submit').submit()
		 }
	 });
  </script>
  
  <script type="text/javascript">
	var directionsDisplay;
	var map;
	function initialize() {
	  directionsDisplay = new google.maps.DirectionsRenderer();
	  var start = new google.maps.LatLng(40.523637999999998, -111.940573);
	  var myOptions = {
		key: 'AIzaSyBF3b8TQW8k0aozUhzCi6sukOG4vONxXDo',
		zoom:7,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: start
	  }
	  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	  
	  var marker = new google.maps.Marker({
			position: new google.maps.LatLng(40.523637999999998, -111.940573),
			map: map,
			title: "Peterson's Fresh Market"
	  });
	  
	  directionsDisplay.setMap(map);
	}
	
	var directionsService = new google.maps.DirectionsService();
 
	function calcRoute() {
	  var start = $("#your-address").val();
	  var end = $('input[name=location]:checked').val();
	  
	  switch(end){
		case "riverton":
		  var endAddress = "1784 West 12600 South Riverton, UT 84065";
		  var storeName = "Riverton";
		  break;
		default:
		  var endAddress = "1784 West 12600 South Riverton, UT 84065";
		  var storeName = "Riverton";
		  break;
	  }
	  
	  var request = {
		origin:start,
		destination:endAddress,
		travelMode: google.maps.DirectionsTravelMode.DRIVING
	  };
	  directionsService.route(request, function(response, status) {
		if (status == google.maps.DirectionsStatus.OK) {
		  directionsDisplay.setDirections(response);
		  var totalDistance = (response.routes[0].legs[0].distance.value * 0.000621371).toFixed(2);
		  var totalCost = "Delivery Cost: ";
		  var theRateID = "";
		  
		  //totalDistance = 14.99;
		  if(totalDistance < 2){
			totalCost += "$6.99";
			theRateID = "rate1";
		  }else if(totalDistance >= 2 && totalDistance <4){
			totalCost += "$8.99";
			theRateID = "rate2";
		  }else if(totalDistance >= 4 && totalDistance <6){
			totalCost += "$10.99";
			theRateID = "rate3";
		  }else if(totalDistance >= 6 && totalDistance <8){
			totalCost += "$12.99";
			theRateID = "rate4";
		  }else if(totalDistance >= 8 && totalDistance <10){
			totalCost += "$14.99";
			theRateID = "rate5";
		  }else{
			totalCost = "You are outside our delivery area, <br>but pick up is still available.";
		  }
		  
		  $("#finalCost").html(totalCost);
		  $("#selectedLoc").html(storeName);
		  $("#theFinalDist").html(totalDistance);
		  $(".aRate").removeClass('usedRate text-success');
		  $("#" + theRateID).addClass('usedRate text-success');
		  $("#endDistance").removeClass("hideObject");
		}
	  });
	} 
	
	$(document).ready(function(){
	  initialize();
	  $("#calcDistance").on("click", function(e){
		e.preventDefault();
		
		calcRoute();
	  });
	  
	  setTimeout(function(){
		var theVideos = '';
		theVideos += '<div class="sidebarSection">';
		theVideos += '<h3>Learn More <br><small>with our short video series</small></h3>';
		theVideos += '<h4>Setup an Account</h4>';
		theVideos += '<iframe width="100%" src="https://www.youtube.com/embed/AIdxenqRMsM" frameborder="0" allowfullscreen></iframe>';
		theVideos += '<h4>Search Function</h4>';
		theVideos += '<iframe width="100%" src="https://www.youtube.com/embed/O8DkOZGdGcE" frameborder="0" allowfullscreen></iframe>';
		theVideos += '<h4>Loyalty Card</h4>';
		theVideos += '<iframe width="100%" src="https://www.youtube.com/embed/p0H4yv5KZck" frameborder="0" allowfullscreen></iframe>';
		theVideos += '<h4>Favorites</h4>';
		theVideos += '<iframe width="100%" src="https://www.youtube.com/embed/ju9dDcB1a2M" frameborder="0" allowfullscreen></iframe>';
		theVideos += '<h4>My Lists</h4>';
		theVideos += '<iframe width="100%" src="https://www.youtube.com/embed/iNKT3qPVsow" frameborder="0" allowfullscreen></iframe>';
		theVideos += '</div>';
		
		
		$("#departmentOffset .span3").append(theVideos);
	  },1500);
	});
  </script> 
  
<?php require($_SERVER['DOCUMENT_ROOT'] . '/common/footer.php'); ?>
