if (typeof(Prototype) == "undefined" && typeof(MooTools) == "undefined")
		alert('You have to include Prototype.js before mapeditor.js!');

	var MapDecoration = new Class({
		options: {
			width: 500,
			height: 500,
			scaleBar: 'right',
			imgPath: 'http://services.mapnet.pl/mapapi/common/imgs/',
			scales: [200000, 134719, 72359, 40179, 22471, 13977, 8483, 4988, 2494, 1273, 574, 224, 112].reverse()
			//scales: [170000000, 100000000, 50000000, 25000000, 10000000, 8000000, 6000000, 4000000, 2000000, 700000, 300000, 100000, 50000].reverse()
		},
		
		_numberToScale: function(n) {
			return this.options.scales[Math.min(Math.max(n, 0), 12)]
		}
		,
		_scaleToNumber: function(s) {
			var r = 0;
			var dr = 1/0.0;
			for (var i = 0; i<13; i++) {
				var ddr = Math.abs(this.options.scales[i] - s); 
				if (ddr > dr) return r;		
				dr = ddr;
				r = i;
			}
			return r;
		}
		,
		_scaleTimer: null,
		_setRequestedScale: function() {
		    var sc = this._numberToScale(this._requestedScale);
		    var x = this._requestedX;
		    var y = this._requestedY;
	    	this.map.Navigate.ScaleCenterAbsolute(sc, x, y).commit();
		}
		,
		_doScale: function(scale, x, y, wait) {
			//_d('Scale '+scale);
			//x = x || 0; y = y || 0;
			var ds = this._numberToScale(this._mapScale) / this._numberToScale(scale);
			//_d(ds);
			map.fxZoomImg(ds, x, y); 
		    var sc = this._numberToScale(scale);
		    this._requestedScale = scale;
		    this._requestedX = x;
		    this._requestedY = y;
	    	$clear(this._scaleTimer);
		    if (!wait)
		    	this.map.Navigate.ScaleCenterAbsolute(sc, x, y).commit();		    	
		    else
		    	this._scaleTimer = this._setRequestedScale.delay(700, this);
		    this._slidingArrowSet(scale);
		}
		,
		_scaleOut: function(x, y, wait) {
		    var scale = this._requestedScale;
		    if (scale < 0 || scale >= 12)
		        return;
		    scale = scale + 1;
		    this._doScale(scale, x, y, wait);
		}
		,
		zoomOut: function(x, y, wait) {
			return this._scaleOut(x, y, wait);
		}	
		,
		_scaleIn: function(x, y, wait) {
		    var scale = this._requestedScale;
		    if (scale <= 0 || scale > 12)
		        return;
		    scale = scale - 1;
		    this._doScale(scale, x, y, wait);
		}
		,
		zoomIn: function(x, y, wait) {
			return this._scaleIn(x, y, wait);
		}	
		,
		_slidingArrowSet: function(scale, now) {
			if (scale == undefined) {
				scale = this._scale;
				now = true;
			}
		
		    var sc = this._numberToScale(scale);
		
		    if (!this._slidingArrow) return;
		    if (this._requestedScale == this._scale);
		    	this._requestedScale = scale; 
		    this._scale = scale;
		    var sb = this._scaleBars[12-scale];
		    if (this._old_bar) {
		        this._old_bar._selected = false;
		        this._old_bar._anim.seekTo(0);
		    }
		    if (!sb)
		    	return;
		    this._old_bar = sb;
		    this._old_bar._selected = true;
		    this._old_bar._anim.seekTo(1);
		    var pos = sb.getCoordinates();
		    this._slidingArrow.setStyle('left', (pos.left+8)+'px');
		    if (this._slidingArrow._anim)
		        this._slidingArrow._anim.clearSubjects();
		    var y = Math.ceil(pos.top + (pos.height / 2) - 16 / 2);
		    this._slidingArrow._anim = new Animator().addSubject(new CSSStyleSubject(this._slidingArrow, "top: "+(y)+"px"));
		    if (!now)    
		    	this._slidingArrow._anim.seekTo(1);
		    else
		    	this._slidingArrow._anim.jumpTo(1);
		}		
				
		,
		initialize: function(box, options) {
			this.setOptions(options);
			this.map = null;
			this.box = $(box);
			var a = null;
			this.box.setStyles(
				{
					'border': '1px solid rgb(153, 153, 153)',
					'height': '518px',
					'width': '534px',
					'background-color': '#cbcbcb'
				}
			);
			this.box.adopt( a = new Element('div', 
				{
					styles: {
						'height': "100%", 
						'width': "100%", 
						'background-image': 'url('+this.options.imgPath+'grad.gif)',
						'background-repeat': 'no-repeat'
					}
				}
			));			
			a.adopt(a = new Element('div', 
				{
					styles: 
					{
						'height': '100%',
					 	'width': '100%',
					 	backgroundImage: 'url('+this.options.imgPath+'grad_rb.gif)',
						backgroundRepeat: 'no-repeat',
					 	backgroundPosition: 'right bottom'
					}
				}
			));
			
			this.decorBox = new Element('div', 
				{ styles: {
					'float': 'left',
					'height': '445px',
					'width': '445px',
					'border': '2px inset #CCC',
					'margin-left': '6px',
					'margin-top': '4px',
					'display': 'inline' }
				}
			);
			
			this.decorBox.adopt(this.mapBox = new Element('div', 
				{ styles: {'height': '445px', 'width': '445px' } }
			));
			
			this._scaleBar = new Element('div', {
				styles: {float: 'left'},
				'class': "scaleBar",
				contentHTML: " "+
"				   	<div> "+
"				        <div class=\"scaleButton scaleMinus\" style=\"height: 8px;width: 20px;\"> "+
"				        	<img src=\""+this.options.imgPath+"minus.gif\" /> "+
"				        </div> "+
"								"+
"				        <div class=\"scaleBarElement\" style=\"margin-top:4px;height: 7px; width:8px;\"><span></span></div> "+
"				        <div class=\"scaleBarElement\" style=\"margin-top:4px;height: 12px; width:8px;\"><span></span></div> "+
"				        <div class=\"scaleBarElement\" style=\"margin-top:3px;height: 14px; width:8px;\"><span></span></div> "+
"				        <div class=\"scaleBarElement\" style=\"margin-top:3px;height: 16px; width:8px;\"><span></span></div> "+
"				        <div class=\"scaleBarElement\" style=\"margin-top:3px;height: 20px; width:8px;\"><span></span></div> "+
"				        <div class=\"scaleBarElement\" style=\"margin-top:4px;height: 23px; width:8px;\"><span></span></div> "+
"				        <div class=\"scaleBarElement\" style=\"margin-top:4px;height: 27px; width:8px;\"><span></span></div> "+
"				        <div class=\"scaleBarElement\" style=\"margin-top:4px;height: 29px; width:8px;\"><span></span></div> "+
"				        <div class=\"scaleBarElement\" style=\"margin-top:4px;height: 31px; width:8px;\"><span></span></div> "+
"				        <div class=\"scaleBarElement\" style=\"margin-top:4px;height: 34px; width:8px;\"><span></span></div> "+
"				        <div class=\"scaleBarElement\" style=\"margin-top:4px;height: 38px; width:8px;\"><span></span></div> "+
"				        <div class=\"scaleBarElement\" style=\"margin-top:4px;height: 40px; width:8px;\"><span></span></div> "+
"				        <div class=\"scaleBarElement\" style=\"margin-top:4px;height: 46px; width:8px;\"><span></span></div> "+
"				        		"+
"				        <div class=\"scaleButton scalePlus\" style=\"margin-top:6px;height: 20px;width: 20px;\"> "+
"				        	<img src=\""+this.options.imgPath+"plus.gif\" /> "+
"				        </div> "+
//""
"				    </div>"
				}
			)
			
			if (this.options.scaleBar == 'right') {
				a.adopt(this.decorBox);
				a.adopt(this._scaleBar);
			} else {
				a.adopt(this._scaleBar);
				this.decorBox.setStyle('margin-left', 0);
				a.adopt(this.decorBox);
			}
			
			this._scale = 0;
			this._mapScale = 0;
			this._requestedScale = 0;
			
			$E('.scaleMinus', this._scaleBar).addEvent('click', function() {
				this.zoomOut(this.map.width / 2, this.map.height / 2, true)
			}.bind(this));
			$E('.scalePlus', this._scaleBar).addEvent('click', function() {
				this.zoomIn(this.map.width / 2, this.map.height / 2, true)
			}.bind(this));
			
			this._slidingArrow = new Element('div',
				{
					styles: {position: 'absolute', left: 0, top: 0},
					contentHTML: "<img src=\""+this.options.imgPath+"mapa_trojkat.gif\" width=\"8\" height=\"16\" />"
				}
			).inject(document.body);
			this._initArrows();
			this._initScaleBar();
			this.setSize(this.options.width, this.options.height);
		}
		,
		_initScaleBar: function() {
		    var divs = $ES('.scaleBarElement', this._scaleBar);
			this._scaleBars = divs; 
		    for (var i = 0; i < 13; i++) {
		    	var dd = divs[i];
		        dd._anim = Animator.apply(dd, ["background-color: #CCCCCC", "background-color: #FFFAE1"]); 
		        dd._anim.seekTo( 0 );
		        dd.addEvent('mouseover', function() { this._anim.seekTo(1) }.bind(dd)); 
		        dd.addEvent('mouseout', function() { if (!this._selected) this._anim.seekTo(0) }.bind(dd));
		        dd.addEvent('click', function(scale) { 
				    var sc = this._numberToScale(scale);
		            this.map.Navigate.ScaleAbsolute(sc).commit();
		        }.bind(this, 12-i));
		    }		
		}
		,
		_animateArrow: function(s, x, y) {
	    	var ar = this.arrows[s];
	    	var an = this.arrows_anim[s] = new Animator().addSubject(new CSSStyleSubject(ar, s+": -20px", s+": 0"));
			ar.addEvent('mouseover', function() { an.seekTo(1) }); 
			ar.addEvent('mouseout', function() { an.seekTo(0) });
		    ar.addEvent('click', function(evt) { 
		    	this.map.Navigate.Slide(2*this.map.width/3 * x, 2*this.map.height/3 * y).commit(); new Event(evt).stop(); 
		    }.bind(this));
		}
		,
		_initArrows: function() {
			this.arrows = {top: null, bottom: null, left: null, right: null};
			this.arrows_anim = {top: null, bottom: null, left: null, right: null};
			
			if (!this.map)
				return;
			
		    var a;
		    var stsh = {'z-index': 100, position: 'absolute', height: '30px', 'background-color': 'transparent'}; 
		    var stsw = {'z-index': 100, position: 'absolute', width: '30px', 'background-color': 'transparent'}; 
		    this.map.dr.box.adopt( this.arrows.top = new Element('div', 
		    		{'class': 'noprintable', styles: stsh} ) );
		    this.arrows.top.adopt(new Element('img', {width: 356, height: 30, src: ''+this.options.imgPath+'mapka_wyjazd2.png'}));
		
		    this.map.dr.box.adopt( this.arrows.bottom = new Element('div', 
		    		{'class': 'noprintable', styles: stsh} ) );
		    this.arrows.bottom.adopt(a = new Element('img', {width: 356, height: 30, src: ''+this.options.imgPath+'mapka_wyjazd4.png'}));
		
		    this.map.dr.box.adopt( this.arrows.left = new Element('div', 
		    		{'class': 'noprintable', styles: stsw} ) );
		    this.arrows.left.adopt(a = new Element('img', {width: 30, height: 356, src: ''+this.options.imgPath+'mapka_wyjazd1.png'}));
		
		    this.map.dr.box.adopt( this.arrows.right = new Element('div', 
		    		{'class': 'noprintable', styles: stsw} ) );
		    this.arrows.right.adopt(a = new Element('img', {width: 30, height: 356, src: ''+this.options.imgPath+'mapka_wyjazd3.png'}));
	
		    $H(this.arrows).each(function(ar) {
		    	ar.firstChild.fix();
		    });
	    
		    this._animateArrow('top', 0, -1);
		    this._animateArrow('bottom', 0, 1);
		    this._animateArrow('left', -1, 0);
		    this._animateArrow('right', 1, 0);
		    this._positionArrows();
		}
		,
		_positionScaleBar: function() {
			this._scaleBar.setStyle('margin-top', Math.max((this._scaleBar.getParent().getSize().size.y - this._scaleBar.getSize().size.y) / 2, 0));			
			this._slidingArrowSet();
		}
		,
		_positionAll: function() {
			this._positionArrows();
			this._positionScaleBar();
		}
		,
		_positionArrows: function() {
			if (!this.arrows.top)
				return;
			var width = this._mapWidth;
			var wd2 = parseInt((width-356)/2);
			var height = this._mapHeight;
			var hd2 = parseInt((height-356)/2);
			this.arrows.top.setStyles({
				left: wd2+'px',
				top: '-20px'
			});
			this.arrows.bottom.setStyles({
				left: wd2+'px',
				bottom: '-20px'
			});
			this.arrows.left.setStyles({
				top: hd2+'px',
				left: '-20px'
			});
			this.arrows.right.setStyles({
				top: hd2+'px',
				right: '-20px'
			});
		}
		,
		setSize: function(width, height, refresh) {
//			_d(width+' '+height);
			this.options.width = width;
			this.options.height = height;
			this._mapWidth = this.options.width-40;
			if (this.options.scaleBar == 'left')
				this._mapWidth += 6;
			this._mapHeight = this.options.height-13;
			this.box.setStyles({
				width: (this.options.width-2)+'px',
				height: (this.options.height-2)+'px'
			});
			this.decorBox.setStyles({
				width: this._mapWidth+'px',
				height: this._mapHeight+'px'
			});
			this.mapBox.setStyles({
				width: this._mapWidth+'px',
				height: this._mapHeight+'px'
			});
			this._slidingArrowSet();
			this._positionAll();
			if (this.map) {
				this.map.ChangeSize(this._mapWidth, this._mapHeight);
				if (refresh) {
					this.map.Navigate.Refresh().commit();
				}
			}
		}
		,
		injectMap: function(map) {
			if (this.map) {
			    $H(this.arrows).each(function(ar) {
			    	if (ar)
			    		ar.remove();
			    });
			}
			this.map = map;
			if (this.map) {
				this.map.addEvent('onScaleChange', function(scale) {
					scale = this._scaleToNumber(scale);
					this._mapScale = scale;				
					this._slidingArrowSet(scale);
				}.bind(this));
			}
			this.setSize(this.options.width, this.options.height, false);
			this._initArrows();
		}

		,
		
		_end:null
	});
	
	
	MapDecoration.implement(new Options);
	MapDecoration.implement(new Events);