var centerLatitude = 39.16773454557785;
var centerLongitude = 23.454437255859375;
var description = 'Skiathos, Greece';

var startZoom = 12;

var map;

var iconLodging = new GIcon(); 
    iconLodging.image = 'http://www.hotelskiathos.com/images/mapimages/hotel.png';
    iconLodging.iconSize = new GSize(24, 30);
    iconLodging.iconAnchor = new GPoint(24, 30);
    iconLodging.infoWindowAnchor = new GPoint(12, 12);

    var iconBeach = new GIcon(); 
    iconBeach.image = 'http://www.hotelskiathos.com/images/mapimages/beach.png';
    iconBeach.iconSize = new GSize(24, 24);
    iconBeach.iconAnchor = new GPoint(24, 24);
    iconBeach.infoWindowAnchor = new GPoint(12, 12);

var iconVilla = new GIcon(); 
    iconVilla.image = 'http://www.hotelskiathos.com/images/mapimages/villa.png';
    iconVilla.iconSize = new GSize(24, 30);
    iconVilla.iconAnchor = new GPoint(24, 30);
    iconVilla.infoWindowAnchor = new GPoint(12, 12);

    var customIcons = [];
    customIcons["hotel"] = iconLodging;
    customIcons["beach"] = iconBeach;
    customIcons["villa"] = iconVilla;
    var markerGroups = { "hotel": [], "beach": [], "villa": []};
	var gmarkers = [];
		  
		 
function init()
{
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
	    map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.addControl(new GOverviewMapControl());
        map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
		map.setMapType(G_SATELLITE_MAP); 

        GDownloadUrl("phpsqlajax_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 address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var filename = markers[i].getAttribute("filename");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, address, type, filename);
            map.addOverlay(marker);
          }
		  
		          // == show or hide the categories initially ==
        show("hotel");
        hide("beach");
        show("villa");
        // == create the initial sidebar ==
        makeSidebar();
        });
      }
    }

    function createMarker(point, name, address, type, filename) {
      var marker = new GMarker(point, customIcons[type]);
        // === Store the category and name info as a marker properties ===
        marker.mycategory = type;                                 
        marker.myname = name;      
        gmarkers.push(marker);
		
	  markerGroups[type].push(marker);
	  if (type == "hotel")
  {var html = "<div style='width:150px'><b>" + name + "</b> <br/>" + address + "<br/><img src='/images/hotelimages/" + filename + ".jpg' alt=' ' width='100' height='75'><br/><a href='/hotels/" + filename + ".php'>Hotel Details</a></div>";}
	  else if (type == "villa")
  {var html = "<div style='width:150px'><b>" + name + "</b> <br/>" + address + "<br/><img src='/images/hotelimages/" + filename + ".jpg' alt=' ' width='100' height='75'><br/><a href='/villas/" + filename + ".php'>Villa Details</a></div>";}
  	  else
  {var html = "<div style='width:150px'><b>" + name + "</b> <br/>" + address + "<br/><img src='/images/hotelimages/" + filename + ".jpg' alt=' ' width='100' height='75'></div>";}	  
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
	
      // == shows all markers of a particular category, and ensures the checkbox is checked ==
      function show(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].show();
          }
        }
        // == check the checkbox ==
        document.getElementById(category+"box").checked = true;
      }

      // == hides all markers of a particular category, and ensures the checkbox is cleared ==
      function hide(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].hide();
          }
        }
        // == clear the checkbox ==
        document.getElementById(category+"box").checked = false;
        // == close the info window, in case its open on a marker that we just hid
        map.closeInfoWindow();
      }

      // == a checkbox has been clicked ==
      function boxclick(box,category) {
        if (box.checked) {
          show(category);
        } else {
          hide(category);
        }
        // == rebuild the side bar
        makeSidebar();
      }

      function myclick(i) {
        GEvent.trigger(gmarkers[i],"click");
      }


      // == rebuilds the sidebar to match the markers currently displayed and create headers ==
 // Rebuild the sidebar to match currently displayed markers
 function makeSidebar() {

  var oldheader;

  var html = "";
  for(var i= 0; i < gmarkers.length; i++) {
   if(!gmarkers[i].isHidden()) {

   var header = gmarkers[i].mycategory;
   header = header.replace(/^./, header.charAt(0).toUpperCase());
    if (oldheader != header) html += "<br \/><b>"+ header+" List</b><br \/>";
		html += '<a href="javascript:myclick(' + i + ')" class="maplist">' + gmarkers[i].myname + '</a> ';
    oldheader = header;
   }
  }
  document.getElementById("side_bar").innerHTML = html;
 }
	
    // This Javascript is based on code provided by the
    // Blackpool Community Church Javascript Team
    // http://www.commchurch.freeserve.co.uk/   
    // http://econym.googlepages.com/index.htm
	// and the Google Maps API examples, along with a
	// little styling and basic javascript from this site.



window.onload = init;
window.onunload = GUnload;