<apex:page docType="html-5.

0" controller="OpeningCasesController" showHeader="tr

ue" cache="false">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/b
ootstrap.min.css" />
<apex:includescript value="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jqu
ery.min.js" />
<apex:includescript value="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/boot
strap.min.js" />
<apex:includescript value="//code.jquery.com/jquery-1.6.4.min.js" />
<apex:includeScript value="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.m
in.js"/>
<script>
function roundNumber(number, precision){
precision = Math.abs(parseInt(precision)) || 0;
var multiplier = Math.pow(10, precision);
return (Math.round(number * multiplier) / multiplier
);
}
$(document).ready(function(){
navigator.geolocation.getCurrentPosition(success, error,
options);
$("#peoplelocate").click(function() {
navigator.geolocation.getCurrentPosition(success
, error, options);
});
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
function success(pos) {
var crd = pos.coords;
/*
console.log('Your current
console.log('Latitude : '
console.log('Longitude: '
console.log('More or less

position is:');
+ crd.latitude);
+ crd.longitude);
' + crd.accuracy + ' meters.

');
*/
var latitude = roundNumber(parseFloat(crd.latitude),6)
;
var longitude = roundNumber(parseFloat(crd.longitude),
6);
setCurrentPosition(latitude,longitude);
};
function error(err) {
console.warn('ERROR(' + err.code + '): ' + err.message
);

};
});
</script>
<!-- script for action status -->
<script>
function ShowLoading() {
document.getElementById('blockbckanim').style.display="block";
}
function HideLoading() {
document.getElementById('blockbckanim').style.display="none";
}
</script>
<!-- Style for action status -->
<style>
#blockbckanim{
background-color:rgba(196, 204, 220, 0.8);
width:100%;
height:100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 1000;
rgba(0, 0, 0, 0.71);
cursor: wait;
}
#apimgld{
top:35%;
left:45%;
position:fixed;
border-radius: 2px;
-webkit-border-radius: 2px ;
-moz-border-radius: 2px ;
background-color: #EEF3FD;
padding: 1%;
height: 63px!important;
width: 151px!important;
font-size: large;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}
</style>
<apex:form >
<div id="blockbckanim" style="display:none">
<div id="apimgld"
style="margin-left: -30px;height: 10%;">
<img src="/img/loading32.gif" style="height: 25px; margin-lef
t: 40%;" />&nbsp;&nbsp;
<h3 style="font-size:21px;"> Please wait...</h3>
</div>
</div>
<apex:actionStatus id="status" onStart="ShowLoading();" onstop="

HideLoading();" />
<apex:pageMessages />
<apex:actionFunction name="setCurrentPosition" action="{!current
LocationCases}" reRender="cases1,cases" status="status">
<apex:param name="lati" value="" assignTo="{!currentLati
tude}"/>
<apex:param name="longit" value="" assignTo="{!currentLo
ngitude}" />
</apex:actionFunction>
<!-<input type="button" id="peoplelocate" class="btn btn-primary" v
alue="Get Current Location Cases"/><br/><br/>
-->
<apex:pageBlock id="cases" >
<apex:outputLabel style="font-size:15px;" value="Opening
cases in your Area :" /><br/><br/>
<apex:pageBlockTable value="{!openingCases}" var="case"
id="cases1" rendered="{!if(openingCases.size !=0 ,true,false)}">
<apex:column onclick="sforce.one.navigateToSObje
ct('{!case.id}')" value="{!case.CaseNumber}"/>
<apex:column value="{!case.Subject}"/>
<apex:column onclick="sforce.one.navigateToSObje
ct('{!case.Account.id}')" value="{!case.Account.name}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:form>
</apex:page>