function edit_geo_tooltip(html){
	this.html = html;
	this.classname = 'edit_geo_tooltip';
	this.default_classname = 'edit_geo_tooltip';
	//referende to the html element of this tooltip
	this.html_element = null;
	this.overlap = true;
	this.default_pixelOffset = new GSize(5,-25);
	this.pixelOffset = new GSize(5,-25);
	this.onMap = false;
	this.hide_timeout = null;
	this.myvar=null;
	this.hidden = true;
	this.marker_no = null;
}
edit_geo_tooltip.prototype = new GOverlay();

edit_geo_tooltip.prototype.add_to_map = function(my_map){
	this.html_element = new Element('div', {'id':'edit_geo_tooltip_id', 'class':''+this.classname});
	//should rather use the map parameter!!
	my_map = document.getElementById("map_canvas");
	this.html_element.injectInside(my_map);
}

edit_geo_tooltip.prototype.initialize = function(map) {
	var div = document.createElement("div");
	div.style.position = "absolute";
	div.style.visibility = "hidden";
	div.innerHTML = '<div class="' + this.classname + '">' + this.html + '</div>' ;
	map.getPane(G_MAP_FLOAT_SHADOW_PANE).appendChild(div);
	this.map_ = map;
	this.div_ = div;
	if (this.percentOpacity) {
	  if(typeof(div.style.filter)=='string'){div.style.filter='alpha(opacity:'+this.percentOpacity+')';}
	  if(typeof(div.style.KHTMLOpacity)=='string'){div.style.KHTMLOpacity=this.percentOpacity/100;}
	  if(typeof(div.style.MozOpacity)=='string'){div.style.MozOpacity=this.percentOpacity/100;}
	  if(typeof(div.style.opacity)=='string'){div.style.opacity=this.percentOpacity/100;}
	}
	if (this.overlap) {
	  var z = GOverlay.getZIndex(this.point.lat());
	  ///this.div_.style.zIndex = z;
	  //this.div_.style.zIndex = 1000;
	  var parent_div =  $(this.div_).getParent();
	  //console.log(parent_div.style.zIndex);
	  parent_div.style.zIndex = 1000;
	}
	if (this.hidden) {
	  this.hide();
	}
}
edit_geo_tooltip.prototype.remove = function() {
	alert("remove");
	this.div_.parentNode.removeChild(this.div_);
}

edit_geo_tooltip.prototype.copy = function() {
	alert("copy");
	return new edit_geo_tooltip(this.html);
}

edit_geo_tooltip.prototype.redraw = function(force) {
	var p = this.map_.fromLatLngToDivPixel(this.point);
	var h = parseInt(this.div_.clientHeight);
	this.div_.style.left = (p.x + this.pixelOffset.width) + "px";
	this.div_.style.top = (p.y +this.pixelOffset.height - h) + "px";

}
edit_geo_tooltip.prototype.setPoint = function(point) {
	alert(point);
	this.point = point;
	if (this.overlap) {
		var z = GOverlay.getZIndex(this.point.lat());
		this.div_.style.zIndex = z;
	}
	//this.redraw(true);
	this.redraw(true);
}
edit_geo_tooltip.prototype.getPoint = function() {
	return this.point;
}
edit_geo_tooltip.prototype.show = function(marker) {
	this.pixelOffset = this.default_pixelOffset;
	this.classname = this.default_classname;
	this.point = marker.getPoint();
	if(this.onMap==false){
		map.addOverlay(this);
		this.onMap = true;
	}
	if (this.div_) {
		var tooltip_text = marker.name;
		//var tooltip_text = marker.getTitle();
		if(tooltip_text!=""){
			//we use the same tooltip element and change the text for each show
			this.setContents(tooltip_text);
			this.html_element = $(this.div_).getElement('.'+this.classname);
			var myEffect = new Fx.Morph(this.html_element, {duration: 500, transition: Fx.Transitions.Sine.easeIn});
			myEffect.start({
				'opacity': [0,1]
			});
		}
		this.div_.style.display="";
		this.redraw();
	}
	this.hidden = false;
}
edit_geo_tooltip.prototype.setContents = function(html) {
	this.html = html;
	this.div_.innerHTML = '<div class="' + this.classname + '">' + this.html + '</div>' ;
	//this.redraw(true);
	this.redraw();
}
edit_geo_tooltip.prototype.show_1 = function(marker) {
	this.point = marker.getPoint();
	if(!this.onMap){
		my_map = document.getElementById("map_canvas");
		map = new GMap2(my_map);
		map.addOverlay(this);
		this.onMap = true;
	}
	var tooltip_text = marker.name;
	//var tooltip_text = marker.getTitle();
	if(tooltip_text!=""){
		//somehow we should set the text only once per tooltip or we use the same tooltip element an change the text for each show
		this.html_element.set('html', tooltip_text);
		var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.getBounds().getSouthWest(),map.getZoom());
		var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
		var anchor=marker.getIcon().iconAnchor;
		var width=marker.getIcon().iconSize.width;
		var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(offset.x - point.x - anchor.x + width,- offset.y + point.y +anchor.y));
		pos.apply(this.html_element);
		var myEffect = new Fx.Morph(this.html_element, {duration: 500, transition: Fx.Transitions.Sine.easeIn});
		myEffect.start({
			'opacity': [0,1]
		});
	}
}

edit_geo_tooltip.prototype.hide = function() {
	//this.html_element.fade('hide');
	if (this.div_) {
		this.div_.style.display="none";
		this.div_.style.visibility="hidden";
	}
	this.hidden = true;
}
edit_geo_tooltip.prototype.may_hide = function() {
	if (this.hide_timeout != null)
		$clear(this.hide_timeout);
	this.hide_timeout=this.hide.delay(500, this);
}
edit_geo_tooltip.prototype.show_html = function(marker){
	if (this.hide_timeout != null){
		$clear(this.hide_timeout);
	}
	if(this.marker_no != marker.no){
		this.hide();
	}
	if(this.hidden){
		if(marker.html_label){
			html_content = marker.html_label;
		}
		if(marker.tooltip_offset){
			this.pixelOffset = marker.tooltip_offset;
		}
		else{
			this.pixelOffset = this.default_pixelOffset;
		}
		if(marker.tooltip_classname){
			this.classname = marker.tooltip_classname;
			//alert(this.classname);
		}
		else{
			this.classname = this.default_classname;
		}
		this.point = marker.getPoint();
		if(this.onMap==false){
			map.addOverlay(this);
			this.onMap = true;
		}
		if (this.div_) {
			this.div_.style.display="";
			this.setContents(html_content);
			this.html_element = $(this.div_).getElement('.'+this.classname);

			var myEffect = new Fx.Morph(this.html_element, {duration: 500, transition: Fx.Transitions.Sine.easeIn});
			myEffect.start({
				'opacity': [0,1]
			});

			//this.html_element.style.display="block";

			$(this.div_).removeEvents();
			$(this.div_).addEvent("mouseover", function(e) {
				hide_if_mouse_out_off_label(e,this);
			}.bind(this));
			$(this.div_).addEvent("mouseout", function() {
				this.may_hide();
			}.bind(this));

			$(this.div_).addEvent("click", function() {
				GEvent.trigger(marker,'click');
			}.bind(marker));

		}
		this.redraw.delay(100, this);
		this.hidden = false;
		this.marker_no = marker.no;
	}
	function hide_if_mouse_out_off_label(e,that){
		/*
		function to support mouseout for transparent(non visible) parts of bouble/label
		to avoid triggering this you could just add one more div in the top structure of that html-label
		*/
		var e_class_name = $(e.target).getParent().className;
		if(e_class_name == that.classname){
			that.may_hide();
			//console.log(e_class_name+" == "+that.classname);
		}
		else{
			$clear(that.hide_timeout);
			//console.log(e_class_name+" != "+that.classname);
		}
	}
}
