// Load Google API & prototype first!

function CustomInfoWindow(id,marker,html){
 this.divId=id;
 this.marker=marker;
 this.content=html;
}

CustomInfoWindow.prototype=new GOverlay();

CustomInfoWindow.prototype.initialize=function(map){
 this.map=map;
 var div=document.createElement("div");
 div.id=this.divId;
 map.getPane(G_MAP_FLOAT_PANE).appendChild(div);
 div=$(this.divId);
 div.innerHTML='<div class="ciw" style="position:relative; z-index: 2;"><div class="ciw-close" style="float:right;position:relative;right:2px;top:2px;" onclick="$(\''+this.divId+'\').hide();">x</div>'+this.content+'</div><div class="ciw-dropshadow" style="position:absolute; top:3px; left:3px; z-index: 1; background-color: #303030; width: 100%; height: 100%; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40); -moz-opacity: 0.4;">&nbsp;</div>';
 div.setStyle({position:'absolute'});
 this.hide();
}

CustomInfoWindow.prototype.remove=function(){
 $(this.divId).remove();
}

CustomInfoWindow.prototype.copy=function(){
 return new CustomInfoWindow(this.marker,this.conten);
}

CustomInfoWindow.prototype.redraw=function(force){
 if(!force)return;
 var div=$(this.divId);
 var markerPos=this.map.fromLatLngToDivPixel(this.marker.getPoint());
 var iconAnchor=this.marker.getIcon().iconAnchor;
 var xPos=Math.round(markerPos.x - div.getWidth() / 2);
 var yPos=markerPos.y - iconAnchor.y - div.getHeight() - 4;
 $(this.divId).setStyle({top: yPos+'px', left: xPos+'px'});
}

CustomInfoWindow.prototype.show=function(){
 $(this.divId).show();
}

CustomInfoWindow.prototype.hide=function(){
 $(this.divId).hide();
}