var roadWorkTypeImage = {
	InUitvoering: BASEURL+"fw_images/werken_inuitvoering_schaduw_300dpi.gif",
	KorteTermijn: BASEURL+"fw_images/werken_kortetermijn_schaduw_300dpi.gif",
	LangeTermijn: BASEURL+"fw_images/werken_langetermijn_schaduw_300dpi.gif"
};

var focusColor = "#FF0000";
var defaultColor = "#C11B17";


var roadWorkColor = "#C11B17";
var deviationColor = "#FFFF00";

window.dhx_globalImgPath = BASEURL+"fw_headers/js/dhtmlx/imgs/";


GLOBAL_DIRECTION_ARRAW = new Array();


function InitMap(mapDiv, _navigationControlOptions,enableKeyDragZoom) {
    var myOptions = {
            zoom: DEFAULTMAXZOOMIN,
            center: DEFAULTCENTERMAP,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            navigationControl: true,
            streetViewControl: false,
            draggableCursor: "crosshair",
            scaleControl: true,
            keyboardShortcuts: true,
            disableDoubleClickZoom: false,
            minZoom: DEFAULTMAXZOOMIN
    };
    if(_navigationControlOptions != null){
            myOptions.navigationControlOptions = _navigationControlOptions;
    }

    var map = new google.maps.Map(mapDiv, myOptions);
//enable drag zoom
    if(enableKeyDragZoom != false){
        map.enableKeyDragZoom({
                key: 'shift'
        });
    }

    LimitMap(map);

    map.addListener('zoom_changed', function(){
        var zoom = this.getZoom();
        if(GLOBAL_DIRECTION_ARRAW != null){
            if(zoom < 15){
                for(var i=0, item; item = GLOBAL_DIRECTION_ARRAW[i]; i++){
                    item.setOptions({map: null})
                }
            }else  if(zoom >= 15){
                for(var i=0, item; item = GLOBAL_DIRECTION_ARRAW[i]; i++){
                    if(item.getMap() == null){
                        item.setOptions({map: this})
                    }
                }
            }
        }
    })

    return map;
}

function FreezeMap(mapObjectV3, freezeMap, showTooltip){
     mapObjectV3.setOptions({
        disableDoubleClickZoom: freezeMap,
        draggable: !freezeMap,
        keyboardShortcuts: !freezeMap,
        navigationControl: !freezeMap,
        scrollwheel: !freezeMap
    });
    var div = mapObjectV3.getDiv();
    if(freezeMap && (showTooltip != false)){
        div.title = LBL_JS_TOOLTIP_MAP_FREEZE;
    }else{
        div.title = "";
    }
}


function InitMapV2(mapId, freeMap){
    var map = new GMap2(document.getElementById(mapId));
    map.addControl(new GScaleControl());
    
    if(freeMap == true){
        map.disableDragging();
        map.disableDoubleClickZoom();
    }else{
        map.enableScrollWheelZoom();
        map.setUIToDefault()
    }
    map.setCenter(new GLatLng(51, 4.3));
    map.setZoom(9);
    return map;
}


function InitReportMap(mapDiv, _navigationControlOptions,enableKeyDragZoom) {
    var map = InitMap(mapDiv, _navigationControlOptions,enableKeyDragZoom);
    map.setOptions({
        disableDoubleClickZoom: true,
        draggable: false,
        keyboardShortcuts: false,
        mapTypeControl: false,
        navigationControl: false,
        scrollwheel: false
    });
    return map;
}


function CreateMarkerWithLabel2(opt){
    if( opt == null)
        opt = {}
    if(opt.isAdmin){
        if(opt.optStyle == null){
            opt.optStyle = {
                opacity: 0.75,
                color: 'white',
                'font-weight': 'bold',
                "background" : "blue",
                width: "80px"
            }
        }

        var marker = new MarkerWithLabel({
            position: opt.position,
            labelContent: opt.labelContent,
            labelAnchor: new google.maps.Point(35, -10),
            labelStyle: opt.optStyle,
            map: opt.map
        });
    }else{
        var marker = new google.maps.Marker({
            position: opt.position
        });
    }
    
    marker.id = opt.id;
    marker.setDefaultRoadworkIcon();

    if(opt.enableTooltip == true){
        marker.addListener('click', function(){
            if(infoBox != null)
                infoBox.close();
             var id = this.id;
             
             var content = tooplTipHelperContent(id);
             //debug(content);
             infoBox = new InfoBox({
                latlng: this.getPosition(),
                map: opt.map,
                content: content,
                id: id
            });
            infoBox.ReportMap = opt.reportMap;
        });
    }
    if(opt.enableLoadGeometryOnDblClick == true){
        marker.addListener('dblclick', function(){
            ShowRoadworkGeometry(this.id, opt.map);
        });
    }

    if(opt.autoLoadGeometry == true){
        ShowRoadworkGeometry(opt.id, opt.map, opt.bounds);
    }

    opt.map.addListener('click', function(){
         if(infoBox != null)
            infoBox.close();
    })

    return marker;
}


var infoBox = null;
function CreateMarkerWithLable(position, labelContent, id, map, reportMap, enableTooltip, enableLoadGeometryOnDblClick, autoLoadGeometry){
     var marker = new MarkerWithLabel({
        position: position,
        labelContent: labelContent,
        labelAnchor: new google.maps.Point(15, -10),
        labelStyle: {
            opacity: 1,
            color: 'black',
            'font-weight': 'bold'
        },
        map: map
    });
    marker.id = id;
    marker.setDefaultRoadworkIcon();

    if(enableTooltip != false){
        marker.addListener('click', function(){
            if(infoBox != null)
                infoBox.close();
             var id = this.id;
             var content = tooplTipHelperContent(id);
             infoBox = new InfoBox({
                latlng: this.getPosition(),
                map: map,
                content: content,
                id: id
            });
            infoBox.ReportMap = reportMap;
        });
    }
    if(enableLoadGeometryOnDblClick != false){
        marker.addListener('dblclick', function(){
            ShowRoadworkGeometry(this.id, map);
        });
    }

    if(autoLoadGeometry == true){
        ShowRoadworkGeometry(id, map);
    }

    map.addListener('click', function(){
         if(infoBox != null)
            infoBox.close();
    })

    return marker;
}

function ClearAllGeometryFromMap(){
    if(cacheGeometry == null)
        return;

    for(var i=0, item; item = cacheGeometry[i]; i++){
        item.setOptions({
            map : null
        })
    }
}
var cacheGeometry = new Array();
function ShowRoadworkGeometry(rwId, map, canBounds, clearGeometry){
    try{
        if(clearGeometry != true){
            if(checkIfGeoemtryExistsInCache(rwId))
                return;
        }else{
             for(var i=0, item; item = cacheGeometry[i]; i++){
                 item.setOptions({
                     map : null
                 })
             }
             cacheGeometry = new Array();
        }

        if(typeof(canBounds) == "undefined"){
            canBounds = true;
        }
        var opt = {
            functionName: 'getRoadworkGeometry',
            rwID: rwId
        };


        GetJSONObjectFromDB(opt, function (data){
            var values = jQuery.parseJSON(data);
            var bounds = new google.maps.LatLngBounds();
            var pointsCount = 0;

            var geometries = values.geometry;
            var isCurrentPhase = values.isCurrentPhase;
            
            for(var i=0, item; item = geometries[i]; i++){
                CreateDeviationMarkers(item.deviationIcons, map, true);
                
                var path = [];
                if(item.isSignPoint == 1){
                   continue;
                }
                var isDeviation = item.isDeviation;
                var geometry = item.geometry;
                for(j=0; j<geometry.length; j++){
                    var point = geometry[j];
                    var latlng = new google.maps.LatLng(point.lat, point.lng);
                    bounds.extend(latlng);
                    path.push(latlng);
                    pointsCount++;
                }
                var obj = null;
                if(path != null && path.length > 1 ){
                    obj = new Polyline();
                    obj.setOptions({
                        map: map
                    })
                    //obj.setDirectionsSense(item.deviationIcons);
                    obj.setPath(path);
                }else if(path != null && path.length == 1)  {
                    obj = new Circle({
                         map: map
                    })
                    obj.addPoint(path[0]);
                    obj.setRadius(0.5);
                }
                if(obj != null){
                    obj.id = rwId;
                    obj.isDeviation = (isDeviation == 1 ? true : false);
                    obj.focus();
                    obj.CurrentPhase(isCurrentPhase);

                    cacheGeometry.push(obj);
                }
       
                if(pointsCount > 0 && canBounds == true){
                   map.fitBounds(bounds);
                }
            }

            
            
        });
    }
    catch(Ex){}
}

function checkIfGeoemtryExistsInCache(id){
    var bounds = new google.maps.LatLngBounds();
    var ok = false;
    for(var i=0, item; item = cacheGeometry[i]; i++){
      if(item.id == id){
         bounds.union(item.getBounds());
         ok = true;
      }
    };
    if(ok){
        map.fitBounds(bounds);
    }
    return ok;
};

function CreateDeviationMarkers(geometryStyleArray, map,  addToGlobalArray){
    var markers = new Array();
    if(geometryStyleArray != null && geometryStyleArray != 'NULL'){
    var s1 = geometryStyleArray.split('|');
     for(var kj =0, s11; s11 = s1[kj]; kj++){
        var s2 = s11.split(';');
        var s3 = s2[0].split(',');
        var point = new google.maps.LatLng(s3[0], s3[1]);
        var m = new google.maps.Marker({
            position: point,
            map: map
        })
        var dir = s2[1];
        m.setDeviationIcon(dir);
        markers.push(m);
        if(addToGlobalArray == true){
            GLOBAL_DIRECTION_ARRAW.push(m);
        }
    }
    }
    return markers;
}

function CreateDeviationMarkersV2(geometryStyleArray, map){
    var markers = new Array();
     if(geometryStyleArray != null && geometryStyleArray != 'NULL'){
         var s1 = geometryStyleArray.split('|');
         for(var kj =0, s11; s11 = s1[kj]; kj++){
            var s2 = s11.split(';');
            var s3 = s2[0].split(',');
            var dir = s2[1];

            var point = new GLatLng(s3[0], s3[1]);
            var Icon = new GIcon();
            Icon.image = "http://www.google.com/intl/en_ALL/mapfiles/dir_" + dir + ".png";
            Icon.iconSize = new GSize(24, 24);
            Icon.iconAnchor = new GPoint(12, 12);
            Icon.infoWindowAnchor = new GPoint(5, 2);
            var m = new GMarker(point,{
                icon: Icon
            });
            map.addOverlay(m);
        }
    }
    return markers;
}


function CreateCircleMapV2(map, point) {
    var polyPoints = Array();
    var mapNormalProj = G_NORMAL_MAP.getProjection();
    var mapZoom = map.getZoom();
    var clickedPixel = mapNormalProj.fromLatLngToPixel(point, mapZoom);
    var polySmallRadius = 0.1;
    var polyNumSides = 5+  2;

    var polySideLength = 360/polyNumSides;
    var polyColor = FOCUS_COLOR_ROADWORK;

    polyNumSides = 20;
    polySideLength = 18;

    for (var a = 0; a<(polyNumSides+1); a++) {
        var aRad = polySideLength*a*(Math.PI/180);
        var polyRadius = polySmallRadius;
        var pixelX = clickedPixel.x + polyRadius * Math.cos(aRad);
	var pixelY = clickedPixel.y + polyRadius * Math.sin(aRad);
	var polyPixel = new GPoint(pixelX,pixelY);
	var polyPoint = mapNormalProj.fromPixelToLatLng(polyPixel,mapZoom);
	polyPoints.push(polyPoint);
    }

    var polygon = new GPolygon(polyPoints,"#000000",2,.5,polyColor,.5);
    map.addOverlay(polygon);
}




/**
 * @param m
 * @param toolbar
 * @param showList
 * @return
 */

currentIntervalDays = 30; 


var layers;
function InitializeLayers(){
	var opt = {
			functionName: 'getAllKMLFile'
	};

	GetJSONObjectFromDBSyncron(opt, function (data) {
        var jsonLayers = jQuery.parseJSON(data);

        layers = new Array();
        
        for(var i = 0; i < jsonLayers.length; i++){
	        var opt = {
	            map: null,
	            preserveViewport: true,
	            suppressInfoWindows: true
	        };
	        
	        var layer = new google.maps.KmlLayer(jsonLayers[i].filename, opt);

	        layer.name = jsonLayers[i].name;
	        layer.zoom_min = jsonLayers[i].zoom_min;
	        layer.zoom_max = jsonLayers[i].zoom_max;
	        layer.roadWorkStatusId = jsonLayers[i].roadWorkStatusId;
	        layer.daysInterval = jsonLayers[i].daysInterval.toString();
	        layer.isDeviation = jsonLayers[i].isDeviation;
	        layers.push(layer);
	            
	        google.maps.event.addListener(layer, 'click', function(response){            	
	           	ShowInfoWindow(response);
	         });          
	      }
	     
        //ShowLayers();   
    });
}


function ShowLayersByType(types)
{		
	var map_zoom = map.getZoom();
	if(map_zoom == null) return;
	for(var i=0;i<layers.length;i++)
	{	
		var m = layers[i].getMap();
		if(layers[i].zoom_min <= map_zoom && layers[i].zoom_max >= map_zoom && 
			(layers[i].daysInterval == types.days.toString() ))
		{
			if(m == null){
			        layers[i].setMap(map);
			}	
		}
		else{
			if( m != null)
				layers[i].setMap(null);
		}
	}
	currentIntervalDays = types.days;
	if( typeof(ShowRoadWorkList) == "function"){
		ShowRoadWorkList(currentIntervalDays);
	}
}





var infoWindow = null;	
function ShowAllRoadWorkByZoomLevelAndUserSelection(m, toolbar, showList){
	var map = m;
	
	google.maps.KmlLayer.prototype.name = '';
	google.maps.KmlLayer.prototype.zoom_min = 0;
	google.maps.KmlLayer.prototype.zoom_max = 0;
 
    var layers = new Array();	
	var ll = null;	
	//var infoWindow = null;	
	
    google.maps.event.addListener(map, 'zoom_changed',ShowLayers);
	var overlay = new google.maps.OverlayView();
    overlay.draw = function() {};
    overlay.setMap(map);	
	
    if(toolbar != null)
    {
		toolbar.attachEvent("onStateChange", function(id ,state){
		  if(id == 'int1' && state){
		      toolbar.setItemState('int2', false);
   		      toolbar.setItemState('int3', false);
   		      
   		      if(showList)
   		    	  ShowRoadWorkList(30);
   		    
   		      currentIntervalDays = 30;
   		      
          } else 
          if(id == 'int2' && state){
		      toolbar.setItemState('int1', false);
   		      toolbar.setItemState('int3', false);
   		      
   		      if(showList)
   		    	  ShowRoadWorkList(90);
   		   
   		      currentIntervalDays = 90;
          } else 
    	  if(id == 'int3' && state){
		      toolbar.setItemState('int1', false);
   		      toolbar.setItemState('int2', false);
   		      
   		      if(showList)
   		    	  ShowRoadWorkList(3000);
   		   
   		      currentIntervalDays = 3000;
          } 

			ShowLayers();
			});
		toolbar.setItemState('int1', true);
    }
    else
    {
    	createFilter();
    }
    
	google.maps.event.addListener(map,'click', function(response){
		if(infoWindow != null)
			infoWindow.close();
	});
	
	
	

	var opt = {
		functionName: 'getAllKMLFile'
	};

	$.post(BASEURL + "jquery", opt, function (data) {
        // alert(data);
        // return;
        var jsonLayers = jQuery.parseJSON(data);
        
        for(var i = 0; i < jsonLayers.length; i++){
            var opt = {
                map: null,
                preserveViewport: true,
                suppressInfoWindows: true
            };
            var layer = new google.maps.KmlLayer(jsonLayers[i].filename, opt);

            layer.name = jsonLayers[i].name;
            layer.zoom_min = jsonLayers[i].zoom_min;
            layer.zoom_max = jsonLayers[i].zoom_max;
            layer.roadWorkStatusId = jsonLayers[i].roadWorkStatusId;
            layer.daysInterval = jsonLayers[i].daysInterval;
            layer.isDeviation = jsonLayers[i].isDeviation;
            layers.push(layer);
            
            google.maps.event.addListener(layer, 'click', function(response){            	
            	ShowInfoWindow(response);
            });          
        }
        ShowLayers();   
        
    });
	
	function ShowInfoWindow(response)
	{
		if(infoWindow != null)
			infoWindow.close();
		
		//check if current id is a number
        if(isNaN(response.featureData.id))
		  return;
		
        
        var id = response.featureData.id;
        //alert(id);
        CreateMarkerTootipMessage(null, response);
       
	}
	
	
	
	
	
	

	

	var l = null;
	var dataS = '';
	
	function ShowLayers(){
		
		if(toolbar!=null)
			ShowLayersByToolbar();
		else
			ShowLayersByCheckBox();
	}
	
	function ShowLayersByToolbar(){
		var types = new Array();
        
		var progress = toolbar.getItemState('int1');
		if(progress)
			types.push('30');
		
		var short = toolbar.getItemState('int2');
		if(short)
			types.push('90');
		
		var long = toolbar.getItemState('int3');
		if(long)
			types.push('3000');

		ShowLayersByType(types);
	}
	
	function ShowLayersByCheckBox()
	{
		var types = new Array();

		var progress = document.getElementById('progress').checked;
		if(progress)
			types.push('1');
		
		var short = document.getElementById('short').checked;
		if(short)
			types.push('2');
		
		var long = document.getElementById('long').checked;
		if(long)
			types.push('3');
		
		ShowLayersByType(types);
	}
	
	function ShowLayersByType(types)
	{		
		alert(types);
		var map_zoom = map.getZoom();

		if(map_zoom == null) return;
	
		for(var i=0;i<layers.length;i++)
		{	
    		var m = layers[i].getMap();
			if(layers[i].zoom_min <= map_zoom && layers[i].zoom_max >= map_zoom && 
				($.inArray(layers[i].daysInterval, types) > -1))
			{
				if(m == null){
				        layers[i].setMap(map);
				        
						/*var layer = new google.maps.KmlLayer(layers[i].getUrl(), {
		                    map: map,   
                      	    preserveViewport: true,
                            suppressInfoWindows: true
                        });
                        
                        layer.name = layers[i].name;
                        layer.zoom_min = layers[i].zoom_min;
                        layer.zoom_max = layers[i].zoom_max;
                        layer.roadWorkStatusId = layers[i].roadWorkStatusId;
                        layer.daysInterval = layers[i].daysInterval;
                        layer.isDeviation = layers[i].isDeviation;
                        
						layers[i] = layer;
						*/
						/*google.maps.event.addListener(layer, 'click', function(response){            	
            	          // ShowInfoWindow(response);
                        });*/ 
				}	
			}
			else{
					if( m != null)
						layers[i].setMap(null);
				}
			}
		}

	

	function ShowLayersOnMap(layers){
		var roadWorks = new Array();
		var deviations = new Array();
	}

	function pause(numberMillis) {
		var now = new Date();
		var exitTime = now.getTime() + numberMillis;
		while (true) {
			now = new Date();
			if (now.getTime() > exitTime)
			return;
		}
	}
	
	function createFilter(){
		
		var div = document.createElement('div');
		div.setAttribute('id', 'controls');
		div.setAttribute('style', 'color:#FFFF00; background-color:#123432; width:100%; height:50px;');
		div.setAttribute('align', 'center');
    	div.setAttribute('width', '100%');
		div.setAttribute('height', '100px');

		var divMap = map.getDiv();		
		divMap.appendChild(div);

		var img1 = CreateImgElement(BASEURL+'fw_images/werken_inuitvoering_schaduw_300dpi.gif');
		div.appendChild(img1);
		var check = CreateCheckBox('progress');
		div.appendChild(check);	
		//For IE -> the checkbox must be checked after append
		check.checked = 'true';
		var txt = CreateText('In uitvoering');
		div.appendChild(txt);

		var img2 = CreateImgElement(BASEURL+'fw_images/werken_kortetermijn_schaduw_300dpi.gif');
		div.appendChild(img2);
		var check = CreateCheckBox('short');
		div.appendChild(check);
		var txt = CreateText('Korte termijn ');
		div.appendChild(txt);

		var img3 = CreateImgElement(BASEURL+'fw_images/werken_langetermijn_schaduw_300dpi.gif');
		div.appendChild(img3);
		var check = CreateCheckBox('long');
		div.appendChild(check);
		var txt = CreateText('Lange termijn');
		div.appendChild(txt);

		map.addControlsToMap('controls', google.maps.ControlPosition.BOTTOM);
		
		//Progress<input type="checkbox" checked id="progress" onchange="ShowLayers('1');"/>
		//Short<input type="checkbox" id="short" onchange="ShowLayers('2');"/>
		//Long<input type="checkbox" id="long"  onchange="ShowLayers('3');"/>
	}
	
	function CreateImgElement(src) {
		var img = document.createElement('img');
		img.setAttribute('src', src);
//		img.setAttribute('style', 'width:25px; height: 25px');
		img.setAttribute('width', '25');
		img.setAttribute('height', '25');

		return img;
	}

	function CreateCheckBox(id) {
		var checkbox = document.createElement('input');
		checkbox.setAttribute('type', 'checkbox');
		checkbox.setAttribute('id', id);
		checkbox.onchange = ShowLayers;

		return checkbox;
	}
	return layers;
}


//info window
function ShowInfoWindow(response)
{	
	if(infoWindow != null)
		infoWindow.close();
	
	//check if current id is a number
    if(isNaN(response.featureData.id))
	  return;
	
    
    var id = response.featureData.id;
    //alert(id);
    CreateMarkerTootipMessage(null, response);
   
}

function CreateMarkerTootipMessage(markerObject, id){
	var type = typeof(id);
	
	var idRW = -1;
	if(type == 'object')
		idRW = id.featureData.id;
	else
		idRW = id;
	
	var opt = {
			functionName: 'getContentRoadWorkById',
			id:idRW
		};
	$.post(BASEURL + "jQuery", opt, function (data) {
			
			if(data == '')
				return;
			
			var roadWorkDetails = jQuery.parseJSON(data);
			if(roadWorkDetails  == null)
				return;
			
			var principal = roadWorkDetails[0].principal;
			var projectName = roadWorkDetails[0].projectName;
			var village = roadWorkDetails[0].village;
			var rw_PlannedStart = roadWorkDetails[0].plannedStart;
			var rw_PlannedEnd = roadWorkDetails[0].plannedEnd;
			var rw_EffectStart = roadWorkDetails[0].effectiveStart;
			var rw_EffectEnd = roadWorkDetails[0].effectiveEnd;
			
			var content = '<table>';
			
			if(principal != null){
    			content += toolTipContent('Principal: ', principal);
			}
			if(projectName != null){
    		     content += toolTipContent('Project name: ', projectName);
			}
			if(village!=null){
    			content += toolTipContent('Village: ', village);
			}
			
			if(rw_PlannedStart != null){
    			content += toolTipContent('Start date: ', formatDate(rw_PlannedStart));
			}
			
			if(rw_PlannedEnd != null){
			     content += toolTipContent('End date: ', formatDate(rw_PlannedEnd));
			}
			
			if(rw_EffectStart != null){
    			content += toolTipContent('Effective start date: ', formatDate(rw_EffectStart));
			}
			
			if(rw_EffectEnd != null){
                content += toolTipContent('Effective end date: ', formatDate(rw_EffectEnd));
			}	
            content+='</table>';
            
            if(markerObject == null){
            	infoWindow = new google.maps.InfoWindow({
    				content: content,
    				position: id.latLng
    			});
    			
    			infoWindow.open(map);
            }else{
            	markerObject.setInfoWindow(content);
            }
            
		});
}

function toolTipContent(propertyName, propertyValue){
	var content='<tr>';
	content+='<td><b>'+ propertyName +'</b></td>';
	content+='<td>' + propertyValue + '</td>';
	content+='</tr>';
	return content;
}







function formatDate(date)
{
	try
	{
		return date.substring(8,10) + "-" + date.substring(5,7) + "-" + date.substring(0,4);
	}
	catch (e) {
		return null;
	}
}

function CreateImgElement(src) {
	var img = document.createElement('img');
	img.setAttribute('src', src);
	img.setAttribute('style', 'width:25px; height: 25px');
	return img;
}

function CreateCheckBox(id) {
	var checkbox = document.createElement('input');
	checkbox.setAttribute('type', 'checkbox');
	checkbox.setAttribute('id', id);
		
	checkbox.onchange = ShowLayers();
	

	return checkbox;
}

var allowedBounds = null;
function LimitMap(map) {
    allowedBounds = new google.maps.LatLngBounds(
          new google.maps.LatLng(49.33867574051362, 1.9475180600585773),
          new google.maps.LatLng(51.63774736798437, 7.100105950683577)
    );


    google.maps.event.addListener(map, 'dragend', function () {
        if (allowedBounds.contains(map.getCenter())) return;

        // Out of bounds - Move the map back within the bounds

        var c = map.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = allowedBounds.getNorthEast().lng(),
         maxY = allowedBounds.getNorthEast().lat(),
         minX = allowedBounds.getSouthWest().lng(),
         minY = allowedBounds.getSouthWest().lat();

        if (x < minX) x = minX;
        if (x > maxX) x = maxX;
        if (y < minY) y = minY;
        if (y > maxY) y = maxY;

        map.setCenter(new google.maps.LatLng(y, x));
    });
}


var province;
var roadType;
var locality;
var street;
var highway;
var km1;
var km2;

function InitComboMap() {
	//init
	province = new dhtmlXCombo("provinceCombo", "alfa2", 200);
	roadType = new dhtmlXCombo("roadTypeCombo", "alfa2", 200);
	locality = new dhtmlXCombo("localityCombo", "alfa2", 200);
	street = new dhtmlXCombo("streetCombo", "alfa2", 200);
	highway = new dhtmlXCombo("highwayCombo", "alfa2", 200);
	km1 = new dhtmlXCombo("km1Combo", "alfa2", 200);
	km2 = new dhtmlXCombo("km2Combo", "alfa2", 200);
	
	SetDisplay('localityDetails', 'none');
	SetDisplay('streetDetails', 'none');
	SetDisplay('highwayDetails', 'none');
	SetDisplay('km1Details', 'none');
	SetDisplay('km2Details', 'none');
	SetDisplay('button_ok', 'none');

	var opt = {
		functionName: "allProvinces"
	};
	AddData(province, opt);

	var opt = {
		functionName: 'allRoadWorkType'
	};
	AddData(roadType, opt);

	//event
	province.attachEvent('onChange', function () {
		SetDisplay('localityDetails', 'none');
		SetDisplay('streetDetails', 'none');
		SetDisplay('highwayDetails', 'none');
		SetDisplay('km1Details', 'none');
		SetDisplay('km2Details', 'none');
		SetDisplay('button_ok', 'none');
	});

	var provinceName;
	var localityName;
	var streetName;
	var highwayName;

	province.attachEvent('onChange', function () {
		provinceName = province.getSelectedText();
		map.focusAddress(provinceName);
	});


	roadType.attachEvent('onChange', function () {
		var id = roadType.getSelectedValue();

		switch (id) {
			case '3':
			//locality
			var opt = {
				functionName: "allLocalityByProvinceId",
				idProvince: province.getSelectedValue()
			};

			AddData(locality, opt);

			SetDisplay('localityDetails', '');
			SetDisplay('streetDetails', 'none');
			SetDisplay('highwayDetails', 'none');
			SetDisplay('km1Details', 'none');
			SetDisplay('km2Details', 'none');
			SetDisplay('button_ok', 'none');

			break;
			case '1':
			//highway
			var opt = {
				functionName: 'allHighwayByProvince',
				idProvince: province.getSelectedValue()
			};
			AddData(highway, opt);


			SetDisplay('localityDetails', 'none');
			SetDisplay('streetDetails', 'none');
			SetDisplay('highwayDetails', '');
			SetDisplay('km1Details', 'none');
			SetDisplay('km2Details', 'none');
			SetDisplay('button_ok', 'none');

			break;
		}
	});

	locality.attachEvent('onChange', function () {
		localityName = locality.getSelectedText();
		map.focusAddress(localityName + ', ' + provinceName);

		var opt = {
			functionName: 'allStreetByLocalityId',
			idLocality: locality.getSelectedValue()
		};
		AddData(street, opt);

		SetDisplay('streetDetails', '');
	});

	street.attachEvent('onChange', function () {
		streetName = street.getSelectedText();
		map.focusAddress(streetName + ', ' + localityName + ', ' + provinceName);

	});

	highway.attachEvent('onChange', function () {
		highwayName = highway.getSelectedText();
		map.focusAddress(highwayName + ', ' + provinceName);

		var opt = {
			functionName: 'allKmByHighwayID',
			idHighway: highway.getSelectedValue()
		};

		AddData(km1, opt);
		AddData(km2, opt);

		SetDisplay('km1Details', '');
		SetDisplay('km2Details', '');
		SetDisplay('button_ok', '');
	});

	var markerKM1;
	var markerKM2;
	var dir;
}

var comboStatus;
var comboWerftype;
var comboRichting;
var comboAard;
function InitCombo() {
	comboStatus = new dhtmlXCombo('status', "alfa3", 200);
	comboWerftype = new dhtmlXCombo('werftype', "alfa3", 200);
	comboRichting = new dhtmlXCombo('richting', "alfa3", 200);
	comboAard = new dhtmlXCombo('aard', "alfa3", 200);
	var opt = {
		functionName: 'GetCodRichting'
	};
	AddData(comboStatus, opt);

	var opt = {
		functionName: 'GetWerftype'
	};
	AddData(comboWerftype, opt);


	var opt = {
		functionName: 'GetRichting'
	};
	AddData(comboRichting, opt);

	var opt = {
		functionName: 'GetAard'
	};
	AddData(comboAard, opt);

}

function SetDisplay(comboid, display) {
	document.getElementById(comboid).style.display = display;
}

function AddData(comboDHTMLXObject, opt) {
    $.post(BASEURL + "jquery", opt, function (data) {
        comboDHTMLXObject.setComboText('');
        comboDHTMLXObject.clearAll();
        var values = jQuery.parseJSON(data);
        for (var i = 0; i < values.length; i++) {
            comboDHTMLXObject.addOption(values[i].id, values[i].name, values[i].css);
        }
    });
}

function AddDataToDHTMLXCombo(comboDHTMLXObject, opt, defaultValue) {
    $.post(BASEURL + "jquery", opt, function (data) {
        comboDHTMLXObject.setComboText('');
        comboDHTMLXObject.clearAll();
        var values = jQuery.parseJSON(data);
        for (var i = 0; i < values.length; i++) {
            comboDHTMLXObject.addOption(values[i].id, values[i].name, values[i].css);
        }
        comboDHTMLXObject.setComboValue(defaultValue);
    });
}

function AddDataToCombo(combo, opt) {
    $.post(BASEURL + "jquery", opt, function (data) {
    	combo.innerHTML = '';

    	var values = jQuery.parseJSON(data);
        var option = new Option('', -1);
    	combo.options.add(option);
    	
        for (var i = 0; i < values.length; i++) {
            var option = new Option(values[i].name, values[i].id);
        	combo.options.add(option);
        }
    });
}

function GetSelectedValueFromCombo(combo){
	var selectedIndex = combo.selectedIndex;
	var value = combo.options[selectedIndex].text;
	return value;
}


function InitCalendar() {
	startDate = new dhtmlxCalendarObject("startDate");
	startDate.draw();
	endDate = new dhtmlxCalendarObject("endDate");
	endDate.draw();

	effectiveStartDate = new dhtmlxCalendarObject("effectiveStartDate");
	effectiveStartDate.draw();

	effectiveEndDate = new dhtmlxCalendarObject("effectiveEndDate");
	effectiveEndDate.draw();
}

//show all roadwork on the map and filter panel
var allRoadWorks = new Array();
var addControlsBit = false;
function ShowAllRoadWork(map) {
	for (var i = 0; i < allRoadWorks.length; i++) {
			allRoadWorks[i].setMap(null);
		}
	allRoadWorks = new Array();

	var opt = {
		functionName: 'getAllRoadWork'
	};
	
	$.post(BASEURL + "jquery", opt, function (data) {
		var roadWorksBD = jQuery.parseJSON(data);

		for (var i = 0; i < roadWorksBD.length; i++) {

			for (var k = 0; k < roadWorksBD[i].roadwork.length; k++) {

				var geometry = roadWorksBD[i].roadwork[k].geometry.toString();
				var points = geometry.split(';');

				polyline = new google.maps.Polyline();
				polyline.setSize(8);
					polyline.setMap(null);

				var mod = points.length % 2;
				var r = points.length / 2;
				if (mod != 0)
					r = r - 0.5;
				var midIndex = r;

				var o1 = points[midIndex].split(',');
				var pct = new google.maps.LatLng(o1[0], o1[1]);

				var content = CreateDivContent(roadWorksBD[i], roadWorksBD[i].roadwork[k].isDeviation);
				var marker = new google.maps.Marker();
				marker.setMap(map);
				marker.setPosition(pct);
				marker.setInfoWindow(content);

				polyline.centerMarker = marker;
					if (roadWorksBD[i].roadwork[k].isDeviation.toString() == '1')
						marker.setMap(null);
				
				switch (roadWorksBD[i].statusID.toString()) {
					case '1':
					marker.customizationIcon(roadWorkTypeImage.InUitvoering);
					break;
					case '2':
					marker.customizationIcon(roadWorkTypeImage.KorteTermijn);
					break;
					case '3':
					marker.customizationIcon(roadWorkTypeImage.LangeTermijn);
					break;
				}

				polyline.animatePolyline();
				polyline.isDeviation = roadWorksBD[i].roadwork[k].isDeviation.toString() == '1'? true:false;

				switch (roadWorksBD[i].roadwork[k].isDeviation.toString()) {
					case '0':
					var opt = {
						strokeColor: roadWorkColor
					};
					polyline.setOptions(opt);
					break;
					case '1':
					var opt = {
						strokeColor: deviationColor
					};
					polyline.setOptions(opt);
					break;
				}

				var arrayPoint = new Array();
				for (var j = 0; j < points.length; j++) {
					var o = points[j].split(',');
					var pct = new google.maps.LatLng(o[0], o[1]);
					arrayPoint.push(pct);
				}
				polyline.addArrayLatLng(arrayPoint);
				polyline.setMap(map);

				polyline.roadWorkStatusId = roadWorksBD[i].statusID;
				allRoadWorks.push(polyline);
			}
		}

	});
	if (addControlsBit == false) {
		AddControls(map);
		addControlsBit = true;
	}

}

//Carmen
var allRoadWorks = new Array();
var addControlsBit = false;
function ShowGeometry(map)
{
	for (var i = 0; i < allRoadWorks.length; i++) {
			allRoadWorks[i].setMap(null);
		}
	allRoadWorks = new Array();

	var opt = {
		functionName: 'showGeometryByID'
	};

	$.post(BASEURL + "jquery", opt, function (data) {
		var roadWorksBD = jQuery.parseJSON(data);
		var geometry = roadWorksBD.geometry.toString();

		var points = geometry.split('),ST_Point(');
		polyline = new google.maps.Polyline();
		polyline.setSize(8);
			polyline.setMap(null);

		var mod = points.length % 2;
		var r = points.length / 2;
		if (mod != 0)
		r = r - 0.5;
		var midIndex = r;

		var o1 = points[midIndex].split(',');
		var lon = cleanString(o1[0]);
		var lat =  cleanString(o1[1]);

		var pct = new google.maps.LatLng(lat, lon);
	
		map.focusLocation(pct);
		var content = CreateDivContent(roadWorksBD, 0);

		var marker = new google.maps.Marker();
		marker.setMap(map);
		marker.setPosition(pct);
		marker.setInfoWindow(content);

		polyline.centerMarker = marker;
			marker.setMap(null);
		marker.customizationIcon(roadWorkTypeImage.InUitvoering);
		polyline.animatePolyline();
		var opt = {
			strokeColor: roadWorkColor
		};
		polyline.setOptions(opt);


		var arrayPoint = new Array();
		for (var j = 0; j < points.length-1; j++) {
			var o = points[j].split(',');
			var lon = cleanString(o[0]);
			var lat =  cleanString(o[1]);
		
			if(!isNaN(lon))
			{
				var pct = new google.maps.LatLng(lat, lon);
				arrayPoint.push(pct);
			}
		}
		polyline.addArrayLatLng(arrayPoint);
		polyline.setMap(map);

	});
}

function cleanString (str) {
    return str.replace(/[^\d^\.]/g, "");
}

function CreateDivContent(roadWorkDetails, isDeviation) {
	var content = '<div style="height:100px">';
	content += '<b>Name:</b> ' + roadWorkDetails.name + '<br>';
	content += '<b>Province: </b>' + roadWorkDetails.province + '<br>';
	content += '<b>Start date: </b>' + roadWorkDetails.startDate + '<br>';
	content += '<b>End date: </b>' + roadWorkDetails.endDate + '<br>';
	content += '<b>Effective start date: </b>' + roadWorkDetails.effectiveStartDate + '<br>';
	content += '<b>Effective end date: </b>' + roadWorkDetails.effectiveEndDate + '<br>';
	content += '<b>Short: </b>' + roadWorkDetails.shortDescription + '<br>';

	return content;
}

function ShowRoadWorkType(type, value) {

	for (var i = 0; i < allRoadWorks.length; i++) {
		if (allRoadWorks[i].roadWorkStatusId == type) {

			if (value)
			allRoadWorks[i].setMapRoadWork(map);
			else
			allRoadWorks[i].setMapRoadWork(null);
		}
	}
}

function AddControls(map) {
	var div = document.createElement('div');
	div.setAttribute('id', 'controls');
	div.setAttribute('style', 'color:#FFFF00; background-color:orange; width:100%; height:50px');
	div.setAttribute('align', 'center');
	var divMap = map.getDiv();
	divMap.appendChild(div);


	var img1 = CreateImgElement(BASEURL+'fw_images/werken_inuitvoering_schaduw_300dpi.gif');
	div.appendChild(img1);
	var chec = CreateCheckBox('1');
	div.appendChild(chec);
	var txt = CreateText('In uitvoering');
	div.appendChild(txt);

	var img2 = CreateImgElement(BASEURL+'fw_images/werken_kortetermijn_schaduw_300dpi.gif');
	div.appendChild(img2);
	var chec = CreateCheckBox('2');
	div.appendChild(chec);
	var txt = CreateText('Korte termijn ');
	div.appendChild(txt);

	var img3 = CreateImgElement(BASEURL+'fw_images/werken_langetermijn_schaduw_300dpi.gif');
	div.appendChild(img3);
	var chec = CreateCheckBox('3');
	div.appendChild(chec);
	var txt = CreateText('Lange termijn');
	div.appendChild(txt);

	map.addControlsToMap('controls', google.maps.ControlPosition.BOTTOM);
}

function ShowDirection(id) {
	var checked = document.getElementById(id).checked;
	ShowRoadWorkType(id, checked);
}

function CreateText(innerHTML) {
	var txt = document.createElement('text');
	txt.innerHTML = innerHTML;
	return txt;
}


function GetJSONObjectFromDB(opt, fctCallBack, showWaitCursor){
    $.ajax({
       type: "POST",
       url: BASEURL + "jquery",
       data: opt,
       success:fctCallBack,
       async: true,
       beforeSend: function(){
           if(showWaitCursor != false){
                $('#loading').css({
                    display: ''
                })
                $('body').css('cursor', 'wait');
                setMapCursor('wait');
           }
        },
       complete: function(){
           if(showWaitCursor != false){
                $('#loading').css({
                  display: 'none'
                });
                $('body').css('cursor', 'auto');
                setMapCursor('crosshair');
           }
       }
    });
}

function GetJSONObjectFromDBSyncron(opt, fctCallBack, showWaitCursor){
    $.ajax({
       type: "POST",
       url: BASEURL + "jquery",
       data: opt,
       success:fctCallBack,
       async:false,
       beforeSend: function(){
            if(showWaitCursor != false){
                $('#loading').css({
                    display: ''
                })
                $('body').css('cursor', 'wait');
                setMapCursor('wait');
            }
        },
       complete: function(){
           if(showWaitCursor != false){
                $('#loading').css({
                  display: 'none'
                });
                $('body').css('cursor', 'auto');
                setMapCursor('crosshair');
           }
       }
    });
}

function setMapCursor(cursor){
   try{
        if(map != null){
            map.setOptions({
               draggableCursor: cursor
            })
        }
   }
   catch(err){}
}


function showCustomWait(value){
    if(value == true){
        $('#customLoading').css({
            display: ''
        });
        $('body').css('cursor', 'wait');
        setMapCursor('wait');
    }else{
        $('#customLoading').css({
            display: 'none'
        });
        $('body').css('cursor', 'auto');
        setMapCursor('crosshair');
    }
}

function TransformStringCoordonateToLatLonArray(inputCoordonate, order){
	var array = new Array();
	
	var points = inputCoordonate.split(';');
	var offset = 1;
	if(points.length == 1)
		offset = 0;
	
	for(var i=0;i<points.length - offset;i++){
		var point = points[i];
		var p = point.split(',');
		
		array.push(new google.maps.LatLng(p[1], p[0]));
	}
	
	return array;
}

function GetLatLngBoundsFromLatLngArray(inputLatLngArray){
	var bounds = new google.maps.LatLngBounds();
	for(var i = 0;i< inputLatLngArray.length; i++){
		bounds.extend(inputLatLngArray[i]);
	}
	return bounds;
}

function getUrlVars(){
	var map = {};
	var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
	map[key] = value;
	});
	return map; 
}