/* Zoomer hint for google maps
 * before adding to googlemap unique 'key' property MUST be set!
 * opts:
 *    coords, w, h,
 *    duration, steps
 *    fadeDuration, fadeSteps
 *    lineWidth
 * optionally:
 *    correction {x, y, w, h}
 */


function GZoomer(opt) {
	this.opt = opt;
	if (! opt.correction)
		opt.correction = {};
	if (! opt.correction.x)
		opt.correction.x = 0;
	if (! opt.correction.y)
		opt.correction.y = 0;
	if (! opt.correction.w)
		opt.correction.w = 0;
	if (! opt.correction.h)
		opt.correction.h = 0;	
}
GZoomer.createClass = function() {
	GZoomer.prototype = new GOverlay();
	var from = GZoomer.proto;
	var to = GZoomer.prototype;
	for (var key in from)
		to[key] = from[key];
	delete GZoomer.proto;
}

GZoomer.proto = {
	initialize : function(map) {
		this.map = map;
	},
	// Redraw the rectangle based on the current projection and zoom level
	redraw : function(force) {
		if (this.rendered)
			return;
		
		/*
		if (!force)
			return;
		this.remove();
		*/

		var p = this.map.fromLatLngToDivPixel(this.opt.coord);
		this.cx = p.x;
		this.cy = p.y;
		
		var el = {};
		this.el = el;
// debugger;
		el.box = document.createElement('div');
		el.box.style.position = 'absolute';
		el.box.style.display = 'none';
		el.box.style.border = this.opt.lineWidth+'px solid red';
		el.box.style.zIndex = 1000;
		
		/*
		var html = '<table id="zoomer_table"><tr><td>&nbsp;</td></tr></table>';
		el.box.innerHTML = html;
		*/
		
		map.getPane(G_MAP_MAP_PANE).appendChild(el.box);
		/*
		el.tab = document.getElementById("zoomer_table");
		*/
		
		var ipol = new InterpolatorManager();
		this.ipol = ipol;

		var opt = this.opt;
		ipol.x = new Interpolator(this.cx - opt.w / 2, this.cx - opt.w);
		ipol.y = new Interpolator(this.cy - opt.h / 2, this.cy - opt.h);
		var wcor = opt.w + opt.correction.w;
		var hcor = opt.h + opt.correction.h;
		ipol.w = new Interpolator(wcor, wcor * 2);
		ipol.h = new Interpolator(hcor, hcor * 2);
		ipol.onStep = this.step.bind(this);
		ipol.init(this.opt.duration, this.opt.steps); // calls step immediately

		el.box.style.display = 'block'; 
		ipol.run();

		this.rendered = true;
	},

	step : function() {
		var ipol = this.ipol;

		var opt = this.opt;
		var e = this.el;
		e.box.style.left = (ipol.x + opt.correction.x) +'px';
		e.box.style.top = (ipol.y + opt.correction.y) +'px';
		e.box.style.width = ipol.w+'px';
		e.box.style.height = ipol.h+'px';
		/*
		// table same width
		e.tab.style.width = ipol.w+'px';
		e.tab.style.height = ipol.h+'px'		
		*/
		if (ipol.factor == 1) {
			this.startFader();
		}
	},

	startFader : function() {
		var ipol = new InterpolatorManager();
		this.ipol = ipol;
		ipol.opacity = new Interpolator(100, 0);
		ipol.onStep = this.fadeStep.bind(this);
		ipol.init(this.opt.fadeDuration, this.opt.fadeSteps);
		ipol.run();
	},
	
	fadeStep : function() {
		var ipol = this.ipol;
		if (ipol.factor == 1) {
			// selfkill
			this.map.removeOverlay(this);
			return;
		}
		$(this.el.box).setOpacity(ipol.opacity / 100);
	},

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

	// Copy our data to a new GZoomer
	copy : function() {
		return new GZoomer(this.opt);
	}
}