Ext.BLANK_IMAGE_URL = '/fundogfortidsminder/ext/resources/images/default/s.gif';

mapcomponent = {
	/**
	 * @member mapcomponent
	 */
	version :'0.1.0',
	tool: {},
	toctree: {}
};
/**
 * A plain Ext.Panel that contains a OpenLayers.Map
 * 
 * @constructor
 * @param config.mapConfig.options
 *            options to pass to the OpenLayers.Map constructor
 * @param config.mapConfig.layers
 *            array of layers that will be added to the map initially
 * @event afterolinit triggered when the OpenLayers.Map has been rendered
 */
mapcomponent.MapPanel = function(config) {
	mapcomponent.MapPanel.superclass.constructor.call(this, Ext.apply( {
		cls: 'mapcomponentMapPanel',
		border :false
	}, config));

	this.addEvents( {
		'afterolinit' :true
	});
	
	/**
	 * @type OpenLayers.Map
	 */
	this.map = null;
};

Ext.extend(mapcomponent.MapPanel, Ext.Panel, {
	afterRender : function() {
		mapcomponent.MapPanel.superclass.afterRender.apply(this, arguments);

		var map = new OpenLayers.Map(this.body.dom, this.mapConfig.options);
		this.map = map;
		map.addLayers(this.mapConfig.layers);

		this.fireEvent('afterolinit');
	},
	onResize : function() {
		mapcomponent.MapPanel.superclass.onResize.apply(this, arguments);

		if (this.map) {
			this.map.updateSize();
		}
	}

});
/**
 * @constructor
 */
mapcomponent.SearchAddressPanel = function(options) {

	var layer = options.layer;

	var self = this; 
	var selectedRecord = null;

	var store = new Ext.data.JsonStore( {
		url : '/publicffdata/addresses',
		root : 'addresses',
		fields : [ 'postalcode', 'display', 'housenumchar', 'housenum', 'roadnumber' ]
	});

	store.proxy.conn.method = 'GET';

	var adressComboBox = new Ext.form.ComboBox( {
		fieldLabel : 'Adresse',
		allowBlank : false,
		store : store,
		displayField : 'display',
		triggerAction : 'all',
		queryParam : 'text'
	});

	adressComboBox.on('beforequery', function() {
		adressComboBox.expand();
	});

	var onSearch = function() {
		self.destroy();

		var success = function(response) {
			var json = Ext.decode(response.responseText);

			if (json.error) {
				Ext.Msg.alert('Fejl', 'Søgetjeneste for adresse mislykkedes.');
				return;
			}

			var format = new OpenLayers.Format.WKT();
			var feature = format.read(json.location);
			var point = feature.geometry;

			var bounds = new OpenLayers.Bounds(point.x - 1000, point.y - 1000, point.x + 1000,
					point.y + 1000);

			layer.map.zoomToExtent(bounds);

			layer.destroyFeatures();
			layer.addFeatures( [ feature ]);
		};

		Ext.Ajax.request( {
			url : '/publicffdata/addresscoordinates',
			method : 'GET',
			params : {
				roadnumber : selectedRecord.get('roadnumber'),
				housenum : selectedRecord.get('housenum'),
				housenumchar : selectedRecord.get('housenumchar')
			},
			success : success,
			failure : function() {
				Ext.Msg.alert('Fejl', 'Kommunikation med server mislykkedes.');
			}
		});
	};

	var adressSearchButton = new Ext.Button( {
		text : 'Søg',
		handler : onSearch,
		disabled : true
	});

	adressComboBox.on('select', function(combo, record, index) {
		selectedRecord = record;
		adressSearchButton.enable();
	});

	var onClose = function() {
		self.destroy();
	};

	Ext.apply(options, {
		labelWidth : 60,
		frame : true,
		width : 350,
		defaults : {
			width : 250
		},
		items : [ adressComboBox ],
		buttons : [ adressSearchButton ]
	});

	mapcomponent.SearchAddressPanel.superclass.constructor.call(this, options);

};

Ext.extend(mapcomponent.SearchAddressPanel, Ext.form.FormPanel);/**
 * @base Ext.form.FormPanel
 * @constructor
 */
mapcomponent.SearchRoutePanel = function(options) {

	var layer = options.layer;
	var rutelocation = options.rutelocation;
	var rutelocationname = options.rutelocationname;

	var self = this;
	var selectedRecord = null;

	var store = new Ext.data.JsonStore( {
		url : '/publicffdata/addresses',
		root : 'addresses',
		fields : [ 'postalcode', 'display', 'housenumchar', 'housenum', 'roadnumber' ]
	});

	store.proxy.conn.method = 'GET';

	var adressComboBox = new Ext.form.ComboBox( {
		fieldLabel : 'Fra adresse',
		allowBlank : false,
		store : store,
		displayField : 'display',
		triggerAction : 'all',
		queryParam : 'text'
	});

	adressComboBox.on('beforequery', function() {
		adressComboBox.expand();
	});

	var onSearch = function() {
		self.destroy();

		var success = function(response) {
			var json = Ext.decode(response.responseText);

			if (json.error) {
				Ext.Msg.alert('Fejl', 'Søgetjeneste for rute mislykkedes.');
				return;
			}

			var format = new OpenLayers.Format.WKT();
			var feature = format.read(json.route);
			var line = feature.geometry;

			var bounds = line.getBounds();

			layer.map.zoomToExtent(bounds);

			// var feature = new OpenLayers.Feature.Vector(point);

			layer.destroyFeatures();
			layer.addFeatures( [ feature ]);

		};

		Ext.Ajax.request( {
			url : '/publicffdata/routes',
			method : 'GET',
			params : {
				roadnumber : selectedRecord.get('roadnumber'),
				housenum : selectedRecord.get('housenum'),
				housenumchar : selectedRecord.get('housenumchar'),
				locationid : rutelocation
			},
			success : success,
			failure : function() {
				Ext.Msg.alert('Fejl', 'Kommunikation med server mislykkedes.');
			}
		});
	};

	var adressSearchButton = new Ext.Button( {
		text : 'Søg',
		handler : onSearch,
		disabled : true
	});

	adressComboBox.on('select', function(combo, record, index) {
		selectedRecord = record;
		adressSearchButton.enable();
	});

	var onClose = function() {
		self.destroy();
	};

	var key = null;
	for (key in Ext.urlDecode(rutelocationname)) {
	}
	;

	Ext.apply(options, {
		labelWidth : 80,
		frame : true,
		width : 350,
		defaults : {
			width : 225
		},
		items : [ adressComboBox, {
			xtype : 'label',
			text : 'Til lokalitet ' + key
		} ],
		buttons : [ adressSearchButton ]
	});

	mapcomponent.SearchRoutePanel.superclass.constructor.call(this, options);

};

Ext.extend(mapcomponent.SearchRoutePanel, Ext.form.FormPanel);/**
 * @base Ext.Panel
 * @constructor
 * @param config
 *            {Object}
 * @param config.mapPanel
 * @param config.TocConfig
 * @param config.width
 * @param config.showSlider
 *            {Boolean} Show a background layer opacity slider, defaults to true
 */
mapcomponent.TocPanel = function(config) {
	var mapPanel = config.mapPanel;
	var width = config.width;
	var showSlider = config.showSlider || true;

	var toc = new mapcomponent.toctree.TocTreePanel( {
		region : 'center',
		autoScroll : true
	});

	var backgroundLayers = null;

	var setBackgroundLayers = function(layers) {
		backgroundLayers = layers;
	};

	var sliderPanel = null;

	if (showSlider) {

		var slider = new Ext.Slider( {
			width : width ? width - 10 : undefined,
			value : 0,
			increment : 5,
			keyIncrement: 10,
			minValue : 0,
			maxValue : 100,
			disabled : true
		});

		slider.on('changecomplete', function(slider, value) {
			var i,
				ilen = backgroundLayers.length-1,
				layeri,
				topBackgroundLayer = null;
			for ( i = ilen; i >= 0; --i) {
				layeri = backgroundLayers[i];
				if (layeri.getVisibility()) {
					topBackgroundLayer = layeri;
					break;
				}
			}

			for ( i = ilen; i >= 0; --i) {
				layeri = backgroundLayers[i];
				if (layeri !== topBackgroundLayer) {
					layeri.setOpacity(1);
				}
			}

			if (topBackgroundLayer) {
				topBackgroundLayer.setOpacity((100-value) / 100.0);
			}
		});

		sliderPanel = new Ext.Panel( {
			border : false,
			region : 'south',
			margins : '0 5 0 5',
			height : 40,
			items : [ {
				border : false,
				cls : 'mapcomponentSliderTitle',
				html : 'Gennemsigtighed:'
			}, slider ]
		});

	}

	Ext.apply(this, {
		border : false,
		layout : 'border',
		cls : 'mapcomponentTocPanel',
		items : [ toc, sliderPanel ]
	});

	mapcomponent.TocPanel.superclass.constructor.apply(this, arguments);

	this.slider = slider;
	this.toc = toc;

	this.setBackgroundLayers = setBackgroundLayers;
};

Ext.extend(mapcomponent.TocPanel, Ext.Panel);
/**
 * Base class for tools
 * 
 * @constructor
 * @param option.imgInactive
 *            url to image for inactive status
 * @param option.imgActive
 *            url to image for active status
 * @param option.control
 *            OpenLayers.Control instance that contains the tool functionality
 */
mapcomponent.tool.Tool = function(options) {
	var imgInactive = options.imgInactive;
	this.imgInactive = imgInactive;
	var imgActive = options.imgActive;
	var control = options.control;
	this.control = control;
	
	var handler = options.handler;
	this.handler = handler;

	var self = this;

	var createElement = function(toolBarElement) {
		var el = toolBarElement.createChild();
		el.addClass("mapcomponentTool");
		var imgEl = el.createChild( {
			tag :'img'
		});
		self.imgEl = imgEl;
		imgEl.set( {
			src :imgInactive
		});

		el.on('click', function() {
			if (!control) {
				imgEl.set( {
					src :imgActive
				});
				self.handler();
				
				var timeout = function() {
					imgEl.set( {
						src :imgInactive
					});
				};
				setTimeout(timeout, 100);
				return;
			}
			
			if (mapcomponent.tool.Tool.activeTool) {
				mapcomponent.tool.Tool.activeTool.control.deactivate();
				mapcomponent.tool.Tool.activeTool.imgEl.set( {
					src :mapcomponent.tool.Tool.activeTool.imgInactive
				});
			}
			control.activate();
			imgEl.set( {
				src :imgActive
			});
			mapcomponent.tool.Tool.activeTool = self;
		});
	};
	this.createElement = function(toolBarElement) {
		createElement(toolBarElement);
	};
};

mapcomponent.tool.Tool.activeTool = null;

mapcomponent.tool.Tool.prototype.superclass = new Object();
/**
 * A toolbar html thingy
 * 
 * @constructor
 */
mapcomponent.ToolBarPanel = function(options) {
	var mapPanel = options.mapPanel;
	var tools = options.tools;

	var body;

	Ext.apply(this, {
		border :false,
		cls :'mapcomponentToolBarPanel',
		width :40
	});

	mapcomponent.ToolBarPanel.superclass.constructor.apply(this, arguments);

	var self = this;

	var onAfterolinit = function(options) {
		for ( var i = 0; i < tools.length; i++) {
			var tool = tools[i];

			if (isNaN(parseInt(tool)) === false) {
				var div = body.createChild();
				div.setStyle('height', tool + 'px');
			} else if (tool === '->') {
				body.createChild( {
					html :'SEP'
				});
			} else {
				tool.createElement(body);
				if (tool.control) {
					mapPanel.map.addControl(tool.control);
				}
				else {
					tool.map = mapPanel.map;
				}
			}
		}
	};

	mapPanel.on('afterolinit', onAfterolinit);
	this.on('render', function() {
		body = this.body;
	}, this);
};

Ext.extend(mapcomponent.ToolBarPanel, Ext.Panel);
/**
 * @constructor
 */
mapcomponent.toctree.GroupNode = function(config) {
	mapcomponent.toctree.GroupNode.superclass.constructor.call(this, Ext.apply( {
		expanded : true,
		cls : 'mapcomponentTocGroup'
	}, config));

	var i;

	var maxSelected = this.maxSelected || 99;

	var layerNodes = [];

	var self = this;

	// special radiobutton-functionality, should perhaps be in oversigt
	// client
	var filterNodes = [];
	var addFilter = function(text, checked) {
		var onClick = function() {
			for (i = 0; i < filterNodes.length; i++) {
				filterNodes[i].getUI().checkbox.innerHTML = '<img src="/fundogfortidsminder/MapComponent/images/btnfalse.gif" style="padding:1px">';
			}
			this.getUI().checkbox.innerHTML = '<img src="/fundogfortidsminder/MapComponent/images/btntrue.gif" style="padding:1px">';
		};

		var filterNode = new Ext.tree.TreeNode( {
			text : text,
			checked : checked,
			cls : 'mapcomponentTocLayer',
			uiProvider : mapcomponent.toctree.LayerNodeRadioUI,
			listeners : {
				click : onClick
			}
		});

		self.appendChild(filterNode);
		filterNodes.push(filterNode);

		return filterNode;
	};

	/**
	 * Creates a node predefined to be used as a layer
	 * 
	 * @param text
	 *            node title text
	 */
	var addLayer = function(config) {
		var text = config.text;
		var layer = config.layer;
		var layerName = config.layerName;
		var layerStyle = config.layerStyle;
		var visible = config.visible;
		var disabled = config.disabled;
		var filter = config.filter;
		var label = config.label;

		if (!visible) {
			visible = false;
		}

		/**
		 * Handle clicks on layer checkbox Toggles layer visibility in WMS
		 * 
		 * @param node
		 *            {Ext.tree.TreeNode} The node that has been toggled
		 * @param checked
		 *            {Boolean} The checkbox state
		 */
		var onCheckchange = function(node, checked) {

			// ext does not provide an accessor to the current checked property value so simulate it
			node.checked = checked;

			// calc how many selected (checked) nodes that belong to the same
			// layer (used later)
			var selectedCount = 0;
			for (i = 0; i < layerNodes.length; i++) {
				if (layerNodes[i].checked && !layerNodes[i].label
						&& (layerNodes[i].layer === layer)) {
					selectedCount++;
				}
			}

			if (selectedCount > maxSelected) {
				return false;
			}

			// used by external code for scale handling
			layer.selectedCount = selectedCount;

			// take care of label style i.e this is a node that control label
			// visibility)
			if (label) {
				var styleMap = layer.styleMap;

				if (checked) {
					styleMap.styles['default'].setDefaultStyle(OpenLayers.Util.applyDefaults( {
						label : ' -'+ label // ' <'+ label + '> '
					}, styleMap.styles['default'].defaultStyle));
					layer.redraw();
				} else {
					styleMap.styles['default'].setDefaultStyle(OpenLayers.Util.applyDefaults( {
						label : null
					}, styleMap.styles['default'].defaultStyle));
					layer.redraw();
				}
			}

			// take care of vector layer filters
			if (filter) {
				var filters = [];

				for (i = 0; i < layerNodes.length; i++) {
					if (layerNodes[i].checked && layerNodes[i].olfilter) {
						filters.push(layerNodes[i].olfilter);
					}
				}

				if (filters.length > 1) {
					layer.filter = new OpenLayers.Filter.Logical( {
						type : OpenLayers.Filter.Logical.OR,
						filters : filters
					});
				} else {
					layer.filter = filters[0];
				}
				
				layer.destroyFeatures();

			}

			// take care of visibility of vector layers
			if (layer instanceof OpenLayers.Layer.Vector) {
				if (selectedCount > 0) {
					layer.setVisibility(true);
					layer.refresh( {
						force : true
					});
				} else {
					layer.setVisibility(false);
				}

				return true;
			}

			// calc new WMS layer param
			var layerParam = '';
			for (i = 0; i < layerNodes.length; i++) {
				if (layerNodes[i].checked && (layerNodes[i].layer === layer)) {
					if (!layerParam) {
						layerParam = layerNodes[i].layerName;
					} else {
						layerParam = layerNodes[i].layerName + ',' + layerParam;
					}
				}
			}

			// use new WMS layer param if something is there
			if (layerParam) {
				layer.setVisibility(true);
				layer.mergeNewParams( {
					layers : layerParam
				});
			} else {
				layer.setOpacity(1);
				layer.setVisibility(false);
			}

			return true;
		};

		// create the node representing the layer and connect the
		// checkchange handler
		var layerNode = new Ext.tree.TreeNode( {
			text : text,
			checked : visible,
			disabled : disabled || layer.maxZoomLevel ? true : false,
			cls : 'mapcomponentTocLayer',
			listeners : {
				checkchange : {
					fn : onCheckchange
				}
			}
		});

		// add scale handling
		if (layer.maxZoomLevel) {
			var onZoomend = function() {
				if (layer.disableAutoScaleHandling) {
					return;
				}

				if (layer.map.getZoom() < layer.maxZoomLevel) {
					if (layer instanceof OpenLayers.Layer.WMS) {
						layer.setVisibility(false);
					}
					layerNode.getUI().toggleCheck(false);
					layerNode.disable();
				} else {
					layerNode.enable();
				}
			};

			layer.map.events.register('zoomend', null, onZoomend);
		}

		// need these as public properties on the node
		layerNode.layer = layer;
		layerNode.layerName = layerName;
		layerNode.layerStyle = layerStyle;
		layerNode.olfilter = filter;
		layerNode.label = label;
		layerNode.checked = visible;

		layerNodes.push(layerNode);

		self.appendChild(layerNode);

		return layerNode;
	};

	this.addFilter = addFilter;
	this.addLayer = addLayer;
};

Ext.extend(mapcomponent.toctree.GroupNode, Ext.tree.TreeNode);
mapcomponent.toctree.LayerNodeRadioUI = function() {
	mapcomponent.toctree.LayerNodeRadioUI.superclass.constructor.apply(this, arguments);
};

Ext.extend(mapcomponent.toctree.LayerNodeRadioUI, Ext.tree.TreeNodeUI, {
	renderElements : function(n, a, targetNode, bulkRender) {
	this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';

	var cb = typeof a.checked == 'boolean';

	var href = a.href ? a.href : Ext.isGecko ? "" : "#";
	var buf = [
			'<li class="x-tree-node"><div ext:tree-node-id="',
			n.id,
			'" class="x-tree-node-el x-tree-node-leaf x-unselectable ',
			a.cls,
			'" unselectable="on">',
			'<span class="x-tree-node-indent">',
			this.indentMarkup,
			"</span>",
			'<img src="',
			this.emptyIcon,
			'" class="x-tree-ec-icon x-tree-elbow" />',
			'<img src="',
			a.icon || this.emptyIcon,
			'" class="x-tree-node-icon',
			(a.icon ? " x-tree-node-inline-icon" : ""),
			(a.iconCls ? " " + a.iconCls : ""),
			'" unselectable="on" />',
			a.checked ? '<span><img src="/fundogfortidsminder/MapComponent/images/btntrue.gif" style="padding:1px"></span>' : '<span><img src="/fundogfortidsminder/MapComponent/images/btnfalse.gif" style="padding:1px"></span>', '<a hidefocus="on" class="x-tree-node-anchor" href="', href,
			'" tabIndex="1" ', a.hrefTarget ? ' target="' + a.hrefTarget + '"' : "",
			'><span unselectable="on">', n.text, "</span></a></div>",
			'<ul class="x-tree-node-ct" style="display:none;"></ul>', "</li>" ].join('');

	var nel;
	if (bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())) {
		this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
	} else {
		this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
	}

	this.elNode = this.wrap.childNodes[0];
	this.ctNode = this.wrap.childNodes[1];
	var cs = this.elNode.childNodes;
	this.indentNode = cs[0];
	this.ecNode = cs[1];
	this.iconNode = cs[2];
	var index = 3;
	if (cb) {
		this.checkbox = cs[3];
		index++;
	}
	this.anchor = cs[index];
	this.textNode = cs[index].firstChild;
},
onCheckChange : function(checked) {
	this.fireEvent('checkchange', this.node, checked);
},
toggleCheck : function(value) {

}
});
/**
 * A table of contents control
 * 
 * NOTE: At the moment just a default config for a TreePanel
 * 
 * @base Ext.tree.TreePanel
 * @constructor
 * @param config
 */
mapcomponent.toctree.TocTreePanel = function(config) {
	var root = new Ext.tree.TreeNode({ expanded:true});
	
	mapcomponent.toctree.TocTreePanel.superclass.constructor.call(this, Ext.apply( {
		border :false,
		useArrows :true,
		lines :false,
		root: root,
		rootVisible :false
	}, config));
};

Ext.extend(mapcomponent.toctree.TocTreePanel, Ext.tree.TreePanel);


/**
 * @constructor
 */
mapcomponent.tool.DragPan = function(config) {
	mapcomponent.tool.DragPan.superclass.constructor.call(this, Ext.apply( {
		imgInactive :'/fundogfortidsminder/MapComponent/images/pan-a.png',
		imgActive :'/fundogfortidsminder/MapComponent/images/pan-b.png',
		control :new OpenLayers.Control.DragPan()
	}, config));
};

Ext.extend(mapcomponent.tool.DragPan, mapcomponent.tool.Tool);// measure tool taken from WebGIS Public
( function() {
	
	var control;
	var tip;

	var destroyTip = function() {
		if (tip) {
			tip.destroy();
		}
	};

	var updateTip = function(event) {
		var line = event.geometry;
		var point = line.components[line.components.length-1];

		var length = line.getLength();

		if (length === 0) {
			return;
		}

		// is not more than 10 km
		if ((length % 10000) === length) {
			length = (Math.round(length * 100) / 100).toString() + ' m';
		} else {
			length = ((Math.round(length * 100 / 1000) / 100)).toString() + ' km';
		}

		destroyTip();
		
		tip = new Ext.Tip( {
			html :length,
			style :'width:150px',
			autoHeight :true
		});

		var pixel = control.map.getViewPortPxFromLonLat(new OpenLayers.LonLat(point.x, point.y));
		var el = Ext.get(control.map.div.id);
		tip.showAt( [ pixel.x + 5 + el.getLeft(), pixel.y + 5 + el.getTop() ]);
	};

	control = new OpenLayers.Control.Measure(OpenLayers.Handler.Path);
	
	control.events.register('measure', null, destroyTip);
	control.events.register('measurepartial', null, updateTip);

	/**
	 * @constructor
	 */
	mapcomponent.tool.Measure = function(config) {
		mapcomponent.tool.Measure.superclass.constructor.call(this, Ext.apply( {
			imgInactive :'/fundogfortidsminder/MapComponent/images/maal-a.png',
			imgActive :'/fundogfortidsminder/MapComponent/images/maal-b.png',
			control :control
		}, config));
	};
	
	Ext.extend(mapcomponent.tool.Measure, mapcomponent.tool.Tool);

}());/**
 * @constructor
 */
mapcomponent.tool.ZoomIn = function(config) {
	mapcomponent.tool.ZoomIn.superclass.constructor.call(this, Ext.apply( {
		imgInactive :'/fundogfortidsminder/MapComponent/images/zoomind-a.png',
		imgActive :'/fundogfortidsminder/MapComponent/images/zoomind-b.png',
		control :new OpenLayers.Control.ZoomBox()
	}, config));
};

Ext.extend(mapcomponent.tool.ZoomIn, mapcomponent.tool.Tool);
/**
 * @constructor
 */
mapcomponent.tool.ZoomOut = function(config) {
	mapcomponent.tool.ZoomOut.superclass.constructor.call(this, Ext.apply( {
		imgInactive :'/fundogfortidsminder/MapComponent/images/zoomud-a.png',
		imgActive :'/fundogfortidsminder/MapComponent/images/zoomud-b.png',
		control :new OpenLayers.Control.ZoomBox({
			out :true
		})
	}, config));
};

Ext.extend(mapcomponent.tool.ZoomOut, mapcomponent.tool.Tool);/**
 * @constructor
 */
mapcomponent.tool.ZoomStepIn = function(config) {
	mapcomponent.tool.ZoomStepIn.superclass.constructor.call(this, Ext.apply( {
		imgInactive :'/fundogfortidsminder/MapComponent/images/zoomind-a.png',
		imgActive :'/fundogfortidsminder/MapComponent/images/zoomind-b.png',
		handler: function() {
			this.map.zoomIn();
		}
	}, config));
};

Ext.extend(mapcomponent.tool.ZoomStepIn, mapcomponent.tool.Tool);
/**
 * @constructor
 */
mapcomponent.tool.ZoomStepOut = function(config) {
	mapcomponent.tool.ZoomStepOut.superclass.constructor.call(this, Ext.apply( {
		imgInactive :'/fundogfortidsminder/MapComponent/images/zoomud-a.png',
		imgActive :'/fundogfortidsminder/MapComponent/images/zoomud-b.png',
		handler: function() {
			this.map.zoomOut();
		}
	}, config));
};

Ext.extend(mapcomponent.tool.ZoomStepOut, mapcomponent.tool.Tool);