//In the first section, you reference packages.
        dojo.require("dojo.parser"); 
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("esri.map");
 		dojo.require("esri.toolbars.navigation");
		dojo.require("dijit.form.Button");
		dojo.require("dijit.Toolbar");
		dojo.require("esri.tasks.geometry");
		dojo.require("esri.tasks.query");
        dojo.require("esri.tasks.find");
        dojo.require("dijit.TitlePane");
        dojo.require("dijit.ProgressBar");

        var baseLayer = "http://207.4.160.24/ArcGIS/rest/services/AG_SF/vendors/MapServer"
        
		var vendorLayerID, vendors_outfields, vendor_findFields
		vendorLayerID = '0';
        vendors_outfields = ["LOCATION","PRODUCT","CONTRACT","LAST_NAME", "FIRST_NAME"];
        vendor_findFields = ["PRODUCT", "CONTRACT", "LAST_NAME", "FIRST_NAME", "LOCATION"];
		
		
        var gridLayerID = '5';
        var gridFind_findFields = "GRID_ID";
        
        var vendors_title_content = "<b>${Contract}</b>"
        var vendors_id_content = "<p style='text-decoration:underline; font-weight: bold'>This Vendor Sells: </p><p>${Product}</p>";


        var currentResultSet, currentIndex, maxPage;                                 



        // symbols
        var selectedSymbol =
                  new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
                  new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                //  new dojo.Color([0, 255, 255]), 3), new dojo.Color([202, 225, 255, 0.50]));
				    new dojo.Color([255, 0, 0]), 3), new dojo.Color([225, 225, 225, 0.50]));

        var highlightSymbol =
                  new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
                  new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
              //    new dojo.Color([0, 255, 255]), 3), new dojo.Color([255, 255, 0, 0.50]));
  				  new dojo.Color([255, 0, 0]), 3), new dojo.Color([255, 255, 0, 0.50]));
  
      //In the second section, you include an initialization function and any supporting functions. 
        var map, navToolbar, myTiledMapServiceLayer,resizeTimer;
        var myAGSMapService; 
		var queryTask, query;
		var featureSet, fset; 
        var spLayer;
        var gsvc;
		var prjID, initialExtent;
		
		// toc global parameters
		var visible = [];
		var agsLayers = [];
		
		// find global parameters
        var find, params;
		var gridFind, params2
     
        function init() {

            
        
           var controlp = dojo.byId("results");

        // WGS84 SPATIAL REFERENCE
        priID = new esri.SpatialReference({ wkid: 2264 });
		
		initialExtent = new esri.geometry.Extent(2080700, 742300, 2089350, 747100, new esri.SpatialReference({ wkid: 2264 }));
		
		
		

           map = new esri.Map("mapDiv", {extent:initialExtent, nav: true, displayGraphicsOnPan: !dojo.isIE });

            myAGSMapService = new esri.layers.ArcGISTiledMapServiceLayer(baseLayer); //esri.layers.ArcGISDynamicMapServiceLayer(baseLayer);
		    map.addLayer(myAGSMapService);
			
			map.enableScrollWheelZoom();

			agsLayers[0] = myAGSMapService;
			
		    navToolbar = new esri.toolbars.Navigation(map);
		    dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);

		    var tb = new esri.toolbars.Navigation(map);

		    gsvc = new esri.tasks.GeometryService("http://207.4.160.24/arcgis/rest/services/Geometry/GeometryServer");
				
			// Create a Find Button
			find = new esri.tasks.FindTask(baseLayer);
            params = new esri.tasks.FindParameters();
            params.layerIds = [vendorLayerID];
            params.searchFields = [vendor_findFields];
            params.returnGeometry = true;



            dojo.connect(dojo.byId("searchText"), "onkeydown", function(evt) { if (isEnter(evt)) { doFind(); } });
            //dojo.connect(dojo.byId("gridText"), "onkeydown", function(evt) { if (isEnter(evt)) { doGridFind(); } });


            dojo.connect(window, 'onresize', function() { resizeMap([map]); });

            initIdentify();

            
            
         }  // end init Funtion


         function addGraphics(extent, delta, levelChange, lod) {

             dojo.byId("Text1").value = lod;

                 
             for (var i = 0; i < map.graphics.graphics.length; i++) {
                 var graphic = map.graphics.graphics[i];

                 if (graphic.geometry.x != "undefined") {
                     map.graphics.remove(graphic);
                 }

             }

             dojo.byId("Text3").value = map.graphics.graphics.length;
             
             var level = map.getLevel();
             if (level >= 5) {
                 //alert(map.getLevel());
                 //build query task
                 queryTask = new esri.tasks.QueryTask(baseLayer + "/" + vendorLayerID);

                 //build query filter
                 query = new esri.tasks.Query();
                 query.returnGeometry = true;
                 query.outFields = vendors_outfields;
                 query.geometry = map.extent;

                 var markerSymbol = new esri.symbol.PictureMarkerSymbol("images/fork.png", 24, 24);
                 var infoWindow = new esri.InfoTemplate(vendors_title_content, vendors_id_content);

                 //query.spatialRelationship = "SPATIAL_REL_CONTAINS";
                 queryTask.execute(query, function(fset) {
                     for (var i = 0; i < fset.features.length; i++) {
                         var graphic = fset.features[i];

                         var ext = graphic.geometry.getExtent();

                         var ptgraphic = new esri.Graphic(ext.getCenter(), markerSymbol, graphic.attributes, infoWindow);
                         //graphic.setSymbol(selectedSymbol);
                         map.graphics.add(ptgraphic);
                     }

                     dojo.byId("Text2").value = map.graphics.graphics.length;
                     
                 });
             }
             
            
            

         }
         
         

      // ########################################
         // TOOLBAR Functions

         // RESIZE THE MAP
         function resizeMap(maps) {
             clearTimeout(resizeTimer);
             resizeTimer = setTimeout(function() {
                 dojo.forEach(maps, function(aMap) {
                     aMap.resize();
                     aMap.reposition();
                 });
             }, 500);
         }
      
		function extentHistoryChangeHandler() {
		        //dijit.byId("zoomprev").disabled = navToolbar.isFirstExtent();
		        //dijit.byId("zoomnext").disabled = navToolbar.isLastExtent();
		      }



    // ##################################################
    // VENDOR FIND

      function doFind() {
		  
		if (dojo.byId("SearchBy").value == "SearchByRide")
		{
		vendorLayerID = '8';
        vendors_outfields = ["GRID_LOC", "Ride_Name", "Ride_Type"];
        vendor_findFields = ["Ride_Name", "Ride_Type", "GRID_LOC"];
		vendors_title_content = "<b>${Ride_Name}</b>"
        vendors_id_content = "<p style='text-decoration:underline; font-weight: bold'>The Ride Type: </p><p>${Ride_Type}</p>";
		
          params.layerIds = [vendorLayerID];
          params.searchFields = [vendor_findFields];
          params.returnGeometry = true;
		
		}
		
		else
		{
			
		vendorLayerID = '0';
		
        vendors_outfields = ["LOCATION","PRODUCT","CONTRACT","LAST_NAME", "FIRST_NAME"];
        vendor_findFields = ["PRODUCT", "CONTRACT", "LAST_NAME", "FIRST_NAME", "LOCATION"];
		var vendors_title_content = "<b>${Contract}</b>"
        var vendors_id_content = "<p style='text-decoration:underline; font-weight: bold'>This Vendor Sells: </p><p>${Product}</p>";
		
		  params.layerIds = [vendorLayerID];
          params.searchFields = [vendor_findFields];
          params.returnGeometry = true;
			
			
			}
		
         
          var txt = dojo.byId("searchText").value;

   
		  //add these lines to 
		  	

			
			
		  //end - add these lines to 
		  
			params.searchText = txt;
		  
		
          find.execute(params, showResults);
      }

      function showResults(results) {
          currentResultSet = results;
          currentIndex = 0;
          maxPage = 0;

          if (results.length <= 10)
              maxPage = 1;
          else {

              if ((results.length % 10) == 0)
                  maxPage = (results.length / 10);
              else
                  maxPage = Math.floor((results.length / 10)) + 1;
          }
          
          printResults();
      }

      function goPreviousResults() {
          currentIndex = currentIndex - 1
          printResults()
      }

      function goNextResults() {
          currentIndex = currentIndex + 1;
          printResults()
      }

       function printResults() {

           var results = currentResultSet;
           var startIndex = currentIndex * 10;
           var endIndex = (currentIndex + 1) * 10;
           if (results.length < endIndex)
               endIndex = results.length;
                      
           map.graphics.clear();

           // Create symbols for result features
           var symbol = new esri.symbol.SimpleFillSymbol();
           var highlightSymbol =
                  new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
                  new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                  new dojo.Color([0, 255, 255]), 3), new dojo.Color([20, 150, 235, 0.50]));

           // Create template for the info window
           infoTemplate = new esri.InfoTemplate(vendors_title_content, vendors_id_content);


           var result, attribs;
           var j = 0;
           var s = ["<table><tr class=\"results-header\"><td width=\"385px\"><strong>" + results.length +  " vendors or rides are found</strong></td></tr>"];
           for (var i = startIndex, il = endIndex; i < il; i++) {
                

               // get variables from the feature
               var curFeature = results[i];
               var graphic = curFeature.feature;

               //Add result feature to map
               graphic.setSymbol(selectedSymbol);
               graphic.setInfoTemplate(infoTemplate);
               map.graphics.add(graphic);

               result = results[i];
               attribs = result.feature.attributes;

               var cssClass = "results-row";
               if (i % 2 == 0)
                   cssClass = "results-row-alt";

               var location = attribs.LOCATION;
			   var Ride_Name = attribs.Ride_Name;
			//   alert("Contract:" + attribs.Contract  + "Ride name" + attribs.Ride_Name);
			   
			
			   
			   
			   //    var sLine = "<tr onmouseover=\"onRowMouseOver(" + j + ");\" onmouseout=\"onRowMouseOut(" + j + ");\" class=\"" + cssClass + "\" ><td align=\"top\"><img src=\"images/zoomtofeature.gif\" onmousedown=\"zoomTo(" + j + ");\" alt=\"zoomin\" /></td><td><div><p>" + attribs.Contract + "</p><p><small>" + attribs.Product + "</small></p></div></td></tr>";

			   
              // var sLine = "<tr onmouseover=\"onRowMouseOver(" + j + ");\" onmouseout=\"onRowMouseOut(" + j + ");\" class=\"" + cssClass + "\" ><td valign=\"middle\"><a href=\"javaScript:zoomto(" + j + ")\"><img src=\"images/zoomtofeature.jpeg\" onmousedown=\"zoomTo(" + j + ");\" align=\"left\"  vspace=\"5\" hspace=\"5\" /></a>" + attribs.Contract + ": --- <small>" + attribs.Product + "</small></td></tr>";
			   var sLine;
		
			  	   if (Ride_Name === undefined)	{		   
                 sLine = "<tr class=\"" + cssClass + "\" ><td><a href=\"#\"><img src=\"images/zoomtofeature.jpeg\" onclick=\"zoomTo(" + j + ");\" align=\"left\"  vspace=\"5\" hspace=\"5\" /></a><strong>" + attribs.Contract + "</strong><br /> <small>" + attribs.Product + "</small></td></tr>";
			   }
			   
			   else
			   {
			   		 sLine = "<tr class=\"" + cssClass + "\" ><td><a href=\"#\"><img src=\"images/zoomtofeature.jpeg\" onclick=\"zoomTo(" + j + ");\" align=\"left\"  vspace=\"5\" hspace=\"5\" /></a><strong>" + attribs.Ride_Type + "</strong> <br /> <small>" + attribs.Ride_Name + "</small></td></tr>";
			   }
			   
			   
               s.push(sLine);
               j++
           }
           
           s.push("</table>");

           if (maxPage !== 1) {

               // print the paging information at bottom...
               var prevTag, nextTag;
               var footer = "";

               if (currentIndex !== 0)
                   prevTag = "<div class=\"footer-inside\" onmousedown=\"goPreviousResults();\" style=\"float:left\"><a href=\"*\"> << Previous Page </a></div>";
               else
                   prevTag = "";

               if (currentIndex < maxPage - 1)
                   nextTag = "<div class=\"footer-inside\" onmousedown=\"goNextResults();\" style=\"float:right\"><a href=\"*\"> Next Page >> </a></div>";
               else
                   nextTag = "";
				   
               footer = "<div class=\"footer\">" + prevTag + nextTag + "</div>";

               s.push(footer);
           }
           
           
           dojo.byId("results").innerHTML = s.join("");


       }
      
      
      
      
//      function zoomVendor(value) {
//      
//            //build query task
//    		queryTask = new esri.tasks.QueryTask(baseLayer + '/' + vendorLayerID);

//   			//build query filter
//    		query = new esri.tasks.Query();
//    		query.returnGeometry = true;
//    		query.outFields = vendors_outfields;
//    		query.where = "LOCATION = '" + value + "'";
//    		
//    		queryTask.execute(query, function(fset) {
//              if (fset.features.length === 1) {
//                zoomMap(fset.features[0]);
//                showFeature(fset.features[0]);
//              } else if (fset.features.length !== 0) {
//                zoomMap(fset.features[0]);
//                showFeature(fset.features[0]);
//              }
//              else {
//                alert('no results returned from the server');
//                }
//            });
//    		      
//      }



       function clearAllGraphics() {

           dojo.byId("results").innerHTML = "";
           map.graphics.clear();
           dojo.byId("searchText").value = "";
           
       }

		

        //#########################################################
        // Identify
        function executeQueryTask(evt) {
		        map.infoWindow.hide();
		        map.graphics.clear();
		        featureSet = null;
		
		        //onClick event returns the evt point where the user clicked on the map.
		        //This is contains the mapPoint (esri.geometry.point) and the screenPoint (pixel xy where the user clicked).
		        //set query geometry = to evt.mapPoint Geometry
		        query.geometry = evt.mapPoint;
		        
		        //Execute task and call showResults on completion
		            queryTask.execute(query, function(fset) {
		              if (fset.features.length === 1) {
		                showFeature(fset.features[0],evt);
		              } else if (fset.features.length !== 0) {
		                showFeatureSet(fset,evt);
		              }
		              else {
		                alert('no features found');
		                }
		            });

		      }
		      

	      function showFeature(feature,evt) {
	        map.graphics.clear();

	        //set symbol
	        var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5]));
	        //var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 10,new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5]))
	        feature.setSymbol(symbol);
	        	            
			var infoTemplate = new esri.InfoTemplate(vendors_title_content, vendors_id_content);
	
			var graphic = feature;
            graphic.setSymbol(symbol);

            //Set the infoTemplate.`
            graphic.setInfoTemplate(infoTemplate);

            //Add graphic to the map graphics layer.
            map.graphics.add(graphic);
	
			map.infoWindow.setContent(graphic.getContent());
			map.infoWindow.setTitle(graphic.getTitle());
			
            map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));

	        (evt) ? map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint)) : null;
	      }
	
	      function showFeatureSet(fset,evt) {
	        //remove all graphics on the maps graphics layer
	        map.graphics.clear();
	        var screenPoint = evt.screenPoint;
	        featureSet = fset;
	
	        var numFeatures = featureSet.features.length;
	
	        //QueryTask returns a featureSet.  Loop through features in the featureSet and add them to the infowindow.
	        var title = "You have selected " + numFeatures + " fields.";
	        var content = "Please select desired field from the list below.<br />";
	
	        for (var i=0; i<numFeatures; i++) {
	          var graphic = featureSet.features[i];
	          content = content + graphic.attributes.FIELD_NAME + " Field (<A href='javascript:showFeature(featureSet.features[" + i + "]);'>show</A>)<br/>";
	        }
	        map.infoWindow.setTitle(title);
	        map.infoWindow.setContent(content);
	        map.infoWindow.show(screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
	      }

		function initIdentify() {
 			//Listen for click event on the map, when the user clicks on the map call executeQueryTask function.
        	//	dojo.connect(map, "onClick", executeQueryTask);

        		//Listent for infoWindow onHide event
        		dojo.connect(map.infoWindow, "onHide", function() {map.graphics.clear();});

        		//build query task
        		queryTask = new esri.tasks.QueryTask(baseLayer + '/' + vendorLayerID);

        		//Can listen for onComplete event to process results or can use the callback option in the queryTask.execute method.
        		//dojo.connect(queryTask, "onComplete", showResults);

       			//build query filter
        		query = new esri.tasks.Query();
        		query.returnGeometry = true;
        		query.outFields = vendors_outfields;

        		//alert("here");
			
		}
		
		function initOnMouseOver() {
		    initFunctionality(map);
		}



       function initFunctionality(map) {
        //build query task
        var queryTask = new esri.tasks.QueryTask(baselayer + '/' + vendorLayerID);

        //build query filter
        var query = new esri.tasks.Query();
        query.returnGeometry = true;
        query.outFields = [vendors_outfields];

        var infoTemplate = new esri.InfoTemplate();
        infoTemplate.setTitle(vendors_title_content);
        infoTemplate.setContent(vendors_id_content);
        map.infoWindow.resize(245,125);

        //Can listen for onComplete event to process results or can use the callback option in the queryTask.execute method.
        dojo.connect(queryTask, "onComplete", function(featureSet) {
          map.graphics.clear();
          //var highlightSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 3), new dojo.Color([125,125,125,0.35]));
          //var highlightSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 3);
          //var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,255,255,0.35]), 1),new dojo.Color([125,125,125,0.35]));

          //QueryTask returns a featureSet.  Loop through features in the featureSet and add them to the map.
          for (var i=0, il=featureSet.features.length; i<il; i++) {
            //Get the current feature from the featureSet.
            //Feature is a graphic
            var graphic = featureSet.features[i];
           // graphic.setSymbol(symbol);
            graphic.setInfoTemplate(infoTemplate);

            //Add graphic to the map graphics layer.
            map.graphics.add(graphic);
          }
          map.graphics.enableMouseEvents();
          dojo.connect(map.graphics, "onMouseOver", function(evt) {
            var content = evt.graphic.getContent();
            map.infoWindow.setContent(content);
            var title = evt.graphic.getTitle();
            map.infoWindow.setTitle(title);
            evt.graphic.setSymbol(highlightSymbol);

            map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
          });
          dojo.connect(map.graphics, "onMouseOut", function(evt) {
            map.infoWindow.hide();
            evt.graphic.setSymbol(symbol);
          });
        });

        queryTask.execute(query);
      }


      // Highlight the feature when the mouse hovers over the corresponding grid row

      function onRowMouseOver(index) {

          var selectedGraphic = map.graphics.graphics[index];
    

          selectedGraphic.setSymbol(highlightSymbol);
          selectedGraphic.show();
          return

      }

      // Remove feature highlight when mouse goes off the corresponding grid row
      function onRowMouseOut(index) {
          var selectedGraphic = map.graphics.graphics[index];
          selectedGraphic.setSymbol(selectedSymbol);
          //selectedGraphic.hide();
          
          return
      }


      function zoomTo(index) {

          var selectedGraphic = map.graphics.graphics[index];
          zoomMap(selectedGraphic.geometry);
		  //highlight the graphic with yellow color
		  
		  selectedGraphic.setSymbol(highlightSymbol);
		   
          selectedGraphic.show();
		 
			 

      }



 	  
	  // #################################################################
      // General functions

      function zoomToInitialExtent() {

          map.setExtent(myAGSMapService.fullExtent);

      }
	  
	  function centerMap(feature){
		   
            var fExtent = feature.geometry.getExtent();
            var centerPt = new esri.geometry.Point;
            centerPt = fExtent.getCenter();
            map.centerAt(centerPt);
			 
        }
		   
      function zoomMap(geometry){
		   
            var fExtent = geometry.getExtent();
		

		if (fExtent.getHeight() < 150) {
			var dx, dy;
			var centerPt = new esri.geometry.Point;
                        centerPt = fExtent.getCenter();

			var xmin,ymin,xmax,ymax;
			xmin = centerPt.x - (150/2);
			ymin = centerPt.y - (150/2);
			xmax = centerPt.x + (150/2);
			ymax = centerPt.y + (150/2);
	
			var nExtent = new esri.geometry.Extent(xmin,ymin,xmax,ymax,geometry.spatialReference);

			map.setExtent(nExtent);
		    }
		else {
			map.setExtent(fExtent);
		}
        }
	  
	  
	    function toggleProgressBar() {
		    var progressbar_container = dojo.byId("progressbar_container");
			var control_panel = dojo.byId("control_panel");
				
			if (progressbar_container.style.display=="block") {
			    progressbar_container.style.display="none";
            }
            else {
                progressbar_container.style.display="block";
            }
        }
        
        
        function showTab(tabName) {
        
                    
            var cp = dojo.byId(tabName);
            
            if (cp.style.display=="none") {
                cp.style.visibility="visible";
                cp.style.display = "block";
                }
            else {
                cp.style.visibility="hidden";
                cp.style.display = "none";
            }



        }

        function isEnter(e) {
            if (window.event)  // IE
                if (window.event.keyCode == 13)
                return true;
            else
                return false;
            else if (e.which) // Netscape/Firefox/Opera
            {
                //alert(e.which);
                if (e.which == 13)
                    return true;
                else
                    return false;
            }
        }
      // END (General functions)
      // #################################################################
	  


    // ########################################################
    // zoom to the grid	  
    function doGridFind() {
        
            
        
        //build query task
    		queryTask = new esri.tasks.QueryTask(baseLayer + '/' + gridLayerID);

            var value = dojo.byId("gridText").value;
            
   			//build query filter
    		query = new esri.tasks.Query();
    		query.returnGeometry = true;
    		query.outFields = ["GRID_ID"];
    		query.where = "GRID_ID = '" + value + "'";
    		
    		//alert(baseLayer + '/' + gridLayerID);
    		
    		queryTask.execute(query, function(fset) {
              if (fset.features.length === 1) {
                zoomMap(fset.features[0].geometry);                
              } else if (fset.features.length !== 0) {
                zoomMap(fset.features[0].geometry);                
              }
              else {
                alert('no results returned from the server');
                }
            });
        
        
      }

    // ########################################################
    // END - zoom to the grid	



              //In the third section, you specify what happens during the addOnLoad event.
              dojo.addOnLoad(init);