var map;
  var start;
  var inmarker;
  var tooltip;

   /* animation */
   var points = [];
   var gmarkers = [];
   var count =0;
   var route;
   var stopClick = false;
 
  function load() {
   loadState();
   if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.addMapType(G_PHYSICAL_MAP);

    map.addControl(new GOverviewMapControl());
    map.disableDoubleClickZoom();
    map.enableScrollWheelZoom();

    // Create a hierarchical map type control
    var hierarchy = new GHierarchicalMapTypeControl();
    // Make Hybrid the Satellite default
    hierarchy.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "Labels", false);
    // Add the control to the map
    map.addControl(hierarchy);
    map.setMapType(G_PHYSICAL_MAP);

    // Build a div for the tooltips and append it to the appropriate map pane
    tooltip = document.createElement("div");
    tooltip.className="tooltip";
    map.getPane(G_MAP_FLOAT_PANE).appendChild(tooltip);

    setupDragZoom();
    start = new GLatLng(52, -29);
    map.setCenter(start, 2); 
    GEvent.addListener(map, "click", leftClick);
    GDownloadUrl("sm_genxml.php", function(data) {
    var xml = GXml.parse(data);
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
    var name = markers[i].getAttribute("name");
    var email= markers[i].getAttribute("email");
    var address = markers[i].getAttribute("address");
    var type = markers[i].getAttribute("type");
    var descb= markers[i].getAttribute("descb");
    var image= markers[i].getAttribute("image");
    var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")));
    var marker = createMarker(point, name, email, address, descb, image, type);
    map.addOverlay(marker);
    points[i] = point;
    gmarkers[i] = marker;
     }
    });
    
   }
  }

function createMarker(point, name, email, address, descb, image, type) {
   var marker = new GMarker(point, customIcons[type]);
   markerGroups[type].push(marker);
   var html = "<div class='infowindow'>" +
              "<b>" + name + "</b> <br/>" + email+ "<br/>"+ image + "</div>";
   var html2 = "<div class='infowindow'>" + 
               descb + "<br/>" + address + "</div>";
   GEvent.addListener(marker, 'click', function() {
   marker.openInfoWindowTabsHtml([new GInfoWindowTab("Profile",html), new GInfoWindowTab("AboutMe",html2)]);
   });
   marker.tooltip = html;
   showTooltip(marker);
   return marker;
  }
  
function haltAnim() {
 if(route) {
  clearTimeout(route);
  stopClick = true;
 }
}

function playAnim() {
 GUnload();
 if(route) clearTimeout(route);
 stopClick = false;
 count = 0;
 load();
 route =setTimeout("anim()", 3600);
}

function anim() {
 
 if(count < points.length) {
  // Use counter as array index
  map.panTo(points[count]);
  gmarkers[count].openInfoWindowHtml( gmarkers[count].tooltip);
    
  var delay = 3400;
  if((count+1) != points.length)
   var dist = points[count].distanceFrom(points[count+1]);

  // Adjust delay
  if( dist < 10000 ) {
   delay = 2000;
  }
  if( dist > 80000 ) {
   delay = 4200;
  }
  count++;
  route = setTimeout("anim()", delay);
 }
  else {
  clearTimeout(route);
  count = 0;
  route = null;
 }
}
 
function showTooltip(marker) { // Display tooltips

 GEvent.addListener(marker, "mouseout", function() {
  tooltip.style.display = "none";
 });

 GEvent.addListener(marker, "mouseover", function() {

 tooltip.innerHTML = marker.tooltip;
 tooltip.style.display = "block";

 var currtype = map.getCurrentMapType().getProjection();
 var point= currtype.fromLatLngToPixel(map.fromDivPixelToLatLng(new GPoint(0,0),true),map.getZoom());
 var offset= currtype.fromLatLngToPixel(marker.getLatLng(),map.getZoom());
 var anchor = marker.getIcon().iconAnchor;
 var width = marker.getIcon().iconSize.width + 6;
 var height = 50;
 var tpos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(offset.x - point.x - anchor.x + width, offset.y - point.y -anchor.y - height));
 tpos.apply(tooltip);
 });
}
  
function locateAddress() {
      if(inmarker)
      inmarker.hide();
      var address = document.getElementById("address").value;
      var geocoder = new GClientGeocoder();
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } 
            else {
              map.setCenter(point, 13);
              inmarker = new GMarker(point, customIcons["enter"]);
	      GEvent.addListener(inmarker, "click", function() {
	      var html = "<table>" +
	      "<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
	      "<tr><td>Email:</td> <td><input type='text' id='email'/></td> </tr>" +
              "<input type='hidden' id='storeaddress' />" + 
              "<tr><td>Describe Briefly:</td> <td><input type='text' id='descb'/></td> </tr>" +
              "<tr><td>SecretCode:</td> <td><input type='password' id='secret_code'/></td> </tr>" +
	      "<tr><td>Type:</td> <td><select id='type'>" +
	      "<option value='friend' SELECTED>For Friends</option>" +
              "<option value='single'>Single</option>" +
	      "<option value='doctor'>Doctor</option>" +			
	      "<option value='lawyer'>Lawyer</option>" +
	      "<option value='architect'>Architect</option>" +
	      "<option value='engineering'>Engineering</option>" +
	      "<option value='consultancy'>Consultancy</option>" +
	      "<option value='realtor'>Realtor</option>" +
	      "<option value='restaurant'>Restaurant</option>" +
	      "<option value='bar'>Bar</option>" +
	      "<option value='club'>Night Club</option>" +
              "<option value='finance'>Financial Services</option>" +			
	      "<option value='adventure'>Adventure Activity</option>" +
	      "<option value='auto'>Automobile Services</option>" +
	      "<option value='interior'>Interior Design</option>" +
	      "<option value='pet'>Pet Care</option>" +
	      "<option value='dog'>Dog Trainer</option>" +
	      "<option value='event'>Event Management</option>" +
	      "<option value='astrology'>Astrology</option>" +
	      "<option value='others'>Others</option>" +
	      "</select> </td></tr>" +
	      "<tr><td></td><td><input type='button' value='Save & Close' class='button' onclick='saveData()'/></td></tr>";
              var html2 ="<table><tr><td align='valign'><label>Favorite YouTube video link/URL :</label><br />"+
                         "&nbsp;&nbsp;&nbsp;<input type='text' id='youtube'/></td> </tr>"+
                         "<tr><td align='valign'><label>Image file, maximum 1 MB. it can be jpg, gif, png:</label><br />"+   
                         "<iframe src='./profile/index.php' frameborder='0' scroll='no' align='right'></iframe>"+
              "<input type='hidden' id='file_name'><input type='hidden' id='th_height'><input type='hidden' id='th_width'></td></tr></table>";
              inmarker.openInfoWindowTabsHtml([new GInfoWindowTab("Describe",html), new GInfoWindowTab("Upload",html2)]);
	     
	});              
	map.addOverlay(inmarker);
        inmarker.openInfoWindowHtml(address);
        start= point;
            }
          }
        );
      
      }
    }

function leftClick(overlay, point) {
if (point) {
            if(inmarker)inmarker.hide();
            inmarker = new GMarker(point, customIcons["enter"]);
              GEvent.addListener(inmarker, "click", function() {
              var html = "<table>" +
                         "<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
                         "<tr><td>Email:</td> <td><input type='text' id='email' /></td> </tr>" +
                         "<input type='hidden' id='storeaddress' />" +
                         "<tr><td>Describe Briefly:</td> <td><input type='text' id='descb'/></td> </tr>" +
                         "<tr><td>SecretCode:</td> <td><input type='password' id='secret_code'/></td> </tr>" +
                         "<tr><td>Type:</td> <td><select id='type'>" +
                         "<option value='friend' SELECTED>For Friends</option>" +
                         "<option value='single'>Single</option>" +
			 "<option value='doctor'>Doctor</option>" +			
			 "<option value='lawyer'>Lawyer</option>" +
			 "<option value='architect'>Architect</option>" +
			 "<option value='engineering'>Engineering</option>" +
			 "<option value='consultancy'>Consultancy</option>" +
			 "<option value='realtor'>Realtor</option>" +
			 "<option value='restaurant'>Restaurant</option>" +
			 "<option value='bar'>Bar</option>" +
			 "<option value='club'>Night Club</option>" +
                         "<option value='finance'>Financial Services</option>" +			
			 "<option value='adventure'>Adventure Activity</option>" +
			 "<option value='auto'>Automobile Services</option>" +
			 "<option value='interior'>Interior Design</option>" +
			 "<option value='pet'>Pet Care</option>" +
			 "<option value='dog'>Dog Trainer</option>" +
			 "<option value='event'>Event Management</option>" +
			 "<option value='astrology'>Astrology</option>" +
			 "<option value='others'>Others</option>" +
                         "</select> </td></tr>" +
                         "<tr><td></td><td><input type='button' value='Save & Close' class='button' onclick='saveData()'/></td></tr></table>";
             var html2 = "<table><tr><td align='valign'><label>Favorite YouTube video link/URL :</label><br />"+
                         "&nbsp;&nbsp;&nbsp;<input type='text' id='youtube'/></td> </tr>"+
                         "<tr><td align='valign'><label>Image file, maximum 1 MB. it can be jpg, gif, png:</label><br />"+   
                         "<iframe src='./profile/index.php' frameborder='0' scroll='no' align='right'></iframe>"+
                         "<input type='hidden' id='file_name'><input type='hidden' id='th_height'><input type='hidden' id='th_width'></td></tr></table>";
                         inmarker.openInfoWindowTabsHtml([new GInfoWindowTab("Describe",html), new GInfoWindowTab("Upload",html2)]);
              
            });
            map.addOverlay(inmarker);
          
        }}  //main

    function saveData() {
      var name = escape(document.getElementById("name").value);
      var email = escape(document.getElementById("email").value);
      var secret_code = escape(document.getElementById("secret_code").value);
      var descb = escape(document.getElementById("descb").value);
      var address = escape(document.getElementById("youtube").value);
      var type = document.getElementById("type").value;
      var latlng = inmarker.getLatLng();
      var lat = latlng.lat();
      var lng = latlng.lng();
      
      var image_name= document.getElementById("file_name").value;
      var th_height= document.getElementById("th_height").value;
      var th_width= document.getElementById("th_width").value;
      if(formvalidation(document.getElementById("name"),document.getElementById("email"),document.getElementById("secret_code"))==true)
       {
	var url = "sm_addrow.php?name=" + name + "&email=" + email + "&secret_code=" + secret_code + "&image=" + image_name + "&height=" + th_height + "&width=" + th_width + "&descb=" + descb + "&address=" + address +
                "&type=" + type + "&lat=" + lat + "&lng=" + lng;
        
        GDownloadUrl(url, function(data, responseCode) {
        if ( responseCode == 200 ) {
          inmarker.closeInfoWindow();
          document.getElementById("TitleBarDiv").innerHTML = "Location added.";
          alert(data);
        }
         });   //GDUrl end
        }   //validation end
    }

   function deleteAddress(){ 
if(inmarker) inmarker.hide();
var address = document.getElementById("del_add").value; 
var geocoder = new GClientGeocoder(); 
if (geocoder) { 
geocoder.getLatLng( address,function(point) { 
if (!point) 
{ alert(address + " not found"); } 
else {
 map.setCenter(point, 13); 
 inmarker = new GMarker(point, customIcons["enter"]); 
 map.addOverlay(inmarker); 
 var html=address+ "<br>" +
"<table><tr><td><input id='del_emailID' type='text' value='Your Email' /></td></tr>" +
"<tr><td><input id='del_secretID' name='del_secret' type='password' value='Your Secret Code' /></td></tr>" +
"<tr><td align='center'><input type='button' id='del_submitID' class='button' name='del_submit' value='Go' onclick='deleteEntry()'/></td></tr>" + 
"<tr><td align='center'><a href='#' onclick= 'forgotCode()'> forgot secretcode? </a></td></tr>" + "</table>";
inmarker.openInfoWindowHtml(html); start= point; } } ); 
} 
}


function deleteEntry() { 
var latlng = inmarker.getLatLng();
var lat =latlng.lat(); 
var lng = latlng.lng(); 
var secret = escape(document.getElementById("del_secretID").value); 
var email = escape(document.getElementById("del_emailID").value); 
var url= "delete_entry.php?lat=" + lat + "&lng=" + lng + "&secret_code=" + secret + "&email=" + email;
//alert(lat);alert(lng);alert(secret);alert(url);
if(emailvalidation(document.getElementById("del_emailID"),"Invalid Email!")==true && emptyvalidation(document.getElementById("del_secretID"),"Secret code cant be empty")==true ) 
{ 
GDownloadUrl(url, function(data,responseCode) {
if (responseCode == 200 ) {
document.getElementById("TitleBarDiv").innerHTML = data;
inmarker.closeInfoWindow(); } });
}// validation
}

function forgotCode(){ 
var latlng = inmarker.getLatLng(); 
var lat = latlng.lat(); 
var lng = latlng.lng(); 
var forgot=1; 
var email = escape(document.getElementById("del_emailID").value); 
var url= "delete_entry.php?lat=" + lat + "&lng=" + lng + "&forgot=" + forgot + "&email=" + email; 
//alert(lat);alert(lng);alert(url);
if(emailvalidation(document.getElementById("del_emailID"),"Invalid Email!")==true)
{ 
GDownloadUrl(url, function(data, responseCode) 
{ 
if(responseCode == 200 ) {
document.getElementById("TitleBarDiv").innerHTML =data; 
inmarker.closeInfoWindow(); } }); 
}//Validation
}

// Function setStyle() sets the CSS style to apply to the video results.
function setStyle(styleName) {
	document.getElementById('bodyDiv').className = styleName; 
	setStyleBtn();
}

// Function setStyleBtn() sets the state of the style toggle button.
function setStyleBtn() {
	var styleName = document.getElementById('bodyDiv').className;
	switch(styleName) {
		case 'style1':
			document.getElementById('style1Btn').style.textDecoration = "underline"; 
			document.getElementById('style2Btn').style.textDecoration = "none";
                        document.getElementById('style3Btn').style.textDecoration = "none";
			break;
		case 'style2': 
			document.getElementById('style1Btn').style.textDecoration = "none"; 
			document.getElementById('style2Btn').style.textDecoration = "underline";
                        document.getElementById('style3Btn').style.textDecoration = "none"; 
			break;
                case 'style3': 
			document.getElementById('style1Btn').style.textDecoration = "none"; 
			document.getElementById('style2Btn').style.textDecoration = "none";
                        document.getElementById('style3Btn').style.textDecoration = "underline"; 
			break;
	}
}

// Function loadState() restores the application state from the stateCookie.
function loadState() {
	// Update the display of the stateful toggle buttons.
	setStyleBtn();
        document.getElementById("TitleBarDiv").innerHTML="<b>List Yourself On Map Community And Locate Services</b>";
}