var zoom_x = new Array();
var zoom_y = new Array();
zoom_x[0] = 1753;	zoom_y[0] = 1615;
zoom_x[1] = 877;	zoom_y[1] = 808;
zoom_x[2] = 439;   	zoom_y[2] = 406;
zoom_x[3] = 220;   	zoom_y[3] = 205;
zoom_x[4] = 112;   	zoom_y[4] = 103;
zoom_x[5] = 58;   	zoom_y[5] = 53;
zoom_x[6] = 32;   	zoom_y[6] = 28;
zoom_x[7] = 16;   	zoom_y[7] = 16;
zoom_x[8] = 10;   	zoom_y[8] = 10;
zoom_x[9] = 0;   	zoom_y[9] = 0;

var zoom = 8;

var img_size = 200;
var map_width = zoom_x[zoom] * img_size;
var map_height = zoom_y[zoom] * img_size;
var x_cord = 0;
var y_cord = 0;
var i,j,page_width,page_height,half_width,half_height;

function map_refresh()
{
	var map_parts = '';
	var x_part_number = Math.abs((x_cord/img_size)).toInt();
	var y_part_number = Math.abs((y_cord/img_size)).toInt();
	var tmp_y = y_part_number;
	var part_left = x_part_number * img_size;
	var part_top = y_part_number * img_size;

	var how_many_parts_show_x = ((page_width - (x_cord%img_size))/img_size).toInt() + 1;
	var how_many_parts_show_y = ((page_height - (y_cord%img_size))/img_size).toInt() + 1;

	for(i = 1; i <= how_many_parts_show_x; i++) {
		for(j = 1; j <= how_many_parts_show_y; j++) {
			map_parts += '<div style="width:200px;height:200px;position:absolute;left:'+(part_left + img_size * (i-1))+'px;top:'+(part_top + img_size * (j-1))+'px"><img src="http://mapa.szukacz.pl/t?p='+zoom;
			map_parts += (x_part_number<10 ? '000' : (x_part_number<100 ? '00' : (x_part_number<1000 ? '0' : ''))) + x_part_number;
			map_parts += (y_part_number<10 ? '000' : (y_part_number<100 ? '00' : (y_part_number<1000 ? '0' : ''))) + y_part_number;
			map_parts += '" /></div>';
			y_part_number++;
		}
		y_part_number = tmp_y;
		x_part_number++;
	}
	
	$('map').setHTML(map_parts);
}

function zoommap(how)
{
	var mapa = $('map');
	if (how == 'in') {
		if (zoom > 0) {
			zoom--;
			x_cord = (x_cord < -half_width  ? (x_cord - half_width) * 2 + half_width : x_cord * 2);
			y_cord = (y_cord < -half_height ? (y_cord - half_height) * 2 + half_height : y_cord * 2);
			mapa.setStyles({
			'left':x_cord+'px',
			'top':y_cord+'px'
			});
			map_width = zoom_x[zoom] * img_size;
			map_height = zoom_y[zoom] * img_size;
			map_refresh();
		} else {
			alert('Nie można bardziej przybliżyć');
		}
	}
	if (how == 'out') {
		if (zoom < 8) {
			zoom++;
			x_cord = (x_cord < -half_width  ? ((x_cord - half_width) / 2 + half_width).toInt() : (x_cord/2).toInt());
			y_cord = (y_cord < -half_height ? ((y_cord - half_height) / 2 + half_height).toInt() : (y_cord/2).toInt());
			mapa.setStyles({
			'left':x_cord+'px',
			'top':y_cord+'px'
			});
			map_width = zoom_x[zoom] * img_size;
			map_height = zoom_y[zoom] * img_size;
			map_refresh();
		} else {
			alert('Nie można bardziej oddalić');
		}
	}
	$('zoom_handle').setHTML('<b>zoom x'+(9-zoom)+'</b>');
}

window.addEvent('resize', function(){
	page_width = Window.getWidth();
	page_height = Window.getHeight();
	half_width = (page_width/2).toInt();
	half_height = (page_height/2).toInt();

	$('mapview').setStyles({'width':page_width+'px','height':page_height+'px'});

	map_refresh();
});

Window.onDomReady(function() {
	page_width = Window.getWidth();
	page_height = Window.getHeight();
	half_width = (page_width/2).toInt();
	half_height = (page_height/2).toInt();

	var map = new Element('div');
	map.setProperty('id','mapview');
	map.setStyles({'width':page_width+'px','height':page_height+'px','overflow':'hidden','position':'relative','font':'10px Verdana,sans-serif','color':'#333333'});
	map.injectInside(document.body);

	var zoompan = new Element('div');
	zoompan.setProperty('id','zoompan');
	zoompan.setStyles({'text-align':'center','border':'1px solid #666666','opacity':0.85,'width':'70px','height':'70px','background':'white','position':'absolute','z-index':100,'top':'100px','left':'100px'});
	zoompan.injectInside(map);
	var tekst = '<div id="zoom_handle" style="color:white;width:100%;height:12px;line-height:12px;background:#666666;cursor:move"><b>zoom x'+(9-zoom)+'</b></div>';
	tekst += '<input type="button" onclick="zoommap(\'in\')" style="width:20px;cursor:pointer;margin:4px;border:1px solid #666666" value="+" /><br /><input type="button" onclick="zoommap(\'out\')" style="width:20px;cursor:pointer;margin:4px;border:1px solid #666666" value="-" />';
	zoompan.setHTML(tekst);
	$('zoom_handle').setOpacity(1);
	zoompan.makeDraggable({
		onStart: function() {
			this.setOpacity(0.4);
		}.bind(zoompan),
		onComplete: function() {
			this.effect('opacity').start(0.4,0.85);
		}.bind(zoompan),
		container: $('mapview'),
		handle: $('zoom_handle')
	});

	var mapa = new Element('div');
	mapa.setProperty('id','map');
	mapa.setStyles({'width':map_width+'px','height':map_height+'px','position':'absolute','left':0,'top':0});
	mapa.injectInside(map);
	
	var draggableOptions = {
		onDrag: function() {
			var left = this.getStyle('left').toInt();
			var top = this.getStyle('top').toInt();
			if (left>0) this.setStyle('left',0);
			if (left<-(map_width - page_width)) this.setStyle('left',-(map_width - page_width));
			if (top>0) this.setStyle('top',0);
			if (top<-(map_height - page_height)) this.setStyle('top',-(map_height - page_height));
		}.bind(mapa),
		onComplete: function() {
			x_cord = this.getStyle('left').toInt();
			y_cord = this.getStyle('top').toInt();
			map_refresh();
		}.bind(mapa)
	};
	
	mapa.makeDraggable(draggableOptions);
	map_refresh();
});