var centerLatitude = 12.81305672078453;
var centerLongitude = 99.98687267303467;
var startZoom = 15;

var points = [];
var index = 0;

var infopanel;



var iconBlue = new GIcon(); 
    iconBlue.image = 'http://gmaps-samples.googlecode.com/svn/trunk/markers/circular/greencirclemarker.png';
    iconBlue.shadow = '';
    iconBlue.iconSize = new GSize(24, 24);
    iconBlue.shadowSize = new GSize(22, 20);
    // Fuer Werte ab 10: (11,12) - fuer Werte unter 10: (14,12)
    iconBlue.iconAnchor = new GPoint(14, 12);
    iconBlue.infoWindowAnchor = new GPoint(10, 7);

var iconRed = new GIcon(); 
    iconRed.image = 'http://gmaps-samples.googlecode.com/svn/trunk/markers/circular/bluecirclemarker.png';
    iconRed.shadow = '';
    iconRed.iconSize = new GSize(24, 24);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(14, 12);
    iconRed.infoWindowAnchor = new GPoint(10, 7);

var customIcons = [];
    customIcons["restaurant"] = iconBlue;
    customIcons["bar"] = iconBlue;
    customIcons["guesthouse"] = iconRed;
    customIcons["resort"] = iconRed;
    customIcons["hotel"] = iconRed;
    customIcons["villa"] = iconRed;
    customIcons["condo"] = iconRed;
    customIcons["apartment"] = iconRed;
var markerGroups = { "restaurant": [], "bar": [], "guesthouse": [], "resort": [], "hotel": [], "villa": [], "condo": [],  "apartment": []};



function initialize() {
    if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
        // map.addControl(new GSmallMapControl());
        // map.enableScrollWheelZoom();
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.setMapType(G_SATELLITE_MAP );
        

        // Shows Lat/Lng values on a mouse click
        // GEvent.addListener(map,"click", function(overlay,pixel) {     
        //   if (pixel) {   
        //    var myHtml = "The GLatLng value is: " + map.fromContainerPixelToLatLng(pixel) + " at zoom level " + map.getZoom();
        //     map.openInfoWindow(pixel, myHtml);
        //  }
        // });
        
        
        document.getElementById("restaurantCheckbox").checked = true;
        document.getElementById("barCheckbox").checked = true;
        // document.getElementById("labelsCheckbox").checked = true;

        var point = new GLatLng(12.808495388927063, 99.98925983905792);
        var marker = createMarker(point, "The Guesthouse direct at the beach", "1", "Click for details <a href='/guesthouse.html'>EN</a> | <a href='/se/guesthouse.html'>SE</a>", "guesthouse");
        map.addOverlay(marker);

        var point = new GLatLng(12.796191935458415, 99.98393297195434);
        var marker = createMarker(point, "The Bann Pantai Resort", "2", "Click for details <a href='/bann-pantai.html'>EN</a> | <a href='/se/bann-pantai.html'></a>", "resort");
        map.addOverlay(marker);

        var point = new GLatLng(12.793152597064196, 99.9832034111023);
        var marker = createMarker(point, "The Beach Hotel", "3", "Click for details <a href='/the-beach-hotel.html'>EN</a> | <a href='/se/the-beach-hotel.html'>SE</a>", "hotel");
        map.addOverlay(marker);

        var point = new GLatLng(12.831866110984096, 99.99720990657806);
        var marker = createMarker(point, "The Beach Condo", "4", "Click for details <a href='/beach-condo.html'>EN</a> | <a href='/se/beach-condo.html'>SE</a>", "condo");
        map.addOverlay(marker);

        var point = new GLatLng(12.810551137015148, 99.9899572134018);
        var marker = createMarker(point, "The Apartments", "5", "Click for details <a href='/apartment.html'>EN</a> | <a href='/se/apartment.html'>SE</a>", "apartment");
        map.addOverlay(marker);

        var point = new GLatLng(12.8325199160062, 99.99675393104553);
        var marker = createMarker(point, "Thai Style Villa", "6", "Click for details <a href='/thai-villa.html'>EN</a> | <a href='/se/thai-villa.html'>SE</a>", "villa");
        map.addOverlay(marker);

        var point = new GLatLng(12.8325199160064, 99.99675393104555);
        var marker = createMarker(point, "Two bedroom Thai Style Villa", "7", "Click for details <a href='/two-bedroom-villa.html'>EN</a> | <a href='/se/two-bedroom-villa.html'>SE</a>", "villa");
        map.addOverlay(marker);

        var point = new GLatLng(12.817727815636415, 99.98990893363952);
        var marker = createMarker(point, "The New House", "8", "Click for details <a href='/new-house.html'>EN</a> | <a href='/se/new-house.html'>SE</a>", "villa");
        map.addOverlay(marker);

        var point = new GLatLng(12.814814276156958, 99.99528408050537);
        var marker = createMarker(point, "Seafood Restaurant at the beach", "9", "Click for details <a href='/restaurant.html'>EN</a> | <a href='/se/restaurant.html'>SE</a>", "restaurant");
        map.addOverlay(marker);

 
    }
}

function createMarker(point, name, label, address, type) {
    var marker = new LabeledMarker(point, {icon: customIcons[type], labelText: label, labelOffset: new GSize(-6, -10)});
    markerGroups[type].push(marker);
    var html = "<b>" + name + "</b> <br/>" + address;
    GEvent.addListener(marker, 'click', function() {
      marker.openInfoWindowHtml(html);
    });
    return marker;
}
function toggleGroup(type) {
    for (var i = 0; i < markerGroups[type].length; i++) {
        var marker = markerGroups[type][i];
        if (marker.isHidden()) {
            marker.show();
        } else {
            marker.hide();
        }
    } 
}

function toggleLabels() {
    var showLabels = document.getElementById("labelsCheckbox").checked;
    for (groupName in markerGroups) {
        for (var i = 0; i < markerGroups[groupName].length; i++) {
            var marker = markerGroups[groupName][i];
            marker.setLabelVisibility(showLabels);
        }
    }
}

function addmarker(x,y,title) {
    var point = new GPoint(parseFloat(x),parseFloat(y));
    points.push(point);
    var marker = new GMarker(point);
    map.addOverlay(marker);
    //infopanel.innerHTML = infopanel.innerHTML + 
	  //'<a href="#" onClick="movemap(' + index + ');">' + 
	  //title + 
	  //'</a><br/>';
    //index++;
}  

function movemap(index) {
    map.recenterOrPanToLatLng(points[index]);
}