//<![CDATA[
    
    	// make an icon class:
	// Create our base icon
	var baseIcon = new GIcon();
	baseIcon.shadow = "/images/clear_block.gif";
	baseIcon.iconSize = new GSize(25, 25);
	baseIcon.shadowSize = new GSize(1, 1);
	baseIcon.iconAnchor = new GPoint(9, 34);
	baseIcon.infoWindowAnchor = new GPoint(1, 1);
	baseIcon.infoShadowAnchor = new GPoint(1, 1);
	// stuff for side mouseover
	var sidebar_html = "";
	var lastState="";
	var gbarbs = [];
	var gbarbsDiv = [];
	var gbarbsDiv_last = [];
	var gdata =[];
	var gdata_last = [];
      	var htmls = [];
	//var popStations = [];
      	var j = 0;
	var state='';
        var xcradius = 50;
        var xclat = 39.78954439311164;
        var xclon = -105.04714965820312;
        var firstZoomLevel = 10;
	var stationsFrameContent = "";
	var stationsFrameContentBeg = '<div>Click on Headers to Sort Columns!</div><table class="sort-table" id="table-1" border=0 cellpadding="1" cellspacing="0"><thead><tr><td>Station</td><td>Temp</td><td>Wind</td><td>Dir<td>Gust</td><td>Elev</td><td>RH</td><td>DP</td><td>Lat</td><td>Lon</td></tr></thead>';
	var stationsFrameContentEnd = '</table>';
	var dataHighlightOn = 'background:white;color:red;padding:1px;border:1px solid #999999';
	var dataHighlightOff = 'background:transparent;color:black;padding:0;border:none;';
	var freshInstance = 1;
        var noDataMessage = 'We can\'t seem to find any data for this location. Sometimes, this is due to network issues or high server loads.Try requesting the data again. If this error continues, please modify your settings and try again.<br><br><div align="center"><input type="button" value="Close" onclick="generalMessage.Clear()"/></div>';
        var poweredByHtml = 'Powered by <a href="http://www.met.utah.edu/mesowest" target="_new">MesoWest</a>';
        var welcomeHtml ='	<div align="right"><a href="javascript:void(0);" onclick="generalMessage.Clear()">Close</a></div>	<b>Welcome to XCSkies Real-Time Surface Winds</b>        <br><br>        This application is powered by Google Maps and MesoWest. The combination of these two        resources yield a surprisingly useful tool for reviewing real-time surface weather observations across North America.        <br><br>        Here\'s how to get started:        <br>        1. Select a Radius in miles to determine how much data you\'re after.        <br><br>         2. Choose a time limit on how old you\'d like data to be considered for mapping.        <br><br>        3. Zoom around on the map and single click on any location within the US and Canada.        <br><br>                Click "Save Settings" on the top right corner above the map to save the settings for that exact view.        The next time you visit the site, that exact view will be retrieved with the most current surface observations.        <br><br>        Additional products and services will be coming soon. Check the site often and enjoy.        <br><br>        -The XCSkies Development Team        <br><br>	<div style="font-size:80%"><input type="checkbox" value=1" onclick="removeWelcome()">Click here to not see this message again.</div>	<br>	<div align="center"><input type="button" value="Close" onclick="generalMessage.Clear()"/></div>';
	var geocoder = null;
        var address = '';
        
	function barbObject() {
		this.temp='';
		this.rh='';
		this.dp='';
		this.stats24 = '';
		this.current = '';
		this.wspd = '';
		this.gust = '';
		this.wdir = '';
		this.lat = '';
		this.lon = '';
		this.sizex = '';
		this.sizey = '';
		this.anchx = '';
		this.anchy = '';
		this.wdirt = '';
		this.sid = '';
		this.sname = '';
		this.ltime = '';
	}
	
        function showAddress(map,address) {
            if (geocoder) {
            geocoder.getLatLng(
               address,
               function(point) {
                  if (!point) {
                  alert(address + " not found");
                  } else {
                  var zoomLevel = map.getZoom();
                  map.setCenter(point, zoomLevel);
                  map.clearOverlays();
                  var marker = new GMarker(point);
                  map.addOverlay(marker);
                  marker.openInfoWindowHtml(address);
                  xcradius = document.getElementById("radius").value;
                  xclat = point.y;
                  xclon = point.x;
                  changeMap();
                  }
               }
            );
            }
         }
    	function onLoad() {
		if (j!=0){GUnload()}
		this.map = new GMap2(document.getElementById("map"));
        document.getElementById("map").style.backgroundColor="white";

		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
        map.addControl(new GScaleControl());
        map.addControl(new GOverviewMapControl());
		map.setCenter(new GLatLng(37., -100.), 5);
        geocoder = new GClientGeocoder();
        
		map.removeMapType(G_NORMAL_MAP);
		map.removeMapType(G_SATELLITE_MAP);
		map.removeMapType(G_HYBRID_MAP);
		
		map.addMapType(G_SATELLITE_MAP);
		map.addMapType(G_HYBRID_MAP);
		map.addMapType(G_PHYSICAL_MAP);
		map.addMapType(G_NORMAL_MAP);
		
		var mapControl = new GHierarchicalMapTypeControl();
		// Set up map type menu relationships
		mapControl.clearRelationships();
		mapControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "Labels", false);
		
		// Add control after you've specified the relationships
		map.addControl(mapControl);
		
		map.enableScrollWheelZoom();
		map.setMapType(G_PHYSICAL_MAP);

		// display the loading message
      		this.om = new OverlayMessage(document.getElementById('map'));
		this.omTime = new TimeMessage(document.getElementById('map'));
               this.generalMessage = new GeneralMessage(document.getElementById('map'));
               this.poweredByMessage = new FAQMessage(document.getElementById('map'));
		// ====== set up marker mouseover tooltip div ======
      		this.tooltip = document.createElement("div");
      		map.getPane(G_MAP_FLOAT_PANE).appendChild(tooltip);
      		tooltip.style.visibility="hidden";
                if (address != '' && this.freshInstance == 1) {
                  showAddress(map,address);
                } else {
                  if (j==0){
                           changeMap();
                  }
                }
		GEvent.addListener(map, "zoomend", function(zstart, zend) {
			if (j!=0){
				barbOverlays();
				dataOverlays();
			}
		});
                GEvent.addListener(map, "moveend", function() {
                  resetEmailLink();
		});
                
		
                var welcomeCookie = readCookie('xcnowelcome');
		if (welcomeCookie != '1') {
			generalMessage.Set(welcomeHtml,'60%');
		}
                poweredByMessage.Set(poweredByHtml);
                
		makeClickListener();
                initializeMapTiles();
                resetEmailLink();
                window.onresize= resizeMap;
                return this.map;
	}
        function resetEmailLink() {
            //emailThisPage
            var center = map.getCenter();
            var zoomLevel = map.getZoom();
            var i = document.forms['settings'].radius.options.selectedIndex;
            var radius = document.forms['settings'].radius.options[i].value;
            document.getElementById("emailThisPage").href='mailto:?subject=XC Skies Surface Winds&body='+escape('http://apps.xcskies.com/xc/surface/xcmap.cgi?lat='+center.y+'&lon='+center.x+'&zoom='+zoomLevel+'&radius='+radius);
            document.getElementById("linkThisPage").innerHTML='http://apps.xcskies.com/xc/surface/xcmap.cgi?lat='+center.y+'&lon='+center.x+'&zoom='+zoomLevel+'&radius='+radius;
        }
        function setLayer() {
            
               for (i=0;i<document.layerForm.layerBase.length;i++){
                  if (document.layerForm.layerBase[i].checked==true)
                  var theone=i;
               }
               //alert(document.layerForm.layerBase[theone].value);
               var baseLayerName = document.layerForm.layerBase[theone].value;
               if (baseLayerName == 'demis'){
                  var baseLayer = demis;
               } else if (baseLayerName == 'gMap') {
                  var baseLayer = G_NORMAL_MAP.getTileLayers()[0];
               } else if (baseLayerName == 'gSat') {
                  var baseLayer = G_SATELLITE_MAP.getTileLayers()[0];
               } else if (baseLayerName == 'gHybrid') {
                  var baseLayer = G_HYBRID_MAP.getTileLayers()[0];
               } else if (baseLayerName == 'gRoads') {
                  var baseLayer = G_HYBRID_MAP.getTileLayers()[1];
               }
               baseLayer.getOpacity = function() {return document.getElementById("slider1Opacity").innerHTML;}
               var customMapLayer=[baseLayer];
                 
               // consider the overlays now
               for (i=0;i<document.layerForm.layerOverlay.length;i++){
                  if (document.layerForm.layerOverlay[i].checked==true) {
                     if (document.layerForm.layerOverlay[i].value == 'usRadar'){
                        nrRadar.getOpacity = function() {return document.getElementById("slider4Opacity").innerHTML;}
                        customMapLayer.push(nrRadar);
                     }
                     if (document.layerForm.layerOverlay[i].value == 'usSatVis'){
                        conusGOESVis.getOpacity = function() {return document.getElementById("slider2Opacity").innerHTML;}
                        customMapLayer.push(conusGOESVis);
                     }
                     if (document.layerForm.layerOverlay[i].value == 'usSatIr'){
                        conusGOESIr.getOpacity = function() {return document.getElementById("slider3Opacity").innerHTML;}
                        customMapLayer.push(conusGOESIr);
                     }
                     if (document.layerForm.layerOverlay[i].value == 'usCounties'){
                        tileCounty.getOpacity = function() {return document.getElementById("slider5Opacity").innerHTML;}
                        customMapLayer.push(tileCounty);
                     }
                     if (document.layerForm.layerOverlay[i].value == 'gRoads'){
                        G_HYBRID_MAP.getTileLayers()[1].getOpacity = function() {return document.getElementById("slider6Opacity").innerHTML;}
                        customMapLayer.push(G_HYBRID_MAP.getTileLayers()[1]);
                     }
                  }
               }
               

               var customMapType = new GMapType(customMapLayer, G_SATELLITE_MAP.getProjection(), "xcmap", G_SATELLITE_MAP);
               map.addMapType(customMapType);
               map.setMapType(customMapType);
        }
        
        function satOpen (lat,lon,zoom,mode) {
                     //var radius = document.getElementById("radius").value;
                     var zoomIn = zoom+1;
                     if (zoomIn >= 6){zoomIn=6}
                     var zoomOut = zoom-1;
                     if (zoomOut <= 0){zoomOut=1}
                     if (mode=='satvis'){var altMode = 'satir';var modeText='IR';var modeTextNow='Visible'}
                     if (mode=='satir'){var altMode = 'satvis';var modeText='Visible';var modeTextNow='Infrared'}
                     var modeHtml = '<a href="javascript:void(0);" onclick="satOpen('+lat+','+lon+','+zoom+',\''+altMode+'\')">View '+modeText+'</a>';
                     var zoomHtmlIn = '<input type="button" value="Zoom In" onclick="satOpen('+lat+','+lon+','+zoomIn+',\''+mode+'\')"/>';
                     var zoomHtmlOut = '<input type="button" value="Zoom Out" onclick="satOpen('+lat+','+lon+','+zoomOut+',\''+mode+'\')"/>'; //"
                     if (zoom==6){zoomHtmlIn=''}
                     if (zoom==1){zoomHtmlOut=''}
                     var satImage = 'http://'+mode+'.wunderground.com/cgi-bin/satBanner?satellite=1&lat='+lat+'&lon='+lon+'&width=600&height=400&zoom='+zoom;
                     var closePop = '<div class="closeStation">Satellite Image: '+modeTextNow+'Mode<span class="closeStationX"><a href="javascript:void(0);" onclick="dd.elements.satWindow.hide();">X</a></span></div>';
                     var htmlSat = closePop+'<table><TR><TD align="center"><img src="'+satImage+'" border="0" width="600" height="400"/></TD><td align="center">'+modeHtml+'<br><br><br>'+zoomHtmlIn+'<br><br>'+zoomHtmlOut+'</td></TR></table><div align="center">Satellite Images Courtesy of wundergound.com <a href="http://www.wunderground.com" target="_new"><img src="/images/wund2.gif"></a></div>';
                     
                     dd.elements.satWindow.write(htmlSat);
                     dd.elements.satWindow.resizeTo(700,470);
                     dd.elements.satWindow.show();
         }
        function makeClickListener() {
         this.clickListener=GEvent.addListener(map, 'click', function(overlay, point) {
                  //if (overlay) {return;}
                  if (document.radius_form.click_options.value=='visSat' || document.radius_form.click_options.value=='irSat') {
                     if (document.radius_form.click_options.value=='visSat') {var mode = 'satvis'}
                     if (document.radius_form.click_options.value=='irSat') {var mode = 'satir'}
                     var zoomLevel = map.getZoom();
                     var zoom = 1;
                     if (zoomLevel <= 3 ) {var zoom = 1;};
                     if (zoomLevel == 4 ) {var zoom = 2;};
                     if (zoomLevel == 5 ) {var zoom = 3;};
                     if (zoomLevel == 6 ) {var zoom = 4;};
                     if (zoomLevel == 7 ) {var zoom = 5;};
                     if (zoomLevel >= 8 ) {var zoom = 6;};
                     satOpen(point.y,point.x,zoom,mode);
                     //var dummy = window.open('http://'+mode+'.wunderground.com/cgi-bin/satBanner?satellite=1&lat='+point.y+'&lon='+point.x+'&width=600&height=600&zoom='+zoom,'satwindow','width=620,height=620,scrollbars=yes,resizable=yes,location=no,menubar=no');
                  } else {
                     xcradius = document.getElementById("radius").value;
                     xclat = point.y;
                     xclon = point.x;
                     var zoomLevel = map.getZoom();
                     if (zoomLevel ==5 ) {
                        zoomLevel=9;
                     }
                     map.setCenter(new GLatLng(xclat, xclon), zoomLevel);
                     //add overlay here...
                     //if (this.radiusPoint) {
                     //   map.removeOverlay(radiusPoint);
                     //}
                     //this.radiusPoint = map.addOverlay(new GMarker(point));
                     changeMap();
                  }
		});
         }
         function removeClickListener() {
            GEvent.removeListener(clickListener)
         }
	function remoteDataCall() {
		var xmlUrl = document.getElementById("xmlUrl").value;
		om.Set('<img src="/images/sun12.gif" border=0/><b>Getting Data...</b>');//"
                //document.getElementById('debug').innerHTML=xmlUrl;
                window.frames['backgroundGet'].location=xmlUrl;
                
		return;
	}
	function dataOverlays() {
		var overlayTypeIndex = document.dataTypeForm.overlayType.selectedIndex;
		var overlayType = document.dataTypeForm.overlayType.options[overlayTypeIndex].value;
		
		var gdata =[];
		var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.fromDivPixelToLatLng(new GPoint(0,0),true),map.getZoom());
		var pane = map.getPane(G_MAP_MARKER_PANE);
		//remove old overplots
		for (var k = 0; k < gdata_last.length; k++) {gdata_last[k].parentNode.removeChild(gdata_last[k]);}
		if (overlayType != ''){
			for (var o = 0; o < gbarbs.length; o++) {
				this.dataOver = document.createElement("div");
				var marker = gbarbs[o];
				
				var gmData = marker[overlayType];
				if (gmData == ''){gmData=' '}
				dataOver.innerHTML = '<div name="dataOver" id="dataOver" class="over">'+gmData+'</div>';
				var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(new GLatLng(marker.lat,marker.lon),map.getZoom());
				dataOver.style.position='absolute';
				dataOver.style.left=(offset.x - point.x + 4) + 'px';
				dataOver.style.top=(offset.y - point.y - 8 ) + 'px';
				pane.appendChild(dataOver);
				gdata[o] = dataOver;
			}
		}
		
		gdata_last = gdata;
		var highlightFlag = 0;
		highlightData(highlightFlag);
	}
	
	function barbOverlays() {
		var gbarbsDiv = [];
		var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.fromDivPixelToLatLng(new GPoint(0,0),true),map.getZoom());
		var pane = map.getPane(G_MAP_MARKER_PANE);
		//remove old overplots
		for (var k = 0; k < gbarbsDiv_last.length; k++) {gbarbsDiv_last[k].parentNode.removeChild(gbarbsDiv_last[k]);}
		
		for (var o = 0; o < gbarbs.length; o++) {
			var marker = gbarbs[o];
			//quickplot this barb
			var dataOver = document.createElement("div");
			var wspd_b = marker.wspd;
			if (wspd_b < 3 && wspd_b != 0 ){wspd_b = 3};
			if (wspd_b=='') {wspd_b=0;}
			var imgHtml = '<img src="http://www.met.utah.edu/droman/images/barbs/'+marker.qcdir+'/'+wspd_b+'_'+marker.wdir+'.gif" border="0"/>';
			dataOver.innerHTML = '<a class="barb" href="javascript:myclick(' + o + ')" onmouseover="mymouseover('+o+')" onmouseout="mymouseout()">' + imgHtml + '</a>';
			var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(new GLatLng(marker.lat,marker.lon),map.getZoom());
			dataOver.style.position='absolute';
			dataOver.style.left=(offset.x - point.x - marker.anchx) + 'px';
			dataOver.style.top=(offset.y - point.y - marker.anchy) + 'px';
			gbarbsDiv[o] = dataOver;
			pane.appendChild(dataOver);
		}
		
		gbarbsDiv_last = gbarbsDiv;
	}
	
    	function makeBarbs(map){
                var xmlUrl = document.getElementById("xmlUrl").value;
		// load a hidden frame which xfers the js arrays 
		// this seems to be more efficient than the Google GXml features!
		// because parsing XML locally is inefficient for a users browser
		
		this.freshInstance = 0;
		lastState = state;
		var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.fromDivPixelToLatLng(new GPoint(0,0),true),map.getZoom());
                if (ltimes[0] != '') {
			//must be data
                     for (var i = 0; i < ltimes.length; i++) {
                              var marker=new createBarb(i,point);
                              j++;
                     }
                     //once zoom level is settled, plot the data
                     barbOverlays();
                     dataOverlays();
                     
                     window.frames.stationsFrame.document.getElementById("list").innerHTML = stationsFrameContentBeg + stationsFrameContent + stationsFrameContentEnd;
                     window.frames.stationsFrame.sortLoad();
                     window.frames.stationsFrame.document.getElementById("number").innerHTML = j + ' Active stations reporting.';
                } else {
			clearmessage();
			//pop no data message
			generalMessage.Set(noDataMessage,'40%');
                        //alert('no data');
			return;
		}

		var refreshTime = new Date();
		
		var time1a = refreshTime.getHours();
		var time1b = refreshTime.getMinutes();
		if (String(time1a).length == 1){time1a='0'+time1a}
		if (String(time1b).length == 1){time1b='0'+time1b}
		
		omTime.Set('Refreshed on: '+(refreshTime.getMonth()+1)+'/'+refreshTime.getDate()+'/'+refreshTime.getFullYear() + ' at ' +time1a+':'+time1b);//
		// remove the loading message when the page has finished loading
		clearmessage();
	}
	
	function createBarb(i,point) {
		var marker = new barbObject();
		
		// data load
		var ltime = ltimes[i];
		var wspd = cwspds[i];
		var wdir = cwdirs[i];
		var sizex = sizexs[i];
		var sizey = sizeys[i];
		var anchx = anchxs[i];
		var anchy = anchys[i];
		var utime = utimes[i];
		var wdirt = cwdirts[i];
		var gust = cwgsts[i];
		var temp = ctemps[i];
		var rh = crhs[i];
		var dp = cdps[i];
		var sid = sids[i];
		var sname = snames[i];
		var selev = selevs[i];
		var maxt = maxts[i];
		var mint = mints[i];
		var maxrh = maxrhs[i];
		var minrh = minrhs[i];
		var maxdp = maxdps[i];
		var mindp = mindps[i];
		var maxgust = maxgusts[i];
		var qcflag = qcflags[i];
		var lat = lats[i];
		var lon = lons[i];

		var qcdir = 'good';
		if (qcflag == 1) {var qcdir = 'caution'}
		if (qcflag == -1) {var qcdir = 'suspect'}
		if (wdir == ''){wdir = 0}
		marker.temp = temp;
		marker.dp = dp;
		marker.rh = rh;
		marker.wspd = wspd;
		marker.gust = gust;
		marker.wdir = wdir;
		marker.lat = lat;
		marker.lon = lon;
		marker.anchx = anchx;
		marker.anchy = anchy;
		marker.sizex = sizex;
		marker.sizey = sizey;
		marker.wdirt = wdirt;
		marker.sname = sname;
		marker.sid = sid;
		marker.ltime = ltime;
		marker.selev = selev;
		marker.maxt = maxt;
		marker.mint = mint;
		marker.maxrh = maxrh;
		marker.minrh = minrh;
		marker.maxdp = maxdp;
		marker.mindp = mindp;
		marker.maxgust = maxgust;
		marker.qcdir = qcdir;
		marker.qcflag = qcflag;
                marker.etime_series = etime_series[i];
                marker.wind_series = wind_series[i];
                marker.wgust_series = wgust_series[i];
                marker.wdirt_series = wdirt_series[i];
                marker.temp_series = temp_series[i];
                marker.rh_series = rh_series[i];
                marker.tfile = tfile;
                
		gbarbs[j] = marker;
		
		//make the right iframe info html
		if (wspd == ''){wspd='&nbsp;'}
		if (gust == ''){gust='&nbsp;'}
		if (temp == ''){temp='&nbsp;'}
		if (rh == ''){rh='&nbsp;'}
		if (dp == ''){dp='&nbsp;'}
		if (wdirt == ''){wdirt='&nbsp;'}
		
		var qccolor = 'green';
		if (qcflag == 1) {qccolor = 'orange'}
		if (qcflag == -1) {qccolor = 'red'}
		stationsFrameContent += '<tr><td class="o" nowrap><a href="javascript:window.parent.myclick(' + j + ')" onmouseover="window.parent.mymouseover('+j+')" onmouseout="window.parent.mymouseout()"><span style="background:'+qccolor+'">&nbsp;&nbsp;</span>&nbsp;' + sname + '</a><br />'+ltime+'</td><td>'+temp+'</td><td nowrap>'+wspd+'</td><td>'+wdirt+'</td><td>'+gust+'</td><td>'+selev+'</td><td>'+rh+'</td><td>'+dp+'</td><td>'+Math.round(100*lat)/100+'</td><td>'+Math.round(100*lon)/100+'</td></tr>';
		
		return marker;
	}


	// ====== This function displays the tooltip ======
	// it can be called from an icon mousover or a sidebar mouseover
	
	function showTooltip(marker) {
		// === store the name so that the tooltip function can use it ===
		var gust = '';
		if (marker.gust != '') {gust = ' gusting to ' + marker.gust};
		var qc = '<span style="color:green">OK</span>';
		if (marker.qcflag=='-1') {var qc = '<span style="color:red">Suspect</span>';}
		if (marker.qcflag=='1') {var qc = '<span style="color:orange">Caution</span>';}
		
		var ttip = '<div class="tooltip">';
                ttip += '<div>'+marker.sname+' (' + marker.sid + ')&nbsp;&nbsp;&nbsp;'+qc+'</div>';
		ttip += '<div>Elev: '+marker.selev+' ft.</div>';
		ttip += '<table cellspacing=0 border=0 cellpadding=0><tr><th>Time</th><th>Temp</th><th>Wind</th><th>Dir</th><th>Gust</th></tr>';
                
                for (var i = 0; i < marker.etime_series.length; i++) {
                  ttip += '<tr><td>'+marker.etime_series[i]+'</td><td>'+marker.temp_series[i]+'</td><td>'+marker.wind_series[i]+'</td><td>'+marker.wdirt_series[i]+'</td><td>'+marker.wgust_series[i]+'</td></tr>';
                }
                ttip += '</table></div>';

		tooltip.innerHTML = ttip;
		var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.fromDivPixelToLatLng(new GPoint(0,0),true),map.getZoom());
		var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(new GLatLng(marker.lat,marker.lon),map.getZoom());
		
		var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(offset.x - point.x - marker.anchx + parseInt(marker.sizex), offset.y - point.y  -(parseInt(marker.sizey)/2.)));
		pos.apply(tooltip);
		tooltip.style.visibility="visible";
                
                this.outlineOver = document.createElement("div");
		
		var imgHtml = '<img src="/images/red_circlea.gif" border="0"/>';
		outlineOver.innerHTML = imgHtml;//'<div style="width:20px;height:20px;position:absolute;z-index:-999;background:red">&nbsp;</div>';
		var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(new GLatLng(marker.lat,marker.lon),map.getZoom());
		outlineOver.style.position='absolute';
		outlineOver.style.left=(offset.x - point.x -16) + 'px';
		outlineOver.style.top=(offset.y - point.y - 16) + 'px';
		map.getPane(G_MAP_MAP_PANE).appendChild(outlineOver);
	}


	// ===== This function is invoked when the mouse goes over an entry in the sidebar =====
	// It launches the tooltip on the icon      
	function mymouseover(i) {
		//showTooltip(gmarkers[i])
		showTooltip(gbarbs[i])
                removeClickListener();
                outlineOver.style.visibility="visible";
	}
	// ===== This function is invoked when the mouse leaves an entry in the sidebar =====
	// It hides the tooltip      
	function mymouseout() {
               outlineOver.style.visibility="hidden";
		tooltip.style.visibility="hidden";
                makeClickListener();
	}
	
	// This function picks up the sidebar click and opens the corresponding info window
	function myclick(i) {
		outlineOver.style.visibility="hidden";
                marker = gbarbs[i];
                
                var sheight = dd.elements.stationWindow.h;
                var swidth = dd.elements.stationWindow.w;
                var sheightVal = sheight-90;
                var closePop = '<div class="closeStation">'+marker.sname+' - Last 24 Hours<span class="closeStationX"><a href="javascript:void(0);" onclick="closeStationWindow();">X</a></span></div>';
		var qc = '<span style="color:green">OK</span>';
		if (marker.qcflag=='-1') {var qc = '<span style="color:red">Suspect</span>';}
		if (marker.qcflag=='1') {var qc = '<span style="color:orange">Caution</span>';}
		
		var htmlHeader = closePop+'<div class="obHeader">Observation Time: '+marker.ltime+'<br>Elevation: '+marker.selev+' ft. &nbsp;&nbsp;&nbsp;More info: <a href="http://www.met.utah.edu/cgi-bin/droman/meso_base.cgi?stn='+marker.sid+'" target="_new">' +marker.sid + '</a>&nbsp;&nbsp;&nbsp;'+qc+'</div>';
                var htmlSite = htmlHeader+'<div align="center"><iframe id="stationIframe" name="stationIframe" width="93%" height="'+sheightVal+'" src="/cgi-bin/surface/xc_24_hour_obs.pl?tfile='+marker.tfile+'&sid='+marker.sid+'"></iframe></div>';
                
                dd.elements.stationWindow.write(htmlSite);
                dd.elements.stationWindow.resizeTo(swidth,sheight)
                //dd.elements.stationWindow.setOpacity(.1)
                dd.elements.stationWindow.show();

                return;
	}
	function closeStationWindow() {
               var add = document.getElementById("stationIframe");
               if (add) {
                  add.style.visibility = 'hidden';
                  add.style.display = 'none';
               };
               dd.elements.stationWindow.hide();
               return;  
        }
	// remove the loading message when the page has finished loading
      	function clearmessage() {
        	om.Clear();
      	}
	
	function clearMap(map) {
		for (var k = 0; k < gbarbsDiv_last.length; k++) {gbarbsDiv_last[k].parentNode.removeChild(gbarbsDiv_last[k]);}
		for (var k = 0; k < gdata_last.length; k++) {gdata_last[k].parentNode.removeChild(gdata_last[k]);}
		gbarbsDiv_last = [];
		gdata_last = [];
		j=0;
		window.frames.stationsFrame.document.getElementById("list").innerHTML = '';
		window.frames.stationsFrame.document.getElementById("number").innerHTML = '';
		stationsFrameContent = '';
	}
    //]]>
	
	function resizeMap() {
                var offset = 100;
		var e = document.getElementById("map");
		var f = document.getElementById("mapTD");
		var windowHeight = dd.getWndH();
		var height = windowHeight - offset - 30;
		if (height >= 0) {
			e.style.height = height + "px";
			f.style.height = height + "px";
		}
        }

   function changeMap(map) {
      if (document.getElementById('useCurrentTime').checked) {
      	resetCurrentTime();
	}
      
      var i = document.forms['settings'].radius.options.selectedIndex;
      var xcradius = document.forms['settings'].radius.options[i].value;
      
      var i = document.forms['settings'].timeobs.options.selectedIndex;
      var timeobs = document.forms['settings'].timeobs.options[i].value;
      
      var time1 = document.getElementById("time1").value;
      var year1 = document.getElementById("year1").value;
      var month1 = document.getElementById("month1").value;
      var day1 = document.getElementById("day1").value;
      
      var dataUnitsIndex = document.dataTypeForm.dataUnits.selectedIndex;
      var dataUnits = document.dataTypeForm.dataUnits.options[dataUnitsIndex].value;
      
      var accumulate = document.forms['settings'].accumulate.checked;
      if (accumulate != '1') {
         // reset some vals
	stationsFrameContent = "";
	gbarbs = [];
	clearMap(map);
      }
     
      // check cookie for values
      if (this.freshInstance==1 && xclat==0 && xclon==0) {
         //alert('fresh');
      	var tmp = readCookie('xcradius');
	if (tmp!='' && tmp!=null){
               xcradius = tmp;
		var idx = getOptionIndex('settings','radius',tmp);
		document.forms['settings'].radius.options[idx].selected=true;
	}
	var tmp = readCookie('xctimeobs');
	if (tmp!='' && tmp!=null){
               timeobs=tmp;
		var idx = getOptionIndex('settings','timeobs',tmp);
		document.forms['settings'].timeobs.options[idx].selected=true;
	}
	var tmp = readCookie('xcdataUnits');
	if (tmp!='' && tmp!=null){
               dataUnits = tmp;
		var idx = getOptionIndex('dataTypeForm','dataUnits',tmp);
		document.forms['dataTypeForm'].dataUnits.options[idx].selected=true;
	}
	var tmp = readCookie('xcoverlayType');
	if (tmp!='' && tmp!=null){
		var idx = getOptionIndex('dataTypeForm','overlayType',tmp);
		document.forms['dataTypeForm'].overlayType.options[idx].selected=true;
	}
	var tmp = readCookie('xchighlight');
	if (tmp!='' && tmp!=null){
		if (tmp=='1'){
			document.forms['dataTypeForm'].highlight.checked=true;
		} else {
			document.forms['dataTypeForm'].highlight.checked=false;
		}
	}
        }
        
         var tmpa = readCookie('xclat');
         var tmpb = readCookie('xclon');
         var tmpc = readCookie('xczoom');
         if ((tmpa!='' && tmpa!=null && tmpb!='' && tmpb!=null  && tmpc!='' && tmpc!=null && this.freshInstance==1 && (xclat==0 && xclon==0)) ){
                  xclat=tmpa;
                  xclon=tmpb;
                  this.map.setCenter(new GLatLng(tmpa,tmpb),parseInt(tmpc));
         } else if (xclat != 0 && xclon != 0 && firstZoomLevel != 0 && this.freshInstance == 1) {
            this.map.setCenter(new GLatLng(xclat,xclon),firstZoomLevel);
         }
      
      if (xclat==0 || xclon==0 || xcradius==0) {return};
      if (parseInt(year1) >= 1997 && new Date().getUTCFullYear() >= parseInt(year1)){
         var randomnumber=Math.floor(Math.random()*101);
         var unique = new Date().getTime() + randomnumber;
      	var newUrl = '/cgi-bin/surface/xc_get_data.pl?day1='+day1+'&month1='+month1+'&year1='+year1+'&time1='+time1+'&timeobs='+timeobs+'&unit='+dataUnits+'&radius='+xcradius+'&lat='+xclat+'&lon='+xclon+'&tfile='+unique;
      	//alert(newUrl);
	document.getElementById("xmlUrl").value = newUrl;
        remoteDataCall();
	} else {
		alert ("Date must be from 1997 to current.");
		return;
	}
   }
   
   function getOptionIndex(formName,name,val){
   	for (var k = 0; k < document.forms[formName][name].length; k++) {
		if (val == document.forms[formName][name].options[k].value){return k}
	}
   }
   
   function showTable() {
	//var hideB = document.getElementById('hideTableButton');
	//hideB.style.visibility='visible';
	//var showB = document.getElementById('showTableButton');
	//showB.style.visibility='hidden';
	
        //var showB = document.getElementById('mapTD');
	//showB.style.width='60%';
        //var showT = document.getElementById('stationsFrame');
	//showT.style.width='100%';
         
        //dd.elements.stationsDiv.resizeTo(dd.elements.stationsDiv.defw,dd.elements.stationsDiv.defh-50);
        //dd.elements.stationsDiv.moveTo(dd.elements.stationsDiv.defx,dd.elements.stationsDiv.defy);
        //dd.elements.resizehandle2.moveTo(dd.elements.stationsDiv.x+dd.elements.stationsDiv.w-dd.elements.resizehandle2.w-2, dd.elements.stationsDiv.y+dd.elements.stationsDiv.h-dd.elements.resizehandle2.h-2);
        // set iframe to ??
        //showT.style.height='350px';
   }
   function hideTable() {
   	var showT = document.getElementById('stationsDiv');
        showT.style.position='absolute';
        var showT = document.getElementById('stationsFrame');
	showT.style.width='0px';
	//var hideB = document.getElementById('hideTableButton');
	//hideB.style.visibility='hidden';
	//var showB = document.getElementById('showTableButton');
	//showB.style.visibility='visible';
	var showB = document.getElementById('mapTD');
	showB.style.width='0px';
	dd.elements.stationsDiv.hide();
        
   }
   function pinTable() {
         var showT = document.getElementById('stationsDiv');
         showT.style.position='relative';
        var showB = document.getElementById('mapTD');
	showB.style.width='35%';
        
        //dd.elements.stationsDiv.hide();
        dd.elements.stationsDiv.maximizeZ();
        
        var windowHeight = dd.getWndH();
        var height = parseInt(windowHeight - 100 - 33);
        var width = parseInt(dd.getWndW() * .35);
        var showT = document.getElementById('stationsFrame');
        showT.style.height=height+'px';
        showT.style.width='100%';
        dd.elements.stationsDiv.moveTo(0,0);
        dd.elements.stationsDiv.resizeTo(width,height+20);
        //dd.elements.resizehandle2.moveTo(dd.elements.stationsDiv.x+dd.elements.stationsDiv.w-dd.elements.resizehandle2.w-2, dd.elements.stationsDiv.y+dd.elements.stationsDiv.h-dd.elements.resizehandle2.h-2);
        
   }
   function highlightData(highlightFlag) {	
	if (document.dataTypeForm.highlight.checked) {
		var d = document.getElementsByName('dataOver');
		for (var k = 0; k < d.length; k++){
			d[k].style.cssText=dataHighlightOn;
		}
	} else {
		if (highlightFlag == 1){
			var d = document.getElementsByName('dataOver');
			for (var k = 0; k < d.length; k++){
				d[k].style.cssText=dataHighlightOff;
			}
		}
	}
   }
   
   	function createCookie(name,value,days)
	{
		if (days)
		{
			var date = new Date();
			date.setTime(date.getTime()+(days*24*60*60*1000));
			var expires = "; expires="+date.toGMTString();
		}
		else var expires = "";
		document.cookie = name+"="+value+expires+"; path=/";
	}
	
	function readCookie(name)
	{
		var nameEQ = name + "=";
		var ca = document.cookie.split(';');
		for(var i=0;i < ca.length;i++)
		{
			var c = ca[i];
			while (c.charAt(0)==' ') c = c.substring(1,c.length);
			if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
		}
		return null;
	}
	
	function eraseCookie()
	{
		createCookie("xcradius","",-1);
		createCookie("xctimeobs","",-1);
		createCookie("xcdataUnits","",-1);
		createCookie("xcoverlayType","",-1);
		createCookie("xclat","",-1);
		createCookie("xclon","",-1);
		createCookie("xczoom","",-1);
                createCookie("xchighlight","",-1);
                createCookie("xcnowelcome","",-1);
                alert('Your default settings have been removed.');
	}
	
	function saveCookie() {
		var i = document.forms['settings'].radius.options.selectedIndex;
		radius = document.forms['settings'].radius.options[i].value;
		createCookie('xcradius',radius,100);
                var i = document.forms['settings'].timeobs.options.selectedIndex;
		var timeobs = document.forms['settings'].timeobs.options[i].value;
		createCookie('xctimeobs',timeobs,100);
		var i = document.dataTypeForm.dataUnits.selectedIndex;
		var dataUnits = document.dataTypeForm.dataUnits.options[i].value;
		createCookie('xcdataUnits',dataUnits,100);
		var i = document.forms['dataTypeForm'].overlayType.options.selectedIndex;
		var overlayType = document.forms['dataTypeForm'].overlayType.options[i].value;
		createCookie('xcoverlayType',overlayType,100);
		
                //center, zoomlevel
		var center = map.getCenter();
		var zoomLevel = map.getZoom();
		createCookie('xclat',center.y,100);
		createCookie('xclon',center.x,100);
		createCookie('xczoom',zoomLevel,100);
		
		if (document.dataTypeForm.highlight.checked) {
			createCookie('xchighlight','1',100);
		} else {
			createCookie('xchighlight','0',100);
		}
		
		
		alert('Your settings have been saved in a cookie. \nThe next time you visit this site, this "view" will be retrieved.');
	}
	
	function resetCurrentTime() {
		var refreshTime = new Date();
		var year1 = refreshTime.getUTCFullYear();
		var month1 = refreshTime.getUTCMonth()+1;
		var day1 = refreshTime.getUTCDate();
		var time1a = refreshTime.getUTCHours();
		var time1b = refreshTime.getUTCMinutes();
		if (String(time1a).length == 1){time1a='0'+time1a}
		if (String(time1b).length == 1){time1b='0'+time1b}
		document.getElementById("time1").value = time1a+':'+time1b;
		document.getElementById("year1").value = year1;
		document.getElementById("month1").value = month1;
		document.getElementById("day1").value = day1;
	}
        function showDateSection () {
   	var showD = document.getElementById('dateSelect');
	showD.style.visibility='visible';
	var hideD = document.getElementById('dateSelectLink');
	hideD.style.visibility='hidden';
   }
   function removeWelcome() {
      createCookie('xcnowelcome','1',100);
   }
   function initializeMapTiles() {
               // Create tile layers
               this.tileCountry= new GTileLayer(new GCopyrightCollection(""),1,17);
               tileCountry.myLayers='country';
               tileCountry.myFormat='image/gif';
               tileCountry.myBaseURL='http://chignik.berkeley.edu/cgi-bin/mapserv440?map=/usr/local/web/html/google/wms.map&';
               tileCountry.getTileUrl=CustomGetTileUrl;
               //tileCountry.getOpacity = function() {return 0.5;}
            
               this.tileCounty= new GTileLayer(new GCopyrightCollection(""),1,17);
               tileCounty.myLayers='us_county';
               tileCounty.myFormat='image/png';
               tileCounty.myBaseURL='http://chignik.berkeley.edu/cgi-bin/mapserv440?map=/usr/local/web/html/google/wms.map&';
               tileCounty.getTileUrl=CustomGetTileUrl;
               tileCounty.getOpacity = function() {return 0.7;}
            
               this.tileDoq= new GTileLayer(new GCopyrightCollection(""),1,17);
               tileDoq.myLayers='doq';
               tileDoq.myFormat='image/jpeg';
               tileDoq.myBaseURL='http://terraservice.net/ogcmap.ashx?';
               tileDoq.getTileUrl=CustomGetTileUrl;
               
               // Nexrad radar US
               this.nrRadar= new GTileLayer(new GCopyrightCollection(""),1,17);
               nrRadar.myLayers='nexrad-n0r';
               nrRadar.myFormat='image/png';
               nrRadar.myBaseURL='http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi?';
               nrRadar.getTileUrl=CustomGetTileUrl;
               //nrRadar.getOpacity = function() {return 0.8;}
               
               // GEOS CONUS Visible
               this.conusGOESVis= new GTileLayer(new GCopyrightCollection("xxx"),1,17);
               conusGOESVis.myLayers='conus_vis_4km';
               conusGOESVis.myFormat='image/png';
               conusGOESVis.myBaseURL='http://mesonet.agron.iastate.edu/cgi-bin/wms/goes/conus_vis.cgi?';
               conusGOESVis.getTileUrl=CustomGetTileUrl;
               //conusGOESVis.getOpacity = function() {return 1;}
               
               // GEOS CONUS IR
               this.conusGOESIr= new GTileLayer(new GCopyrightCollection(""),1,17);
               conusGOESIr.myLayers='conus_ir_4km';
               conusGOESIr.myFormat='image/png';
               conusGOESIr.myBaseURL='http://mesonet.agron.iastate.edu/cgi-bin/wms/goes/conus_ir.cgi?';
               conusGOESIr.getTileUrl=CustomGetTileUrl;
               //conusGOESIr.getOpacity = function() {return 0.5;}
               
               // GEOS WEST Vis
               this.GOESWestVis= new GTileLayer(new GCopyrightCollection(""),1,17);
               GOESWestVis.myLayers='goes_west_vis';
               GOESWestVis.myFormat='image/png';
               GOESWestVis.myBaseURL='http://mesonet.agron.iastate.edu/cgi-bin/wms/goes/west_vis.cgi?';
               GOESWestVis.getTileUrl=CustomGetTileUrl;
               //GOESWestVis.getOpacity = function() {return 0.5;}
               
                // GEOS EAST Vis
               this.GOESEastVis= new GTileLayer(new GCopyrightCollection(""),1,17);
               GOESEastVis.myLayers='goes_east_vis';
               GOESEastVis.myFormat='image/png';
               GOESEastVis.myBaseURL='http://mesonet.agron.iastate.edu/cgi-bin/wms/goes/east_vis.cgi?';
               GOESEastVis.getTileUrl=CustomGetTileUrl;
               //GOESEastVis.getOpacity = function() {return 0.5;}
               
               // demis base
               this.demis= new GTileLayer(new GCopyrightCollection(""),1,17);
               demis.myLayers='Bathymetry,Topography,Hillshading,Waterbodies,Rivers,Streams,Cities,Coastlines';
               demis.myFormat='image/png';
               demis.myBaseURL='http://www2.demis.nl/wms/wms.asp?SERVICE=WMS&WMS=WorldMap&';
               demis.getTileUrl=CustomGetTileUrl;
               //demis.getOpacity = function() {return 1;}
               
               // demis Blue Marble
               this.demisBm= new GTileLayer(new GCopyrightCollection(""),1,17);
               demisBm.myLayers='Earth Image,Borders,Coastlines';
               demisBm.myFormat='image/png';
               demisBm.myBaseURL='http://www2.demis.nl/wms/wms.asp?SERVICE=WMS&WMS=BlueMarble&';
               demisBm.getTileUrl=CustomGetTileUrl;
               
               return;
   }