function defineMapData(){
		
	var kbounds = new OpenLayers.Bounds(22.222572,61.732268,22.528954,61.857554);
		layeropts[0] = {extractAttributes:true, minResolution:0.0000000011413618922233554, maxResolution:0.0023936093749999942, maxExtent: kbounds, projection:"EPSG:4326" };
		wms[0] = new OpenLayers.Layer.WMS.Untiled( "kankaanpaa","http://zulu-70.nebula.fi/tntgateway/tntgateway.cgi?",{layers: "WSPF_Kan:tile", format:"image/jpeg",styles: "",bgcolor :"0xffffff",transparent: "FALSE"},layeropts[0]);
		wms[0].addOptions({ratio:1});
		wms[0].units ="degrees";
		wms[0].crs="EPSG:4326";
		wms[0].fullExtents= kbounds;
		
		layeropts[1] = {extractAttributes:true, minResolution:0.0023936093749999942, maxResolution:10, maxExtent: new OpenLayers.Bounds(3381511.908,6669722.457,3390299.386,6679261.361), projection:"EPSG:2393" };
		wms[1] = new OpenLayers.Layer.WMS.Untiled("helsinki","http://zulu-70.nebula.fi/tntgateway/tntgateway.cgi?",{layers:"WSPF_RHif:Helsinki", format:"image/jpeg",styles: "",bgcolor:"0xffffff",transparent: "FALSE"},layeropts[1]);
		wms[1].addOptions({ratio:1});
		wms[1].units ="metres";
		wms[1].crs="EPSG:2393";
		wms[1].fullExtents= new OpenLayers.Bounds(3381511.908,6669722.457,3390299.386,6679261.361);
		
		layeropts[2] = {extractAttributes:true, minResolution:0.0023936093749999942, maxResolution:10, maxExtent: new OpenLayers.Bounds(2536242,6669731.9,2541924.6,6673250.5), projection:"EPSG:2392" };
		wms[2] = new OpenLayers.Layer.WMS.Untiled("suomenlahdentie","http://zulu-70.nebula.fi/tntgateway/tntgateway.cgi?",{layers:"WSPF_Tie:Suomenlahdentie,WSPF_Tie:_linjaus_KKJ2_2", format:"image/jpeg",styles: "",bgcolor:"0xffffff",transparent: "FALSE"},layeropts[2]);
		wms[2].addOptions({ratio:1});
		wms[2].units ="metres";
		wms[2].crs="EPSG:2392";
		wms[2].fullExtents= new OpenLayers.Bounds(2536242,6669731.9,2541924.6,6673250.5);

		layeropts[3] = {extractAttributes:true, minResolution:0.0023936093749999942, maxResolution:10000, maxExtent: new OpenLayers.Bounds(2531354,6674070,2538560,6678664), projection:"EPSG:2392" };
		wms[3] = new OpenLayers.Layer.WMS.Untiled("eskarata","http://zulu-70.nebula.fi/tntgateway/tntgateway.cgi?",{layers:"WSPF_Kar:_MML_peruskartt,WSPF_Kar:_Espoo___Kaukla,WSPF_Kar:Linjaus_2010", format:"image/jpeg",styles: "",bgcolor:"0xffffff",transparent: "FALSE"},layeropts[3]);
		wms[3].addOptions({ratio:1});
		wms[3].units ="metres";
		wms[3].crs="EPSG:2392";
		wms[3].fullExtents= new OpenLayers.Bounds(2531354,6674070,2538560,6678664);
	}
	
var map;
var wms = []; //layer list
var layeropts = [];
var wfs;
var myrange = 0;
var activePoint;
var basewfs = "emulator.php?&service=WFS&request=GetFeature&version=1.1.0";
var panel;
var panel2;
var vlayer = null;
var kindofcom = 2;
var kindname = ['Radan ylitt\u00E4minen','Luonto','Ratalinjaukset','Asemat, asemavaraukset','Melu ja h\u00E4iri\u00F6t','Maisema ja kulttuuriymp\u00E4rist\u00F6','Muu kommentti'];
function closeThickbox(){
	tb_remove();
	}
function g$(mid){ return document.getElementById(mid); }
var targetextents;
var activeLayer;
var modifier;
var theStyle;
var styleFull; 
var currentlayernum = 3;

function selectKind(n){
	kindofcom = n;
	for(var k=0; k<7; k++){
		var kb = g$('kr'+k);
		if(k==n){
		 	kb.className = 'selectedType';
			}
		else {
			kb.className = 'unselectedType';
			}
		}
	g$('subject').value = kindname[n];
   	if(panel) { panel.activateControl(panel.controls[0]); }
	}


OpenLayers.IMAGE_RELOAD_ATTEMPTS = 8; 
OpenLayers.Util.onImageLoadErrorColor = 'transparent'; 
var stylewhite;
// Create a rules and symbolizers that will color the feature based on the type of comment, specific to GML Based WFS layer
var GML_style = new OpenLayers.Style();

var ruleEQVVVVGreat = new OpenLayers.Rule({
 	filter: new OpenLayers.Filter.Comparison({
 		type: OpenLayers.Filter.Comparison.BETWEEN,
 		property: "type",
 		lowerBoundary: 6,
 		upperBoundary: 6.999999999999
 	}),
 	symbolizer: {
 		Point: {pointRadius:6, fillColor: "#40E0D0", fillOpacity:1.0, strokeColor: "turquoise" }
 	}
 });
 var ruleEQVVVGreat = new OpenLayers.Rule({
  	filter: new OpenLayers.Filter.Comparison({
  		type: OpenLayers.Filter.Comparison.BETWEEN,
  		property: "type",
  		lowerBoundary: 5,
  		upperBoundary: 5.999999999999
  	}),
  	symbolizer: {
  		Point: {pointRadius:6, fillColor: "#800080", fillOpacity:1.0, strokeColor: "purple" }
  	}
 });
 var ruleEQVVGreat = new OpenLayers.Rule({
        filter: new OpenLayers.Filter.Comparison({
            type: OpenLayers.Filter.Comparison.BETWEEN, //OpenLayers.Filter.Comparison.GREATER_THAN_OR_EQUAL_TO
            property: "type",
            lowerBoundary: 4,
	    upperBoundary: 4.999999999999
        }),
        symbolizer: {
            Point: {pointRadius:6, fillColor: "#0000FF", fillOpacity:1.0, strokeColor: "blue" }
        }       
    });
    var ruleEQVGreat = new OpenLayers.Rule({
        filter: new OpenLayers.Filter.Comparison({
            type: OpenLayers.Filter.Comparison.BETWEEN, //OpenLayers.Filter.Comparison.GREATER_THAN_OR_EQUAL_TO
            property: "type",
            lowerBoundary: 3,
	    upperBoundary: 3.999999999999
        }),
        symbolizer: {
            Point: {pointRadius:6, fillColor: "#FF0000", fillOpacity:1.0, strokeColor: "red" }
        }       
    });
    var ruleEQGreat = new OpenLayers.Rule({
        filter: new OpenLayers.Filter.Comparison({
            type: OpenLayers.Filter.Comparison.BETWEEN,
            property: "type",
	    lowerBoundary: 2,
	    upperBoundary: 2.999999999999
        }),
        symbolizer: {
            Point: {pointRadius:6, fillColor: "#FFA500", fillOpacity:1.0, strokeColor: "orange" }
        }       
    });
    var ruleEQLess = new OpenLayers.Rule({
        filter: new OpenLayers.Filter.Comparison({
            type: OpenLayers.Filter.Comparison.LESS_THAN,
            property: "type",
            value: 1
        }),
        symbolizer: {
            Point: { pointRadius: 6, fillColor: "#FFFF00", fillOpacity:1.0, strokeColor: "yellow" }
        }
    });
    var elseRule = new OpenLayers.Rule(
        {elseFilter: true,
            symbolizer: {Point: { pointRadius: 6, fillColor: "#88FF88", fillOpacity:1.0, strokeColor: "green" }}
        }
    );

    GML_style.addRules([ruleEQVVVVGreat,ruleEQVVVGreat,ruleEQVVGreat, ruleEQVGreat,ruleEQGreat, ruleEQLess, elseRule]);
// End of create style for GML based WFS layer

    var myStyles = new OpenLayers.StyleMap({
                "default": GML_style,
                "select": new OpenLayers.Style({
			strokeColor: "#ffffff",
			strokeWidth:2
                })
            });
 
 

function showSelected(num) {
	g$('layer'+num).className = "selected";
	}

function setTask(n) {
	TaskID = n;
	}
var myselect;


function reFilterWFS(){
	var n = currentlayernum;
	var thislayer= wms[n];
	var url = basewfs+"&typename="+thislayer.name;	

	if(myrange){
		url += "&range="+myrange;
		}

	if(wfs){
		myselect.deactivate();
		map.removeControl(myselect);	
		map.removeLayer(wfs);
	//	myselect = null;
		}

	var pcol = new OpenLayers.Protocol.HTTP({
                        url: url,
                        params: {
				format: "WFS",
				request: "GetFeatures",
				sort: "interestingness-desc",
                        	service: "WFS",
				srs: "EPSG:xxx",
				maxfeatures: 10000
                        	},
                        format: new OpenLayers.Format.GML()
		});



	wfs = new OpenLayers.Layer.Vector(thislayer.id, {
               		strategies: [new OpenLayers.Strategy.BBOX()],
                 	protocol: pcol,
                	styleMap: myStyles //new OpenLayers.StyleMap ({"select": stylewhite, "default": GML_style})
			});
	 
 	wfs.addOptions(layeropts[n]);
	map.addLayer(wfs);
 
	myselect = new OpenLayers.Control.SelectFeature(wfs, {"box":false,"onSelect":getComments,"hover": false});  

	map.addControl(myselect);
	myselect.activate();
	map.zoomToExtent(map.getExtent());
	}


function setLayer(n,disableorder) {
	var thislayer = wms[n];
	if(thislayer){
		if(thislayer.isElevation){
			$('#elevationFormatType').show();
			$('#FormatType').hide();
			}
		else {
			$('#elevationFormatType').hide();
			$('#FormatType').show();
		}
		
		if(wfs){
			map.removeControl(myselect);
			map.removeLayer(wfs); 
			}
		
		var url = basewfs+"&typename="+thislayer.name;
		if(myrange){
			url += "&range="+myrange;
			}

		wfs = new OpenLayers.Layer.Vector(thislayer.id, {
                    strategies: [new OpenLayers.Strategy.BBOX()],
                    protocol: new OpenLayers.Protocol.HTTP({
                        url: url,
                        params: {
                            format: "WFS",
                            sort: "interestingness-desc",
                            service: "WFS",
                            request: "GetFeatures",
                            srs: "EPSG:xxx",
                            maxfeatures: 10
                        },
                        format: new OpenLayers.Format.GML()
                    }),
                    styleMap: myStyles //GML_style
                });

		wfs.addOptions(layeropts[n]);
		map.addLayer(wfs);
		myselect = new OpenLayers.Control.SelectFeature(wfs, {"box":false,"onSelect":getComments }); 
		map.addControl(myselect);
		myselect.activate();
		var viewbounds = thislayer.fullExtents;
		currentlayernum = n;
		for(var j= n-7;j< n+7;j++){
			if(j > 0){
				if(g$('ls'+j)){
					g$('ls'+j).className = 'unselected';
					}
				}
			}
		if(g$('ls'+n)){
			g$('ls'+n).className = 'selected';
			}
		map.setBaseLayer(wms[n], false);
		activeLayer = wms[n];
		LayerName = thislayer.name;
		map.zoomToExtent(viewbounds,false);
		var crsnum = parseInt(activeLayer.crs.substring(5));
		activecrs = activeLayer.crs;
		panel2.activateControl(panel2.controls[1]);
		if(disableorder){
			$('#tabz > ul').tabs("enable", 1 );
	 		$('#tabz > ul').tabs("select", 1 );
			$('#tabz > ul').tabs("enable", 2 );
			}
		}	
	}

function registerUser(){
	var url = "register.php?";
	url += "&KeepThis=true&TB_iframe=true&height=400&width=600";
	tb_show('Register',url,null);
	}


function appendComment() {
	var comment= g$('acomment').value;
	if(comment == ""){
		alert("Huomautusta ei asetettu");
		return 0;
		}
	param = { 'comment':escape(comment),'TaskID':TaskID, 'PointID':activePoint, 'userid':email, 'LayerName':LayerName};
	if(email != ''){
		$('#acomment').wysiwyg('clear');
		}
	$.post("appendComment.php", param , function(data){ eval("var resp="+data); g$('inlinedata').innerHTML = " " +resp.Comment;TaskID = resp.TaskID;setTimeout('tb_show("Lis\u00E4t\u00E4\u00E4n kommentti","#TB_inline?height=150&width=300&inlineId=inlinedata", false);reFilterWFS();',30);});
	g$('subject').value = kindname[kindofcom];
	}

function sendComment() {
	if(vlayer.features.length < 1){
		alert ("Aseta ensin havaintopiste");
		panel.activateControl(panel.controls[0]);
		return 0;
		}
	var geom = vlayer.features[0].geometry.toString();
	geom = geom.substring(6,geom.length-1);
	var pts = geom.split(' ');
	var comment= g$('comment').value;
	var subj = g$('subject').value; 
	if(comment == ""){
		alert("Huomautusta ei asetettu");
		return 0;
		} 
	var b = map.getExtent();
	param = { 'x':pts[0], 'y':pts[1], 'comment':escape(comment),'PointID':TaskID, 'userid':email, 'LayerName':LayerName, 'subject':subj,'type':kindofcom, 'range': Math.abs(b.right - b.left)};
 
	if(email != ''){
		$('#comment').wysiwyg('clear');
		}
	$.post("addcomment.php", param , function(data){ eval("var resp="+data); g$('inlinedata').innerHTML = " " +unescape(resp.Comment);TaskID = resp.TaskID;setTimeout('tb_show("Lis\u00E4t\u00E4\u00E4n kommentti","#TB_inline?height=150&width=300&inlineId=inlinedata", false); if(vlayer.features.length){vlayer.destroyFeatures();};reFilterWFS();',30);});
	 
	g$('subject').value = kindname[kindofcom];
	return false;
	}

function getComments(feat){
	activePoint = feat.attributes.id;
	kindofcom = feat.attributes.type;
	$('#tabz > ul').tabs("select", 1 ); 
	 var param = {'PointID': feat.attributes.id,'LayerName':LayerName };
	$.post("gethtmlcomments.php", param , function(data){ 
		eval("var resp="+data);
		g$('revcomments').innerHTML = unescape(resp.Comment);
		TaskID = resp.TaskID; 
	//	myselect.activate();
		});
	}

function initMap() {

	var mapobj = g$("map");
	resizeMap();
	OpenLayers.IMAGE_RELOAD_ATTEMPTS = 8;
	OpenLayers.Util.onImageLoadErrorColor = 'transparent';
   	selectKind(kindofcom)
        window.onresize = resizeMap;
	map = new OpenLayers.Map('map', { controls: [], fractionalZoom: true }); 
	defineMapData();
	activeLayer = wms[2];
         var  unknownsample = {
                "Point": {
                    pointRadius: 8,
                    graphicName: "circle",
                    fillColor: "white",
                    fillOpacity: 1,
                    strokeWidth: 2,
                    strokeOpacity: 1,
                    strokeColor: "#333333"
                },
                "Polygon": {
                    strokeWidth: 1,
                    strokeOpacity: 1,
                    strokeColor: "#666666",
                    fillColor: "white",
                    fillOpacity: 1
                }
            };

  
	var editingsample = {
                "Point": {
                    pointRadius: 8,
                    graphicName: "circle",
                    fillColor: "white",
                    fillOpacity: 1,
                    strokeWidth: 1,
                    strokeOpacity: 1,
                    strokeColor: "#333333"
                },
                "Polygon": {
                    strokeWidth: 1,
                    strokeOpacity: 1,
                    strokeColor: "cyan",
                    fillColor: "cyan",
                    fillOpacity: 1
                }
	 };
	stylewhite = new OpenLayers.Style();
         stylewhite.addRules([
                new OpenLayers.Rule({symbolizer: unknownsample})
		]);
	var styleyellow = new OpenLayers.Style();
       
	var styleedit = new OpenLayers.Style();
        styleedit.addRules([
                new OpenLayers.Rule({symbolizer: editingsample})
		]);
	    
	theStyle = new OpenLayers.StyleMap({"default": stylewhite, "select" : styleedit });

 	vlayer = new OpenLayers.Layer.Vector( "Measures" , {styleMap: theStyle });
	map.addLayers(wms);

	var modifyOptions = {
	 onModificationStart: function(feature) {
         },
         onModification: function(feature) {
         },
        onModificationEnd: function(feature) {
         },
         onDelete: function(feature) {
         	}
	};
	map.addLayer(vlayer);

/*
 	vlayer.events.on({
                "beforefeaturemodified": clearFeatures,
                "featuremodified": styleFeature,
		"afterfeaturemodified": styleFeature,
		"beforefeatureadded": styleFeature
		});
*/
  	modifier = new OpenLayers.Control.ModifyFeature(vlayer, modifyOptions);
	map.addControl(modifier);
	panel2 = new OpenLayers.Control.NavToolbar({div:g$('navdiv')});  
	panel2.controls[1].activate();
	map.addControl(panel2);
	panel = new OpenLayers.Control.EditingToolbar(vlayer,{'div':g$('paneldiv')}); //
	map.addControl(panel);
	map.addControl(new OpenLayers.Control.PanZoom({slideFactor:330,div:g$('zoomdiv')}));
	map.addControl(new OpenLayers.Control.MouseDefaults());
	setLayer(3,false);
	showLogout(showlogout);
	}

function clearFeatures() {
	}
function styleFeature(event) {
	return styleFeatureF(event.feature);
	}

function styleFeatureF(feat){
	vlayer.styleMap =  theStyle;
	selectedGeometry = true;
	return;
	}

function showLogout(show) {
	if(show){
		$('#logout').show();
		$('#orderbutton').show('slow');
		$('#loginmess').hide('slow');
		}
	else {
		$('#logout').hide();
		$('#orderbutton').hide('slow');
		$('#loginmess').show('slow');
		}	
	}

function getSize(){
	var s= {};
	var newheight;
	if (window.innerHeight){ s.h = window.innerHeight - 150; s.w = window.innerWidth - 16; }
	else {	s.h = document.documentElement.clientHeight - 150; s.w = document.documentElement.clientWidth - 16; }
	return s;
	}
var stateTop = 195;

function resizeMap(){
 	var win = getSize();
	var sb = g$('tabz');
	sb = parseInt(sb.style.width);
	g$('map').style.width = (win.w - sb - 35) + "px";
	g$('tabz').style.height = (win.h - 80) + "px";
	g$('mapandtabs').style.height = (win.h - 35) + "px";
	if(g$('revcomments')){
		g$('revcomments').style.height = (win.h - 386) +"px";
		}
    	}

OpenLayers.Control.ZoomBox = OpenLayers.Class(OpenLayers.Control, {
    type: OpenLayers.Control.TYPE_TOOL,
    draw: function() {
        this.handler = new OpenLayers.Handler.Box( this,
                            {done: this.zoomBox}, {keyMask: this.keyMask} );
    },
    zoomBox: function (position) {
        if (position instanceof OpenLayers.Bounds) {
            var minXY = this.map.getLonLatFromPixel(
                            new OpenLayers.Pixel(position.left, position.bottom));
            var maxXY = this.map.getLonLatFromPixel(
                            new OpenLayers.Pixel(position.right, position.top));
            var bounds = new OpenLayers.Bounds(minXY.lon, minXY.lat,
                                               maxXY.lon, maxXY.lat);
            this.map.zoomToExtent(bounds);
	} 
    },

    CLASS_NAME: "OpenLayers.Control.ZoomBox"
});


OpenLayers.Control.NavToolbar = OpenLayers.Class(OpenLayers.Control.Panel, {
    initialize: function(options) {
        OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]);
	this.nav =  new OpenLayers.Control.Navigation();
	this.nav.title="Raahaa karttaa";
	this.nav.events.register("activate", null, function(){ 
		if(vlayer.features.length) modifier.deactivate();
		});
	this.zoom =  new OpenLayers.Control.ZoomBox();
	this.zoom.title = "L\u00E4henn\u00E4";
	this.zoom.events.register("activate", null, function(){ 
		if(vlayer.features.length){
			if(panel2){panel2.controls[1].activate();}
			}
		}
		);
        this.addControls([this.nav,this.zoom]);
    },
    draw: function() {
        var div = OpenLayers.Control.Panel.prototype.draw.apply(this, arguments);
        this.activateControl(this.controls[0]);
        return div;
    },

    CLASS_NAME: "OpenLayers.Control.NavToolbar"
});



OpenLayers.Control.EditingToolbar = OpenLayers.Class(
  OpenLayers.Control.Panel, {
initialize: function(layer, options) {

	OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]);
	this.points = new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Point, {'displayClass': 'olControlPoint', title: 'Add point of interest'});
	this.points.events.register("activate",null, function() { if(vlayer.features.length) vlayer.destroyFeatures();  });	
	this.points.featureAdded = function(feature) { 
			this.deactivate(); 
			feature.state = OpenLayers.State.INSERT; 
			modifier.mode = OpenLayers.Control.ModifyFeature.DRAG;
			if(vlayer.features.length){ 
				modifier.activate();
				modifier.selectControl.select(vlayer.features[vlayer.features.length-1]); 
				}
			};

	this.addControls([this.points]);

	var button = new OpenLayers.Control.Button({
		displayClass: "olControlClearButton", trigger: function() { if(vlayer.features.length) vlayer.destroyFeatures(); selectedGeometry = false ;  }, title:"Clear point of interest"
	});
	this.addControls([button]);
    },
    draw: function() {
        var div = OpenLayers.Control.Panel.prototype.draw.apply(this, arguments);
        this.activateControl(this.controls[1]);
        return div;
    },

    CLASS_NAME: "OpenLayers.Control.EditingToolbar"
  });    
var activeTab = 0;
var commentshown = false;
var acommentshown = false;
$(function() {
 	 $('#tabz > ul').tabs({select: 
		 function(evt,ui){ 
			 activeTab = ui.index;
			 if(ui.index !=2) {
			 	panel.deactivate();
		 	 	panel2.activateControl(panel2.controls[1]);
			 	if(vlayer.features.length){ 
					if(myselect){
					 	myselect.unselectAll();
						}
					vlayer.setVisibility(false); 
					} 	
		 		}
		 	 else { 
				vlayer.setVisibility(true);
		 		panel.activate();
			 	panel.activateControl(panel.controls[0]);
			 	 } 
			 if(ui.index == 1 && acommentshown==false){
				acommentshown = true;
				setTimeout("$('#acomment').wysiwyg();",1500);
			 }
			 if(ui.index == 2 && commentshown == false){
				commentshown = true;
				setTimeout("$('#comment').wysiwyg();",1500);
			 	}
			return true;
			}
		,fx: {opacity: 'toggle'}
	 });  

	
}); 

function toggleSelectors(){
	$('#catSelectors').toggle('slow');
	$('#down').toggle();
	$('#up').toggle();
	}

function setAnaglyph(sel){
	anaglyphMode=sel.options[sel.options.selectedIndex].value;
	if(sel.options.selectedIndex){anaglyph=true;}else{anaglyph=false;}
	}

function hideLegend(hide){
	if(hide){
		$('#legend').hide('slow');
		$('#newlegend').show();
	}
	else {
		$('#legend').show('slow');
		$('#newlegend').hide();
	}
return false;	
}