//create the SmallInfoWindow overlay onject
function SmallInfoWindow(marker,html,width) {
	this.html_ = html;
	this.width_ = ( width ? width + 'px' : '');
	this.marker_ = marker;
}

//use the GOverlay class
SmallInfoWindow.prototype = new GOverlay();

//initialize the container and shadowContainer
SmallInfoWindow.prototype.initialize = function(map) {
	this.map_ = map;
	var container = document.createElement("div");
	container.style.display='none';
	map.getPane(G_MAP_FLOAT_PANE).appendChild(container);
	this.container_ = container;
}

SmallInfoWindow.prototype.remove = function() {
	this.container_.parentNode.removeChild(this.container_);
}

SmallInfoWindow.prototype.copy = function() {
	return new SmallInfoWindow(this.marker_,this.html_,this.width_);
}

SmallInfoWindow.prototype.redraw = function(force) {
	if (!force) return;

	//get the content div
	var content = document.createElement("div");
	content.innerHTML = this.html_;
	content.style.font='10px verdana';
	content.style.margin='0';
	content.style.padding='0';
	content.style.border='none';
	content.style.display='block';

	if(!this.width_ || this.width_=='auto' || this.width_ <= 0) {
		//the width is unknown so set arough maximum and minimum
		content.style.minWidth = '10px';
		//content.style.maxWidth = '500px';
		content.style.width = '400px';
	} else {
		//the width was set when creating the window
		content.style.width = this.width_;
	}

	//make it invisible for now
	//content.style.visibility='hidden';

	//temporarily append the content to the map container
	this.map_.getContainer().appendChild(content);

	//retrieve the rendered width and height
	var contentWidth = content.offsetWidth;
	var contentHeight = content.offsetHeight;

	//remove the content from the map
	content.parentNode.removeChild(content);
	content.style.visibility='visible';

	//set the width and height to ensure they
	//stay that size when drawn again
	content.style.width=contentWidth+'px';
	content.style.height=contentHeight+'px';

	//set up the actual position relative to your images
	content.style.position='absolute';
	content.style.left='5px';
	content.style.top='7px';
	content.style.background='white';

	//create the wrapper for the window
	var wrapper = document.createElement("div");

	//first append the content so the wrapper is above
	wrapper.appendChild(content);

    var img = document.createElement('img');
	//load the image from your local image directory
	//based on the property name of the wrapperParts object
	img.src = 'images/bubblearrow.gif';
	//set the appropriate positioning attributes
	img.style.position='absolute';
	img.style.top=(contentHeight+7)+'px';
	img.style.left='200px';
	img.style.width='17px';
	img.style.height='18px';
	wrapper.appendChild(img);

	//get the X,Y pixel location of the marker
	var pixelLocation = this.map_.fromLatLngToDivPixel(
	this.marker_.getPoint()
	);

	//position the container div for the window
	this.container_.style.position='absolute';
	this.container_.style.left = ((pixelLocation.x-3)-200) + "px";
	this.container_.style.top = (pixelLocation.y
	    - contentHeight
		- 15
		- this.marker_.getIcon().iconSize.height
	) + "px";
	
	this.container_.style.border = '0';
	this.container_.style.margin = '0';
	this.container_.style.padding = '0';
	this.container_.style.display = 'block';
	
	//append the styled info window to the container
	this.container_.appendChild(wrapper);
	
	  //retrieve the rendered width and height
	var contentWidth = content.offsetWidth;
	var contentHeight = content.offsetHeight;

    //content.style.width=contentWidth+'px';
	//content.style.height=contentHeight+'px';
	
	wrapper.style.width=contentWidth+'px';
	wrapper.style.height=contentHeight+'px';

	//pan if necessary so it shows on the screen
	var mapNE = this.map_.fromLatLngToDivPixel(
		this.map_.getBounds().getNorthEast()
	);

	var panX=0;
	var panY=0;

	if(this.container_.offsetTop < mapNE.y) {
		//top of window is above the top edge of the map container
		panY = mapNE.y - this.container_.offsetTop;
	}

	if(this.container_.offsetLeft+contentWidth+10 > mapNE.x) {
		//right edge of window is outside the right edge of the map container
		panX = (this.container_.offsetLeft+contentWidth+10) - mapNE.x;
	}
	
	/*alert((this.container_.offsetLeft)+ ','+mapNE.x);
	if(this.container_.offsetLeft < -25) {
		panX = -25 + mapNE.x;
	}*/

	if(panX!=0 || panY!=0) {
		//pan the map
		this.map_.panBy(new GSize(-panX-10,panY+30));
	}
}

//add anew method to GMarker so you
//can use asimilar API to the existing info window.
var openInfoWindowMarker = null; // to make sure only one infowindow is open
GMarker.prototype.SmallInfoWindowInstance = null;

GMarker.prototype.openSmallInfoWindow = function(content,width) {
	if(this.SmallInfoWindowInstance == null) {
		this.SmallInfoWindowInstance = new SmallInfoWindow(
			this,
			content,
			width
		);
		if(openInfoWindowMarker != null){
		    openInfoWindowMarker.closeSmallInfoWindow();
		}
		map.addOverlay(this.SmallInfoWindowInstance);
		openInfoWindowMarker = this;
	}
}

GMarker.prototype.closeSmallInfoWindow = function() {
	if(this.SmallInfoWindowInstance != null) {
		map.removeOverlay(this.SmallInfoWindowInstance);
		this.SmallInfoWindowInstance = null;
		openInfoWindowMarker = null;
	}
}