var map;

function createMarker(point, ServiceProvider, html) {   
			
	var baseIcon = new GIcon();
	baseIcon.iconSize = new GSize(24, 46);
	baseIcon.iconAnchor = new GPoint(12, 38);
	baseIcon.shadow = "/Content/images/mapicons/shadow.png";
	baseIcon.shadowSize = new GSize(44, 46);
	baseIcon.shadowAnchor = new GPoint(10, 45);
	
	var icon = new GIcon(baseIcon);  
	icon.image = "/Content/images/mapicons/"+ServiceProvider+"/pointer.png"; 
	
	var marker = new GMarker(point, icon);  
	GEvent.addListener(marker, "click", function() 
	{   
		if(marker.MapWindowInstance) 
		{
			marker.closeMapWindow();
		} 
		else 
		{
			marker.openMapWindow(html);
		}
	});  
	return marker;
}

function createDraggableMarker(point, ServiceProvider, html) {   
			
	var baseIcon = new GIcon();
	baseIcon.iconSize = new GSize(24, 46);
	baseIcon.iconAnchor = new GPoint(12, 38);
	baseIcon.shadow = "/Content/images/mapicons/shadow.png";
	baseIcon.shadowSize = new GSize(44, 46);
	baseIcon.shadowAnchor = new GPoint(10, 45);
	
	var icon = new GIcon(baseIcon);  
	icon.image = "/Content/images/mapicons/"+ServiceProvider+"/pointer.png";  
	var marker = new GMarker(point, {icon:icon, draggable:true});           
    GEvent.addListener(marker, "dragstart", function() {
    if(marker.MapWindowInstance) 
	{
		marker.closeMapWindow();		
	}
    });
	return marker;
}

function MapWindow(marker, html, width) {
	this.html_ = html;
	this.width_ = (width ? width + 'px' : 'auto');
	this.marker_ = marker;
}

MapWindow.prototype = new GOverlay();

MapWindow.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;
	
	var shadowContainer = document.createElement("div");
	shadowContainer.style.display='none';
	map.getPane(G_MAP_FLOAT_SHADOW_PANE).appendChild(shadowContainer);
	this.shadowContainer_ = shadowContainer;
}

MapWindow.prototype.remove = function() {
	this.container_.parentNode.removeChild(this.container_);
	//don't forget to remove the shadow as well
	this.shadowContainer_.parentNode.removeChild(this.shadowContainer_);
}

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

MapWindow.prototype.redraw = function(force) {
	if(!force) return;
	
	var marker = this.marker_;
	
	while (this.container_.childNodes[0]) 
	{    
		this.container_.removeChild(this.container_.childNodes[0]);  
	}
	
	while (this.shadowContainer_.childNodes[0]) 
	{    
		this.shadowContainer_.removeChild(this.shadowContainer_.childNodes[0]);  
	}
		
	//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='0';
	content.style.display='inline';

	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 = 'auto';
	} 
	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.firstChild.clientWidth;
	var contentHeight = content.firstChild.clientHeight;
	
	//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='-26px';
	content.style.top='-5px';
	content.style.backgroundColor='white';
	content.style.backgroundImage = 'url(/Content/images/mapicons/mapWindow/bg.png)';
	content.style.backgroundPosition = 'bottom';
	content.style.backgroundRepeat="repeat-x";
	
	//create the wrapper for the window
	var wrapper = document.createElement("div");

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

	//create an object to reference each image
	var wrapperParts = {
		tl:{l:-27, t:-6, w:2, h:2},
		t:{l:-26, t:-6, w:(contentWidth), h:2},
		tr:{l:(contentWidth-27), t:-6, w:2, h:2},
		l:{l:-27, t:-5, w:2, h:contentHeight},
		r:{l:(contentWidth-27), t:-5, w:2, h:(contentHeight)},
		bl:{l:-27, t:(contentHeight-6), w:2, h:2},
		b:{l:-26, t:(contentHeight-6), w:(contentWidth), h:2},
		br:{l:(contentWidth-27), t:(contentHeight-6), w:2, h:2},
		c:{l:(contentWidth-45), t:-2, w:18, h:19},
		p:{l:10, t:(contentHeight-6), w:25, h:16}
	}
	
	var arVersion = navigator.appVersion.split("MSIE")
	var version = parseFloat(arVersion[1])
	
	for (i in wrapperParts) {
		var img = document.createElement('img');
		//load the image from your local image directory
		//based on the property name of the wrapperParts object
		img.src = '/Content/images/mapicons/mapWindow/' + i + '.png';
		//set the appropriate positioning attributes
		img.style.position='absolute';
		img.style.top=wrapperParts[i].t+'px';
		img.style.left=wrapperParts[i].l+'px';
		img.style.width=wrapperParts[i].w+'px';
		img.style.height=wrapperParts[i].h+'px';
		wrapper.appendChild(img);
		wrapperParts[i].img = img;
			
		if(!isNaN(version) && version >= 5.5 && document.body.filters)
		{
			var imgName = img.src.toUpperCase()
			if (imgName.substring(imgName.length-3, imgName.length) == "PNG" && i == 'p')
			{
				var imgStyle = "display:inline-block;" + img.style.cssText; 
				var strNewHTML = "<span "
				+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
				+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
				+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
				img.outerHTML = strNewHTML;
			}
		}
	}
	
	//add any event handlers like the close box
	GEvent.addDomListener(wrapperParts.c.img, "click", function() {
		marker.closeMapWindow();
	});
	
	//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-23) + "px";
	this.container_.style.top = (pixelLocation.y
		- contentHeight
		- 10
		- 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);
	
	//add ashadow
	this.shadowContainer_.parentNode.style.zIndex = this.shadowContainer_.parentNode.style.zIndex - 2;
	this.shadowContainer_.style.position='absolute';
	this.shadowContainer_.style.left = (pixelLocation.x+6) + "px";
	this.shadowContainer_.style.top = (pixelLocation.y
		- 10
		- this.marker_.getIcon().iconSize.height
	) + "px";

	this.shadowContainer_.style.border = '0px';
	this.shadowContainer_.style.margin = '0';
	this.shadowContainer_.style.padding = '0';
	this.shadowContainer_.style.display = 'block';
	var shadowParts = {
		sl:{l:-20, t:-70, w:62, h:105},
		s:{l:42, t:-70, w:(contentWidth-67), h:105},
		sr:{l:(contentWidth-25), t:-70, w:62, h:105}
	}
	
	//create the wrapper for the window
	var shadowWrapper = document.createElement("div");

	for (i in shadowParts) {
		var img = document.createElement('img');
		img.src = '/Content/images/mapicons/mapWindow/' + i + '.png';
		img.style.position='absolute';
		img.style.top=shadowParts[i].t+'px';
		img.style.left=shadowParts[i].l+'px';
		img.style.width=shadowParts[i].w+'px';
		img.style.height=shadowParts[i].h+'px';
		
		shadowWrapper.appendChild(img);
		shadowParts[i].img = img;
		
		if(!isNaN(version) && version >= 5.5 && document.body.filters)
		{
			var imgName = img.src.toUpperCase()
			if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
			{
				var imgStyle = "display:inline-block;" + img.style.cssText; 
				var strNewHTML = "<span "
				+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
				+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
				+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
				
				img.outerHTML = strNewHTML;
			}
		}
		
	}
	
	this.shadowContainer_.appendChild(shadowWrapper);
	
	//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;
	}

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

GMarker.prototype.MapWindowInstance = null;

GMarker.prototype.openMapWindow = function(content,width) {
	
	if(this.MapWindowInstance == null) 
	{
		this.MapWindowInstance = new MapWindow(this, content, width);
		map.addOverlay(this.MapWindowInstance);
	}
}


GMarker.prototype.closeMapWindow = function() {
	if(this.MapWindowInstance != null) {
		map.removeOverlay(this.MapWindowInstance);
		this.MapWindowInstance = null;
	}
}

GMap2.prototype.centerAndZoomOnBounds = function(bounds) {
    
    var center = bounds.getCenter();
    var newZoom = map.getBoundsZoomLevel(bounds);
    if (newZoom > 0)
    {
        newZoom = newZoom - 1
    }
    if (map.getZoom() != newZoom){
        map.setCenter(center, newZoom);
    } 
    else
    {
        map.panTo(center);
    }
}