dojo.require("esri.map");
 dojo.require("esri.toolbars.navigation"); 


    var map, queryTaskParish, queryParish, mapIdentifyX, mapIdentifyY;
    var symbol, infoTemplate, identifyHandle, navToolbar;

    //Extend the map object to provide getScale() function
    esri.Map.prototype.getScale = function() {
  
      var maxX = this.extent.xmax;
      var minX = this.extent.xmin;
      var maxY = this.extent.ymax;
      var minY = this.extent.ymin;
      var dpi = 96;
      var imageWidth = this.width;
      var imageHeight = this.height;
      var centerX = maxX - (maxX - minX) / 2;
      var centerY = maxY - (maxY - minY) / 2;
      var dpm = dpi / 2.54 * 100;
      var width = (imageWidth / 2) / dpm;
      var scale = (maxX - centerX) / width;
      return scale;
  };

  function Init() {

       // varible to keep track of when all layers have been loaded.
       var layersLoaded = 0;
       
	esriConfig.defaults.map.slider = { right:"35px", bottom:"5px", width:"200px", height:null};

       // loading image. id
       var loading = dojo.byId("loadingImg");  

       // set level of detail for cache. 10,000 and 1250 have not been set.
       var lods = [
            {"level" : 0, "resolution" : 211.667090000847, "scale" : 800000},
            {"level" : 1, "resolution" : 105.833545000423, "scale" : 400000},
	        {"level" : 2, "resolution" : 52.9167725002117, "scale" : 200000},
	        {"level" : 3, "resolution" : 26.4583862501058, "scale" : 100000},
	        {"level" : 4, "resolution" : 13.2291931250529, "scale" : 50000},
	        {"level" : 5, "resolution" : 6.61459656252646, "scale" : 25000},
	        {"level" : 6, "resolution" : 2.64583862501058, "scale" : 10000},
	        {"level" : 7, "resolution" : 1.32291931250529, "scale" : 5000},
	        {"level" : 8, "resolution" : 0.661459656252646, "scale" : 2500}
        ];


            //var startExtent = new esri.geometry.Extent(375000, 504000, 450000, 559000, new esri.SpatialReference({ wkid: 27700 }) );
              
	    map = new esri.Map("map", { nav: true, lods: lods, displayGraphicsOnPan: !dojo.isIE });

	    //map.setExtent(startExtent, true);

	    dojo.connect(map, "onLoad", showLoading);
	    dojo.connect(map, "onZoomStart", showLoading);
	    dojo.connect(map, "onPanStart", showLoading);

        // reference the map service layers
	    var mapServiceLayer1 = new esri.layers.ArcGISTiledMapServiceLayer("http://spatial.durham.gov.uk/ArcGIS/rest/services/External/Background_InterMap/MapServer", { displayLevels: [0, 1, 2, 3, 4, 5], opacity: 0.4 });
	    dojo.connect(mapServiceLayer1, "onUpdate", hideLoading);

	    var mapServiceLayer2 = new esri.layers.ArcGISTiledMapServiceLayer("http://spatial.durham.gov.uk/ArcGIS/rest/services/External/Background_10k/MapServer", { displayLevels: [6], opacity: 0.4 });
	    dojo.connect(mapServiceLayer2, "onUpdate", hideLoading);

	    var mapServiceLayer3 = new esri.layers.ArcGISTiledMapServiceLayer("http://spatial.durham.gov.uk/ArcGIS/rest/services/External/Background_OSMM_Render/MapServer", { displayLevels: [7, 8], opacity: 0.4 });
	    dojo.connect(mapServiceLayer3, "onUpdate", hideLoading);

	    var mapServiceLayer4 = new esri.layers.ArcGISDynamicMapServiceLayer("http://spatial.durham.gov.uk/ArcGIS/rest/services/External/PROW/MapServer");
	    dojo.connect(mapServiceLayer4, "onUpdate", hideLoading);
 
        // add each layer in turn
        map.addLayer(mapServiceLayer1);
        map.addLayer(mapServiceLayer2);
        map.addLayer(mapServiceLayer3);
        map.addLayer(mapServiceLayer4);

        // set up query tasks

        queryTaskParish = new esri.tasks.QueryTask("http://spatial.durham.gov.uk/ArcGIS/rest/services/External/PROW/MapServer/2");

        queryParish = new esri.tasks.Query();
        queryParish.returnGeometry = false;
        queryParish.outFields = ["PAR_NAME"];
        queryParish.where = "1=1";

        // execute Parish query to populate parish drop down list
        queryTaskParish.execute(queryParish, populateParishList);

        // set template for path details
        infoTemplate = new esri.InfoTemplate("Path", "Status: ${STATUS}<br />Parish: ${PARISH}<br />Path Number: ${PROW_NO__F}<br />Path Ref Number: ${PROW_UNIQU}<br />");

        // set symbol for selected path
        symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 5);
        navToolbar = new esri.toolbars.Navigation(map);

        function showLoading() {
        
            // show loading image
            esri.show(loading);
            //map.hideZoomSlider();
        }

        function hideLoading() {
        
            // hide loading image
            layersLoaded++;
            
            // only 2 layer images get generated
            if (layersLoaded == map.layerIds.length - 2) {
                esri.hide(loading);
                //map.showZoomSlider();
                layersLoaded = 0;
            }
        }

        dojo.connect(map, "onLoad", function() {
        
            // after map loads, connect to listen to mouse move & drag events
            dojo.connect(map, "onMouseMove", showCoordinates);
            dojo.connect(map, "onMouseDrag", showCoordinates);
        });

        dojo.connect(map, "onExtentChange", showExtent);

    }
  
  dojo.addOnLoad(Init);