/*
MTileNumberControl

Copyright 2008 - Marcelo Montagna  - http://maps.forum.nu

Free to use as long as copyright notices are left unchanged.
Please save the file to your own server. Do not link directly,
or unexpected things might happen to your control :-)

------------------------------------------------------------
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
------------------------------------------------------------

Note: This script contains code to prevent hotlinking. (marked with 'REMOVE')
You need to remove it when saving the file to your server.


Usage:
	map.addControl(new MTileNumberControl());
	map.addControl(new MTileNumberControl(options?));

MTileNumberControl options:
	borderWidth: number;
	borderColor: HTML color - Default: '#0000FF';
*/

/////////////////////////////////////////////////////////////////////////////


//////////// BEGIN MTileNumberControl /////////////////
function MTileNumberControl(MOptions) {
	MOptions = MOptions ? MOptions : {};
	this.borderWidth = MOptions.borderWidth ? MOptions.borderWidth : 1;
	this.borderColor = MOptions.borderColor ? MOptions.borderColor : '#0000FF';
}

MTileNumberControl.prototype = new GOverlay();

MTileNumberControl.prototype.initialize = function(map) {
	this.map = map;
	var that = this;
	

	this.tileCountX = Math.ceil(map.getContainer().clientWidth / 256)+2;
	this.tileCountY =  Math.ceil(map.getContainer().clientHeight / 256)+2;

	this.NW = new GLatLng(85.051,-180);
	var container = document.createElement('div');
	this.container = container;
	this.map.getPane(G_MAP_MAP_PANE).appendChild(container); 
}


MTileNumberControl.prototype.redraw = function(force) {
	if (force) {
		this.positionContainer()
	}
	this.clear();
	for (var row = 0 ; row < this.tileCountY ; row++ ) {
		for (var col = 0 ; col < this.tileCountX ; col++ ) {
			this.drawDivTile(col,row);
		}
	}
}


MTileNumberControl.prototype.clear = function() {
	if (this.container.hasChildNodes()) {
		var children = this.container.childNodes;
		while (children.length) {
			this.container.removeChild(children[0]);
		}
	}
}


MTileNumberControl.prototype.positionContainer = function() {
	var nwPixel = this.map.fromLatLngToDivPixel(this.NW);

	if (nwPixel.x > 0) {
		var zoom = this.map.getZoom();
		nwPixel.x -= Math.pow(2,zoom)*256;
	}
	
	this.container.style.position = 'relative';
	this.container.style.left = nwPixel.x + 'px';
	this.container.style.top = nwPixel.y + 'px';
}


MTileNumberControl.prototype.drawDivTile = function(tx,ty) {
	var tileDiv = document.createElement('div');
	var tileInfo = document.createElement('div');
	tileDiv.appendChild(tileInfo);
	tileInfo.style.background = '#dddddd';
	tileInfo.style.width = '150px';
	tileInfo.style.padding = '3px';
	tileInfo.style.margin = '2px';
	tileInfo.style.border = '1px solid gray';

	tileInfo.style.font = 'normal 10px verdana';

	tileDiv.style.position = 'relative';
	if (this.borderWidth) {
		tileDiv.style.width = 256 - (2*this.borderWidth) + 'px';
		tileDiv.style.height = 256 - (2*this.borderWidth) + 'px';
		tileDiv.style.border = this.borderWidth + 'px solid ' + this.borderColor;

	}
	else {
		tileDiv.style.width = '256px';
		tileDiv.style.height = '256px';
	}

	tileDiv.style.color = this.borderColor;
	var zoom = this.map.getZoom();
	var center = this.map.getCenter();
	var proj = this.map.getCurrentMapType().getProjection();
	var divPixel = this.map.fromLatLngToDivPixel(center);
	var mapPixel = proj.fromLatLngToPixel(center, zoom);

	var tileX = Math.floor(mapPixel.x / 256);
	var tileY = Math.floor(mapPixel.y / 256);
	var tileNumX = tileX - Math.floor(this.tileCountX/2) + tx;
	var tileNumY = tileY - Math.floor(this.tileCountY/2) + ty;

	var tileSW = proj.fromPixelToLatLng(new GPoint(tileNumX*256,tileNumY*256+256), zoom);
	var tileNE = proj.fromPixelToLatLng(new GPoint(tileNumX*256+256,tileNumY*256), zoom);


	tileDiv.style.top =  - (((ty * (this.tileCountX-1)) + tx) * 256) + (tileY * 256) - (Math.floor(this.tileCountX/2) * 256)+ 256 + 'px';
	tileDiv.style.left =  (tx * 256) + (tileX * 256) - (Math.floor(this.tileCountY/2) * 256) - 256 + 'px';

	var CDivPixel = this.map.fromLatLngToDivPixel(this.map.getCenter());
	var pointDivPixel = this.map.fromLatLngToDivPixel(this.NW);
	var fromCenter = this.subGPoints(pointDivPixel, CDivPixel); 
	tileInfo.innerHTML = 'Tile: ' + tileNumX + ' - ' + tileNumY;
	tileInfo.innerHTML += '<br> SW: ' + tileSW.lat().toFixed(4) + ' - ' + tileSW.lng().toFixed(4);
	tileInfo.innerHTML += '<br> NE: ' + tileNE.lat().toFixed(4) + ' - ' + tileNE.lng().toFixed(4);


	this.container.appendChild(tileDiv);
}




MTileNumberControl.prototype.subGPoints = function (a,b) {
	return new GPoint(a.x-b.x, a.y-b.y);
}      


MTileNumberControl.prototype.remove = function () {

}

MTileNumberControl.prototype.show = function () {
	this.container.style.display = '';
}

MTileNumberControl.prototype.hide = function () {
	this.container.style.display = 'none';
}

MTileNumberControl.prototype.toggle = function () {
	this.container.style.display = this.container.style.display == '' ? 'none' : '';
}