//global variables

// We define the function first
function BWMapControl() {
}

// To "subclass" the GControl, we set the prototype object to
// an instance of the GControl object
BWMapControl.prototype = new GControl();

// Creates a one DIV for each of the buttons and places them in a container
// DIV which is returned as our control element. We add the control to
// to the map container and return the element for the map class to
// position properly.
BWMapControl.prototype.initialize = function(map) {
    var container = document.createElement("div");

    //Create Accommodation
    var accomInfoDiv = document.createElement("div");
    this.setButtonStyle_(accomInfoDiv);
    container.appendChild(accomInfoDiv);
    accomInfoDiv.appendChild(document.createTextNode("Accommodation"));
    GEvent.addDomListener(accomInfoDiv, "click", function() {

        addAccommodation();

    });

    //Accommodation
    function addAccommodation() {
        var j = 1;
        var iconImage;
        var descHTML;
        var page = "MapData.aspx?m=a";
        var url = page + "&RandomKey=" + Math.random() * Date.parse(new Date());

        GDownloadUrl(url, function(data, responseCode) {
            var xml = GXml.parse(data);
            var markers = xml.documentElement.getElementsByTagName("accommodation");
            for (var i = 0; i < markers.length; i++) {
                var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                            parseFloat(markers[i].getAttribute("long")));

                var address = markers[i].getAttribute("desc");
                var telephone = markers[i].getAttribute("telephone");
                var url = markers[i].getAttribute("url");

                //build map data
                descHTML = '<div class="map">';
                descHTML = descHTML + '<p class="headline">';
                descHTML = descHTML + address;
                descHTML = descHTML + '</p>';
                descHTML = descHTML + '<p class="telephone">';
                descHTML = descHTML + telephone;
                descHTML = descHTML + '</p>';
                descHTML = descHTML + '<p class="url">';
                descHTML = descHTML + '<a href="http://';
                descHTML = descHTML + url;
                descHTML = descHTML + '" target="_blank"> Website </a>';
                descHTML = descHTML + '</p>';
                descHTML = descHTML + '</div>';

                iconImage = 'accom' + j + ".gif";

                map.addOverlay(MakeAccomMarker(iconImage, point, descHTML))

                j = j + 1;

            }
        });
    }

    map.getContainer().appendChild(container);
    return container;
}


// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
BWMapControl.prototype.getDefaultPosition = function() {
    return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}

// Sets the proper CSS for the given button element.
BWMapControl.prototype.setButtonStyle_ = function(button) {
    button.style.textDecoration = "underline";
    button.style.color = "#0000cc";
    button.style.backgroundColor = "white";
    button.style.font = "xx-small Arial";
    button.style.border = "1px solid black";
    button.style.padding = "2px";
    button.style.marginBottom = "3px";
    button.style.textAlign = "center";
    button.style.width = "8em";
    button.style.cursor = "pointer";
}


function MakeAccomMarker(image, point, desc) {

    // Create our "tiny" marker icon
    var baseIcon = new GIcon(G_DEFAULT_ICON);
    baseIcon.image = "images/" + image;
    baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
    baseIcon.iconSize = new GSize(20, 34);
    baseIcon.shadowSize = new GSize(37, 34);
    // baseIcon.iconAnchor = new GPoint(9, 34);
    //    baseIcon.infoWindowAnchor = new GPoint(9, 2);

    var VisitorIcon = new GIcon(baseIcon);

    // Set up our GMarkerOptions object
    markerOptions = { icon: VisitorIcon };

    //var marker = new GMarker(point, markerOptions);
    var marker = new GMarker(point, markerOptions);

    GEvent.addListener(marker, "click", function() {
        //marker.openInfoWindowHtml(desc);
        marker.openExtInfoWindow(
              map,
              "simple_example_window",
              desc,
              { beakOffset: 3 }
            );
    });

    return marker;

}


// initGMap
function initGMap(r_id) {
    var zoomMap;
    var desc;
    var descHTML;
    var imgURL;
    var markerIcon;
    var j;
    var page = "~/product-description/MapData.aspx?r=" + r_id;
    var url = page + "&RandomKey=" + Math.random() * Date.parse(new Date());
    GDownloadUrl(url, function(data, responseCode) {

        var xml = GXml.parse(data);
        
        //        var ActivitiesMap = xml.documentElement.getElementsByTagName("Activity");

        //        for (var i = 0; i < ActivitiesMap.length; i++) {
        //            var point = new GLatLng(parseFloat(ActivitiesMap[i].getAttribute("Lattitude")),
        //                                    parseFloat(ActivitiesMap[i].getAttribute("Longitude")));

        //            desc = ActivitiesMap[i].getAttribute("ActName");
        ////            zoomMap = ActivitiesMap[i].getAttribute("zoom");
        ////            imgURL = ActivitiesMap[i].getAttribute("image");

        //            //build map data
        //            descHTML = '<div class="map">';
        //            descHTML = descHTML + '<p class="headline">';
        //            descHTML = descHTML + desc;
        //            descHTML = descHTML + '</p>';
        //          
        //            descHTML = descHTML + '" />';
        //           // descHTML = descHTML + '</p>';
        //            descHTML = descHTML + '</div>';



        //            j =  1;
        //            markerIcon = "images/" + j + ".gif";

        //            if (i == 0) {
        //                addDefault(point, zoomMap)
        //            }

        //            var marker = CreateMarker(markerIcon, point, descHTML);
        //            map.addOverlay(marker)



        //        }

    });

   // initAccom();


    //addDefault


}

//addDefault
function addDefault(point, zoom) {
    var topLeft = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10, 10));
    //add map
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        //map.addControl(new GLargeMapControl());
        //map.addControl(new GMapTypeControl());
        //map.addControl(new BWMapControl());
        map.setCenter(point, parseFloat(zoom));
        map.addControl(new GSmallZoomControl3D(), topLeft);
        //map.setMapType(G_NORMAL_MAP);

        //

    }

}

function addPlacesMap(lattitude, longittude, title) {
    
    var point = new GLatLng(lattitude, longittude);
    //var point = new GLatLng(-26.234302, 152.709961);
    var zoomMap = 13;
    var descHTML;
    var markerIcon;
    
    addDefault(point, zoomMap)
   

    //build map data
    descHTML = '<div class="map">';
    descHTML = descHTML + '<p class="headline">';
    descHTML = descHTML + title;
    descHTML = descHTML + '</p>';
    descHTML = descHTML + '</div>';
    markerIcon = "images/1.gif";

    var marker = CreateMarker(markerIcon, point, descHTML);
    map.addOverlay(marker)
    
}


//Marker
function CreateMarker(image, point, desc) {
    // Create our "tiny" marker icon
    var baseIcon = new GIcon(G_DEFAULT_ICON);
    baseIcon.image = image;
    baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
    baseIcon.iconSize = new GSize(20, 34);
    baseIcon.shadowSize = new GSize(37, 34);
    baseIcon.iconAnchor = new GPoint(9, 34);
    baseIcon.infoWindowAnchor = new GPoint(9, 2);

    var VisitorIcon = new GIcon(baseIcon);

    // Set up our GMarkerOptions object
    markerOptions = { icon: VisitorIcon };

    var marker = new GMarker(point, markerOptions);

    GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(desc);
    });

    return marker;
}

function centerMap(lat, lon) {
    map.closeExtInfoWindow();
    map.closeInfoWindow();

    var point = new GLatLng(parseFloat(lat), parseFloat(lon));

    map.setCenter(point);
}

//function initAccom() {
//    var j = 1;
//    var iconImage;
//    var descHTML;
//    var page = "MapData.aspx?m=a";
//    var url = page + "&RandomKey=" + Math.random() * Date.parse(new Date());

//    GDownloadUrl(url, function(data, responseCode) {
//        var xml = GXml.parse(data);
//        var markers = xml.documentElement.getElementsByTagName("accommodation");
//        for (var i = 0; i < markers.length; i++) {
//            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
//                            parseFloat(markers[i].getAttribute("long")));

//            var address = markers[i].getAttribute("desc");
//            var telephone = markers[i].getAttribute("telephone");
//            var url = markers[i].getAttribute("url");

//            //build map data
//            descHTML = '<div class="map">';
//            descHTML = descHTML + '<p class="headline">';
//            descHTML = descHTML + address;
//            descHTML = descHTML + '</p>';
//            descHTML = descHTML + '<p class="telephone">';
//            descHTML = descHTML + telephone;
//            descHTML = descHTML + '</p>';
//            descHTML = descHTML + '<p class="url">';
//            descHTML = descHTML + '<a href="http://';
//            descHTML = descHTML + url;
//            descHTML = descHTML + '" target="_blank"> Website </a>';
//            descHTML = descHTML + '</p>';
//            descHTML = descHTML + '</div>';

//            iconImage = 'accom' + j + ".gif";

//            map.addOverlay(MakeAccomMarker(iconImage, point, descHTML))

//            j = j + 1;

//        }
//    });
//}