var viewport;
var map, map2, map3, map4;
var mapPanel, mapPanel2, mapPanel3, mapPanel4;

OpenLayers.ImgPath = "http://js.mapbox.com/theme/dark/";

function osm_getTileURL(bounds) {
	var res = this.map.getResolution();
	var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
	var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
	var z = this.map.getZoom();
	var limit = Math.pow(2, z);

	if (y < 0 || y >= limit) {
		return OpenLayers.Util.getImagesLocation() + "404.png";
	} else {
		x = ((x % limit) + limit) % limit;
		return this.url + z + "/" + x + "/" + y + "." + this.type;
	}
}

Ext.onReady(function() {

	Ext.QuickTips.init();
	var navigation = new OpenLayers.Control.Navigation();
	var controlZoomBox = new OpenLayers.Control.ZoomBox({CLASS_NAME:'zoomIn'});
	var navigation2 = new OpenLayers.Control.Navigation();
	var controlZoomBox2 = new OpenLayers.Control.ZoomBox({CLASS_NAME:'zoomIn'});
	var navigation3 = new OpenLayers.Control.Navigation();
	var controlZoomBox3 = new OpenLayers.Control.ZoomBox({CLASS_NAME:'zoomIn'});
	var navigation4 = new OpenLayers.Control.Navigation();
	var controlZoomBox4 = new OpenLayers.Control.ZoomBox({CLASS_NAME:'zoomIn'});
	var scale = new OpenLayers.Control.ScaleLine({geodesic: true});
	var scale2 = new OpenLayers.Control.ScaleLine({geodesic: true});
	var scale3 = new OpenLayers.Control.ScaleLine({geodesic: true});
//	var scale4 = new OpenLayers.Control.ScaleLine({geodesic: true});

	var options = {
		controls: [navigation, controlZoomBox, scale],
		projection: new OpenLayers.Projection("EPSG:900913"),
		displayProjection: new OpenLayers.Projection("EPSG:4326"),
		units: "m",
		numZoomLevels: 18,
		maxResolution: 156543.0339,
		maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34)
	};
	var options2 = {
		controls: [navigation2, controlZoomBox2, scale2],
		projection: new OpenLayers.Projection("EPSG:900913"),
		displayProjection: new OpenLayers.Projection("EPSG:4326"),
		units: "m",
		numZoomLevels: 18,
		maxResolution: 156543.0339,
		maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34)
	};
	var options3 = {
		controls: [navigation3, controlZoomBox3, scale3],
		projection: new OpenLayers.Projection("EPSG:900913"),
		displayProjection: new OpenLayers.Projection("EPSG:4326"),
		units: "m",
		numZoomLevels: 18,
		maxResolution: 156543.0339,
		maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34)
	};
	var options4 = {
		controls: [navigation4, controlZoomBox4],
		projection: new OpenLayers.Projection("EPSG:900913"),
		displayProjection: new OpenLayers.Projection("EPSG:4326"),
		units: "m",
		numZoomLevels: 18,
		maxResolution: 156543.0339,
		maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34)
	};

	var map = new OpenLayers.Map(options);
	var map2 = new OpenLayers.Map(options2);
	var map3 = new OpenLayers.Map(options3);
	var map4 = new OpenLayers.Map(options4);

	map.events.register("zoomend", map, function(e){
		if ((map.getZoom() <= 15) && (map.getZoom() >= 11)){
			checkhillshading.enable();
			if (checkhillshading.getValue()){
				hill.setVisibility(true);
			}
			else{
				hill.setVisibility(false);
			}
		}
		if (map.getZoom() > 15){
			hill.setVisibility(false);
			checkhillshading.disable();
		}
		if (map.getZoom() < 11){
			hill.setVisibility(false);
			checkhillshading.disable();
		}
	});

	map3.events.register("zoomend", map3, function(e){
		if ((map3.getZoom() <= 15) && (map3.getZoom() >= 11)){
			checkhillshading3.enable();
			if (checkhillshading3.getValue()){
				hill3.setVisibility(true);
			}
			else{
				hill3.setVisibility(false);
			}
		}
		if (map3.getZoom() > 15){
			hill3.setVisibility(false);
			checkhillshading3.disable();
		}
		if (map3.getZoom() < 11){
			hill3.setVisibility(false);
			checkhillshading3.disable();
		}
	});

	map4.events.register("zoomend", map4, function(e){
		if ((map4.getZoom() <= 15) && (map4.getZoom() >= 11)){
			checkhillshading4.enable();
			if (checkhillshading4.getValue()){
				hill4.setVisibility(true);
			}
			else{
				hill4.setVisibility(false);
			}
		}
		if (map4.getZoom() > 15){
			hill4.setVisibility(false);
			checkhillshading4.disable();
		}
		if (map.getZoom() < 11){
			hill4.setVisibility(false);
			checkhillshading4.disable();
		}
	});

	// OSM layers
	var mapnik = new OpenLayers.Layer.OSM("mapnik", "http://tile.openstreetmap.org/${z}/${x}/${y}.png",
		{'sphericalMercator': true, isBaseLayer:true}
	);
	var osmarender = new OpenLayers.Layer.OSM("osmarender",	"http://tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png",
		{'sphericalMercator': true, isBaseLayer:true}
	);
	var cyclemap = new OpenLayers.Layer.OSM("cyclemap",	"http://tile.opencyclemap.org/cycle/${z}/${x}/${y}.png",
		{'sphericalMercator': true, isBaseLayer:true}
	);
	var hikebike = new OpenLayers.Layer.OSM("hikebike", "http://toolserver.org/tiles/hikebike/${z}/${x}/${y}.png");
	var mapquest = new OpenLayers.Layer.OSM("mapquest", "http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png");
	var opnv = new OpenLayers.Layer.OSM("opnv", "http://tile.xn--pnvkarte-m4a.de/tilegen/${z}/${x}/${y}.png");
	var openpistemap = new OpenLayers.Layer.OSM("openpistemap", "http://tiles.openpistemap.org/contours/${z}/${x}/${y}.png");

	var hill = new OpenLayers.Layer.TMS("Hillshading (NASA SRTM3 v2)", "http://toolserver.org/~cmarqu/hill/", {
		type: 'png', 
		getURL: osm_getTileURL,
		displayOutsideMaxExtent: true, 
		isBaseLayer: false,
		transparent: true, 
		"visibility": false
	});
/*	var hill2 = new OpenLayers.Layer.TMS("Hillshading (NASA SRTM3 v2)", "http://toolserver.org/~cmarqu/hill/", {
		type: 'png', 
		getURL: osm_getTileURL,
		displayOutsideMaxExtent: true, 
		isBaseLayer: false,
		transparent: true, 
		"visibility": false
	});*/
	var hill3 = new OpenLayers.Layer.TMS("Hillshading (NASA SRTM3 v2)", "http://toolserver.org/~cmarqu/hill/", {
		type: 'png', 
		getURL: osm_getTileURL,
		displayOutsideMaxExtent: true, 
		isBaseLayer: false,
		transparent: true, 
		"visibility": false
	});
	var hill4 = new OpenLayers.Layer.TMS("Hillshading (NASA SRTM3 v2)", "http://toolserver.org/~cmarqu/hill/", {
		type: 'png', 
		getURL: osm_getTileURL,
		displayOutsideMaxExtent: true, 
		isBaseLayer: false,
		transparent: true, 
		"visibility": false
	});

	// Bing layers
	var bingmap = new OpenLayers.Layer.VirtualEarth("bingnormal", 
		{type: VEMapStyle.Shaded,'sphericalMercator': true}
	);
	var binghyb = new OpenLayers.Layer.VirtualEarth("binghybrid",
		{'type': VEMapStyle.Hybrid, 'sphericalMercator': true}
	);
	var bingsat = new OpenLayers.Layer.VirtualEarth("bingaerial",
		{'type': VEMapStyle.Aerial, 'sphericalMercator': true}
	);

	// Google layers
	var gphy = new OpenLayers.Layer.Google("googlephysical",
		{type: google.maps.MapTypeId.TERRAIN}
	);
	var gmap = new OpenLayers.Layer.Google("googlenormal",
		{type: google.maps.MapTypeId.NORMAL, numZoomLevels: 20}
	);
	var ghyb = new OpenLayers.Layer.Google("googlehybrid",
		{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
	);
	var gsat = new OpenLayers.Layer.Google("googlesat",
		{type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
	);

	// Yahoo layers
	var yahoomap = new OpenLayers.Layer.Yahoo("yahoonormal",
		{'type': YAHOO_MAP_REG, 'sphericalMercator': true}
	);
	var yahoosat = new OpenLayers.Layer.Yahoo("yahoosat",
		{'type': YAHOO_MAP_SAT, 'sphericalMercator': true}
	);
	var yahoohyb = new OpenLayers.Layer.Yahoo("yahoohybrid",
		{'type': YAHOO_MAP_HYB, 'sphericalMercator': true}
	);


	var storeOSM = new Ext.data.ArrayStore({
		fields: ['abbr', 'layername', 'nick'],
		data : Ext.baselayer.OSM
	});
	var comboOSM = new Ext.form.ComboBox({
		store: storeOSM,
		//tpl: '<tpl for="."><div ext:qtip="{nick}" class="x-combo-list-item">{layername}</div></tpl>',
		displayField: 'layername',
		typeAhead: true,
		mode: 'local',
		forceSelection: true,
		triggerAction: 'all',
		emptyText: 'Select a baselayer ...',
		selectOnFocus: true,
		valueField: 'abbr',
		listeners: {
			'select': function (){
				switch (this.getValue()){
					case 'mapnik':
						map.setBaseLayer(mapnik);
						break;
					case 'osmarender':
						map.setBaseLayer(osmarender);
						break;
					case 'cyclemap':
						map.setBaseLayer(cyclemap);
						break;
					case 'hikebike':
						map.setBaseLayer(hikebike);
						break;
					case 'mapquest':
						map.setBaseLayer(mapquest);
						break;
					case 'opnv':
						map.setBaseLayer(opnv);
						break;
					case 'openpistemap':
						map.setBaseLayer(openpistemap);
						break;
				}
			}
		}
	});
	var geoNameSearchCombo = new GeoExt.ux.GeoNamesSearchCombo({
		map: map, zoom: 12
	});

	var checkhillshading = new Ext.form.Checkbox({
		boxLabel: 'Hillshading',
		checked: false,
		ctCls: 'checkhillshading',
		listeners: {
			'check': function (){
				switch (this.getValue()){
					case true: 
						hill.setVisibility(true);
						break;
					case false:
						hill.setVisibility(false);
						break;
				}
			}
		}
	});

	var optionsExpandMap = {
		controls: [new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.Navigation()],
		projection: new OpenLayers.Projection("EPSG:900913"),
		displayProjection: new OpenLayers.Projection("EPSG:4326"),
		units: "m",
		numZoomLevels: 18,
		maxResolution: 156543.0339,
		maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34)
	};
	var expandMap = new OpenLayers.Map(optionsExpandMap);
	var mapnik2 = new OpenLayers.Layer.OSM("mapnik", "http://tile.openstreetmap.org/${z}/${x}/${y}.png",
		{'sphericalMercator': true, isBaseLayer:true}
	);
	var osmarender2 = new OpenLayers.Layer.OSM("osmarender",	"http://tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png",
		{'sphericalMercator': true, isBaseLayer:true}
	);
	var cyclemap2 = new OpenLayers.Layer.OSM("cyclemap",	"http://tile.opencyclemap.org/cycle/${z}/${x}/${y}.png",
		{'sphericalMercator': true, isBaseLayer:true}
	);
	var hikebike2 = new OpenLayers.Layer.OSM("hikebike", "http://toolserver.org/tiles/hikebike/${z}/${x}/${y}.png");
	var mapquest2 = new OpenLayers.Layer.OSM("mapquest", "http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png");
	var opnv2 = new OpenLayers.Layer.OSM("opnv", "http://tile.xn--pnvkarte-m4a.de/tilegen/${z}/${x}/${y}.png");
	var openpistemap2 = new OpenLayers.Layer.OSM("openpistemap", "http://tiles.openpistemap.org/contours/${z}/${x}/${y}.png");
	expandMap.addLayers([mapnik2, osmarender2, cyclemap2, hikebike2, mapquest2, opnv2, openpistemap2]);

	var expandMapPanel = new GeoExt.MapPanel({
		map: expandMap
	});

	var expandWindow = new Ext.Window({
		title: 'Imagimap Baselayers',
		height: 600, 
		width: 800, 
		layout: "fit",
		modal: true,
		maximizable: true,
		items: [expandMapPanel],
		closeAction: 'hide'
	});

	var expandButton = new Ext.Button({
		iconCls: 'arrow_out',
		tooltip: 'Fullscreen',
		handler: function(){			
			expandWindow.show();
			expandWindow.maximize();
			expandMap.setCenter(map.getCenter());
			expandMap.zoomTo(map.getZoom());
		}
	});

	mapPanel = new GeoExt.MapPanel({
		map: map,
		header: false,
		tbar: new Ext.Toolbar({
			height: '20',
			cls: 'x-panel-header',
			items: ['<span style="color:#00000; font-family:tahoma,arial,verdana,sans-serif; font-weight:bold">OpenStreetMap</span>','->',checkhillshading, ' ', geoNameSearchCombo, ' ',comboOSM, ' ', expandButton]
		})
	});

	var storeBing = new Ext.data.ArrayStore({
		fields: ['abbr', 'layername', 'nick'],
		data : Ext.baselayer.Bing
	});
	var comboBing = new Ext.form.ComboBox({
		store: storeBing,
		//tpl: '<tpl for="."><div ext:qtip="{nick}" class="x-combo-list-item">{layername}</div></tpl>',
		displayField: 'layername',
		typeAhead: true,
		mode: 'local',
		forceSelection: true,
		triggerAction: 'all',
		emptyText: 'Select a baselayer ...',
		selectOnFocus: true,
		valueField: 'abbr',
		listeners: {
			'select': function (){
				switch (this.getValue()){
					case 'bingmap':
						map2.setBaseLayer(bingmap);
						break;
					case 'bingsat':
						map2.setBaseLayer(bingsat);
						break;
					case 'binghyb':
						map2.setBaseLayer(binghyb);
						break;
				}
			}
		}
	});

/*	var checkhillshading2 = new Ext.form.Checkbox({
		boxLabel: 'Hillshading',
		checked: false,
		listeners: {
			'check': function (){
				switch (this.getValue()){
					case true: 
						hill2.setVisibility(true);
						break;
					case false:
						hill2.setVisibility(false);
						break;
				}
			}
		}
	});*/

	mapPanel2 = new GeoExt.MapPanel({
		map: map2,
		header: false,
		title: 'Bing Maps',
		tbar: new Ext.Toolbar({
			height: '20',
			cls: 'x-panel-header',
			//items: ['<span style="color:#00000; font-family:tahoma,arial,verdana,sans-serif; font-weight:bold">Bing Maps</span>','->',checkhillshading2, ' ', comboBing]
			items: ['<span style="color:#00000; font-family:tahoma,arial,verdana,sans-serif; font-weight:bold">Bing Maps</span>','->',comboBing, ' ']
		})
	});

	var storeGoogle = new Ext.data.ArrayStore({
		fields: ['abbr', 'layername', 'nick'],
		data : Ext.baselayer.Google
	});
	var comboGoogle = new Ext.form.ComboBox({
		store: storeGoogle,
		//tpl: '<tpl for="."><div ext:qtip="{nick}" class="x-combo-list-item">{layername}</div></tpl>',
		displayField: 'layername',
		typeAhead: true,
		mode: 'local',
		forceSelection: true,
		triggerAction: 'all',
		emptyText: 'Select a baselayer ...',
		selectOnFocus: true,
		valueField: 'abbr',
		listeners: {
			'select': function (){
				switch (this.getValue()){
					case 'gmap':
						map3.setBaseLayer(gmap);
						break;
					case 'gsat':
						map3.setBaseLayer(gsat);
						break;
					case 'gphy':
						map3.setBaseLayer(gphy);
						break;
					case 'ghyb':
						map3.setBaseLayer(ghyb);
						break;
				}
			}
		}
	});

	var checkhillshading3 = new Ext.form.Checkbox({
		boxLabel: 'Hillshading',
		checkef: false,
		ctCls: 'checkhillshading',
		listeners: {
			'check': function (){
				switch (this.getValue()){
					case true: 
						hill3.setVisibility(true);
						break;
					case false:
						hill3.setVisibility(false);
						break;
				}
			}
		}
	});

	var optionsExpandMap3 = {
		controls: [new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.Navigation()],
		projection: new OpenLayers.Projection("EPSG:900913"),
		displayProjection: new OpenLayers.Projection("EPSG:4326"),
		units: "m",
		numZoomLevels: 18,
		maxResolution: 156543.0339,
		maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34)
	};
	var expandMap3 = new OpenLayers.Map(optionsExpandMap3);

	var gphy3 = new OpenLayers.Layer.Google("googlephysical",
		{type: google.maps.MapTypeId.TERRAIN}
	);
	var gmap3 = new OpenLayers.Layer.Google("googlenormal",
		{type: google.maps.MapTypeId.NORMAL, numZoomLevels: 20}
	);
	var ghyb3 = new OpenLayers.Layer.Google("googlehybrid",
		{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
	);
	var gsat3 = new OpenLayers.Layer.Google("googlesat",
		{type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
	);

	expandMap3.addLayers([gmap3, gphy3, ghyb3, gsat3]);

	var expandMapPanel3 = new GeoExt.MapPanel({
		map: expandMap3
	});

	var expandWindow3 = new Ext.Window({
		title: 'Imagimap Baselayers',
		height: 600, 
		width: 800, 
		layout: "fit",
		modal: true,
		maximizable: true,
		items: [expandMapPanel3],
		closeAction: 'hide'
	});

	var expandButton3 = new Ext.Button({
		iconCls: 'arrow_out',
		tooltip: 'Fullscreen',
		handler: function(){			
			expandWindow3.show();
			expandWindow3.maximize();
			expandMap3.setCenter(map3.getCenter());
			expandMap3.zoomTo(map3.getZoom());
		}
	});

	mapPanel3 = new GeoExt.MapPanel({
		map: map3,
		header: false,
		tbar: new Ext.Toolbar({
			height: '20',
			cls: 'x-panel-header',
			items: ['<span style="color:#00000; font-family:tahoma,arial,verdana,sans-serif; font-weight:bold">Google Maps</span>','->',checkhillshading3, ' ', comboGoogle, ' ', expandButton3]
		})
	});

	var storeYahoo = new Ext.data.ArrayStore({
		fields: ['abbr', 'layername', 'nick'],
		data : Ext.baselayer.Yahoo
	});
	var comboYahoo = new Ext.form.ComboBox({
		store: storeYahoo,
		//tpl: '<tpl for="."><div ext:qtip="{nick}" class="x-combo-list-item">{layername}</div></tpl>',
		displayField: 'layername',
		typeAhead: true,
		mode: 'local',
		forceSelection: true,
		triggerAction: 'all',
		emptyText: 'Select a baselayer ...',
		selectOnFocus: true,
		valueField: 'abbr',
		listeners: {
			'select': function (){
				switch (this.getValue()){
					case 'yahoomap':
						map4.setBaseLayer(yahoomap);
						break;
					case 'yahoosat':
						map4.setBaseLayer(yahoosat);
						break;
					case 'yahoohyb':
						map4.setBaseLayer(yahoohyb);
						break;
				}
			}
		}
	});

	var checkhillshading4 = new Ext.form.Checkbox({
		boxLabel: 'Hillshading',
		checked: false,
		ctCls: 'checkhillshading',
		listeners: {
			'check': function (){
				switch (this.getValue()){
					case true: 
						hill4.setVisibility(true);
						break;
					case false:
						hill4.setVisibility(false);
						break;
				}
			}
		}
	});

	var optionsExpandMap4 = {
		controls: [new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.Navigation()],
		projection: new OpenLayers.Projection("EPSG:900913"),
		displayProjection: new OpenLayers.Projection("EPSG:4326"),
		units: "m",
		numZoomLevels: 18,
		maxResolution: 156543.0339,
		maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34)
	};
	var expandMap4 = new OpenLayers.Map(optionsExpandMap4);

	var yahoomap4 = new OpenLayers.Layer.Yahoo("yahoonormal",
		{'type': YAHOO_MAP_REG, 'sphericalMercator': true}
	);
	var yahoosat4 = new OpenLayers.Layer.Yahoo("yahoosat",
		{'type': YAHOO_MAP_SAT, 'sphericalMercator': true}
	);
	var yahoohyb4 = new OpenLayers.Layer.Yahoo("yahoohybrid",
		{'type': YAHOO_MAP_HYB, 'sphericalMercator': true}
	);

	expandMap4.addLayers([yahoomap4, yahoosat4, yahoohyb4]);

	var expandMapPanel4 = new GeoExt.MapPanel({
		map: expandMap4
	});

	var expandWindow4 = new Ext.Window({
		title: 'Imagimap Baselayers',
		height: 600, 
		width: 800, 
		layout: "fit",
		modal: true,
		maximizable: true,
		items: [expandMapPanel4],
		closeAction: 'hide'
	});

	var expandButton4 = new Ext.Button({
		iconCls: 'arrow_out',
		tooltip: 'Fullscreen',
		handler: function(){			
			expandWindow4.show();
			expandWindow4.maximize();
			expandMap4.setCenter(map4.getCenter());
			expandMap4.zoomTo(map4.getZoom());
		}
	});

	mapPanel4 = new GeoExt.MapPanel({
		map: map4,
		header: false,
		tbar: new Ext.Toolbar({
			height: '20',
			cls: 'x-panel-header',
			items: ['<span style="color:#00000; font-family:tahoma,arial,verdana,sans-serif; font-weight:bold">Yahoo Maps</span>','->',checkhillshading4, ' ', comboYahoo, ' ', expandButton4]
		})
	});


	// control actions / buttons
	var maxExtent = new GeoExt.Action({
		control: new OpenLayers.Control.ZoomToMaxExtent(),
		map: map,
		iconCls: 'arrow_out',
		text: 'Zoom to Visible Extent',
		handler: function(){
			if (zoomboxButton.pressed){			
				zoomboxButton.toggle(false);
				panButton.toggle(true);
			}
		}
	});

	var zoomIn = new GeoExt.Action({
		control: new OpenLayers.Control.ZoomIn(),
		map: map,
		iconCls: 'magnifier_zoom_in',
		text: 'Zoom in',
		handler: function(){
			if (zoomboxButton.pressed){			
				zoomboxButton.toggle(false);
				panButton.toggle(true);
			}
		}
	});

	var zoomOut = new GeoExt.Action({
		control: new OpenLayers.Control.ZoomOut(),
		map: map,
		iconCls: 'magifier_zoom_out',
		text: 'Zoom out',
		handler: function(){
			if (zoomboxButton.pressed){			
				zoomboxButton.toggle(false);
				panButton.toggle(true);
			}
		}
	});

	var ctrl = new OpenLayers.Control.NavigationHistory();
	map.addControl(ctrl);

	var previous = new GeoExt.Action({
		iconCls: 'arrow_left',
		text: 'Previous zoom',
		control: ctrl.previous,
		handler: function(){
			if (zoomboxButton.pressed){			
				zoomboxButton.toggle(false);
				panButton.toggle(true);
			}
		}
	});

	var next = new GeoExt.Action({
		iconCls: 'arrow_right',
		text: 'Next zoom',
		control: ctrl.next,
		handler: function(){
			if (zoomboxButton.pressed){			
				zoomboxButton.toggle(false);
				panButton.toggle(true);
			}
		}
	});

	var panButton = new Ext.Button({
		text: 'Pan map',
		iconCls: 'arrow_pan',
		enableToggle: true,
		toggleGroup: "zoom_pan_toggle",
		pressed: true,
		allowDepress: false
	});

	var zoomboxButton = new Ext.Button({
		text: 'Zoom box',
		iconCls: 'magnifier_zoom_box',
		enableToggle: true,
		toggleGroup: "zoom_pan_toggle",
		allowDepress: false,
		toggleHandler: function(button, pressed) {
			if (pressed){
				map.events.register('mouseover',map,controlBox);
				map2.events.register('mouseover',map2,controlBox2);
				map3.events.register('mouseover',map3,controlBox3);
				map4.events.register('mouseover',map4,controlBox4);
				deactivateAllMapsNavigation();
			}
			else{
				map.events.unregister('mouseover',map,controlBox);
				map2.events.unregister('mouseover',map2,controlBox2);
				map3.events.unregister('mouseover',map3,controlBox3);
				map4.events.unregister('mouseover',map4,controlBox4);
				activateAllMapsNavigation();
			}
		}
	});

	function activateAllMapsNavigation(){
		navigation.activate();
		navigation2.activate();
		navigation3.activate();
		navigation4.activate();
	}
	function deactivateAllMapsNavigation(){
		navigation.deactivate();
		navigation2.deactivate();
		navigation3.deactivate();
		navigation4.deactivate();
	}


	function controlBox(){
		controlZoomBox.activate();
	}
	function controlBox2(){
		controlZoomBox2.activate();
	}
	function controlBox3(){
		controlZoomBox3.activate();
	}
	function controlBox4(){
		controlZoomBox4.activate();
	}

	var permalinkButton = new Ext.Button({
		text: 'Permalink',
		iconCls: 'disk',
		handler: function(){
			var temp = new OpenLayers.LonLat(map.getCenter().lon,map.getCenter().lat).transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
			var zoom = map.getZoom();
			var lon = temp.lon;
			var lat = temp.lat;
			var permalinkWindow = new Ext.Window({
				title: 'Permalink',
				modal: true,
				iconCls: 'disk',
				layout: 'fit',
				width: 750,
				height: 85,
				closeAction:'hide',
				plain: true,
				resizable: false,
				html: '<input type="text" size="250" style="font-family:tahoma,\'lucida grande\',arial,sans-serif;background-color: #FFFFFF;font-size:11px;border: none" onMouseOver="select();" value="http://www.geotribu.net/applications/baselayers/index.php?zoom='+zoom+'&lon='+lon+'&lat='+lat+'&l1='+map.getLayersBy("visibility", true)[0].name+'&l2='+map2.getLayersBy("visibility", true)[0].name+'&l3='+map3.getLayersBy("visibility", true)[0].name+'&l4='+map4.getLayersBy("visibility", true)[0].name+'">',
				buttonAlign: 'center',
				buttons: [{
					text: 'Close',
					handler: function(){
						permalinkWindow.hide();
					}
				}]
			});
			permalinkWindow.show();
		}
	});

	// control toolbox
	var toolWindow = new Ext.Window({
		title: 'Navigation',
		iconCls: 'wrench',
		layout: 'fit',
		width: '125',
		height: 'auto',
		border: true,
		closable: false,
		collapsible: true,
		x: 15,
		y: 40,
		resizable: false,
		tbar: [{
			xtype: 'buttongroup',
			columns: 1,
			defaults: {
				scale: 'small'
			},
			items: [panButton, previous, next, zoomIn, zoomOut, zoomboxButton, permalinkButton, imagimapCreditButton]
		}]
	});
	toolWindow.show();


	// viewport
	viewport = new Ext.Viewport({
		layout: "border",
		id: 'mainViewport',
		items:[{
			region:'center',
			margins:'0 0 0 0',
			layout:'column',
			autoScroll:true,
			items:[{
				columnWidth:.5,
				baseCls:'x-plain',
				bodyStyle:'padding:5px 5px 0px 5px',
				items:[mapPanel, mapPanel2]
			},{
				columnWidth:.5,
				baseCls:'x-plain',
				bodyStyle:'padding:5px 5px 0px 5px',
				items:[mapPanel3, mapPanel4]
			}],
				listeners : {
				afterlayout: function(){
					mapPanel.setHeight(this.getHeight()/2-10);
					mapPanel2.setHeight(this.getHeight()/2-10);
					mapPanel3.setHeight(this.getHeight()/2-10);
					mapPanel4.setHeight(this.getHeight()/2-10);
					Ext.get('loading').hide();
				}
			}
		}]
	});

	map.addLayers([mapnik, osmarender, cyclemap, hikebike, mapquest, opnv, openpistemap, hill]);
	map.setCenter(new OpenLayers.LonLat(7.2657, 43.6989).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()), 11);

//	map2.addLayers([bingmap, bingsat, binghyb, hill2]);
	map2.addLayers([bingmap, bingsat, binghyb]);
	map2.setCenter(new OpenLayers.LonLat(7.2657, 43.6989).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()), 10);

	map3.addLayers([gmap, gphy, gsat, ghyb, hill3]);
	map3.setCenter(new OpenLayers.LonLat(7.2657, 43.6989).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()), 11);

	map4.addLayers([yahoomap, yahoosat, yahoohyb, hill4]);
	map4.setCenter(new OpenLayers.LonLat(7.2657, 43.6989).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()), 11);


// move and cursors events
	var markers = new OpenLayers.Layer.Markers("Markers");
	var markers2 = new OpenLayers.Layer.Markers("Markers2");
	var markers3 = new OpenLayers.Layer.Markers("Markers3");
	var markers4 = new OpenLayers.Layer.Markers("Markers4");
	map.addLayer(markers);
	map2.addLayer(markers2);
	map3.addLayer(markers3);
	map4.addLayer(markers4);
	var size = new OpenLayers.Size(25,25);
	var offset = new OpenLayers.Pixel(-(size.w/2), -(size.h/2));
	var icon = new OpenLayers.Icon('images/cross.png', size, offset);
	var cross = new OpenLayers.Marker(new OpenLayers.LonLat(0,0), icon);
	var cross2 = new OpenLayers.Marker(new OpenLayers.LonLat(0,0), icon.clone());
	var cross3 = new OpenLayers.Marker(new OpenLayers.LonLat(0,0), icon.clone());
	var cross4 = new OpenLayers.Marker(new OpenLayers.LonLat(0,0), icon.clone());

	markers.addMarker(cross);
	markers2.addMarker(cross2);
	markers3.addMarker(cross3);
	markers4.addMarker(cross4);

	function moveAllMaps(num){
		switch (num){
			case 1:
				map2.setCenter(new OpenLayers.LonLat(map.getCenter().lon, map.getCenter().lat))
				map2.zoomTo(map.getZoom()-1);
				map3.setCenter(new OpenLayers.LonLat(map.getCenter().lon, map.getCenter().lat))
				map3.zoomTo(map.getZoom());
				map4.setCenter(new OpenLayers.LonLat(map.getCenter().lon, map.getCenter().lat))
				map4.zoomTo(map.getZoom());
				break;
			case 2:
				map.setCenter(new OpenLayers.LonLat(map2.getCenter().lon, map2.getCenter().lat))
				map.zoomTo(map2.getZoom()+1);
				map3.setCenter(new OpenLayers.LonLat(map2.getCenter().lon, map2.getCenter().lat))
				map3.zoomTo(map2.getZoom()+1);
				map4.setCenter(new OpenLayers.LonLat(map2.getCenter().lon, map2.getCenter().lat))
				map4.zoomTo(map2.getZoom()+1);
				break;
			case 3:
				map.setCenter(new OpenLayers.LonLat(map3.getCenter().lon, map3.getCenter().lat))
				map.zoomTo(map3.getZoom());
				map2.setCenter(new OpenLayers.LonLat(map3.getCenter().lon, map3.getCenter().lat))
				map2.zoomTo(map3.getZoom()-1);
				map4.setCenter(new OpenLayers.LonLat(map3.getCenter().lon, map3.getCenter().lat))
				map4.zoomTo(map3.getZoom());
				break;
			case 4:
				map.setCenter(new OpenLayers.LonLat(map4.getCenter().lon, map4.getCenter().lat))
				map.zoomTo(map4.getZoom());
				map2.setCenter(new OpenLayers.LonLat(map4.getCenter().lon, map4.getCenter().lat))
				map2.zoomTo(map4.getZoom()-1);
				map3.setCenter(new OpenLayers.LonLat(map4.getCenter().lon, map4.getCenter().lat))
				map3.zoomTo(map4.getZoom());
				break;
		}
	}

	map.events.register('moveend',map,move1);
	map2.events.register('moveend',map,move2);
	map3.events.register('moveend',map,move3);
	map4.events.register('moveend',map,move4);
	registerMouseMove();
	
	function move1(e){
		map2.events.unregister('moveend',map,move2);
		map3.events.unregister('moveend',map,move3);
		map4.events.unregister('moveend',map,move4);
		moveAllMaps(1);
		map2.events.register('moveend',map,move2);
		map3.events.register('moveend',map,move3);
		map4.events.register('moveend',map,move4);
	}
	function move2(e){
		map.events.unregister('moveend',map,move1);
		map3.events.unregister('moveend',map,move3);
		map4.events.unregister('moveend',map,move4);
		moveAllMaps(2);
		map.events.register('moveend',map,move1);
		map3.events.register('moveend',map,move3);
		map4.events.register('moveend',map,move4);
	}
	function move3(e){
		map.events.unregister('moveend',map,move1);
		map2.events.unregister('moveend',map,move2);
		map4.events.unregister('moveend',map,move4);
		moveAllMaps(3);
		map.events.register('moveend',map,move1);
		map2.events.register('moveend',map,move2);
		map4.events.register('moveend',map,move4);
	}
	function move4(e){
		map.events.unregister('moveend',map,move1);
		map2.events.unregister('moveend',map,move2);
		map3.events.unregister('moveend',map,move3);
		moveAllMaps(4);
		map.events.register('moveend',map,move1);
		map2.events.register('moveend',map,move2);
		map3.events.register('moveend',map,move3);
	}

	function registerMouseMove(){
		map.events.register("mousemove", map, crossmove);
		map2.events.register("mousemove", map2, crossmove2);
		map3.events.register("mousemove", map3, crossmove3);
		map4.events.register("mousemove", map4, crossmove4);
	}

	function crossmove(e){
		cross.display(false);
		cross2.display(true);
		cross2.moveTo(map.getLayerPxFromViewPortPx(e.xy));
		cross3.display(true);
		cross3.moveTo(map.getLayerPxFromViewPortPx(e.xy));
		cross4.display(true);
		cross4.moveTo(map.getLayerPxFromViewPortPx(e.xy));
	}
	function crossmove2(e){
		cross.display(true);
		cross.moveTo(map.getLayerPxFromViewPortPx(e.xy));
		cross2.display(false);
		cross3.display(true);
		cross3.moveTo(map.getLayerPxFromViewPortPx(e.xy));
		cross4.display(true);
		cross4.moveTo(map.getLayerPxFromViewPortPx(e.xy));
	}
	function crossmove3(e){
		cross.display(true);
		cross.moveTo(map.getLayerPxFromViewPortPx(e.xy));		
		cross2.display(true);
		cross2.moveTo(map.getLayerPxFromViewPortPx(e.xy));
		cross3.display(false);
		cross4.display(true);
		cross4.moveTo(map.getLayerPxFromViewPortPx(e.xy));
	}
	function crossmove4(e){
		cross.display(true);
		cross.moveTo(map.getLayerPxFromViewPortPx(e.xy));		
		cross2.display(true);
		cross2.moveTo(map.getLayerPxFromViewPortPx(e.xy));
		cross3.display(true);
		cross3.moveTo(map.getLayerPxFromViewPortPx(e.xy));
		cross4.display(false);
	}

	function hideCrossMouseOut(){
		map.events.register("mouseout", map, function(e){
			cross2.display(false);
			cross3.display(false);
			cross4.display(false);
		});
		map2.events.register("mouseout", map2, function(e){
			cross.display(false);
			cross3.display(false);
			cross4.display(false);
		});
		map3.events.register("mouseout", map3, function(e){
			cross.display(false);
			cross2.display(false);
			cross4.display(false);
		});
		map4.events.register("mouseout", map4, function(e){
			cross.display(false);
			cross2.display(false);
			cross3.display(false);
		});
	}
	hideCrossMouseOut();

	function unregisterMouseMove(){
		map.events.unregister("mousemove", map, crossmove);
		map2.events.unregister("mousemove", map2, crossmove2);
		map3.events.unregister("mousemove", map3, crossmove3);
		map4.events.unregister("mousemove", map4, crossmove4);
	}

	var url = window.location.href;
	var taburl = url.split('?');
	if (taburl[1] != undefined){
		var tabparamurl = taburl[1].split('&');
		if ((tabparamurl[0] != undefined)&&(tabparamurl[1] != undefined)&&(tabparamurl[2] != undefined)&&(tabparamurl[3] != undefined)&&(tabparamurl[4] != undefined)&&(tabparamurl[5] != undefined)&&(tabparamurl[6] != undefined)){
			var tabzoom = tabparamurl[0].split('=');
			var tablon = tabparamurl[1].split('=');
			var tablat = tabparamurl[2].split('=');
			var tabl1 = tabparamurl[3].split('=');
			var tabl2 = tabparamurl[4].split('=');
			var tabl3 = tabparamurl[5].split('=');
			var tabl4 = tabparamurl[6].split('=');
			if ((tabzoom[1] != undefined)&&(tablon[1] != undefined)&&(tablat[1] != undefined)&&(tabl1[1] != undefined)&&(tabl2[1] != undefined)&&(tabl3[1] != undefined)&&(tabl4[1] != undefined)){

				switch (tabl1[1]){
					case 'mapnik' :
						map.setBaseLayer(mapnik);					
						break;
					case 'osmarender' :
						map.setBaseLayer(osmarender);					
						break;
					case 'cyclemap' :
						map.setBaseLayer(cyclemap);					
						break;
					case 'hikebike' :
						map.setBaseLayer(hikebike);					
						break;
					case 'mapquest' :
						map.setBaseLayer(mapquest);					
						break;
					case 'opnv' :
						map.setBaseLayer(opnv);					
						break;
					case 'openpistemap' :
						map.setBaseLayer(openpistemap);					
						break;
				}

				switch (tabl2[1]){
					case 'bingnormal' :
						map2.setBaseLayer(bingmap);					
						break;
					case 'binghybrid' :
						map2.setBaseLayer(binghyb);					
						break;
					case 'bingaerial' :
						map2.setBaseLayer(bingsat);					
						break;
				}

				switch (tabl3[1]){
					case 'googlephysical' :
						map3.setBaseLayer(gphy);					
						break;
					case 'googlenormal' :
						map3.setBaseLayer(gmap);					
						break;
					case 'googlehybrid' :
						map3.setBaseLayer(ghyb);					
						break;
					case 'googlesat' :
						map3.setBaseLayer(gsat);					
						break;
				}

				switch (tabl4[1]){
					case 'yahoonormal' :
						map4.setBaseLayer(yahoomap);					
						break;
					case 'yahoosat' :
						map4.setBaseLayer(yahoosat);					
						break;
					case 'yahoohybrid' :
						map4.setBaseLayer(yahoohyb);					
						break;
				}

				map.setCenter(new OpenLayers.LonLat(tablon[1],tablat[1]).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")), tabzoom[1]);
				map3.zoomOut();
				map3.zoomIn();


			}
		}
	}

});