// --------------------------------------------------------------------------------
// This file contains the javascript functions used by the Actic Sea Ice Application.
// --------------------------------------------------------------------------------

//Parameters for map informaiton
var map, imageryPrime, SiteLocations;
var iTip, iw;
var startExtent, spatialRef;
var identifyTask, identifyParams, symbol;
var siteGraphicsAtts = [];
var highlightSymbol, icesymbol, northpolesymbol, highlightGraphic;

//Paramaeters for querying and jumping to anchors
var siteName, vanchor, tmpanchor;

function Init() {
    detectBrowser();
	
	//Set the initial extent and create the map window	
	spatialRef = new esri.SpatialReference({wkid:102017});
	startExtent = new esri.geometry.Extent();
	startExtent.xmin = -6492638.731;
	startExtent.ymin = -3736640.477;
	startExtent.xmax = 6650010.314;
	startExtent.ymax = 2683370.652;	
	map = new esri.Map("mapDiv", {nav:false, slider:false});
    map.setExtent(startExtent);
	
	imageryPrime = new esri.layers.ArcGISTiledMapServiceLayer("/ArcGIS/rest/services/gfl_modis/MapServer");
	//imageryPrime = new esri.layers.ArcGISDynamicMapServiceLayer("/ArcGIS/rest/services/gfl_modis/MapServer");
	//imageryPrime.setImageFormat("jpg");		
	map.addLayer(imageryPrime);	
	
	SiteLocations = new esri.layers.ArcGISDynamicMapServiceLayer("/ArcGIS/rest/services/gfl_seaice_lambert_sde/MapServer", {id:"SiteLocations", visible:true});
	map.addLayer(SiteLocations);
	
	//iw = new my.InfoWindow(map);
	
	dojo.connect(map, "onLoad", initFunctionality);
	
	//Establish the display of the map coordinates	
	dojo.connect(map, "onMouseMove", showCoordinates);
	
	//Establish the display for the tool tip
	//iTip = new infoTip("iTipDiv", "infoTip bgimage", map.position, false);
	
	//map.setExtent(startExtent);  
		                      	
}
  
function initFunctionality(map) {
	showLoading();
    //build query task
    var queryTask = new esri.tasks.QueryTask("/ArcGIS/rest/services/gfl_seaice_lambert_sde/MapServer/0");
    //build query filter
    var query = new esri.tasks.Query();
    query.returnGeometry = true;
	query.outSpatialReference = 102017;
    query.outFields = ["PROJECT","SITE_NAME","anchor"];
    //query.where = "PROJECT = 'seaice' or PROJECT = 'northpole'";
    query.where = "PROJECT = 'seaice'";	
    var infoTemplate = new esri.InfoTemplate();
    infoTemplate.setTitle("GFL Sea Ice Location");
    infoTemplate.setContent("<div id=\"${anchor}\" align=left style=\"background-color: #EEEBE7; padding: 5px; color: #145285; border: 5px white groove; \">${SITE_NAME}<br><a href=\'javascript:gotoAnchor(\"${anchor}\");\'><font size=1 color=red>(Click for Site Info)</font></a></div> ");
    //infoTemplate.setContent("&nbsp;&nbsp;<font color=#ffffff>${SITE_NAME}<br>&nbsp;&nbsp;<a href=\'javascript:gotoAnchor(\"${anchor}\");\'></font><font size=1 color=red>(Click for Site Info)</font></a> ");

    //Can listen for onComplete event.
    dojo.connect(queryTask, "onComplete", function(featureSet) {

      map.graphics.clear();
      highlightSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,0,0,0.5]));

      icesymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 1), new dojo.Color([255,255,0,1]));

      //icesymbol = new esri.symbol.PictureMarkerSymbol('images/yellow-triangle_12x12.png',12,12);
      northpolesymbol = new esri.symbol.PictureMarkerSymbol('images/i_flag_20x20.png',20,20);
		
      var sitesGraphicsLayer = new esri.layers.GraphicsLayer();
      //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];
		 
		if (featureSet.features[i].attributes.project == 'northpole') 
		  graphic.setSymbol(northpolesymbol);
		else
		  graphic.setSymbol(icesymbol);
	
        graphic.setInfoTemplate(infoTemplate);
		
		// used to hightlight graphic features when selected from drop down list instead of map
		siteGraphicsAtts[i] = featureSet.features[i].attributes.anchor + "_" + featureSet.features[i].geometry.x + "_" + featureSet.features[i].geometry.y;
		//alert(siteGraphicsAtts[i]);		

        //Add graphic to the siteLocations graphics layer.
        sitesGraphicsLayer.add(graphic);		
      }
      map.addLayer(sitesGraphicsLayer);
      hideLoading();		  
      map.graphics.enableMouseEvents();
      //listen for when the onMouseOver event fires on the siteLocations layer
      dojo.connect(sitesGraphicsLayer, "onMouseOver", function(evt) {
        map.graphics.clear();  //use the maps graphics layer as the highlight layer
        var content = evt.graphic.getContent();
		tmpanchor = content.split("\"");
		vanchor = tmpanchor[1];
        var title = evt.graphic.getTitle();
        highlightGraphic = new esri.Graphic(evt.graphic.geometry,highlightSymbol);
        map.graphics.add(highlightGraphic);
		
        var g = evt.graphic;
	    map.infoWindow.resize(225, 85);
        map.infoWindow.setContent(g.getContent());
        map.infoWindow.setTitle(g.getTitle());
        map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));	
		//iw.setTitle("<br><font color=#ffffff><img src=\"/gfl_v2/gis/images/tools/gray_x_button.gif\" onclick=\"hideiw();\" height=15 width=15 align=right valign=top></font>");
        //iw.setContent(esri.substitute(evt.mapPoint, g.getContent()));
        //iw.show(evt.mapPoint, map.getInfoWindowAnchor(evt.screenPoint));			
				
		//if (evt.graphic.attributes.SITE_NAME == "North Pole")
  		//  iTip.setContent(evt.graphic.attributes.SITE_NAME);
		//else		
  		//  iTip.setContent(evt.graphic.attributes.SITE_NAME + "<br><font color=\"red\" size=1>Click to View Info</font>");
		  
  		//iTip.show(evt.screenPoint);
      });
	   	
	  dojo.connect(map.graphics, "onClick", gotoAnchor);  
      //dojo.connect(map.graphics, "onMouseOut", function(evt) {
		 //iTip.hide();
      //   map.graphics.clear();
		// map.infoWindow.hide();	 		 
      //});	 
    }); //end 'onComplete'

    queryTask.execute(query);

  } 
  
//jump to sea ice description blocks from map graphics
function gotoAnchor() {
   //alert('vanchor: ' + vanchor);
   if (vanchor == ""){
   } else {
    if (map.infoWindow.isShowing) map.infoWindow.hide();	
		//iw.hide();	    
	var yScroll = document.body.scrollTop;
	var xScroll = document.body.scrollLeft;
	document.getElementById("seaice").src="seaicedescript.html#" + vanchor;
	self.scrollTo(xScroll, yScroll);
   }
} 

// jump to sea ice description blocks from drop-down list
function jumptoAnchor() {
  if (map.infoWindow.isShowing) map.infoWindow.hide();	
		//iw.hide();      
  vanchor = document.getElementById("seaicesites").value;
  gotoAnchor();
  highlightsitegraphic();
}

// hightlight graphic feature if selected from drop-down list
function highlightsitegraphic() {
    //alert('in highlightsitegraphic:');
	map.graphics.clear();
	var splitList;
	for (i = 0; i < siteGraphicsAtts.length; i++) {
	  splitList = siteGraphicsAtts[i].split("_");
	  //alert(splitList[0]);
	  if (splitList[0] == vanchor) {
	    //alert('Jumping to ' + vanchor + '\nLong: ' + splitList[1] + '\nLat: ' + splitList[2]);
		var newGraphic = new esri.geometry.Point(splitList[1], splitList[2], new esri.SpatialReference({ wkid: 4326 }))
        highlightGraphic = new esri.Graphic(newGraphic,highlightSymbol);
        map.graphics.add(highlightGraphic);
		break;		
	  }
	}
}