 <!--
            
    var map = null; 
    var membersLayer = null;
    var memberShapeLastClickedOn = null;
    var memberShapeLastHoveredOver = null;
    var SearchPanelStateExpaneded = true;
                
    function MemberListBoxClick(listBoxClientID, selectedMemberIndex)
    {              
        //Resets the pushpin icon of the previously clicked on member.
        if(memberShapeLastClickedOn)
            SetPushpinImage(memberShapeLastClickedOn, 1); 
    
        //Checks to ensure that the user has selected a member.
        if(selectedMemberIndex > -1)
        {
        
            //Retrieves the selected members ID from the list box.
            var memberID = document.getElementById(listBoxClientID).options[selectedMemberIndex].value;
        
            //Retrieves the VEShape object from the MemberLayer.
            //Note that the VEShapes where added in the same order to the layer as they where to the list box hence we can
            //use selectedMemberIndex as the index to the shape layer.                    
            var memberShape = membersLayer.GetShapeByIndex(selectedMemberIndex);
            
            if(memberShape != null)
            {
                SetPushpinImage(memberShape, 3);
                
                //Points is an array of VELongLat objects in this case since the VEShape is a pushpin the array only has one object in it at 
                //position 0.
                var MemberPointsArray = memberShape.GetPoints();
                       
                //Center the map on the member pushpin.       
                map.SetCenter(MemberPointsArray[0]);
                
                //Stores the a reference to the Members VEShape for use later.
                memberShapeLastClickedOn = memberShape;
                
                ShowCustomInfoBox(memberShape);
            }
        }

    } 
   
    function MemberOnClick(e)
    {
        if(e.elementID)
        {               
            var memberShape = map.GetShapeByID(e.elementID);

            if(memberShape != null)
            {
                //Resets the pushpin icon of the previously clicked on member.
                if(memberShapeLastClickedOn)
                    SetPushpinImage(memberShapeLastClickedOn, 1); 

                //Set the pushpin icon of the newly selected member shape object to the selected icon.
                SetPushpinImage(memberShape, 3); 
                
                //Store a reference to the newly selected member shape object.
                memberShapeLastClickedOn = memberShape;
                memberShapeLastHoveredOver = null;
                
                ShowCustomInfoBox(memberShape);
            }
        }
    }
    
    function MemberOnMouseOver(e)
    {

        if(e.elementID)
        {        
            var memberShape = map.GetShapeByID(e.elementID);
            
            if(memberShape != null)
            {       
                //If the mouse is hovering over the member that was last clicked on then do nothing.
                if(memberShape != memberShapeLastClickedOn)
                {
                    //Reset the last member objec to be hovered on back to blue.
                    if(memberShapeLastHoveredOver)
                        SetPushpinImage(memberShapeLastHoveredOver, 1);

                    //Set the current hovered on member to red.
                    SetPushpinImage(memberShape, 2);
                                           
                    //Remember which member was hovered over last. 
                    memberShapeLastHoveredOver = memberShape;
                    
                    ShowCustomInfoBoxPreview();
                }
              
            }
        }
        //Return true prevents the defaut infobox of the map appearing.
       return true;
    }
    
    function PostionCustomInfoBox()
    {
        if(map != null)
        {
            var CustomInfoBoxPreview = document.getElementById('CustomInfoBoxPreview');
            var nepicMap = document.getElementById('nepicMap');
            var mapWidth = nepicMap.style.width;   
            CustomInfoBoxPreview.style.top = 12 + 'px';
            CustomInfoBoxPreview.style.left = ((mapWidth.replace('px', '')- CustomInfoBoxPreview.style.width.replace('px', '') - 12)) + 'px';
            CustomInfoBoxPreview.style.visibility = 'visible';
        }
    }
    
   function HideCustomInfoBox()
    {
        var CustomInfoBox = document.getElementById('CustomInfoBox');
        CustomInfoBox.style.visibility = 'hidden';
    }
               
    function ShowCustomInfoBox(memberShape)
    {
        if(memberShape != null)
        {
            var CustomInfoBoxTitleSection = document.getElementById('CustomInfoBoxTitleSection');
            CustomInfoBoxTitleSection.innerHTML = memberShape.GetTitle();
            
            var CustomInfoBoxDescriptionSection = document.getElementById('CustomInfoBoxDescriptionSection');
            CustomInfoBoxDescriptionSection.innerHTML = memberShape.GetDescription();
               
            var CustomInfoBox = document.getElementById('CustomInfoBox');             
            CustomInfoBox.style.visibility = 'visible';
        }
    }
                
    function ShowCustomInfoBoxPreview()
    {
        if(memberShapeLastHoveredOver != null)
        {
            var CustomInfoBoxPreviewTitleSection = document.getElementById('CustomInfoBoxPreviewTitleSection');
            CustomInfoBoxPreviewTitleSection.innerHTML = memberShapeLastHoveredOver.GetTitle();
            
            var CustomInfoBoxPreview = document.getElementById('CustomInfoBoxPreview');
            CustomInfoBoxPreview.style.visibility = 'visible';                
        }          
    }
                 
    function GetMap(clientToken)
    {        
        //Creates, setup and load map object 
        map = new VEMap('nepicMap');  
        map.SetDashboardSize(VEDashboardSize.Small);    
        map.SetClientToken(clientToken);   
        map.LoadMap();
       
        PostionCustomInfoBox();
        
        //Wire up an custom event handlers for map events
        map.AttachEvent("onmouseover", MemberOnMouseOver);
        map.AttachEvent("onclick", MemberOnClick);
        map.AttachEvent('ontokenexpire', HandleTokenExpire);
        map.AttachEvent('ontokenerror', HandleTokenError);
            
        //Centers the map on the north east of england.
        CenterMap();
    
        //Creates a layer for the member push pins.
        SetupMemberLayer();
        
        //Loads all of the member shapes for all the NEPIC member onto the map.                
        LoadMembersFilteredByCategoryID(0, 0);                              
    }   
    
    function HandleTokenExpire()
    {
       //function is called when the client token expires
       map.ShowMessage('Your map session has expired please refresh the page (press F5) and try again.');
    }

    function HandleTokenError()
    {
       //function is called if a client token authentication error occurs
       map.ShowMessage('The map has a problem with the session please refresh the page (press F5) and try again.');
    }
    
    function CenterMap(){
        //Focus the starting point of the map on the North East of England.
        var VELatLongStart = new VELatLong(54.914514007665254, -1.669921874999988);
        map.SetCenterAndZoom(VELatLongStart, 8);       
    }
    
    function SetupMemberLayer()
    {
        //Creates a new VEShapeLayer for the members layer.
        membersLayer = new VEShapeLayer();
        
        //Adds the member layer to the map.
        map.AddShapeLayer(membersLayer);
        
        //Shows the layer making it visible on the map.
        membersLayer.Show();
    }

    function LoadMembersFilteredByCategoryID(selectedCategoryID)
    {
        //This calls a web service asynchronisouly back on the web server which retrieves all the members for a given category ID.  When
        //the web service return the call back calls the OnGetAllMembersByCategoryID function passing it the list of member objects.                              
        MemberService.GetAllMembersByCategoryID(selectedCategoryID, OnGetAllMembersByCategoryID); 
         
    } 
                
    function OnGetAllMembersByCategoryID(MemberList)
    {
        //Resets the pointer to null as this shape (if set) doesn't exist anymore).
        HideCustomInfoBox();
        memberShapeLastClickedOn = null;
        memberShapeLastHoveredOver = null;
                    
        //Clears all of the previous member push pins from the layer.
        membersLayer.DeleteAllShapes();
                    
        //Plots each member on the layer.
        for(i = 0; i < MemberList.length; i++)
        {
            AddMember(MemberList[i]);
        }
                        
        //Center the map on the north east.
        CenterMap()
        
        //Repositions the info box's as the new advert may be of a different size
        PostionCustomInfoBox()
    }
    
    function AddMember(MemberObject)
    {
        
        //Creates a VELatLong object using the co-ordinates provided by the Member object.
        var MemberVELatLong = new VELatLong(MemberObject.Latitude, MemberObject.Longitude);
        
        //Creates the member shape ready to put on the layer.
        var memberShape = new VEShape(VEShapeType.Pushpin, MemberVELatLong);
        
        //Adds the extra info from the member object to the member shape object.
        memberShape.SetTitle(MemberObject.Name);
        memberShape.SetDescription(BuildDescription(MemberObject.LogoFileNameAndPath, MemberObject.MemberStatus, MemberObject.Categories, MemberObject.FaqLink));
        
        SetPushpinImage(memberShape, 1);

        //Adds the member shape object to the members layer.
        membersLayer.AddShape(memberShape);

    } 
    
    function BuildDescription(logoFileNameAndPath, memberStatus, categories, faqLink)
    {
        var description = '';
        
        description = description + '<table id=\'ShowInfoTable\' width=\'240px\' cellspacing=\'3px\'>';
        description = description + '<tr>';
        description = description + '<td colspan=\'2\'><img style=\'padding: 5px 5px 5px 5px;\' alt=\'Logo\' src=\'' + logoFileNameAndPath +'\'/> </td>';
        description = description + '</tr>';
        description = description + '<tr>';
        description = description + '<td style=\'vertical-align: top;\'><span class=\'customInfoBox-headings\'>Categories:</span></td>';
        description = description + '<td><span class=\'customeInfoBox-values\'>' + categories + '</span></td>';
        description = description + '</tr>';
        description = description + '<tr>';
        description = description + '<td style=\'text-align: right; padding-right: 5px;\' colspan=\'2\'><a href=\'' + faqLink + '\' target=\'_blank\' style=\'font-size: 12px; font-weight: bold;\'>view profile...</a></td>';
        description = description + '</tr>';
        description = description + '</table>'

        return description;
    }
    
    function SetPushpinImage(memberShape, imageToUse)
    {   
        var icon = "";
        var zIndex = 0;
    
        if(memberShape != null)
        {
            switch(imageToUse)
            {
                case 1:
                        icon = "<img src='./Images/MemberPinBlue.gif' />";
                        zIndex = 1000;
                        break;
                case 2:
                        icon = "<img src='./Images/MemberPinRed.gif' />";
                        zIndex = 1001;
                        break;
                case 3:
                        icon = "<img src='./Images/MemberPinGreen.gif' />";
                        zIndex = 1001;
                        break;
            }
                             
            memberShape.SetCustomIcon(icon);
            memberShape.SetZIndex(zIndex);
        }
    }
          
 function SearchPanelExpandCollapse()
    {
                    
        var SplitterImage = document.getElementById('SplitterImageHolder');
        var MemberPanel = document.getElementById('MemberPanel');
        var MapPanel = document.getElementById('MapPanel');
        var nepicMap = document.getElementById('nepicMap');
        var SplitterDiv = document.getElementById('SplitterDiv');
  
        if(SearchPanelStateExpaneded)
        {
            //Collapsing
            MemberPanel.style.display = 'none';
            MemberPanel.style.visibility = 'hidden';
            MemberPanel.style.width = '0px';
            MapPanel.style.width = '813px';
            nepicMap.style.width = '813px';
            SplitterDiv.style.cursor = 'e-resize';
            map.Resize(813, 410);
            SearchPanelStateExpaneded = false;
        }
        else
        {
            //Expanding
            MemberPanel.style.display = '';
            MemberPanel.style.visibility = '';
            MemberPanel.style.width = '170px';
            MapPanel.style.width = '635px';
            nepicMap.style.width = '635px';
            SplitterDiv.style.cursor = 'w-resize';
            map.Resize(635, 410);
            SearchPanelStateExpaneded = true;
        }
    }
    
    function SplitterEnter()
    {
        var SplitterDiv = document.getElementById('SplitterDiv');
        SplitterDiv.style.backgroundColor = '#E5EDF5';
        var SplitterImage = document.getElementById('SplitterImageHolder');
        SplitterImage.style.top = '183px';
    }
    
    function SplitterLeave()
    {
        var SplitterDiv = document.getElementById('SplitterDiv');
        SplitterDiv.style.backgroundColor = 'White';
        var SplitterImage = document.getElementById('SplitterImageHolder');
        SplitterImage.style.top = '180px';
    }

        -->