/* An InfoBox is like an info window, but it displays
 * under the marker, opens quicker, and has flexible styling.
 * @param {GLatLng} latlng Point to place bar at
 * @param {Object} opts Passes configuration options - content, 
 *   offsetVertical, offsetHorizontal, className, height, width
 */
function InfoBox(latlng, opts, closebutton) {
  this.latlng_ = latlng;
  
  this.setContent(opts,closebutton);
  
  this.offsetVertical_ = opts.offsetVertical -10 ;
  this.offsetHorizontal_ = opts.offsetHorizontal - 126;

  this.className_ = opts.className || "";
  
}

function SubGPoints(a,b)
{
	return new GPoint(a.x-b.x,a.y-b.y);
}

function AddGPoints(a,b)
{
	return new GPoint(a.x+b.x,a.y+b.y);
}

function LatLngToDivPixel(a,map)
{
	var mapll = map.fromLatLngToDivPixel(map.getBounds().getSouthWest());
	var curp = map.fromLatLngToDivPixel(a);
	var out = SubGPoints(curp,mapll);
	return new GPoint(out.x,-out.y);
}

function DivPixelToLatLng(a,map)
{
	var mapll = map.fromLatLngToDivPixel(map.getBounds().getSouthWest());
	var inp = new GPoint(a.x,-a.y);
	var np = AddGPoints(inp,mapll);
	return map.fromDivPixelToLatLng(np);
}

function IsInsideMap(ul,width,height,map)
{
	var mapsize = map.getSize();
	if (ul.x < 0)
		return false;
	if (ul.y-height < 0)
		return false;
	if (ul.x+width > mapsize.width)
		return false;
	if (ul.y > mapsize.height)
		return false;
	return true;
}

/* InfoBox extends GOverlay class from the Google Maps API
 */
InfoBox.prototype = new GOverlay();

InfoBox.prototype.setLatLng = function(latlng)
{
	this.latlng_ = latlng;
}

InfoBox.prototype.setContent = function(opts,closebutton)
{
	var html = []; 
	var title = opts.title;
    this.title_ = title;
	var img = opts.imgurl;
	var text = opts.text;
	var imgHeight = opts.imgHeight ;
	var imgWidth = opts.imgWidth;
	this.link = opts.link;
	var link = opts.link;
	this.height_ = opts.height || 100;
  	if (text != null && text != "")
  		this.width_ = 315;
  	else
  		this.width_ = 252;
  	if(closebutton == null) closebutton = "closebutton";
  	var show = true;
  	if(opts.show != null && opts.show == false) show = false;

	html.push("<table cellpadding='0' cellspacing='0' style='position:absolute;top:0px;'><tbody>");
	html.push("<tr><td style='padding:0px;background-image:url(/gps-mission/image/mapbox_info_ul.png);height:7px; width:2px;'/>");
	html.push("<td style='background-image:url(/gps-mission/image/mapbox_info_top1.png);height:7px;width:109px;'/>");
	html.push("<td style='background-image:url(/gps-mission/image/mapbox_info_top2.png);height:7px;width:"+(this.width_-(109+2+4))+"px; background-repeat:repeat-x;'/>");
	html.push("<td style='background-image:url(/gps-mission/image/mapbox_info_ur.png);height:7px; width:4px;'/></tr>");
	html.push("<tr><td style='background-image:url(/gps-mission/image/mapbox_info_lb.png);width:2px;background-repeat:repeat-y;'/>");
	html.push("<td colspan='2' style='vertical-align:top;background-color: #E5E5E5;padding-bottom:0px;'><div style='padding:2px;padding-left:5px;'>");
	html.push("   <img id='"+closebutton+"' style='position:absolute;top:10px; right:9px;cursor:pointer;' src='/gps-mission/image/mapbox_info_closebutton.png'/>");
	if (imgWidth != 0)
	{
		if (link != null)
			html.push("   <a href='"+link+"'>");
		html.push("   <img style='cursor:pointer;float:left;border:0px;padding-top:3px;padding-bottom:5px;padding-right:10px;' width='"+imgWidth+"' height='"+imgHeight+"' src='"+img+"' ");
		if(show) html.push("onclick='OpenImageShow(this.src)' ");
		html.push("/>");
		if (link != null)
			html.push("   </a>");
	}
	html.push("   "+title+"<br/>");
	html.push("   <p>"+text+"</p>");
	html.push("</div></td>");
	html.push("<td style='background-image:url(/gps-mission/image/mapbox_info_rb.png);width:4px;background-repeat:repeat-y;'/></tr>");
	html.push("<tr><td style='background-image:url(/gps-mission/image/mapbox_info_ll.png);height:4px; width:2px;'/>");
	html.push("<td colspan='2' style='background-image:url(/gps-mission/image/mapbox_info_bottom.png);height:4px;'/>");
	html.push("<td style='background-image:url(/gps-mission/image/mapbox_info_lr.png);height:4px; width:4px;'/></tr>");
	html.push("</tbody></table>");
  
  
  this.content_ = html.join(" ");
}


/* Creates the DIV representing this InfoBox
 * @param {GMap2} map The map to add infobox to
 */
InfoBox.prototype.initialize = function(map) {
  // Create the DIV representing our Bar
  var div = document.createElement("div");

  if (this.className_ != "") {
    div.className = this.className_;
  } else {
    //div.style.border = "1px solid #000000";
    div.style.position = "absolute";
    //div.style.backgroundColor = "#FFFFFF";
    div.style.padding = "2px";
    div.style.width = this.width_ + "px";
    //div.style.height = "auto";//(this.height_ )+ "px";
    //div.style.overflow = "hidden";
  } 

  var contentDiv = document.createElement("div");
  contentDiv.id = "infoboxcontent";
  contentDiv.innerHTML = this.content_;

  var topDiv = document.createElement("div");
  topDiv.style.textAlign = "right";
  //var closeImg = document.createElement("img");
  //closeImg.src = "http://www.google.com/intl/en_us/mapfiles/close.gif";
// not needed  topDiv.appendChild(closeImg);
	

  function removeInfoBox(ib, m) {
    return function() { 
      GEvent.trigger(ib, "closeclick");
      m.removeOverlay(ib);
    };
  }
  
 
// not needed  GEvent.addDomListener(closeImg, 'click', removeInfoBox(this, map));
 
  div.appendChild(contentDiv);
//not needed  div.appendChild(topDiv);
  div.style.display = 'none';

  map.getPane(G_MAP_FLOAT_PANE).appendChild(div);

  this.map_ = map;
  this.div_ = div;
  //contentDiv.style.backgroundColor = "white";
  //contentDiv.style.height = "auto";//this.height_ +"px";

  if (closehandler == null)
  {
  	closehandler = GEvent.addListener(this.map_,"moveend",this.onPanStop);
  }
  
 //alert($("#infoboxcontent").css('height'));
  this.panTo();
}

var opened = false;

/* Remove the main DIV from the map pane
 */
InfoBox.prototype.remove = function() {
  this.div_.parentNode.removeChild(this.div_);
  opened = false;
}

/* Copy our data to a new InfoBox
 * @return {InfoBox} Copy of infobox
 */
InfoBox.prototype.copy = function() {
  var opts = {};
  opts.latlng = this.latlng_;
  opts.content = this.content_;
  opts.offsetVertical = this.offsetVertical_;
  opts.offsetHorizontal = this.offsetHorizontal_;

  opts.className = this.className_ || "";  
  opts.height = this.height_;

  opts.width = this.width_;
  return new InfoBox(this.latlng, opts);
}

var panning = false;
var closehandler = null;

InfoBox.prototype.onPanStop = function() 
{
	panning = false;
}

/* Redraw the Bar based on the current projection and zoom level
 * @param {boolean} force Helps decide whether to redraw overlay
 */
InfoBox.prototype.redraw = function(force) {
 // We only need to redraw if the coordinate system has changed
  if (!force) return;

  // Calculate the DIV coordinates of two opposite corners of our bounds to
  // get the size and position of our Bar
  var pixPosition = new GPoint(0,0);
  pixPosition = this.map_.fromLatLngToDivPixel(this.latlng_);
  var mmc = this.map_.getCenter();
  //console.log("pixpos: "+pixPosition.x+","+pixPosition.y+ " latlng:"+this.latlng_.lat()+","+this.latlng_.lng()+"  c:"+mmc.lat()+","+mmc.lng());

  // Now position our DIV based on the DIV coordinates of our bounds
  this.div_.style.width = this.width_ + "px";
  this.div_.style.left = (pixPosition.x + this.offsetHorizontal_) + "px";

  //this.div_.style.height = this.height_ + "px";
  //this.div_.style.height = "auto";
  
  this.div_.style.top = (pixPosition.y + this.offsetVertical_) + "px";
  this.div_.style.display = 'block';
}

InfoBox.prototype.panTo = function() {
	if (panning == true)
		return;
	// get window bounds
	var mc = this.map_.getCenter();
	var msize = this.map_.getSize();
	var curmid = this.map_.fromLatLngToDivPixel(mc);
	var mb = this.map_.getBounds();
	var ne = this.map_.fromLatLngToDivPixel(mb.getNorthEast());
	var sw = this.map_.fromLatLngToDivPixel(mb.getSouthWest());

	// get popup bounds
 	var pixPosition = this.map_.fromLatLngToDivPixel(this.latlng_);
	var newpos = this.latlng_;
	var newmid = this.map_.fromLatLngToDivPixel(newpos);
	var pne = new GPoint(newmid.x - this.offsetHorizontal_  + 30 , newmid.y + this.offsetVertical_);
	var psw = new GPoint(newmid.x - this.offsetHorizontal_  - this.width_ +50 , newmid.y + this.offsetVertical_ + this.height_  );
	// calc boundingbox
	var bbne = new GPoint(Math.max(ne.x,pne.x),Math.min(ne.y,pne.y));
	var bbsw = new GPoint(Math.min(sw.x,psw.x),Math.max(sw.y,psw.y));
	// check if we are inside
	if (((bbne.x-bbsw.x) <= msize.width) && ((bbsw.y-bbne.y) <= msize.height))
	{
		// do nothin 
		return;
	}
	// check if we are complete outside
	if (((bbne.x-bbsw.x) >= 3*msize.width ) && ((bbsw.y-bbne.y) <= 3* msize.height))
	{
		newmid.x = newmid.x - 113 + (this.width_ / 2);
		newpos = this.map_.fromDivPixelToLatLng(newmid);
		this.map_.setCenter(newpos);
		return;
		// center on map
//		var div = new GSize(curmid.x- newmid.x, curmid.y-newmid.y);
//		this.map_.panBy(div);
//		return;
	}
	// so we are inbetween
	// calc x dif
	newmid.x = newmid.x - 113 + (this.width_ / 2);
	var div = new GSize(curmid.x- newmid.x, curmid.y-newmid.y);
	this.map_.panBy(div);
	panning = true;
}