var gin_geocoder;
var gin_map;

function gin_addMarkers() {
    //create a markermanager to show the markers only between defined zoom
    //levels
    var markermanager = new GMarkerManager(gin_map);

    //define the new marker icons
    icon = new GIcon();
    icon.image = "++resource++gin-marker.png";
    icon.iconAnchor = new GPoint(15, 30);
    icon.infoWindowAnchor = new GPoint(8, 35);

    /* The gin_markerlists is defined and build in the python function of the 
     * view.
     * The following creates the markers for the continents, the countrys and 
     * at last for the members.
     */
    for (var i in gin_markerlists) {
        var itype = typeof gin_markerlists[i];

        /* The kupuhelper.js implements some functions, which disturb this 
         * script.
         * The if statement checks for such functions and skips them to avoid 
         * that problem.
         */
        if (itype == "function"){
            continue
        };

        var area = gin_markerlists[i];
        var markers = [];

        /* In every List(Continents, Countrys and Member) you have more than
         * one entry, so you have to iterate to get a marker for every entry.
         */
        for (var j in area["places"]) {
            var jtype = typeof area["places"][j];

            // The same like above: avoid the kupuhelper.js problem
            if (jtype == "function") {
                continue
            };

            /* Every Marker fire a query to google. To avoid empty continents or
             * countrys and useless querys, the following two statements check the 
             * the list(because: the "Member"-List have no membercounter) and the
             * number of membercounter. If the counter is zero: skip it.
             */
            if (i != 2) {
                if (area["places"][j]["membercount"] == 0) {
                    continue
                }
            };

            var gin_place = area["places"][j];

            /* 
            - The next 3 steps do the following: 
            - 1. take the Geocordinates, 
            - 2. create a marker, out of the Cordinates,
            - 3. add informations (via onklick) to the marker - you have to
            -    differentiate betwen continent or country and member
            */
            var latlng = new GLatLng(gin_place["latlng"][0], gin_place["latlng"][1]);
            var marker = new GMarker(latlng, {title: gin_place["name"], icon: icon});

            if (i == 2) {

                //console.log("Member: "+gin_place["name"])
                if (gin_place["activities"]!=null) {
                    marker.bindInfoWindowHtml(" \
                        <div class=\"gin-map-infobox\"> \
                        <h3><a href=\""+ gin_place["gin_url"] + "\" target=\"_blank\">" + gin_place["name"] + "</a></h3> \
                        <p>" + gin_place["description"] + "</p> \
                        <p>" + gin_place["address"] + "</p> \
                        <p>Phone: " + gin_place["phone"] + "</p> \
                        <p>Email: " + gin_place["email"] + "</p> \
                        <h4>Activities:</h4>" + gin_place["activities"] + " \
                        <p><a href=\""+ gin_place["gin_url"] + "\" target=\"_blank\">read more...</a></p> \
                        </div>");
                } else {
                    marker.bindInfoWindowHtml(" \
                    <div class=\"gin-map-infobox\"> \
                    <h3><a href=\""+ gin_place["gin_url"] + "\" target=\"_blank\">" + gin_place["name"] + "</a></h3> \
                    <p>" + gin_place["description"] + "</p> \
                    <p>" + gin_place["address"] + "</p> \
                    <p>Phone: " + gin_place["phone"] + "</p> \
                    <p>Email: " + gin_place["email"] + "</p> \
                    <p><a href=\""+ gin_place["gin_url"] + "\" target=\"_blank\">read more...</a></p> \
                    </div>");
                }
            } else {

                //console.log("Number of Members in "+gin_place["long_name"]+": "+gin_place["membercount"]+"<br /> Please zoom closer.")
                marker.bindInfoWindowHtml(" \
                    <div class=\"gin-map-infobox\"> \
                    <h3>"+gin_place["membercount"]+" Members in "+gin_place["name"]+"</h3> \
                    Please zoom closer. \
                    </div> \
                ");
            }

            // add the created Marker to the List
            markers.push(marker);
        }

        //add the Markerlist to the manager and define the zoomranges
        markermanager.addMarkers(markers, area["zoom"][0], area["zoom"][1]);
    }

    //refresh the manager to show the Marker
    markermanager.refresh();
}

function initialize(){
    gin_map = new google.maps.Map2(document.getElementById("viewmap"));
    gin_geocoder = new google.maps.ClientGeocoder();
    gin_map.enableScrollWheelZoom(); 
    var mapControl = new GMapTypeControl();
    gin_map.addControl(mapControl);
    gin_map.addControl(new GLargeMapControl());
    gin_map.setCenter((new google.maps.LatLng(0,0)), 1);
    gin_addMarkers();
    gin_map.redraw(true);
};

google.load("maps", "2");
google.load("search", "1");
google.setOnLoadCallback(initialize);