//global variables
var gmarkers = [];
var htmls = [];
var iCnt = 0;

// 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 = "MapData.aspx?m=b&r=" + r_id;
    var url = page + "&RandomKey=" + Math.random() * Date.parse(new Date());
    GDownloadUrl(url, function(data, responseCode) {

        var xml = GXml.parse(data);
        var birdsitesMap = xml.documentElement.getElementsByTagName("BirdSite");

        for (var i = 0; i < birdsitesMap.length; i++) {
            var point = new GLatLng(parseFloat(birdsitesMap[i].getAttribute("lat")),
                                    parseFloat(birdsitesMap[i].getAttribute("long")));

            desc = birdsitesMap[i].getAttribute("desc");
            zoomMap = birdsitesMap[i].getAttribute("zoom");
            imgURL = birdsitesMap[i].getAttribute("image");

            //build map data
            descHTML = '<div class="map">';
            descHTML = descHTML + '<p class="headline">';
            descHTML = descHTML + desc;
            descHTML = descHTML + '</p>';
            if (imgURL != "") {
                descHTML = descHTML + '<p class="img">';
                descHTML = descHTML + '<img width="150" height="95" src="';
                descHTML = descHTML + imgURL;
                descHTML = descHTML + '" />';
                descHTML = descHTML + '</p>';
            }
            descHTML = descHTML + '</div>';



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

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

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



        }

    });
    
    initAccom();
    
    
    

        
}

//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);
        
        //
         
     }      
        
}

//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);
        //  });
                                        
   
   
   
   // JIM MADE THIS CHANGE 
        GEvent.addListener(marker, "click", function() {
        //marker.openInfoWindowHtml(desc);
        marker.openExtInfoWindow(
              map,
              "simple_example_window",
              desc,
              {beakOffset: 3}
            );
    });
    
   // JIM CHANGE ENDS HERE FINGERS CROSSED!

    gmarkers[iCnt] = marker;
    htmls[iCnt] = desc;
    iCnt++;
    return marker;
}

function centerRegionMap(lat,lon, iImgCounter)
{
     map.closeExtInfoWindow();
     map.closeInfoWindow();
     
     var point = new GLatLng(parseFloat(lat), parseFloat(lon));

     map.setCenter(point);

     OpenWin(iImgCounter);


 }

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

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

     map.setCenter(point);


 }

 // This function picks up the click and opens the corresponding info window
 function OpenWin(i) {
     //gmarkers[i].openInfoWindowHtml(htmls[i]);

     i--;

     gmarkers[i].openExtInfoWindow(
              map,
              "simple_example_window",
              htmls[i],
              { beakOffset: 3 }
            );
     
 }

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 + '<span class="headline">';
            descHTML = descHTML + address;
            descHTML = descHTML + '</span><br/>Accommodation';
            descHTML = descHTML + '<br/><br/><span class="telephone">Ph: ';            
            descHTML = descHTML + telephone;            
            descHTML = descHTML + '</span><br/>';
            descHTML = descHTML + '<span class="url">Visit our: ';            
            descHTML = descHTML + '<a href="http://';
            descHTML = descHTML + url;
            descHTML = descHTML + '" target="_blank"> Website </a>';      
            descHTML = descHTML + '</span>';
            descHTML = descHTML + '</div>';
            
            iconImage = 'accom' + j + ".gif";
            
            map.addOverlay(MakeAccomMarker(iconImage, point, descHTML))            
            
            j = j + 1;

        }
    });
    
    
}