document.write('<script type="text/javascript" src="'+_root+'public/js/mag.mask.js"></script>');
var MAG = Object.extend({}, MAG || {});
MAG.DataMap = Class.create();
MAG.DataMap.prototype = {

	current_prams: {x: null, y: null},
	map_params: null,

	ico_here: null,
	ico_here_styles: {position: 'absolute'},
	options: {},
	map_points: null,
	icons: {},
	which_icons: {},

	scale: null,
	ajax_url: null,

	initialize: function(options)
	{
		MAG.MagDataMap = this;
		this._response = {cities: []};
		if(!options.translated_titles) {
			options.translated_titles = {
				zoom_in: '[zoom in]',
				zoom_out: '[zoom out]',
				show_all: 'all',
				close: ' [x] '
			};
		}
		var tpl = ' \
			<h2><a href="javascript:;" onclick="MAG.MagDataMap.hide_map()" id="datamap_save_button">#{close}</a><a id="zoom_in" href="javascript:;" onclick="MAG.MagDataMap.zoom_in()">#{zoom_in}</a><a id="zoom_out" href="javascript:;" onclick="MAG.MagDataMap.zoom_out()">#{zoom_out}</a><label for="idshow_neighbours"><input type="checkbox" id="idshow_neighbours" name="show_neighbours" value="1" /> - #{show_all}</label>#{title}</h2> \
			<table id="datamap_wrapper"><col width="30" /><col /><col width="30" /><tbody> \
				<tr><td><a href="javascript:;" onclick="MAG.MagDataMap.move_map({x: -1, y: -1})" class="ul">UL</a></td><td><a href="javascript:;" onclick="MAG.MagDataMap.move_map({x: 0, y: -1})" class="up">UP</a></td><td><a href="javascript:;" onclick="MAG.MagDataMap.move_map({x: 1, y: -1})" class="ur">UR</a></td></tr> \
				<tr><td><a href="javascript:;" onclick="MAG.MagDataMap.move_map({x: -1, y: 0})" class="left">L</a></td><td>#{map}</td><td><a href="javascript:;" onclick="MAG.MagDataMap.move_map({x: 1, y: 0})" class="right">R</a></td></tr> \
				<tr><td><a href="javascript:;" onclick="MAG.MagDataMap.move_map({x: -1, y: 1})" class="bl">BL</a></td><td><a href="javascript:;" onclick="MAG.MagDataMap.move_map({x: 0, y: 1})" class="down">DOWN</a></td><td><a href="javascript:;" onclick="MAG.MagDataMap.move_map({x: 1, y: 1})" class="br">BR</a></td></tr> \
			</tbody></table>';
		this.template = new Template(tpl);

		var loading = ' \
			<h2><a href="javascript:;" onclick="MAG.MagDataMap.hide_map()" id="datamap_close_button">#{close}</a><span style="float: left">#{title}</span></h2> \
			<table><tbody> \
				<tr><td height="514"><img src="'+_root+'public/images/site_images/datamap_loading.gif" alt="" /></td></tr> \
			</tbody></table>';
		this.loading = new Template(loading);

		this.ico_here = new Image();
		this.ico_here.src = _root+'public/images/site_images/datamap_cursor.gif';
		this.ico_here.id = 'ico_here';

		this.ico_here_current = this.ico_here.cloneNode(false);
		this.ico_here_current.src = _root+'public/images/site_images/datamap_cursor_current.gif';

		Object.extend(this.options, options || {});
		this.ajax_url = MAG.MagAjax.ajax_url;
	},

	click_link: function() {
		MAG.Mask.show(82);
		var params  = $H({x: 0, y: 0}).merge($H(this.map_params)).merge($H(this.options)).toJSON();
			params += '&action=datamap';

		MAG.MagAjax.make_response(this.ajax_url, 'params=' + params, 'post', this.generate_map.bind(this));
	},

	move_map: function(obj)
	{
		Object.extend(this.current_prams, obj || {});
		var html = this.loading.evaluate({title: this.title, close: this.options.translated_titles.close, zoom_in: this.options.translated_titles.zoom_in, zoom_out: this.options.translated_titles.zoom_out, show_all: this.options.translated_titles.show_all});
		this._last_content = this.map_layer.innerHTML;
		this.map_layer.update(html);
		var params = $H(this.options).merge($H(this.current_prams)).merge($H(this.map_params)).toJSON();
			params += '&action=datamap';

		for(ico in this.icons) $(ico).remove();
		this.icons = {};
		MAG.MagAjax.make_response(this.ajax_url, 'params=' + params, 'post', this.generate_map.bind(this), {onException: this.move_map_exception.bind(this)});
	},

	move_map_exception: function(req, e) {
		alert(e.message);
		this.map_layer.update(this._last_content);
	},

	zoom_in: function() {
		this.move_map({x:0,y:0,scale:this.scale['in']});
	},

	zoom_out: function() {
		this.move_map({x:0,y:0,scale:this.scale.out});
	},

	generate_map: function(req)
	{
		var json = req.responseText.evalJSON();
		if(json.error) {
			alert(json.error);
		}
		else {
			this.map_params = {mapview: json.mapview, caption: json.caption};
			this.map_points = json.points;
			var map = json.map;
			this.title = json.caption;
			html = this.template.evaluate({title: this.title, map: map, save: ' [OK] ', clear: 'clear', close: this.options.translated_titles.close, zoom_in: this.options.translated_titles.zoom_in, zoom_out: this.options.translated_titles.zoom_out, show_all: this.options.translated_titles.show_all});
			if(!$('datamap_layer')) {
				this.map_layer = new Element('div', {id: 'datamap_layer'});
				this.map_layer.setStyle({
					top: parseInt((MAG.Mask.client_size().height - 546)/2) + MAG.Mask.scroll_offset().top + 'px',
					left: parseInt((MAG.Mask.getDimensions().width - 666)/2) + 'px',
					position: 'absolute'
				});

				this.map_layer.style.zIndex = 501;
				this.map_layer = this.map_layer.update(html);

				$(document.body).insert(this.map_layer);
			}
			else {
				this.map_layer.update(html);
				this.map_layer.setOpacity(1);
			}

			if(Object.isFunction(this.observe_events)) {
				this.observe_events();
			}

			this.scale = json.scale;
			this.map_layer.select('img').first().observe('load', this.put_icons.bind(this));
		}
	},

	put_icons: function()
	{
		if(this.map_layer && this.options.offer_id)
		{
			var img_offset = this.map_layer.select('img').first().cumulativeOffset();
			this.which_icons = {ico_here: [], ico_here_current: []};
			for(offer_id in this.map_points)
			{
				if (this.options.show_all || (!this.options.show_all && this.options.offer_id == offer_id)) {
					var mp = this.map_points[offer_id];
					this.pos = {from_x: mp.scrX, from_y: mp.scrY};
					this.put_ico(mp.scrX + img_offset.left, mp.scrY + img_offset.top, 'ico_here' + offer_id);
				}
			}
			if($('idshow_neighbours')) {
				$('idshow_neighbours').observe('click', this.show_or_hide_neighbours.bind(this, $('idshow_neighbours')));
			}
		}
	},

	put_ico: function(x, y, id)
	{
		var styles = this.ico_here_styles;
		if(styles.display) delete styles.display;
		var which_ico = 'ico_here' + this.options.offer_id == id ? 'ico_here_current' : 'ico_here';

		if(!this.icons[id]) {
			this.icons[id] = this[which_ico].cloneNode(false);
			this.icons[id].id = id;
		}

        var extended_styles = which_ico == 'ico_here' ? {
            top: y - 13 + 'px',
            left: x - 13 + 'px'
        } : {
            top: y - 10 + 'px',
            left: x - 10 + 'px'
        };

		if(this.options.show_all && which_ico == 'ico_here') {
			extended_styles.display = 'none';
		}

		Object.extend(styles, extended_styles);
		this.which_icons[which_ico].push(this.icons[id]);

		$(this.icons[id]).setStyle(styles);
		if (!$(this.icons[id].id)) {
			$(document.body).insert(this.icons[id]);
			this.icons[id].style.zIndex = 502;
		}
	},

	show_or_hide_neighbours: function(el, e)
	{
		$A(this.which_icons['ico_here']).invoke('setStyle', {display: el.checked?'block':'none'});
	},

	hide_map: function() {
		for(ico in this.icons) $(ico).remove();
		this.icons = {};
		this.map_layer.remove();
		delete this.map_layer;
		MAG.Mask.hide();
	},

	unload: function()
	{
		if(this.map_params != null) {
			this.map_params.action = 'close_view';
			new Ajax.Request(this.ajax_url, {
				asynchronous: false,
				method: 'post',
				parameters: 'params=' + $H(this.map_params).toJSON() + '&action=datamap'
			});
		}
	}
};