/* googlemap cluster overlay
 * 
 * before adding to googlemap unique 'key' property MUST be set!
 * 
 */

function GCluster(px, py, options) {
	// projection coordinates!
	this.px = px;
	this.py = py;
	if (options)
		this.options = options; 
}

GCluster.createClass = function() {
	// GCluster.usePngFix = ((browserVer >= 5.5) && (browserVer < 7) && (document.body.filters));
	GCluster.usePngFix = ((browserVer >= 4) && (browserVer < 7) && (document.body.filters)) ? true : false;

	GCluster.prototype = new GOverlay();
	var from = GCluster.proto;
	var to = GCluster.prototype;
	for (var key in from)
		to[key] = from[key];
	delete GCluster.proto;
}
/* must be called after createClass */
GCluster.override = function(members){
	for (var key in members) {
		GCluster.prototype[key] = members[key];
	}
}

GCluster.proto = {
	options : {
		// width, height, bgImage, minObjectsPerCluster, listenerJsref
	},
	initialize : function(map) {
		this.map = map;
	},
	// Redraw the rectangle based on the current projection and zoom level
	redraw : function(force) {
		if (!force)
			return;
		this.remove();

		var proj = G_NORMAL_MAP.getProjection();
		var latLng = proj.fromPixelToLatLng(new GPoint(this.px, this.py), map.getZoom());
		var c = map.fromLatLngToDivPixel(latLng);

		var div = document.createElement("div");
		div.style.left = c.x + 'px';
		div.style.top = c.y + 'px';

		var w = this.options.width;
		var h = this.options.weight;
		div.className = 'cluster-div';

		if (GCluster.usePngFix)
			div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.options.bgImage + "',sizingMethod='scale')";
		else
			div.style.backgroundImage = 'url('+this.options.bgImage+')';

		var zoomScript = this.options.listenerJsref + '.onZoom(\''+this.key+'\')';

		var poiText = this.getCountText();
		this.renderedCount = this.count;

		var html = '<div class="cluster-poi-text" id="clst_'+this.key+'">'+poiText+'</div>';
		div.innerHTML = html;

		map.getPane(/*G_MAP_FLOAT_PANE*/ G_MAP_MAP_PANE).appendChild(div);
		this.div = div;
		
		var zoomEl = document.createElement('a');
		zoomEl.href = "#";
		zoomEl.style.position = "absolute";
		zoomEl.style.left = (c.x + 30)+ 'px';
		zoomEl.style.top = (c.y + 26) + 'px';
		zoomEl.innerHTML = '<img onclick="'+ zoomScript +'" style="border:none" class="cluster-zoom-img" src="/clear.gif" />';
		this.zoomEl = zoomEl;
		map.getPane(G_MAP_MARKER_SHADOW_PANE).appendChild(zoomEl);
		this.rendered = true;
	},

	remove : function() {
		if (this.div) {
			this.div.parentNode.removeChild(this.div);
			this.zoomEl.parentNode.removeChild(this.zoomEl);
			delete this.div;
			delete this.zoomEl;
		}
		this.rendered = false;
	},

	// Copy our data to a new GCluster
	copy : function() {
		return new GCluster(this.x, this.y, this.options);
	},
	
	display : function(flag, map) {
		if (flag) {
			if (!this.rendered) {
				map.addOverlay(this);
			} else { // check counts
				if (this.count != this.renderedCount) {
					this.updateCountDisplay();
				}
			}
		} else {
			if (this.rendered)
				map.removeOverlay(this);
		} 
	},
	updateCountDisplay : function() {
		var el = document.getElementById('clst_'+this.key);
		if (el)
			el.innerHTML = this.getCountText();
		else
			console.log('torture');
		this.renderedCount = this.count;
	},
	getCountText : function() {
		return 'Punkte: ' + this.count;
	},
	isValid : function() {
		return (this.count >= this.options.minObjectsPerCluster);
	}
}