var placeMap = new Class({
		
	Implements: [Options, Events],
		
	options: {
		prefix: 'placemap_',
		mapwidth: null,
		mapheight: null,
		background: null,
		minimap: null,
		script_places: null
		},
        
	initialize: function(container,places,options) {
		this.setOptions(options);
		if (container == null) return false;
		if ($(container)==null) return false;
		
		this.mapmooving = {
			mooving : false,
			coords : { x: 0, y: 0 }
			}
			
		this.mapselector = {
			selecting : false,
			coords : { x: 0, y: 0 }
			}
			
		if (places!=null) this.places=places;
		
		this.editormode = false;
		
		this.containercoords = $(container).getCoordinates();
		
		this.mapwidth=this.options.mapwidth;
		this.mapheight=this.options.mapheight;
		
		this.container = new Element('div')
			.setStyles({
				'position': 'relative',
				'display': 'block',
				'width': this.containercoords.width,
				'height': this.containercoords.height,
				'overflow': 'hidden'
			})
			.addEvents({
				'mouseleave': function(e) {
					if (this.mapmooving.mooving) this.mapmooving.mooving=false;
					}.bind(this),
				'contextmenu': function(e) {
					e.stop();
					}.bind(this)
			})
			.inject($(container));
			
		this.infowindow = new Element('div')
			.addClass(this.options.prefix+'infowindow')
			.inject(this.container);
		this.infoimg = new Element('div')
			.addClass(this.options.prefix+'infoimg')
			.inject(this.infowindow,'bottom');
		this.infotitle = new Element('span')
			.addClass(this.options.prefix+'infotitle')
			.inject(this.infowindow,'bottom');
		this.infodescription = new Element('span')
			.addClass(this.options.prefix+'infodescription')			
			.inject(this.infowindow,'bottom');


		bgloaded = new (function() {
			this.createMap();
			if (this.options.minimap!=null) this.createMiniMap();
			if (this.places!=null) this.addPlaces(this.places);
			else if (this.options.script_places!=null) {				
				// load places via ajax //				
				this.ajaxGetPlaces();				
				}
			}.bind(this))
			
		new Asset.image(this.options.background, {load: bgloaded});		

		},
		
	createMap: function() {
		this.map = new Element('div')
			.addClass(this.options.prefix+'map')
			.setStyles({
				'background-image':'url('+this.options.background+')',
				'width': this.mapwidth+'px',
				'height': this.mapheight+'px'
				})
			.addEvents({
				'mousedown': function(e) {						
					var pos=e.target.getPosition();					
					if (this.editormode) {						
						this.mapselector.coords.x = e.page.x - pos.x;
						this.mapselector.coords.y = e.page.y - pos.y;
						
						this.selectordiv = new Element('div')
							.setStyles({
								'position': 'absolute',
								'left': e.page.x - pos.x +'px',
								'top': e.page.y - pos.y +'px',
								'border': '1px solid #F00',
								'background-color': '#F00',
								'z-index': 10003,
								'opacity': 0.5
							})
							.inject(this.map);
							this.mapselector.selecting = true;
						} else {
						this.mapmooving.mooving = true;
						this.mapmooving.coords.x = e.page.x - pos.x;
						this.mapmooving.coords.y = e.page.y - pos.y;
						}
					e.stop();
					}.bind(this),
				'mouseup': function(e) {
					if (this.editormode) {
						if (this.mapselector.selecting) {
							var l=this.selectordiv.getStyle('left').toInt();
							var t=this.selectordiv.getStyle('top').toInt();
							var w=this.selectordiv.getStyle('width').toInt();
							var h=this.selectordiv.getStyle('height').toInt();
							var divdata = { 'x': l, 'y': t, 'width': w, 'height': h }							
							this.selectordiv.destroy();
							this.mapselector.selecting=false;
							//alert(divdata.toSource());
							}
						} else {
						this.mapmooving.mooving=false;
						}
					e.stop();
					}.bind(this),
				'mousemove': function(e) {
					var pos=e.target.getPosition();
					if (this.editormode) {
						if (this.mapselector.selecting) {
							var w = e.page.x - pos.x - this.mapselector.coords.x -2;
							var h = e.page.y - pos.y - this.mapselector.coords.y -2;
							this.selectordiv.setStyle('width',w+'px');
							this.selectordiv.setStyle('height',h+'px');
							}
						} else {
						if (this.mapmooving.mooving) {
							var l  = e.page.x-this.mapmooving.coords.x-this.containercoords.left;
							var t  = e.page.y-this.mapmooving.coords.y-this.containercoords.top;
							var ml = this.container.getStyle('width').toInt()-this.mapwidth;
							var mt = this.container.getStyle('height').toInt()-this.mapheight;
							if (l<ml) l=ml;
							if (t<mt) t=mt;
							if (l>0) l=0;
							if (t>0) t=0;
							this.map.setStyle('left',l+'px');
							this.map.setStyle('top',t+'px');
							}
						}
					e.stop();
					}.bind(this)
			})
			.inject(this.container);			

		},
		
	createMiniMap: function(container) {
		if (container==null) container=this.options.minimap;
		var mapc=$(container);
		var mw=mapc.getStyle('width').toInt();
		var mh=mapc.getStyle('height').toInt();
		
		if (this.mapwidth>this.mapheight) var ratio=mw / this.options.mapwidth;
		else var ratio=mh / this.options.mapheight;
		
		var mmw = Math.ceil(this.options.mapwidth * ratio);
		var mmh = Math.ceil(this.options.mapheight * ratio);
		
		var top  = Math.ceil( (mh - mmh) / 2 );
		var left = Math.ceil( (mw - mmw) / 2 );
		
		mapc.setStyles({
			'position': 'relative',
			'overflow': 'hidden'
			});
		
		this.minimap = new Element('img',{'src':this.options.background,'width':mmw,'height':mmh})
			.setStyles({
				'position': 'absolute',
				'top': top+'px',
				'left': left+'px',
				'width': mmw+'px',
				'height': mmh+'px',
				'cursor': 'crosshair'
				})
			.addEvents({
				'mousedown': function(e) {
					var coords=e.target.getCoordinates();
					var smw = this.containercoords.width  / 2;
					var smh = this.containercoords.height / 2;
					var x=-Math.round((e.page.x - coords.left) / ratio - smw);
					var y=-Math.round((e.page.y - coords.top) / ratio - smh); 
					this.moveTo(x,y);
					e.stop();
					}.bind(this)
				})
			.inject(mapc);
		
		},
		
	ajaxGetPlaces: function(url) {
		if (url==null) url=this.options.script_places;
		new Request({
			'url': url,
			'onComplete': function(resp) {
				var data=JSON.decode(resp);
				if (data.success==1) {
					this.addPlaces(data.places);
					} else alert('Nem sikerült betölteni a térképinformációkat.');
				}.bind(this)
			}).send();
		},
		
	addPlaces: function(places) {
		if (places==null) return false;
		places.each(function(place) {
			new Element('div',{'class': 'map_place_class', 'title': place.title, 'img': place.img, 'description': place.description, 'href': place.href, 'color': place.color })
				.addClass(this.options.prefix+'hotspot')
				.setStyles({
					'width': place.width+'px',
					'height': place.height+'px',
					'left': place.x+'px',
					'top': place.y+'px'
					})
				.addEvents({
					'mousedown': function(e) { e.stopPropagation(); e.preventDefault(); },
					'mouseup': function(e) { e.stopPropagation(); e.preventDefault(); },
					'mouseenter': function(e) {
						if (this.editormode) {
							e.target.setStyle('background-color',this.options.activecolor);
							this.infoimg.setStyle('background-image','url('+e.target.get('img')+')');
							this.infotitle.set('html','SZERKESZTÉS: '+e.target.get('title'));
							this.infodescription.set('html','shift+click: módosítás<br/>ctrl+click: törlés');
							this.infowindow.setStyle('display','block');
							} else {
							e.target.setStyle('background-color',e.target.get('color'));
							this.infoimg.setStyle('background-image','url('+e.target.get('img')+')');
							this.infotitle.set('html',e.target.get('title'));
							this.infodescription.set('html',e.target.get('description'));
							this.infowindow.setStyle('display','block');
							if (this.mapmooving.mooving) this.mapmooving.mooving=false;
							}
						e.stop();
						}.bind(this),
					'mousemove': function(e) {
						this.infowindow.setStyles({
							'left': (e.page.x-this.containercoords.left+10).toInt()+'px',
							'top': (e.page.y-this.containercoords.top+10).toInt()+'px'
							});
						e.preventDefault();
						e.stop();
						}.bind(this),
					'mouseleave': function(e) {
						e.target.setStyle('background-color',this.options.inactivecolor);
						this.infowindow.setStyle('display','none');
						e.stop();
						}.bind(this),
					'click': function(e) {
						if (this.editormode) {
							// editmode
							if (e.control) e.target.destroy();
								if (e.shift) {
								// edit place
								}
							} else {
							// viewmode
							if (e.target.get('href')!=null) document.location.href=e.target.get('href');
							}
						e.stop();
						}.bind(this)
					})
				.inject(this.map);
			}.bind(this));
	},
		
	removePlaces: function() {
		this.map.getElements('div.map_place_class').each(function(el){el.destroy();});
		//this.places.empty();
	},
		
	createPlacesArray: function() {
		var ret = new Array();
		this.map.getElements('div.map_place_class').each(function(el){
			var a = {
				'x': el.getStyle('left').toInt(),
				'y': el.getStyle('top').toInt(),
				'width': el.getStyle('width').toInt(),
				'height': el.getStyle('height').toInt(),
				'img': el.get('img'),
				'title': el.get('title'),
				'description': el.get('description'),
				'href': el.get('href')
				}
			ret.push(a);
			});
		return ret;
	},
		
	setEditormode: function(mode) {
		this.editormode=mode;
	},
		
	toggleEditormode: function() {
		this.editormode=!this.editormode;
	},
	
	moveTo: function(x,y) {
		if (x<-this.mapwidth+this.containercoords.width) x=-this.mapwidth+this.containercoords.width;
		if (y<-this.mapheight+this.containercoords.height) y=-this.mapheight+this.containercoords.height;
		if (x>0) x=0;
		if (y>0) y=0;
		this.map.setStyles({'left': x+'px', 'top': y+'px' });
	}
	
});