<apex:page controller="OverlayDemoController">

<head>

<c:Overlay style="processing" />

</head>

<apex:form>

   <apex:actionStatus id="overlayStatus" onStart="showOverlay();" onstop="hideOverlay();"></apex:actionstatus>

   <apex:sectionHeader title="Contact Save" subtitle="Overlay Demo" />

   <apex:pageBlock id="pBlock">

       <apex:pageMessages></apex:pageMessages>

       <apex:pageBlockButtons>

           <apex:commandButton action="{!saveRecord}" status="overlayStatus" value="Save" reRender="pBlock"/>

       </apex:pageBlockButtons>

       <apex:pageBlockSection>

               <apex:inputField value="{!cnt.First_Name__c}" />              

               <apex:inputField value="{!cnt.Last_Name__c}" />

               <apex:inputField value="{!cnt.Phone__c}" />

               <apex:inputField value="{!cnt.Email__c}" />

       </apex:pageBlockSection>

   </apex:pageBlock>

</apex:form>

<div id="overlay"></div>

</apex:page>

<?php
error_reporting(E_ALL);
require_once ('soapclient/SforcePartnerClient.php');
require_once('connection.php');

$ids = array();
$ids[] = '00390000006IUVK';
$ids[] = '00390000001lwbd';
getPhotos($ids);


function getPhotos($contactids){
 $mySforceConnection = getConnection();
 $query = "SELECT Id, Name from Attachment Where ParentId in (";
 foreach($contactids as $id){
     $query .= "'". $id . "',";
 }
 $query = substr($query , 0, strlen($query) - 1);
 $query .= ")";
 $queryResult = $mySforceConnection->query($query);

 $records = $queryResult->records;
 if(count($records) > 0){
     echo "<table cellspacing='5' cellpadding='5'><tr>";
     foreach($records as $rec){
         echo "<td style='text-align:center;font-size:12px;'>".
                 "<img src='image.php?id=".$rec->Id."' ".
                 "style='width:200px;height:200px;border:1px solid #ccc;padding:10px'/> <br/>"
                 . $rec->fields->Name.
              "</td>";
     }
     echo "</table>";
 }
 return NULL;
}
?>

<?php
error_reporting(E_ALL);
header('content-type: image/jpeg');
require_once ('soapclient/SforcePartnerClient.php');
require_once('connection.php');

getPhotos($_GET['id']);


function getPhotos($id){
 $mySforceConnection = getConnection();
 $query = "SELECT Id, Name, Body from Attachment Where Id ='" .$id ."'";
 $queryResult = $mySforceConnection->query($query);

 $records = $queryResult->records;

 print_r(base64_decode($records[0]->fields->Body));
 return NULL;
}

?>

<apex:page showHeader="false" sidebar="false">
<script src="http://www.heatmapapi.com/javascript/HeatmapAPI.aspx?k=86123b76-2190-4a4b-b182-86e7199b0406" type="text/javascript"></script>

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA09SA9e7gW5A4Mpy3VCJQjxQfiV3Wc4AiuMkI_RwI0dk2dVyy7hQWusr2PE1VCubWNkTco2njprfSxg" type="text/javascript"></script>

<script src="http://www.heatmapapi.com/javascript/HeatmapAPIGoogle.js" type="text/javascript"></script>
<script type="text/javascript"
 src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var m = null;
var batch = "";
var myHM = null;
var request = GXmlHttp.create();
var TOTAL_COUNT = 0;
var INDEX = 0;
function loadGoogle()
{
if (GBrowserIsCompatible())
{
m = new GMap2(document.getElementById("map"));
m.setCenter(new GLatLng(38.5, -95.8), 3);
m.setUIToDefault();
initHeatmap();
}
else
alert('Your Internet browser is not compatible    with this website.');
}



function initHeatmap()
{
// Heatmap Scripts
 try
{
myHM = new GEOHeatmap();
myHM.Init(400, 400); // Must be same as map size, or same ratio
  addMarkersFromXml();





}
catch(e)
{
alert(e);
}
}

function addMarkersFromXml(){

request.open('GET', '/apex/data', true);
request.onreadystatechange = function() {
    //alert(request.readyState);
        if(request.readyState == 4) {
        var xmlDoc = request.responseXML;
        var markers = xmlDoc.documentElement.getElementsByTagName("store");
        TOTAL_COUNT = markers.length;
        INDEX = 0;
        for(var i=0; i < markers.length; i++){
            var state = markers[i].getAttribute("state");
            var density = "1";//markers[i].getAttribute("density");
                geocoder = new GClientGeocoder();
            var address = state;
            geocoder.getLatLng(address,
                  function(point) {
                    if (!point) {
                  
                    } else {
                      fullVal = point.lat().toFixed(5) + "," + point.lng().toFixed(5) + "," + density + ",";
                      batch += fullVal;
                      INDEX++;
                      if(INDEX >= TOTAL_COUNT){
                        startMap();
                      }
                    }
            });
        }
    
    }
}


function startMap(){
        document.getElementById("HMMapdata").value=batch;
         myHM.SetData(batch);
         myHM.SetBoost(.5); // Optional, see documentation
              myHM.SetDecay(0); // Optional, see documentation
              //var proxyURL = "http://localhost/proxy.php";
              //myHM.SetProxyURL(proxyURL);
              var preUrl = myHM.GetURL();

          // Now render in our Google Map
              var heatmapOverlay = new HMGoogleOverlay(preUrl);
          m.addOverlay(heatmapOverlay);
}
request.send(null);

}





</script>

<apex:sectionHeader subtitle="Heat Map using Google Map" title="Aslam Bari (http://www.aslambari.com)"/>
<body onload="loadGoogle();">
<input type="hidden" id="HMMapdata" />
<input type="hidden" id="HMImageURL" name="HMImageURL"/>
<div id="map" style="width:400px;height:400px;"></div>
</body>
</apex:page>

<apex:page sidebar="false" showHeader="false" contentType="text/xml">
<stores>
<store state="IN,US"></store>
<store state="KY,US"></store>
<store state="WA,US"></store>
<store state="MB,US"></store>
</stores>
</apex:page>