/* Variable definition*/
var marker;
var map;
var tooltip;
var iconOptions = {};
var defaultpoint;
var defaultZoom;
var defaultLat;
var defaultLon;
var defaultDesc;

/* End of  Variable definition*/

// A DTTMapControl is a GControl that displays textual "Visitors"
// and "Accommodation" buttons

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

// To "subclass" the GControl, we set the prototype object to
// an instance of the GControl object
DTTMapControl.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.
DTTMapControl.prototype.initialize = function(map) {
  var container = document.createElement("div");

  var visitorInfoDiv = document.createElement("div");
  this.setButtonStyle_(visitorInfoDiv);
  container.appendChild(visitorInfoDiv);
  visitorInfoDiv.appendChild(document.createTextNode("Visitor Centre"));
  GEvent.addDomListener(visitorInfoDiv, "click", function() {
  map.clearOverlays(); 
  
  //addvisitors
  addVisitors();  

  //var point = new GLatLng(-22.913219, 139.907777);
  MakeDefaultMarker();

  });

//Create Accommodation
  var accomInfoDiv = document.createElement("div");
  this.setButtonStyle_(accomInfoDiv);
  container.appendChild(accomInfoDiv);
  accomInfoDiv.appendChild(document.createTextNode("Accommodation"));
  GEvent.addDomListener(accomInfoDiv, "click", function() {
    
  map.clearOverlays();
  map.closeExtInfoWindow();        
  
  addAccommodation();
    
  //var point = new GLatLng(-22.913219, 139.907777);
        
  MakeDefaultMarker();
    
  });

//Hide all
  var hideAllDiv = document.createElement("div");
  this.setButtonStyle_(hideAllDiv);
  container.appendChild(hideAllDiv);
  hideAllDiv.appendChild(document.createTextNode("Hide all"));
  GEvent.addDomListener(hideAllDiv, "click", function() {
    
    map.clearOverlays();  
    map.closeExtInfoWindow();      
    
    //var point = new GLatLng(-22.913219, 139.907777);
        
    MakeDefaultMarker();
    
  });


////Panoramio
// var PanoramioDiv = document.createElement("div");
//  this.setButtonStyle_(PanoramioDiv);
//  container.appendChild(PanoramioDiv);
//  PanoramioDiv.appendChild(document.createTextNode("Photo's"));
//  GEvent.addDomListener(PanoramioDiv, "click", function() {
//    
//    map.clearOverlays();  
//    map.closeExtInfoWindow();      
//    
//    addPanoramio();
//            
//    MakeDefaultMarker();
//    
//  });
    


  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.
DTTMapControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}

// Sets the proper CSS for the given button element.
DTTMapControl.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 initialize(point,desc,zoom) {
            
      defaultZoom = zoom;
      defaultpoint = point;
      var topLeft = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(90,10));
      
      
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(defaultpoint, parseFloat(defaultZoom));
        map.addControl(new DTTMapControl());        
        map.addControl(new GSmallZoomControl3D(), topLeft);
        map.addControl(new PanoMapTypeControl()); 
        
        // ====== set up marker mouseover tooltip div ======
      tooltip = document.createElement("div");
      document.getElementById("map_canvas").appendChild(tooltip);
      tooltip.style.visibility="hidden";       

        
      MakeDefaultMarker();

        
      }
    }
    
    
    // A function to create the marker and set up the event window
function createMarker(ioption, point,name,html) {
        var newIcon = MapIconMaker.createLabeledMarkerIcon(ioption);
        marker = new GMarker(point, {icon: newIcon});
        //var marker = new GMarker(point);
        // === store the name so that the tooltip function can use it ===
        marker.tooltip = '<div class="tooltip">'+name+'<\/div>';
        GEvent.addListener(marker, "click", function() {
          //marker.openInfoWindowHtml(html);
          marker.openExtInfoWindow(
              map,
              "simple_example_window",
              html,
              {beakOffset: 3}
            );
        });
        //gmarkers[i] = marker;
        //htmls[i] = html;
        //side_bar_html += '<a href="javascript:myclick(' + i + ')" onmouseover="mymouseover('+i+')" onmouseout="mymouseout()">' + name + '<\/a><br>';
        //i++;
        map.addOverlay(marker);

        //  ======  The new marker "mouseover" and "mouseout" listeners  ======
        GEvent.addListener(marker,"mouseover", function() {
          showTooltip(marker);
        });        
        GEvent.addListener(marker,"mouseout", function() {
		tooltip.style.visibility="hidden"
        });        
      }

    
function MakeDefaultMarker()
{
    //
        iconOptions.width = 32;
        iconOptions.height = 32;
        iconOptions.primaryColor = "#FF0000";
        iconOptions.cornerColor = "#FFFFFF";
        iconOptions.strokeColor = "#000000";
        iconOptions.addStar = true;
        iconOptions.starStrokeColor = "#0000FF";
        
        createMarker(iconOptions,defaultpoint,defaultDesc,defaultDesc);  

}     
    
  

function MakeAccommMarker()
{
    var iconOptions = {};
    iconOptions.primaryColor = "#00FF00";
    iconOptions.strokeColor = "#000000";
    iconOptions.label = "A";
    iconOptions.labelColor = "#000000";
    iconOptions.addStar = false;
    iconOptions.starPrimaryColor = "#FFFF00";
    iconOptions.starStrokeColor = "#0000FF";
    var newIcon = MapIconMaker.createLabeledMarkerIcon(iconOptions);
    
    marker = new GMarker(map.getCenter(), {icon: newIcon});

}  

// ====== This function displays the tooltip ======
      // it can be called from an icon mousover or a side_bar mouseover
 function showTooltip(marker) {
      	tooltip.innerHTML = marker.tooltip;
	var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.getBounds().getSouthWest(),map.getZoom());
	var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
	var anchor=marker.getIcon().iconAnchor;
	var width=marker.getIcon().iconSize.width;
	var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(offset.x - point.x - anchor.x + width,- offset.y + point.y +anchor.y)); 
	pos.apply(tooltip);
	tooltip.style.visibility="visible";
}


//Visitors
function addVisitors()
{
    var descHTML;
    var page = "mapdata.aspx?m=v";
    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("visitor");
        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 align="left" class="headline">';
            descHTML = descHTML + address;
            descHTML = descHTML + '</p>';
            descHTML = descHTML + '<p align="left" class="telephone">PH: ';            
            descHTML = descHTML + telephone;            
            descHTML = descHTML + '</p>';
            descHTML = descHTML + '<p align="left" class="url"> Visit:';            
            descHTML = descHTML + '<a href="http://';
            descHTML = descHTML + url;
            descHTML = descHTML + '" target="_blank"> Website </a>';      
            descHTML = descHTML + '</p>';
            descHTML = descHTML + '</div>';
            
            map.addOverlay(MakeVisitorMarker(point, descHTML))            

        }
    });
    

}

function MakeVisitorMarker(point, desc)
{
    
    // Create our "tiny" marker icon
    var baseIcon = new GIcon(G_DEFAULT_ICON);
    baseIcon.image = "images/visitor.gif";
    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);
         marker.openExtInfoWindow(
              map,
              "simple_example_window",
              desc,
              {beakOffset: 3}
            );
    });
    
    return marker;

} 

//Accommodation
function addAccommodation()
{
    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 align="left" class="headline">';
            descHTML = descHTML + address;
            descHTML = descHTML + '</p>';
            descHTML = descHTML + '<p align="left" class="telephone">PH:';            
            descHTML = descHTML + telephone;            
            descHTML = descHTML + '</p>';
            descHTML = descHTML + '<p align="left" class="url"> Visit:';            
            descHTML = descHTML + '<a href="http://';
            descHTML = descHTML + url;
            descHTML = descHTML + '" target="_blank"> Website </a>';      
            descHTML = descHTML + '</p>';
            descHTML = descHTML + '</div>';
         
            
            map.addOverlay(MakeAccomMarker(point, descHTML))            

        }
    });
}

function MakeAccomMarker(point, desc)
{
    
    // Create our "tiny" marker icon
    var baseIcon = new GIcon(G_DEFAULT_ICON);
    baseIcon.image = "images/Accom.gif";
    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);
         marker.openExtInfoWindow(
              map,
              "simple_example_window",
              desc,
              {beakOffset: 3}
            );
    });
    
    return marker;

} 

//load Map
function loadGMap(id)
{
    var page = "mapdata.aspx?m=j&id=" + id;
    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("journal");        
        for (var i = 0; i < markers.length; i++) {
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                            parseFloat(markers[i].getAttribute("long")));
            
            defaultLat = markers[i].getAttribute("lat");
            defaultLon = markers[i].getAttribute("long");
            defaultDesc = markers[i].getAttribute("desc");
            //var address = markers[i].getAttribute("desc");
            
            var zoom = markers[i].getAttribute("zoom");
            
                       
            initialize(point,defaultDesc,zoom);
            //addPanoramio();
            break;           

        }
    });
    
}


//Iternary
function initDinasorous() {

    var map;
    var directionsPanel;
    var directions;
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(-22.478433, 143.183433), 6);
    directionsPanel = document.getElementById("route");
    directions = new GDirections(map);
    directions.load("from: Longreach, Queensland, Australia to: ilfracombe, Queensland, Australia to: barcaldine, Queensland, Australia to: 21 vindex street Winton, Queensland, Australia to: lark quarry conservation park, Queensland, Australia to: boulia, Queensland, Australia", { getSteps: false });

}