// "Butterfat Google Map Extentions" (ButterFlavoredMap.js)
//  Released under the GNU GPL  by bmuller@buttterfat.net- http://www.gnu.org/licenses/gpl.txt
/****************************************************************************************************

Make sure that you include this file AFTER the google js file.

These extensions so far allow for the following:
 I.   2 panes on information windows above markers
 II.  Circles using meters for radius size.
 III. Redraw html info windows (for Firefox < 1.5)

I. 2 panes on information windows above markers
  // First construct a marker as usual 
  point = new GPoint(-79.92818713188171, 32.804599475277726);
  marker = new GMarker(point);

  // now set the title and contents of both panes 
  marker.setPaneOne("title one","this is<br />the first content");
  marker.setPaneTwo("title two","this is<br />the second content");

  // instead of registering with GEvent, add a listener to the map 
  map.addTabbedPaneListener(marker);

  // add the overlay as usual 
  map.addOverlay(marker);

II. Circles using meters for radius size.
  // This assumes that a degree of latitude/longitude==111 km
  // Construct a new point - this will be the center of the circle
  var point = new GPoint(-79.92427110671997, 32.804374029124304);

  // Construct a new GCircle with a GPoint and the radius size in meters
  var c = new GCircle(point,100);

  // Create a new GPolyline using the points array from the GCircle, your favorite color,
  // and the size of the circle line
  var line = new GPolyline(c.points,"#ff0000",4);

  // add the overlay as usual
  map.addOverlay(line);

III. Redraw html info windows (for Firefox < 1.5)
  // On Firefox the html information bubbles do not automatically redraw when content is placed in them.
  // Many times they do not expand correctly.  This solves the problem.
  // Note: I've been having trouble getting this to work when a div is given the id

  //////////////////////////////////////////////////////////////////
  // For an untabbed window - put this inside the GEvent function \\
  // get a new id
  var id = MAP.getId();

  // make sure to give the top element the id
  var loginInfo = "<table width=\"250\" id=\""+id+"\"><tr><td>Log in below to see user information</td></tr></table>";

  // store the top element's id in your marker
  marker.id = id;
 
  // open the infowindow
  marker.openInfoWindowHtml(loginInfo);

  // redraw the info window
  marker.redrawWindow();

  ////////////////////////////////////////////////////////////////////////////
  // For a tabbed window, just give the top element in the first pane an id\\
  // then set the id, then give the top element in the second pane an id and 
  // set the idTwo of the marker.
  marker.id = id;
  marker.idTwo = idTwo;

  // then add the listener as usual - that's it!
  map.addTabbedPaneListener(marker);

*****************************************************************************************************/
GMarker.prototype.setPaneOne = function(title,contents) { this.titleOne=title; this.contentsOne=contents; };
GMarker.prototype.setPaneTwo = function(title,contents) { this.titleTwo=title; this.contentsTwo=contents; };
GMarker.prototype.makePane = function(number) {
   var one = "<div page=\"1\" class=\"active\" label=\""+this.titleOne+"\">"+this.contentsOne+"</div>";
   one += "<div label=\""+this.titleTwo+"\" page=\"2\"></div>";
   var two = "<div page=\"1\" label=\""+this.titleOne+"\"></div>";
   two += "<div class=\"active\" label=\""+this.titleTwo+"\" page=\"2\">"+this.contentsTwo+"</div>";
   return ((number==1) ? one : two);
};
GMarker.prototype.redrawWindow = function() {
  if(this.id!=null) redrawElement(document.getElementById(this.id));
  if(this.idTwo!=null) redrawElement(document.getElementById(this.idTwo));
}

GMap.prototype.addTabbedPaneListener = function(marker) {
  this.butterTheMap();
  var map = this;
  GEvent.addListener(marker, "click", function() {
    map.getInfoWindow().addContext("lastMarker",marker);
    marker.openInfoWindowHtml(marker.makePane(1));
    marker.redrawWindow();
  });
}
GMap.prototype.getId = function() {
  this.butterTheMap();
  this.currentId++;
  return "MAP_ID_"+this.currentId;
}
GMap.prototype.butterTheMap = function() {
  if(this.hasBeenButtered) return;
  if(!GBrowserIsCompatible()) alert("Your browser is not supported.  All recent versions of Firefox, Internet Explorer, and Safari work.");
  this.getInfoWindow().addContext("iwstate",function(a,b,c) {
    if(a=="page") { 
      this.lastMarker.openInfoWindowHtml(this.lastMarker.makePane(b)); 
      this.lastMarker.redrawWindow(); 
    }
  });
  this.getInfoWindow().addContext("iwnavigate",function(a,b,c) { return false; });
  this.currentId=-1;
  this.hasBeenButtered = true;
}

function GCircle(p,meters) {
  var radius = meters / 111000;
  this.getX = function(degree) { return (radius*Math.sin(degree*Math.PI/180)); };
  this.getY = function(degree) { return (radius*Math.cos(degree*Math.PI/180)); };
  this.points = new Array();
  for(var i=0; i<37; i++) { this.points[i] = new GPoint((p.x+this.getX(i*10)),(p.y+this.getY(i*10))); }
}

/* map should be an element */
function sizeMapElement(map,x,y) {
  var h, w;
  // IE sucks
  if(map.currentStyle) {
    h = document.documentElement.clientHeight - (y+50);
    w = document.documentElement.clientWidth - x;
    map.style['width']= w+"px";
    map.style['height']=h+"px";
  } else {
    h = window.innerHeight - y;
    w = window.innerWidth - x;
    map.style.width=w+"px";
    map.style.height=h+"px";
  }
}

/* only works for block elements */
function redrawElement(element) {
  // IE sucks
  if(map.currentStyle) {
    element.style['display']="none";
    element.style['display']="block";
  } else if(element) {
    element.style.display="none";
    element.style.display="block";
  }
}