var map, panel, green, parser, routingControls;
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
var sourceStyle = new OpenLayers.Style({
					externalGraphic: "./images/start.png",
					graphicWidth: 23,
					graphicHeight: 37,
					graphicYOffset: -19
				});
var targetStyle = new OpenLayers.Style({
					externalGraphic: "./images/stop.png",
					graphicWidth: 23,
					graphicHeight: 37,
					graphicYOffset: -19
				});
var resultStyle = new OpenLayers.Style({
					strokeWidth: 3,
					strokeColor: "#ff0000",
					fillOpacity: 0
				});

function init(){
	//var bounds = new OpenLayers.Bounds(-20.201523, 11.052158, 38.463953, 38.599732);
	var bounds = new OpenLayers.Bounds(-19.6725875,20.08764,-0.4905424999999999,36.504780000000004);
	//var bounds = new OpenLayers.Bounds(-17.201523, 21.052158, -0.963953, 35.599732);
	var options = {
		controls: [],
		
		//maxResolution: 0.06763362890625,
		projection: "EPSG:4326",
		units: 'degrees',
		scales: [ 1500, 3000, 6000, 10000, 15000,
					25000, 50000, 100000, 250000, 500000, 1000000,
					2500000, 5000000, 10000000
				],
	};
	map = new OpenLayers.Map('mapdiv', options);
	panel = new OpenLayers.Control.Panel(
		{div: $("paneldiv")}
	);
	parser = new OpenLayers.Format.WKT();
	
	map.addControl(new OpenLayers.Control.PanZoomBar());
	map.addControl(new OpenLayers.Control.KeyboardDefaults());
	map.addControl(new OpenLayers.Control.Scale());
	map.addControl(new OpenLayers.Control.MousePosition());
		
	var mdintimap = new OpenLayers.Layer.WMS(
			"Mdinti Map", "http://188.138.0.174/geoserver/wms",
			//"Mdinti Map", "http://www.mdinti.ma/geoserver/wms",
			{
				//layers: 'mdintimaps:mdinti_polygon,mdintimaps:no_routable,mdintimaps:routable,mdintimaps:mdinti_poi,mdintimaps:mdinti_cities',
				layers: 'mdintimaps:mdinti_polygon,mdintimaps:no_routable,mdintimaps:routable,mdintimaps:mdinti_cities',
				//layers: 'mdintimaps:mdinti_cities',
				//transparent: 'TRUE',
				bgColor: '#eff1ec',
				//bgColor: '#ffffff',
				srs: 'EPSG:4326',
				format: 'image/png8' // geoserver use a 24 bit version per default
				//format: 'image/png', // default geoserver setting it use a 24 bit
				//palette: 'safe' //only with image/png it use only internet safe palette colors!
				//format_options: 'antialias:none' //bonly with image/png with an antialiaing value
			},
			{
                  //ratio: 1,
                  singleTile: false
                }
	);
/*	
	var mdinticities = new OpenLayers.Layer.WMS(
			"Mdinti Map", "http://xeoping.dyndns.org/geoserver/wms",
			{
				layers: 'mdintimaps:mdinti_cities',
				//layers: 'mdintimaps:mdinti_cities',
				transparent: 'TRUE',
				//bgColor: '#e4dcbc',
				//bgColor: '#ffffff',
				srs: 'EPSG:4326',
				//format: 'image/png8' // geoserver use a 24 bit version per default
				format: 'image/png', // default geoserver setting it use a 24 bit
				//palette: 'safe' //only with image/png it use only internet safe palette colors!
				//format_options: 'antialias:none' //bonly with image/png with an antialiaing value
			},
			{
                  //ratio: 1,
                  singleTile: true
                }
	);
	*/
	sourceLayer = new OpenLayers.Layer.Vector("source Layer", {
						styleMap: new OpenLayers.StyleMap(sourceStyle),
						onFeatureInsert: afterInsertSourcePoint
						});
	targetLayer = new OpenLayers.Layer.Vector("target Layer", {
						styleMap: new OpenLayers.StyleMap(targetStyle),
						onFeatureInsert: getRoute
						});
	resultLayer = new OpenLayers.Layer.Vector("result Layer", {
						styleMap: new OpenLayers.StyleMap(resultStyle)
						});
	areaLayer = new OpenLayers.Layer.Vector("area Layer");
		
	map.addLayers([mdintimap, sourceLayer, targetLayer, resultLayer, areaLayer]);
	
	var orange = new OpenLayers.Control.Button({
    						displayClass: "orange",
    						trigger: startRouting
						});
	
	var blue = new OpenLayers.Control.DrawFeature(areaLayer, OpenLayers.Handler.Path,
						{
							type: OpenLayers.Control.TYPE_TOOL,
							displayClass: "blue"
						});
	
	green = new OpenLayers.Control.Navigation({
							type: OpenLayers.Control.TYPE_TOOL,
							displayClass: "green"
						});
	
	panel.addControls([blue, orange, green]);
	map.addControl(panel);
	
	panel.activateControl(green);
	
	map.zoomToExtent(bounds);
	$('mapdiv').style.cursor = "url('./images/stop.cur')";
}

function startRouting() {
	sourceLayer.destroyFeatures();
	targetLayer.destroyFeatures();
	resultLayer.destroyFeatures();
	
	routingControls = {
		drawSourcePoint: new OpenLayers.Control.DrawFeature(sourceLayer, OpenLayers.Handler.Point),
		drawTargetPoint: new OpenLayers.Control.DrawFeature(targetLayer, OpenLayers.Handler.Point)
	}
	for (var key in routingControls) {
		map.addControl(routingControls[key]);
	}
	
	toggleControl('drawSourcePoint');	
}

function toggleControl(mycontrol) {
	for (key in routingControls) {
		if (mycontrol == key) {
			routingControls[key].activate();
		} else {
			routingControls[key].deactivate();
		}
	}
}

function afterInsertSourcePoint() {
	toggleControl('drawTargetPoint');
}

function getRoute() {
	var startPoint = sourceLayer.features[0];
	var stopPoint = targetLayer.features[0];
	if (startPoint && stopPoint) {
		var params = {
				startpoint: startPoint.geometry.x + ' ' + startPoint.geometry.y,
				finalpoint: stopPoint.geometry.x + ' ' + stopPoint.geometry.y,
				method: "SPS",
				srid: "4326"
		};
		OpenLayers.loadURL("./routing.php",
					params,
					null,
					displayRoute);
		}
}

function displayRoute(response) {
	if (response && response.responseXML) {
		// parse the features
		var edges = response.responseXML.getElementsByTagName('edge');
		var multilines = [];
		for (var i = 0; i < edges.length; i++) {
			var g = parser.read(edges[i].getElementsByTagName('wkt')[0].textContent);
			multilines.push(g);
		}
		if(multilines.length != 0) {
			
			resultLayer.addFeatures(multilines);
			for (key in routingControls) {
				routingControls[key].deactivate();
			}
			panel.activateControl(green);
		}
	}
}