// JScript source code
/*
 * $Workfile: atolInteractControl.js $
 * $Revision: 91 $
 *  $Modtime: 13/08/10 14:26 $
 *   $Author: Aamir.afridi $ 
 */

if (!Astun) var Astun = {};
if (!Astun.iSharemaps) Astun.iSharemaps = {};
Astun.iSharemaps.OLInteractCtrl = Class.create({

	initialize: function (olmap)
	{
	/**
	* Function: initialize, creates the object 
	*
	* Parameters:
	* olmap - {object} olmap object
	*
	* Returns:
	* l
	*/
		this.clickedInfo = '';
		this.shapeClickedInfo = '';
		this.mapWrapper = olmap;
		
	}, 
	
	showMapToolTip: function (evt)
	{ //onMapToolTip
		/**
		* Function: showMapToolTip
		* Draws a popup containing feature properties info on feature hover
		*
		* {this} is assumed to be an <Astun.iSharemaps.OLMap> object, 
		* should be passed through from calling function
		*
		* Parameters:
		* evt - {object} Open layer evt object 
		*
		* Returns:
		* showMapToolTip
		*/
	
		 var evtElement = evt.memo.mapEvent.originalTarget || evt.memo.mapEvent.srcElement;
		 if (
			!( this.getISMLayers().length > 0 ) || 
			( 
				!evtElement.map &&
				!(evtElement.id === evtElement.parentNode.id + '_GroupDiv') &&
				!(evtElement.id === evtElement.parentNode.id + '_FrameDecorationImg_4') 	
			)		  
			) {
			// Test to see if layers are selected and hover is actually over the map. If not then return.
			return; 
		}
		var mapWrapper = this;
		/////////// Delay and setTimeout is set in atolMapWrapper.js OR Astun global settings ///////////
		//var pauseDelay = (mapWrapper.infoPopup) ? 600 : 300; // if a map tip popup already exists then take longer
		var en = this.map.getLonLatFromPixel(evt.memo.mapEvent.xy);
		function clearPopup() {
			mapWrapper.map.removePopup(mapWrapper.infoPopup);
			mapWrapper.infoPopup = null;
		} 
		var oMap = this.map;
										
		var queryType = 'info' ;
		
		//clearTimeout(mapWrapper.timers.hover);
		//mapWrapper.timers.hover = setTimeout(function() { 
			mapWrapper.getMapMultiInfo(
				en, 
				12, 
				queryType , 
				function(response, mapWrapper, queryOptions) 
				{
					if (mapWrapper.infoPopup) {clearPopup();}
					var htmlDiv='<div class="atPopupFeatureInfo">';
					if (response.unexpectedResponse) {
						var displayname = '';
						//htmlFormat = '' + response.unexpectedResponse;
					}
					else {
						var featureCollectionArray = response;
						while (featureCollectionArray.length > 0) {
							var featureCol = featureCollectionArray.shift();
							for (i = 0; i < featureCol.features.length; i++) {
								htmlDiv += featureCol.features[i].properties.html;
							}
						}		
						htmlDiv += '</div>';	
					    var anchorIcon = OpenLayers.Marker.defaultIcon();									
					    var featurePopup = new OpenLayers.Popup.FramedCompact
					    (
						    null, 
						    en, 
						    new OpenLayers.Size(150, 150), 
						    htmlDiv, 
						    {size: new OpenLayers.Size(1, 1), pixel: new OpenLayers.Pixel(0, 0)}, 
						    true,  // close box
						    function(evt) 
							    {
								    this.hide();
								    clearPopup();
								    OpenLayers.Event.stop(evt);
							    },
							astun.settings.baseURL+'css/jQuery/'+ astun.settings.themeName + '/images/popup-bg.png'
							
					    );															
					    featurePopup.autoSize = true;
					    featurePopup.panMapIfOutOfView = true;
					    mapWrapper.map.addPopup(featurePopup);
					    mapWrapper.infoPopup = featurePopup;
					}
				}
			) 
		//}, 
		//pauseDelay);
	}, //onMapToolTip
	
	
	onInfoClick: function (evt)
	{ //onInfoClick
		/**
		* Function: onInfoClick
		* Draws a popup containing feature properties on clicking on a map feature
		*
		* {this} is assumed to be a <Astun.iSharemaps.OLMap> object
		*
		* Parameters:
		* evt - {object} Open layer evt object 
		*
		* Returns:
		* 
		* Revision History:
		* 08/01/2009 -  Prak -   Corrected error when dragging map
		* 07/01/2009 -  Prak -   First Investigations
		*
		*/
				
				clearTimeout(this.timers.hover);
				var en = this.map.getLonLatFromPixel(evt.memo.mapEvent.xy);
				var queryType = 'info' ;						
									
				var triggerEvent = function(response, OLMap, queryOptions ) 						
				{
						var htmlFormat='';
						if(response.unexpectedResponse) {
							var displayname = '';
							var htmlFormat = '' + response.unexpectedResponse;
						}
						else {
							var featureCollectionArray = response.slice();
							while (featureCollectionArray.length > 0) {
								var featureCol = featureCollectionArray.shift();
								htmlFormat += featureCol.properties.htmlHeader;
								for ( i=0; i<featureCol.features.length; i++)
								{
									htmlFormat +=  featureCol.features[i].properties.html  ;
								}	
								htmlFormat += featureCol.properties.htmlFooter;
							}								
						}
						this.clickedInfo = htmlFormat ;
						OLMap.mapElement.fire("astun:resultsReceived", {'type': 'infoClick', 'html': htmlFormat, 'json': response, 'queryOptions':queryOptions} );
				};
				this.getMapMultiInfo
				(	
						en, 
						12, 
						queryType , 
						triggerEvent
				)
				
	}, //onInfoClick
	
	getNearestFeatures: function( evt )
	{
		var geometry = evt.geometry.toString(),
			queryType = 'shapeInfo';
		
		var triggerEvent = function(response, OLMap, queryOptions )
				{
						var htmlFormat='';
						if(response.unexpectedResponse) {
							var displayname = '';
							var htmlFormat = '' + response.unexpectedResponse;
						}
						else {
							var featureCollectionArray = response;
								featureCollectionArray = featureCollectionArray.slice();
							while (featureCollectionArray.length > 0) {
								var featureCol = featureCollectionArray.shift();
								htmlFormat += featureCol.properties.htmlHeader;
								for ( i=0; i<featureCol.features.length; i++)
								{
									htmlFormat +=  featureCol.features[i].properties.html  ;
								}	
								htmlFormat += featureCol.properties.htmlFooter;
							}								
						}
						this.shapeClickedInfo = htmlFormat ;
						OLMap.mapElement.fire("astun:resultsReceived", {'type': 'infoClick', 'html': htmlFormat, 'json':response, 'queryOptions':queryOptions} );
				};
				
				astun.mapWrapper.getMapMultiInfo
				(	
						geometry, 
						0, 
						queryType , 
						triggerEvent
				)
	},
	
	findNearest: function (evt )
	{ //findNearest
		/**
		* Function: findNearest
		* Displays a set of features of interest within a distance range as makers
		*
		* {this} is assumed to be a <Astun.iSharemaps.OLMap> object
		*
		* Parameters:
		* evt - {object} Open layer evt object 
		*
		* Returns:
		* 
		*/
	
				var layer = evt.memo.layer;
				var en = this.currentPosition  || this.map.getCenter();
				if ( this.query.popups.length > 0 )
				{
					while ( this.query.popups.length)
					{
						this.map.removePopup(this.query.popups.pop());
					}
				}		
				this.deleteMarker(this.currentLocation.marker);
				this.currentLocation.marker = null;
				
				var showMyNearest = function(response, OLMap, queryOptions) 
				{//ShowFeatures
					if(response.unexpectedResponse) {
						var displayname = '';
						var htmlResponse = '' + response.unexpectedResponse;
					}
					else {
						var featureCollectionArray = response.slice();
						var featureCol = featureCollectionArray[0];	
						var html = '';
						var popupBounds = new OpenLayers.Bounds();
						popupBounds.extend(OLMap.currentPosition);
						OLMap.query.layer = featureCol.properties.layer;
						//Turn on the layer - or not - this is being handled elsewhere?
						//OLMap.addISMLayer(OLMap.query.layer);
						OpenLayers.Popup.FramedCloud.prototype.fixedRelativePosition = true;
						OpenLayers.Popup.FramedCloud.prototype.relativePosition = "tr"; 
						html += featureCol.properties.htmlHeader;
						var features = featureCol.features.slice();
						while ( features.length )
						{
							var feature = features.shift(); // 
							/* extend boundaries */
												
							var lonLat = new OpenLayers.LonLat(feature.geometry.coordinates[0][0], feature.geometry.coordinates[0][1]);
							
							popupBounds.extend(lonLat);
							// if third coordinate different then dealing with bounding box, extend to that too, put marker in centre
							if ((feature.geometry.coordinates[0][0] !== feature.geometry.coordinates[2][0]) || (feature.geometry.coordinates[0][1] !== feature.geometry.coordinates[2][1])) {
								var topRight = new OpenLayers.LonLat(feature.geometry.coordinates[2][0], feature.geometry.coordinates[2][1]);
								popupBounds.extend(topRight);
								var featureBounds = new OpenLayers.Bounds();
								featureBounds.extend(lonLat);
								featureBounds.extend(topRight);
								lonLat = featureBounds.getCenterLonLat();
							}
							
							/*end extend boundaries */
							
							/*do popup */
							var popupHTML = '<h1>'+feature.id+'</h1>' ;
							popupHTML += '<div class="atPopupFeatureInfo">';
							popupHTML += feature.properties.html;
							popupHTML += '</div>';
							
							var featurePopup = new OpenLayers.Popup.FramedMarker
							(
								null, 
								lonLat, 
								new OpenLayers.Size(20, 18), 
								popupHTML, 
								{size: new OpenLayers.Size(1, 1), pixel: new OpenLayers.Pixel(0, 0)}, 
								false,  // no close box
								function( evt ){},
								astun.settings.baseURL+'css/jQuery/'+ astun.settings.themeName + '/images/popup-bg.png'
							);								
							OLMap.query.popups.push(featurePopup);
							html += feature.properties.html; //We want results HTML to be in ascending order of distance
							/* end do popup */
						}		
						html += featureCol.properties.htmlFooter;
						OLMap.map.zoomToExtent(popupBounds.scale(1.4), true); //Add some padding and find zoom level as we will probably be using cached tiles
						
						
						var icon = new OpenLayers.Icon('images/zoomToIcon.gif', new OpenLayers.Size(34, 34), null, function(size) {
							return new OpenLayers.Pixel(-12, 2-size.h);
						});
						OLMap.currentLocation.marker = OLMap.createMarker(OLMap.currentPosition, icon);
						
						
						var numPopups = OLMap.query.popups.length;
						for (var i = numPopups -1 ; i > -1; --i) {
							OLMap.map.addPopup(OLMap.query.popups[i]); // Reverse order to give nearest resutls highest z-index.
						}
						var displayName = OLMap.query.layer;
						var htmlResponse = html;
					}
					OLMap.mapElement.fire("astun:resultsReceived", {'type': 'findNearest', 'displayName': displayName, 'html': htmlResponse, 'json': response, 'queryOptions':queryOptions} );
						
				} //showMyNearest
				
				if (evt.memo.reset) { 
					this.mapElement.fire("astun:resultsCleared", {'type': 'findNearest', 'displayName': this.query.layer} );
					this.query.layer = null;
				}
				else {
					if (layer.query.findNearest) {
						this.findMyNearest	(
								en, 	
								layer.layerName, 
								layer.query.findNearest.maxResults, 
								layer.query.findNearest.distance, 
								showMyNearest
						);
					}
					else if (layer.query.showMy) {
						this.findMy	(
								en, 	
								layer.layerName, 
								showMyNearest
						);
					}
				}
	}, //findNearest
	
	/*
	buildImgTag: function(arWard, graphType, width, height, noBorder, simplify, axisFontSize, yField, dateRange, ds, sIncidentField)
	{*/
		/**
		* Function: buildImgTag
		* builds an image html tag from parameters for graph display on popup, 
		*
		* Parameters:
		* arWard - {Array} Contains info for polygon feature for popup, 0-feaureName, 1-ward, 2-District
		* graphType - {String}, can be 'Line', 'Bar', 'Line-Symbol', 'Pie'
		* width - {number} width of image in pixel
		* height - {number} height of image in pixel
		* noBorder - {bool} true-no border, false-with border
		* simplify - {bool} paramer sent to produce graph
		* axisFontSize - {number} font size of text charaters on graph
		* yField - {String} field whose values to be plotted on Y-axis
		* dateRange - {String} string for date rane e.g. "between '2008-11-01' and '2008-11-30'"
		* ds - {String} name of the datasource name configured on iShareMaps studio
		*
		* Returns:
		* {string} - an iamge html tag e.g. '<img, src=.... />
		*/
		/*	var myURL = location.href.substring(0, location.href.lastIndexOf("/")+1);			
			var sImgHtml = '<img class="atThematicGraph"' ;			
			sImgHtml += ' src="' ;
			sImgHtml += myURL + "getdata.aspx?RequestType=Chart&DataSource=";
			sImgHtml += ds ;
			sImgHtml += "&Type=" + graphType + "&NoBorder=" + noBorder + "&Simplify=" + simplify ;
			sImgHtml += "&Size=" + width + "|" + height + "&AxisFontSize="+axisFontSize+"&chosen=^neighbourhood^'" ;
			//sImgHtml +=  this.escapeSpecialChars(arWard[1]) ;
			sImgHtml +=  this.escapeSpecialChars(arWard[0]) ;
			sImgHtml +=  "'^&Xfield=datetime&Title=Sample&Selected=" ;
			sImgHtml += sIncidentField ;
			sImgHtml += "&filter=^datetime^ "  ;
			sImgHtml += dateRange ; 
			sImgHtml += " and district = '"
			sImgHtml += this.escapeSpecialChars(arWard[2]) + "'" ;
			sImgHtml +=  "^" ;
			sImgHtml += '" width="' + width + '"';
			sImgHtml += ' height="' + height + '"';
			sImgHtml += ' />' ;
			return sImgHtml;
	}, 
	*/
	buildImgTag: function(arWard, graphType, width, height, noBorder, simplify, axisFontSize, yField, months, ds, sIncidentField)
	{
		/**
		* Function: buildImgTag
		* builds an image html tag from parameters for graph display on popup, 
		*
		* Parameters:
		* arWard - {Array} Contains info for polygon feature for popup, 0-feaureName, 1-ward, 2-District
		* graphType - {String}, can be 'Line', 'Bar', 'Line-Symbol', 'Pie'
		* width - {number} width of image in pixel
		* height - {number} height of image in pixel
		* noBorder - {bool} true-no border, false-with border
		* simplify - {bool} paramer sent to produce graph
		* axisFontSize - {number} font size of text charaters on graph
		* yField - {String} field whose values to be plotted on Y-axis
		* months - {Number} number of months to include in the graph, up to and including the most recent
		* ds - {String} name of the datasource name configured on iShareMaps studio
		*
		* Returns:
		* {string} - an iamge html tag e.g. '<img, src=.... />
		*/
			var myURL = location.href.substring(0, location.href.lastIndexOf("/")+1);			
			var sImgHtml = '<img class="atThematicGraph"' ;			
			sImgHtml += ' src="' ;
			sImgHtml += myURL + "getdata.aspx?RequestType=Chart&DataSource=";
			sImgHtml += ds ;
			sImgHtml += "&Type=" + graphType + "&NoBorder=" + noBorder + "&Simplify=" + simplify ;
			sImgHtml += "&Size=" + width + "|" + height + "&AxisFontSize="+axisFontSize+"&chosen=^neighbourhood^'" ;
			//sImgHtml +=  this.escapeSpecialChars(arWard[1]) ;
			sImgHtml +=  this.escapeSpecialChars(arWard[0]) ;
			sImgHtml +=  "'^&Xfield=datetime&Title=Sample&Selected=" ;
			sImgHtml += sIncidentField ;
			sImgHtml += "&filter=^datetime^ between (SELECT max(datetime) FROM &quot;" + ds + "&quot;) - interval '" + (months - 1) + " months' and (SELECT max(datetime) FROM &quot;" + ds + "&quot;)"  ; 
			sImgHtml += " and district = '"
			sImgHtml += this.escapeSpecialChars(arWard[2]) + "'" ;
			sImgHtml +=  "^" ;
			sImgHtml += '" width="' + width + '"';
			sImgHtml += ' height="' + height + '"';
			sImgHtml += ' />' ;
			return sImgHtml;
	}, 
	
	getDistrictWard: function(featureName)
	{
	/**
	* Function: getDistrictWard
	* retuns an array object conbtaining ward, district name from a polygon feature name
	*
	* Parameters:
	* featureName - {String} name of a polygon feature on thematic layer
	*
	* Returns:
	* {Array} - 0-featureName, 1-Ward name, 2-District Name
	*/
	
		var retAr = [];
		var iIndex = featureName.indexOf('@');
		var sWard = featureName.substring(0, (iIndex));
		var sDistrict = featureName.substring((iIndex+1));
		retAr[0]=featureName;
		retAr[1]=sWard;
		retAr[2]=sDistrict;
		return retAr;
	}, 
	
	showThematicPopUp: function(evt)
	{
	
	/**
	* Function: showThematicPopUp
	* Throws a popup on hovering over a polygon feaure on the thematic layer
	*
	* Parameters:
	* evt - {object} Open layer evt object 
	*
	* Returns:
	* 
	*/
	
	
	// QUESTION: Why not use the feature selector control referenced elsewhere?
	
		var evtElement = evt.originalTarget || evt.srcElement;
		
		var notOverVector = (
			evtElement.id.split('_')[0] !== 'OpenLayers.Layer.Vector' &&
			evtElement.parentNode.id.split('_')[0] !== 'OpenLayers.Layer.Vector' &&
			evtElement.id !== evtElement.parentNode.id + '_GroupDiv' &&
			evtElement.id !== evtElement.parentNode.id + '_FrameDecorationImg_4'			  
		);
		
		
		if (notOverVector) {
			// Test to see if hover is actually over the vector layer or empty parts of the popup. If not then return.
			return; 
		}
					
		var sfeature = this.map.thematic.featureName;
		if  ( sfeature === '' || sfeature === undefined ) 
		{
			this.clearThemePopups();
			return ;
		}			
			
		//create property to keep ref to last themePopup
		if ( ! this.map.thematic.lastThemePopup ) {
			this.map.thematic.lastThemePopup = '' ;	
		}				
		//if same feature then do nothing						
		if (( sfeature == this.map.thematic.lastThemePopup ) && ( this.arThemePopup.length ) ) {
		//( this.map.popups.length ))
			return ;
		}
		this.clearThemePopups();	
		var myURL = location.href.substring(0, location.href.lastIndexOf("/")+1);			
		var arHoverWard = this.interactions.getDistrictWard(sfeature) ;
		var sWard = arHoverWard[1];
		var sDistrict = arHoverWard[2];

		var arHomeWard = null;			
		if (!!this.map.thematic.homeFeature) {
			arHomeWard = this.interactions.getDistrictWard(this.map.thematic.homeFeature.current.attributes.name);
		}
		var sIncidentField = this.map.thematic.columnName ;
		var ds= this.map.thematic.dataSourceName; 
		var oFeature = this.map.thematic.feature;
		var periodDiff = ( oFeature.attributes.currentValue - oFeature.attributes.previousValue );
		var aRules = this.map.thematic.feature.layer.styleMap.styles['default'].rules;
		for (var i = 0; i < aRules.length; i++) {
			var oRule = aRules[i];
			var applies = oRule.evaluate(oFeature);
			if (applies) {
				var rangeColour = oRule.symbolizer.Polygon.fillColor;
				var rangeName = oRule.name;
			}
		}
		var en = this.map.getLonLatFromPixel(evt.xy);
		//show arrow if diferrence > 5
		var arrowImg = '';
		arrowImg = '<img width="16" height="16" src="';
		arrowImg += "images/" ;

		//oFeature.attributes.previousValue now hold the change flag indicator 0=no change, -1=decrease, 1=increase
		if ( oFeature.attributes.previousValue == 1)
			arrowImg += 'arrow-up_16.gif" alt="up" title="Increase of more than 5% since previous month"/>' ;
		else if ( oFeature.attributes.previousValue == -1)
			arrowImg += 'arrow-down_16.gif" alt="down" title="Decrease of more than 5% since previous month" />' ;
		else				
			arrowImg += 'arrow-forward_16.gif" "little change" title="Less than 5% change since previous month"/>' ;
						
		//var contentHTML = '<h4><a href="?tab=1&SearchLayer=neighbourhoods&SearchField=NAME&SearchValue='+escape(arHoverWard[0])+'">' + arHoverWard[1]+ '</a></h4>' ;
		var contentHTML = '<h4>' + arHoverWard[1]+ '</h4>' ;
		contentHTML += '<h5>' + arHoverWard[2] + '</h5>' ;
		contentHTML += '<div id="atThemeInformation"><p class="atLayerText"><span class="atLayerLegend" style="border-color:'+rangeColour+';"><img src="images/spacer.gif" style="background-color: '+rangeColour+';"/></span>'+ this.map.thematic.title +' '+this.map.thematic.themeField+': '+rangeName+'</p>';
		contentHTML += '	<p class="atChangeText">Compared to this time last year: ' + arrowImg + '</p>';
		contentHTML += '</div>\n';
		contentHTML += '<ul id="atPopupTabSwitcher"><li><a href="#atThemePopupOne">3 month graph</a></li><li><a href="#atThemePopupTwo">12 month graph</a></li></ul>';
		contentHTML += '<div id="atPopupTabs">\n';
		contentHTML += '<div class="atPopupTab" id="atThemePopupOne">' ;
		//contentHTML += this.interactions.buildImgTag(arHoverWard, "Line-Symbol-Fill", 200, 85, true, true, 50, sIncidentField, this.map.thematic.dateCriteria1, ds, sIncidentField); 
		contentHTML += this.interactions.buildImgTag(arHoverWard, "Line-Symbol-Fill", 200, 85, true, true, 50, sIncidentField, 3, ds, sIncidentField); 
		contentHTML += '</div><div class="atPopupTab" id="atThemePopupTwo">' ;
		//contentHTML += this.interactions.buildImgTag(arHoverWard, "Line-Symbol-Fill", 200, 85, true, true, 50, sIncidentField, this.map.thematic.dateCriteria2, ds, sIncidentField); 
		contentHTML += this.interactions.buildImgTag(arHoverWard, "Line-Symbol-Fill", 200 , 85 , true, true, 50, sIncidentField, 12, ds, sIncidentField); 
		contentHTML += '</div></div>\n';
		contentHTML += '<p class="atHelp"><img src="images/atHelp.gif" />&nbsp;<a href="help.aspx#Whatdothecolourcodesrepresent">What do these mean?</a></p>\n';
		var popupInitDefine = function() {		
			var switcher = $("atPopupTabSwitcher");
			var selectors = switcher.select("a");
			switcher.current = selectors[this.map.thematic.lastThemePopupTab || 0];
			setLastTabDefine = function(tabIndex) {
				this.lastThemePopupTab = tabIndex;
			}
			setLastTab = setLastTabDefine.bind(this.map.thematic);
			selectors.each(function(selector, index){
				$(selector.parentNode);
				selector.tabId = selector.href.split("#").pop();
				selector.id = index;
				if (selector === switcher.current) {
					$(selector.tabId).addClassName("atPopupTabSelected");
					selector.parentNode.addClassName("atPopupTabSelected");						
				}
				var clickFunc = function(evt, lastThemePopupTab){
					try{								
						if (!(this === switcher.current)) {
							$(switcher.current.tabId).removeClassName("atPopupTabSelected");
							switcher.current.parentNode.removeClassName("atPopupTabSelected");
							$(this.tabId).addClassName("atPopupTabSelected");
							this.parentNode.addClassName("atPopupTabSelected");
							switcher.current = this;
							setLastTab(this.id);
						};
					}
					finally {
						Event.stop(evt); return false;
					}
				};
				Event.observe(selector, "click", clickFunc.bindAsEventListener(selector));
			});
		}
		var popupInit = popupInitDefine.bind(this);
		
        var featurePopup = new OpenLayers.Popup.FramedCompact 
		(
			null, 
			en, 
			//new OpenLayers.Size(300, 275), 
			new OpenLayers.Size(220, 300), 
			contentHTML , 
			null , 
			true,  // close box

			function(evt) {
				this.hide();
				this.map.thematic.lastThemePopup = '';					
				this.map.removePopup(this);
				this.destroy;
				OpenLayers.Event.stop(evt);
			}, 

			'white'
		);  
		featurePopup.autoSize = false ;			              
        this.map.addPopup(featurePopup);	
        popupInit();
		var insertTrendExplanation = function(transport) {
			var explanation = transport.responseText;
			if (explanation.length > 0) {
				$('atThemeInformation').insert('<h6>Trend explanation</h6>'+explanation);
			}
		}
		var options = 
		{
			method: 'get', 
			parameters: {
				'RequestType': 'xsl', 
				'Type': 'DataFunc', 
				'ds': 'RSSProcessor', 
				'params': '"pubDate", "description", "title", "link", "ward"~"RSSCrimeTrendExplanationFeed"~'+this.interactions.escapeSpecialChars(arHoverWard[0])+'~1~desc', 
				'xsl': 'xml/ClevelandPanelsDescription.xsl'
			}, 
			onSuccess : insertTrendExplanation.bindAsEventListener(this)					
		};		
		var myURL = location.href.substring(0, location.href.lastIndexOf("/")+1);
		new Ajax.Request( 
			'getData.aspx', 
			options
		);
        //add to theme Popup array
        this.arThemePopup.push(featurePopup);
		//store the feature property for future comparison
        this.map.thematic.lastThemePopup = sfeature;
		if ( !arHomeWard )
		{
			return ;
		}
		else
		{		
		var hoverWardDiv = $('hoverWard');
			hoverWardDiv.innerHTML = '<h4>' + arHoverWard[1] + '</h4>' ;
			hoverWardDiv.innerHTML += '<h5>' + arHoverWard[2] + '</h5>' ;
			hoverWardDiv.innerHTML += this.interactions.buildImgTag(arHoverWard, "Line-Symbol-Fill", 300, 128, true, true, 30, sIncidentField, 12, ds, sIncidentField);
		if (this.mapElement) {
				this.mapElement.fire("astun:resultsReceived", {
					'type': 'wardComparison'
				});
			}
		}
	}, //showThematicPopUp
	
	showHomeWardGraph: function(thematicInfo)
	{
	/**
	* Function: showHomeWardGraph
	* Displays the home graph when set
	*
	* Parameters:
	* thematicInfo - {object} contains info about the home ward vector feature
	*
	* Returns:
	* 
	*/
		var arHomeWard = this.getDistrictWard(thematicInfo.homeFeature.current.attributes.name) ;	
		var sIncidentField = thematicInfo.oThematicLayer.map.thematic.columnName ;
		var dateCriteria2 = thematicInfo.oThematicLayer.map.thematic.dateCriteria2;
		var ds = thematicInfo.oThematicLayer.map.thematic.dataSourceName ;
		var title = $('atGraphTitle');
		if (title) {
			title.update(thematicInfo.title);
		} 
		else {
			$('atGraphs').insert({'top':'<h3 id="atGraphTitle">' + thematicInfo.title + '</h3>'});
		}
		$
		$('homeWard').innerHTML = '<h4>' + arHomeWard[1] + '</h4>' ;
		$('homeWard').innerHTML += '<h5>' + arHomeWard[2] + '</h5>' ;
		$('homeWard').innerHTML +=  this.buildImgTag(arHomeWard, "Line-Symbol-Fill", 300, 128, true, true, 30, sIncidentField, 12, ds, sIncidentField);
		
	}, 
	
	
	escapeSpecialChars: function (strInput) 
	{
	/**
	* Function: escapeSpecialChars
	* retuns a string escaped for characters in set "[\^$.|?*+()]'"
	*
	* Parameters:
	* strInput - {String} the input string
	*
	* Returns:
	* {string} - output string
	*/
		var specChars = "[\^$.|?*+()]'";
		for(var i=0; i < specChars.length; i++) 
		{
			strInput = strInput.replace(new RegExp("\\" + specChars.substr(i, 1), "g"), "\\" + specChars.substr(i, 1));
		}
		return strInput;
	}
	
	

 }); //oLInteractCtrl