// all custom markers should be defined here
// use this '.js' only when gmap script is loaded

function EntityMarker(gLatLng, type, text, url, behaviour) {
    this.gLatLng_ = gLatLng;
    this.url_ = url;
    this.text_ = text;
    this.type_ = type;
    this.behaviour_ = behaviour;
}

// implementing the GOverlay interface (see: http://code.google.com/apis/maps/documentation/overlays.html#Custom_Overlays)
EntityMarker.prototype = new GOverlay();

// create the actual marker
EntityMarker.prototype.initialize = function(map) {
	// container
	var container = document.createElement("div");

	container.style.position = "absolute";

	// let the draw behaviour to get the html
	// container.innerHTML = this.behaviour_.draw(this.text_); //lInnerHtml;

	this.behaviour_.createDomElem(container, this.text_);

	// Our div is flat against the map, so we add our selves to the
	// MAP_PANE pane, which is at the same z-index as the map itself (i.e. below the marker shadows)
	map.getPane(G_MAP_MAP_PANE).appendChild(container);

	this.map_ = map;
	this.container_ = container;

	var that = this;
	GEvent.addDomListener(container, "click", function(event) {
		that.behaviour_.click(that.url_);
	});
}

// remove the main DIV from the map pane
EntityMarker.prototype.remove = function() {
	this.container_.parentNode.removeChild(this.container_);
}

// copy our data to a new Rectangle
EntityMarker.prototype.copy = function() {
	return new EntityMarker(this.gLatLng_, this.type_, this.text_, this.url_, this.behaviour_);
}

// redraw the marker based on the current projection and zoom level
EntityMarker.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 MarkerLight
	var divPixel = this.map_.fromLatLngToDivPixel(this.gLatLng_);

	// Now position our DIV based on the DIV coordinates of our bounds
	this.container_.style.left = (divPixel.x) + "px"
	this.container_.style.top = (divPixel.y) + "px";
}

var MarkerBehaviour = {
	simple: {
		createDomElem: function(container, text) {
			return $("<div class='entity'><div class='h3'><nobr>" + text + "</nobr></div></div>").appendTo(container);
		},
		click: function(url) {
			window.location = url;
		}
	},
	info_window: {
		createDomElem: function(container, text) {
			var lDomElem = $("<div class='info-w'></div>");
			var lDomText = $("<div style='margin-right:20px'>" + text + "</div>");
			var lDomImg = $("<img style='position:absolute; top:-10px; left:-8px' src='/shared/images/pointer.gif'></img>");

			var lCloseDiv = document.createElement("div");
			lCloseDiv.className = "close";

			GEvent.addDomListener(lCloseDiv, "click", function(event) {
				lDomElem.hide();
				lDomImg.hide();
			});

			lDomElem.append(lCloseDiv).append(lDomText);
			$(container).append(lDomElem).append(lDomImg);
		},
		click: function(url) { }
	}
};