// JScript File - Events, CameraGroups, Cameras grids related.
//              - Tabs related

// Some global variables being used in this file is stored in 
// C:\Inetpub\wwwroot\ATIS\UserControls\Public\InteractiveMapControl.ascx

// div element to populate HTML dynamically for the search bar
var divSearchBarContentName = "SearchBar"; 
// div element to populate HTML dynamically for the search bar 2
var divSearchBarContentName2 = "SearchBar2"; 
// div element to populate HTML dynamically for the grid
var divGridContentName = "GridResult"; 
// div element to populate HTML dynamically for the grid 2
var divGridContentName2 = "GridResult2"; 



// Represents one thread for using XMLHttpRequest
var xmlhttp; 

    //*******************************************************************************
    // Function:     TurnOnTab
    // Author:       Michael Chu
    // Project:      iMove Build 0.2
    // Date:         Sep 07 2006
    //
    // Description:  This function turns on the tab passed in as parameter
    //               and turns off others. The three tabs ids are known in
    //               advance for this operation to take place.
    //
    // Parameters:   TabDiv - the tab div element to turn on
    // Returns:
    // Called By:    Whenever the user clicks on one of the tabs.
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //
    //*******************************************************************************
    function TurnOnTab(TabDiv){
    
        var AdvisoriesTab = document.getElementById(AdvisoriesTabId);
        var GroupTab = document.getElementById(CameraGroupsTabId);
        var CameraTab = document.getElementById(CamerasTabId);
        var BusRoutesTab = document.getElementById(BusRoutesTabId);

        var DataGridTabCookieName = 'DataGridTabCookieName';        
       
        
        var id = TabDiv.id;
        
        if (id == AdvisoriesTabId)
        {
            AdvisoriesTab.className="bdTabSelected";
            GroupTab.className="bdTabUp";
            CameraTab.className="bdTabUp";
            BusRoutesTab.className="bdTabUp";
            
            //first check to see if we are working on the fullscreen map, or the regular map
           if( isFullScreenMap == false){
           
                 //alert("regular map");
        
                // save cookie information for current tab's cookie
                var activeTab = Get_Cookie(DataGridTabCookieName );    
                
                if ( activeTab == null ){
                  AddOrRemovePartialCookieValue(DataGridTabCookieName, AdvisoriesTabId, true);                 
                
                } else {
                
                    //delete the old cookie, and reuse the new one
                   Delete_Cookie( DataGridTabCookieName, '/', '' );
                   AddOrRemovePartialCookieValue(DataGridTabCookieName, AdvisoriesTabId, true);                 
                    
               }            
           }    

        }
        else if (id == CameraGroupsTabId)
        {
            AdvisoriesTab.className="bdTabUp";
            GroupTab.className="bdTabSelected";
            CameraTab.className="bdTabUp";
            BusRoutesTab.className="bdTabUp";

            //first check to see if we are working on the fullscreen map, or the regular map
            if( isFullScreenMap == false){            

                // save cookie information for current tab's cookie
               var activeTab = Get_Cookie( DataGridTabCookieName );    
                
                if ( activeTab == null ){
                    AddOrRemovePartialCookieValue(DataGridTabCookieName, CameraGroupsTabId, true);                 
               } else {
                
                    //delete the old cookie, and reuse the new one
                    Delete_Cookie( DataGridTabCookieName, '/', '' );
                    AddOrRemovePartialCookieValue(DataGridTabCookieName, CameraGroupsTabId, true);                 
               }

                    
            }
        }
        else if (id == CamerasTabId)
        {
            AdvisoriesTab.className="bdTabUp";
            GroupTab.className="bdTabUp";
            CameraTab.className="bdTabSelected";
            BusRoutesTab.className="bdTabUp";

            //first check to see if we are working on the fullscreen map, or the regular map
            if( isFullScreenMap == false){

                // save cookie information for current tab's cookie
                var activeTab = Get_Cookie( DataGridTabCookieName );    
                
                if ( activeTab == null ){
                    AddOrRemovePartialCookieValue(DataGridTabCookieName, CamerasTabId, true);                 
               } else {
                
                //delete the old cookie, and reuse the new one
                Delete_Cookie( DataGridTabCookieName, '/', '' );
                AddOrRemovePartialCookieValue(DataGridTabCookieName, CamerasTabId, true);                 
               }
    
           }

        }
        else if (id == BusRoutesTabId)
        {
            AdvisoriesTab.className="bdTabUp";
            GroupTab.className="bdTabUp";
            CameraTab.className="bdTabUp";
            BusRoutesTab.className="bdTabSelected";

            //first check to see if we are working on the fullscreen map, or the regular map
            if( isFullScreenMap == false){

                // save cookie information for current tab's cookie
                var activeTab = Get_Cookie( DataGridTabCookieName );    
                
                if ( activeTab == null ){
                    AddOrRemovePartialCookieValue(DataGridTabCookieName, BusRoutesTabId, true);                 
               } else {
                    //delete the old cookie, and reuse the new one
                    Delete_Cookie( DataGridTabCookieName, '/', '' );
                    AddOrRemovePartialCookieValue(DataGridTabCookieName, BusRoutesTabId, true);                 
               }
           }

        }
        
        AdvisoriesTab = null;
        GroupTab = null;
        CameraTab = null;
        BusRoutesTab = null;
    }

    
    //*******************************************************************************
    // Function:     SwitchTabOn
    // Author:       Michael Chu
    // Project:      iMove Build 0.2
    // Date:         Sep 07 2006
    //
    // Description:  This function switches the style class of the 
    //               advisories/camera groups/cameras tab to selected style.
    //
    // Parameters:   TabDiv - the tab div element
    // Returns:
    // Called By:    Whenever the user clicks on one of the tabs.
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //
    //*******************************************************************************
    function SwitchTabOn(TabDiv){
    
        if(TabDiv.className=="bdTabUp"){
            TabDiv.className="bdTabOv";
        }
    }
    
    //*******************************************************************************
    // Function:     SwitchTabOn
    // Author:       Michael Chu
    // Project:      iMove Build 0.2
    // Date:         Sep 07 2006
    //
    // Description:  This function switches the style class of the 
    //               advisories/camera groups/cameras tab to un-selected style.
    //
    // Parameters:   TabDiv - the tab div element
    // Returns:
    // Called By:    Whenever the user un-clicks on one of the tabs.
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //
    //*******************************************************************************
    function SwitchTabOff(TabDiv){
        if (TabDiv.className != "bdTabSelected")
            TabDiv.className="bdTabUp";
    }
    
    //*******************************************************************************
    // Function:     GridTabSelected
    // Author:       Michael Chu
    // Project:      iMove Build 0.3
    // Date:         Sep 11 2006
    //
    // Description:  Returns the id of the tab that is currently being viewed
    //               for the grid.
    //
    // Parameters:   
    // Returns:      id of the tab
    // Called By:    
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //  Michael Chu  Nov 9, 2006 Modify to account for bus routes tab.
    //*******************************************************************************
    function GridTabSelected(){

// Debug variable (set to 1 to debug)
var debug = 0;

if (debug)
    alert("GridTabSelected()");
    
        var AdvisoriesTab = document.getElementById(AdvisoriesTabId);
        var GroupTab = document.getElementById(CameraGroupsTabId);
        var CameraTab = document.getElementById(CamerasTabId);
        var BusRoutesTab = document.getElementById(BusRoutesTabId);
        
        var tabId = "";
        
        if (AdvisoriesTab.className=="bdTabSelected")
        {
            tabId = AdvisoriesTabId;
        }
        else if (GroupTab.className=="bdTabSelected")
        {
            tabId = CameraGroupsTabId;
        }
        else if (CameraTab.className=="bdTabSelected")
        {
            tabId = CamerasTabId;
        }
        else if (BusRoutesTab.className=="bdTabSelected")
        {
            tabId = BusRoutesTabId;
        }
        else
        {
            // set to advisories tab by default
            tabId = AdvisoriesTabId;
        }
        AdvisoriesTab = null;
        GroupTab = null;
        CameraTab = null;
        BusRoutesTab = null;
if (debug)
    alert("END GridTabSelected(), return value: " + tabId);
        return tabId;
    }
    
    //*******************************************************************************
    // Function:     LoadFilterBarContentBasedOnXMLData
    // Author:       Michael Chu
    // Project:      iMove Build 0.3
    // Date:         Sep 11 2006
    //
    // Description:  This function loads the xml data for the filter 
    //               dropdownlists depending upon which tab 
    //               (advisories, camera groups, cameras, or bus routes).
    //
    // Parameters:   tab - the description of the tab to be loaded 
    //               (Events, CameraGroups, Cameras, BusRoutes)
    // Returns:
    // Called By:    On the initial load for the corresponding tab.
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //  Michael Chu  Nov 14, 2006 Add bus routes filter bar
    //*******************************************************************************
    function LoadFilterBarContentBasedOnXMLData(tab)
    {
// Debug variable (set to 1 to debug)
var debug = 0;

if (debugPerformance)
    PrintElapseTime("START LoadFilterBarContentBasedOnXMLData");

if (debug)
    alert("LoadFilterBarContentBasedOnXMLData(\"" + tab + "\")");

        // Load initial content for filter bar
        LoadFilterBarContent(tab);
        
        switch (tab) {
            case "Events": {
                loadXMLDoc("Advisories_Region", "/ATISServices/Services/Regions.aspx?Sort=name");
                //loadXMLDoc("Advisories_Type", "/ATISServices/Services/EventTypes.aspx?Sort=descr");
                loadXMLDoc("Advisories_Severity", "/ATISServices/Services/EventPriorities.aspx?Sort=descr");
                
                //if (isFullScreenMap == false){
                                        
                  //  alert("regular map: yes initialize bar");
                    // Initialize saved or default state for filter criteria, just for the regular map
                    InitializeFilterBarCriteria();                
                //} else {
//                    alert("full screen map: do not initialize bar");
  //              }
                
        
                break;
            }
            case "CameraGroups": {
                loadXMLDoc("CameraGroups_Name", "/ATISServices/Services/CameraGroups.aspx?Sort=groupName");
                loadXMLDoc("CameraGroups_Description", "/ATISServices/Services/CameraGroups.aspx?Sort=descr");
                loadXMLDoc("CameraGroups_Region", "/ATISServices/Services/Regions.aspx?Sort=name");
                
                //if (isFullScreenMap == false){
                                        
                  //  alert("regular map: yes initialize bar");
                    // Initialize saved or default state for filter criteria, just for the regular map
                    InitializeFilterBarCriteria();                
                //} else {
                  //  alert("full screen map: do not initialize bar");
                //}
        
                break;
            }
            case "Cameras": {
                loadXMLDoc("Cameras_Region", "/ATISServices/Services/Regions.aspx?Sort=name");
                //loadXMLDoc("Cameras_Type", "/ATISServices/Services/CameraTypes.aspx?Sort=descr");
                loadXMLDoc("Cameras_Status", "/ATISServices/Services/CameraStatuses.aspx?Sort=descr");
                
                //if (isFullScreenMap == false){
                                        
                  //  alert("regular map: yes initialize bar");
                    // Initialize saved or default state for filter criteria, just for the regular map
                    InitializeFilterBarCriteria();                
                //} else {
                  //  alert("full screen map: do not initialize bar");
                //}
                
                break;
            }
            case "BusRoutes": {
                    
                loadXMLDoc("BusRoutes_Region", "/ATISServices/Services/Regions.aspx?Sort=name");
                loadXMLDoc("BusRoutes_Exchange", "/ATISServices/Services/TransitExchanges.aspx?Sort=name");
                //loadXMLDoc("BusRoutes_Type", "/ATISServices/Services/BusRouteTypes.aspx?Sort=descr");
                
                //if (isFullScreenMap == false){
                                        
                  //  alert("regular map: yes initialize bar");
                    // Initialize saved or default state for filter criteria, just for the regular map
                    InitializeFilterBarCriteria();                
                //} else {
                  //  alert("full screen map: do not initialize bar");
                //}
                
                break;
            }
            case "BusRoutesMap": {
                    
                // no dropdowns to initialize
                
                // no need to initialize saved or default state for filter criteria
                
                break;
            }
            default: {
                break;
            }
        }

        

if (debugPerformance)
    PrintElapseTime("FINISH LoadFilterBarContentBasedOnXMLData");
    }
    
    //*******************************************************************************
    // Function:     LoadFilterBarContent
    // Author:       Michael Chu
    // Project:      iMove Build 0.3
    // Date:         Sep 11 2006
    //
    // Description:  This function loads initial content such as
    //               dropdownlists depending upon which tab 
    //               (advisories, camera groups, or cameras).
    //
    // Parameters:   tab - the description of the tab to be loaded 
    //               (Events, CameraGroups, Cameras, BusRoutes, BusRoutesMap)
    // Returns:
    // Called By:    LoadFilterBarContentBasedOnXMLData()
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //
    //*******************************************************************************
    function LoadFilterBarContent(tab){
    
// Debug variable (set to 1 to debug)
var debug = 0;

if (debug)
    alert("LoadFilterBarContent(\"" + tab + "\")");
    
        var strOutput = "";  // Output HTML response
        
        var divSearchBar = ""; // Current search bar to display content
        
        switch (tab) {
            case "Events": {
                             
               // Filter Criteria Content
               strOutput += "<table id=\"TravelAdvisorySearchBar\" style=\"width:590px;background-color: #ABABAB;\" class=\"FilterSearchBar\">";
               
               // First row
               strOutput += "<tr>";
               
               // First column - Filter By words
               strOutput += "<td><span class=\"FilterByText\">FILTER BY:</span></td> ";
               
               // Second to last column - Region
               strOutput += "<td colspan=\"4\" align=\"left\">";
               strOutput +=   "<span class=\"FilterBySubText\">REGION:</span> ";
               strOutput +=   "<select id=\"Advisory_ddlRegion\" name=\"Advisory_ddlRegion\" onchange=\"FilterHandler(true);\" class=\"FilterDrop\" style=\"width: 115px;\" >";
               strOutput +=     "<option selected=\"selected\" value=\"\">All</option>";
                                // more options will be dynamically added
	           strOutput +=   "</select>&nbsp;";
        	   
//	           // Event Type
//	           strOutput += "<span class=\"FilterBySubText\">TYPE:</span> ";
//               strOutput += "<select id=\"Advisory_ddlType\" name=\"Advisory_ddlType\" onchange=\"FilterHandler(false);\" class=\"FilterDrop\" style=\"width: 80px;\" >";
//               strOutput += "<option selected=\"selected\" value=\"\">All</option>";
//        	   // more options will be dynamically added
//	           strOutput += "</select>&nbsp;";
        	   
	           // Severity
	           strOutput +=   "<span class=\"FilterBySubText\">SEVERITY:</span> ";
               strOutput +=   "<select id=\"Advisory_ddlSeverity\" name=\"Advisory_ddlSeverity\" onchange=\"FilterHandler(false);\" class=\"FilterDrop\" style=\"width: 40px;\" >";
               strOutput +=     "<option selected=\"selected\" value=\"\">All</option>";
                                // more options will be dynamically added
               strOutput +=   "</select>&nbsp;";
               
               // Reset button
               strOutput +=   "<input type=\"button\" id=\"Advisory_btnReset\" name=\"Advisory_btnReset\" value=\"Reset\" onclick='ResetHandler();' class=\"GridButton\" />"
                              
               // Print and help icons
               strOutput +=   "<a href=\"#\" onclick='this.href = \"javascript:myVoid()\";window.open(\"http://www.i-move.ca/AccessibleAdvisories?print=true\",\"_blank\",\"location=no,menubar=yes,resizable=yes,scrollbars=yes,status=yes,titlebar=yes,toolbar=yes\");' ><img src=\"/ATIS/App_Themes/ATIS/images/atis-flash-i-print.gif\" title='Print' alt=\"print\" hspace=\"5\" border=\"0\"/></a>"
                            + "<a href=\"#\" id=\"helpLink\" onclick=\"this.href = 'javascript:myVoid()';helpFilePopupContent('/SiteTools/Help');\"><img src=\"/ATIS/App_Themes/ATIS/images/atis-flash-i-help.gif\" title='Help' alt=\"help\" border=\"0\"/></a>";
               
               // End of First Row
               strOutput += "</td></tr>";
               
               // Second and Third Row - Type Checkboxes
               strOutput += "<tr >";
               strOutput += "<td>&nbsp;</td>";
               strOutput += "<td><span class=\"FilterBySubText\">TYPE:</span></td>";
               strOutput += "<td><input id=\"chk_EV_CurInc_Grid\" type=\"checkbox\" onclick=\"toggleMapMenuCheckbox(this,null);FilterHandler(false);\" />Current Incidents</td>";
               strOutput += "<td><input id=\"chk_EV_CurCon_Grid\" type=\"checkbox\" onclick=\"toggleMapMenuCheckbox(this,null);FilterHandler(false);\" />Current Construction</td>";
               strOutput += "<td><input id=\"chk_EV_CurEv_Grid\" type=\"checkbox\" onclick=\"toggleMapMenuCheckbox(this,null);FilterHandler(false);\" />Current Events<br /></td>";
               strOutput += "</tr>";
               strOutput += "<tr>";
               strOutput += "<td>&nbsp;</td>";
               strOutput += "<td>&nbsp;</td>";
               strOutput += "<td><input id=\"chk_EV_FutCon_Grid\" type=\"checkbox\" onclick=\"toggleMapMenuCheckbox(this,null);FilterHandler(false);\" />Future Construction</td>";
               strOutput += "<td><input id=\"chk_EV_FutEv_Grid\" type=\"checkbox\" onclick=\"toggleMapMenuCheckbox(this,null);FilterHandler(false);\" />Future Events</td>";
               strOutput += "<td><input id=\"chk_EV_FutSrvc_Grid\" type=\"checkbox\" onclick=\"toggleMapMenuCheckbox(this,null);FilterHandler(false);\" />Future Service Disruptions<br /></td>";
               strOutput += "</tr>";
               
               
               strOutput += "</table>";
               
               // Current displayed search bar
               divSearchBar = divSearchBarContentName;
               break;
            }
            case "CameraGroups": {
                // Filter Criteria Content
               strOutput += "<table border=0 id=\"CameraGroupSearchBar\" style=\"width:590px;\" class=\"FilterSearchBar\">";

                //strOutput += "<tr><td>";
                //strOutput += "SORT here";
                //strOutput += "</td></tr>";
               
               strOutput += "<tr><td>";
               
               // Filter By words
               strOutput += "<span class=\"FilterByText\">FILTER BY:</span> ";
               //strOutput += "<span class=\"FilterByText\">SORT</span> ";
               
               // Region
               //strOutput += "<span class=\"FilterBySubText\">NAME:</span> ";               
               //strOutput += "<select id=\"CameraGroup_ddlName\" name=\"CameraGroup_ddlName\" onchange=\"FilterHandler(false);\" class=\"FilterDrop\" style=\"width: 60px;\" >";               
               
               //Brian NOTE:  added "Display:none;" at the end of this line to hide the dropdown list
               strOutput += "<select id=\"CameraGroup_ddlName\" name=\"CameraGroup_ddlName\" onchange=\"FilterHandler(false);\" class=\"FilterDrop\" style=\"width: 95px;display:none;\" >";               
               strOutput += "<option selected=\"selected\" value=\"\">All</option>";
               // more options will be dynamically added
	           strOutput += "</select>&nbsp;";
        	   
	           // Event Type
	           //strOutput += "<span class=\"FilterBySubText\">DESC.:</span> ";	           
               //strOutput += "<select id=\"CameraGroup_ddlDescription\" name=\"CameraGroup_ddlDescription\" onchange=\"FilterHandler(false);\" class=\"FilterDrop\" style=\"width: 80px;\" >";
               
               //Brian NOTE:  added "Display:none;" at the end of this line to hide the dropdown list
               strOutput += "<select id=\"CameraGroup_ddlDescription\" name=\"CameraGroup_ddlDescription\" onchange=\"FilterHandler(false);\" class=\"FilterDrop\" style=\"width: 105px;display:none;\" >";
               strOutput += "<option selected=\"selected\" value=\"\">All</option>";
        	   // more options will be dynamically added
	           strOutput += "</select>&nbsp;";
        	   
	           // Severity
	           strOutput += "<span class=\"FilterBySubText\">REGION</span> ";
	           //strOutput += "<span class=\"FilterBySubText\">REGION:</span> ";
               strOutput += "<select id=\"CameraGroup_ddlRegion\" name=\"CameraGroup_ddlRegion\" onchange=\"FilterHandler(true);\" class=\"FilterDrop\" style=\"width: 150px;\" >";
               //strOutput += "<select id=\"CameraGroup_ddlRegion\" name=\"CameraGroup_ddlRegion\" onchange=\"FilterHandler(true);\" class=\"FilterDrop\" style=\"width: 115px;\" >";
               strOutput += "<option selected=\"selected\" value=\"\">All</option>";
               // more options will be dynamically added
               strOutput += "</select>&nbsp;";
               
               // Reset button
               strOutput += "&nbsp;<input type=\"button\" id=\"CameraGroup_btnReset\" name=\"CameraGroup_btnReset\" value=\"Reset\" onclick='ResetHandler();' class=\"GridButton\" />"
               
               // Print and help icons
               strOutput +=  "&nbsp;&nbsp;<a href=\"#\" id=\"helpLink\" onclick=\"this.href = 'javascript:myVoid()';helpFilePopupContent('/SiteTools/Help');\"><img src=\"/ATIS/App_Themes/ATIS/images/atis-flash-i-help.gif\" title='Help' alt=\"help\" border=\"0\"/></a>";
               
//               strOutput +=   "<a href=\"#\" onclick='this.href = \"javascript:myVoid()\";window.open(\"http://www.i-move.ca/AccessibleGroupsOfCameras?print=true\",\"_blank\",\"location=no,menubar=yes,resizable=yes,scrollbars=yes,status=yes,titlebar=yes,toolbar=yes\");' ><img title='Print' src=\"/ATIS/App_Themes/ATIS/images/atis-flash-i-print.gif\" alt=\"print\" hspace=\"5\" border=\"0\"/></a>"
  //                          + "<a href=\"#\" id=\"helpLink\" onclick=\"this.href = 'javascript:myVoid()';helpFilePopupContent('/SiteTools/Help');\"><img title='Help' src=\"/ATIS/App_Themes/ATIS/images/atis-flash-i-help.gif\" alt=\"help\" border=\"0\"/></a>";

               // End of Filter by Row
               strOutput += "</td></tr>";
               strOutput += "</table>";
               
               // Current displayed search bar
               divSearchBar = divSearchBarContentName;
               break;
            }
            case "Cameras": {
                // Filter Criteria Content
               strOutput += "<table id=\"CameraSearchBar\" style=\"width:590px;background-color: #ABABAB;\" class=\"FilterSearchBar\">";
               
               // First row
               strOutput += "<tr>";
               
               // First column - Filter By words
               strOutput += "<td><span class=\"FilterByText\">FILTER BY:</span> ";
               
               // Second to last column - Region
               strOutput += "<td  align=\"left\">";
               strOutput += "<span class=\"FilterBySubText\">REGION:</span> ";
               strOutput += "<select id=\"Camera_ddlRegion\" name=\"Camera_ddlRegion\" onchange=\"FilterHandler(true);\" class=\"FilterDrop\" style=\"width: 115px;\" >";  
               strOutput +=     "<option selected=\"selected\" value=\"\">All</option>";
                                // more options will be dynamically added
	           strOutput += "</select>&nbsp;";
        	   
//	           // Camera Type
//	           strOutput += "<span class=\"FilterBySubText\">TYPE:</span> ";
//               strOutput += "<select id=\"Camera_ddlType\" name=\"Camera_ddlType\" onchange=\"FilterHandler(false);\" class=\"FilterDrop\" style=\"width: 75px;\" >";
//               strOutput += "<option selected=\"selected\" value=\"\">All</option>";
//        	   // more options will be dynamically added
//	           strOutput += "</select>&nbsp;";
        	   
	           // Severity
	           strOutput += "<span class=\"FilterBySubText\">STATUS:</span> ";
               strOutput += "<select id=\"Camera_ddlStatus\" name=\"Camera_ddlStatus\" onchange=\"FilterHandler(false);\" class=\"FilterDrop\" style=\"width: 50px;\" >";
               strOutput +=     "<option selected=\"selected\" value=\"\">All</option>";
                                // more options will be dynamically added
               strOutput += "</select>&nbsp;";
               
               // Reset button
               strOutput += "<input type=\"button\" id=\"Camera_btnReset\" name=\"Camera_btnReset\" value=\"Reset\" onclick='ResetHandler();' class=\"GridButton\" />"
               
               // Print and help icons
               strOutput += "&nbsp;&nbsp;<a href=\"#\" id=\"helpLink\" onclick=\"this.href = 'javascript:myVoid()';helpFilePopupContent('/SiteTools/Help');\"><img src=\"/ATIS/App_Themes/ATIS/images/atis-flash-i-help.gif\" title='Help' alt=\"help\" border=\"0\"/></a>";
               
              //strOutput +=   "<a href=\"#\" onclick='this.href = \"javascript:myVoid()\";window.open(\"http://www.i-move.ca/AccessibleIndividualCameras?print=true\",\"_blank\",\"location=no,menubar=yes,resizable=yes,scrollbars=yes,status=yes,titlebar=yes,toolbar=yes\");' ><img title='Print' src=\"/ATIS/App_Themes/ATIS/images/atis-flash-i-print.gif\" alt=\"print\" hspace=\"5\" border=\"0\"/></a>"
                //            + "<a href=\"#\" id=\"helpLink\" onclick=\"this.href = 'javascript:myVoid()';helpFilePopupContent('/SiteTools/Help');\"><img src=\"/ATIS/App_Themes/ATIS/images/atis-flash-i-help.gif\" title='Help' alt=\"help\" border=\"0\"/></a>";

               // End of First Row
               strOutput += "</td></tr>";
               
               // Second Row - Type Checkboxes
               strOutput += "<tr >";
               strOutput += "<td>&nbsp;</td>";
               strOutput += "<td  align=\"left\"><span class=\"FilterBySubText\">TYPE:</span>";
               strOutput += "&nbsp;&nbsp;&nbsp;<input id=\"chk_CAM_Border_Grid\" type=\"checkbox\" onclick=\"toggleMapMenuCheckbox(this,null);FilterHandler(false);\" />Border";
               strOutput += "&nbsp;&nbsp;&nbsp;<input id=\"chk_CAM_TrafficInt_Grid\" type=\"checkbox\" onclick=\"toggleMapMenuCheckbox(this,null);FilterHandler(false);\" />Intersection";
               strOutput += "&nbsp;&nbsp;&nbsp;<input id=\"chk_CAM_TrafficHigh_Grid\" type=\"checkbox\" onclick=\"toggleMapMenuCheckbox(this,null);FilterHandler(false);\" />Highway";
               strOutput += "&nbsp;&nbsp;&nbsp;<input id=\"chk_CAM_Port_Grid\" type=\"checkbox\" onclick=\"toggleMapMenuCheckbox(this,null);FilterHandler(false);\" />Port</td>";
               strOutput += "</tr>";
                        
               strOutput += "</table>";
               
               // Current displayed search bar
               divSearchBar = divSearchBarContentName;
               break;
            }
            case "BusRoutes": {
                // Filter Criteria Content
               strOutput += "<table id=\"BusRouteSearchBar\" style=\"width:590px;\" class=\"FilterSearchBar\">";
               strOutput += "<tr><td>";
               
               // Filter By words
               strOutput += "<span class=\"FilterByText\">FILTER BY:</span> ";
               
               // Region
               strOutput += "<span class=\"FilterBySubText\">REGION:</span> ";
               strOutput += "<select id=\"BusRoute_ddlRegion\" name=\"BusRoute_ddlRegion\" onchange=\"FilterHandler(true);\" class=\"FilterDrop\" style=\"width: 115px;\" >";  
               strOutput += "<option selected=\"selected\" value=\"\">All</option>";
               // more options will be dynamically added
	           strOutput += "</select>&nbsp;";
        	   
	           // Severity
	           strOutput += "<span class=\"FilterBySubText\">EXCHANGE:</span> ";
               strOutput += "<select id=\"BusRoute_ddlExchange\" name=\"BusRoute_ddlExchange\" onchange=\"FilterHandler(false);\" class=\"FilterDrop\" style=\"width: 160px;\" >";
               strOutput += "<option selected=\"selected\" value=\"\">All</option>";
               // more options will be dynamically added
               strOutput += "</select>&nbsp;";
               
               // The following filter criterion has been taken out of requirement.
               // It will be kept here for future reference.
//               // Bus Route Type
//	           strOutput += "<span class=\"FilterBySubText\">TYPE:</span> ";
//               strOutput += "<select id=\"BusRoute_ddlType\" name=\"BusRoute_ddlType\" onchange=\"FilterHandler(false);\" class=\"FilterDrop\" style=\"width: 50px;\" >";
//               strOutput += "<option selected=\"selected\" value=\"\">All</option>";
//        	   // more options will be dynamically added
//	           strOutput += "</select>&nbsp;";
	           
               // Reset button
               strOutput += "<input type=\"button\" id=\"BusRoute_btnReset\" name=\"BusRoute_btnReset\" value=\"Reset\" onclick='ResetHandler();' class=\"GridButton\" />"
               
               // Print and help icons
               strOutput += "&nbsp;&nbsp;<a href=\"#\" id=\"helpLink\" onclick=\"this.href = 'javascript:myVoid()';helpFilePopupContent('/SiteTools/Help');\"><img src=\"/ATIS/App_Themes/ATIS/images/atis-flash-i-help.gif\" title='Help' alt=\"help\" border=\"0\"/></a>";
               
               //strOutput +=   "<a href=\"javascript:printPopupContent();\"><img src=\"/ATIS/App_Themes/ATIS/images/atis-flash-i-print.gif\" alt=\"print\" hspace=\"5\" border=\"0\"/></a>"
                 //           + "<a href=\"#\" id=\"helpLink\" onclick=\"this.href = 'javascript:myVoid()';helpFilePopupContent('/SiteTools/Help');\"><img src=\"/ATIS/App_Themes/ATIS/images/atis-flash-i-help.gif\" title='Print' alt=\"help\" border=\"0\"/></a>";


               // End of Filter by Row
               strOutput += "</td></tr>";
               strOutput += "</table>";
               
               // Current displayed search bar
               divSearchBar = divSearchBarContentName;
               break;
            }
            case "BusRoutesMap": {
                // Filter Criteria Content
               strOutput += "<table id=\"BusRouteMapSearchBar\" style=\"width:590px;\" class=\"FilterSearchBar\">";
               strOutput += "<tr><td>";
               
               // Filter By words
               strOutput += "<span class=\"FilterByText\">SELECTED ROUTES</span> ";
               
               // Print and help icons
               strOutput += "&nbsp;&nbsp;<a href=\"#\" id=\"helpLink\" onclick=\"this.href = 'javascript:myVoid()';helpFilePopupContent('/SiteTools/Help');\"><img src=\"/ATIS/App_Themes/ATIS/images/atis-flash-i-help.gif\" title='Help' alt=\"help\" border=\"0\"/></a>";

              // Print and help icons
               //strOutput +=   "<a href=\"javascript:printPopupContent();\"><img src=\"/ATIS/App_Themes/ATIS/images/atis-flash-i-print.gif\" alt=\"print\" title='Print' hspace=\"5\" border=\"0\"/></a>"
                 //           + "<a href=\"#\" id=\"helpLink\" onclick=\"this.href = 'javascript:myVoid()';helpFilePopupContent('/SiteTools/Help');\"><img src=\"/ATIS/App_Themes/ATIS/images/atis-flash-i-help.gif\" title='Help' alt=\"help\" border=\"0\"/></a>";
               
               // End of Filter by Row
               strOutput += "</td></tr>";
               strOutput += "</table>";
               
               // Current displayed search bar
               divSearchBar = divSearchBarContentName2;
               break;
            }
            default: {
                break;
            }
        }
        
       // put the HTML output into the div element
       var searchBarElement = document.getElementById(divSearchBar);
       
if (debug)
    alert(divSearchBar + " object is: " + searchBarElement);    

       searchBarElement.innerHTML = strOutput;   
        searchBarElement = null;
    }
    
    //*******************************************************************************
    // Function:     InitializeFilterBarCriteria
    // Author:       Michael Chu
    // Project:      iMove Build 0.9
    // Date:         Dec 01 2006
    //
    // Description:  This function loads initial filter bar criteria
    //               based on user saved state or default state
    //               for the advisories or cameras grid.
    //               Other grids will remain the same as they are not affected
    //               by saved state and default state.
    //
    // Parameters:   
    // Returns:
    // Called By:    LoadFilterBarContentBasedOnXMLData()
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //
    //*******************************************************************************
    function InitializeFilterBarCriteria(){

// Debug variable (set to 1 to debug)
var debug = 0;

if (debug)
    alert("InitializeFilterBarCriteria(\"" + "" + "\")");
        
        // Retrieve active tab cookie
        var activeTab = Get_Cookie( 'activeTab' );
    
        // get the layers saved for the specific tab it is on
        var savedCheckboxNames = GetSavedCheckboxNames();
        
        // only load saved state if it is on the advisories or cameras grid
        var tabSelectedId = GridTabSelected();
        
        if (savedCheckboxNames != null && savedCheckboxNames != "")
        {    
            if (tabSelectedId == AdvisoriesTabId || tabSelectedId == CamerasTabId)
	        {
                // load grid with saved state.
            
                // split the saved checkbox names into an array
                var partialCookieArr = savedCheckboxNames.split( "," );
                
                // loop through each saved checkbox name
                // and determine if it is one of the current checkboxes 
                // on the advisories or cameras grid;
                // if so, then check the checkbox
                for( var i=0; i<partialCookieArr.length-1; i++ ) 
                {
                        
                    var checkboxName = partialCookieArr[i] + "_Grid";
                    
                    switch (tabSelectedId) {
                        case AdvisoriesTabId: {
                                         
                           if (checkboxName == "chk_EV_CurInc_Grid"
                                || checkboxName == "chk_EV_CurCon_Grid"
                                || checkboxName == "chk_EV_CurEv_Grid"
                                || checkboxName == "chk_EV_FutCon_Grid"
                                || checkboxName == "chk_EV_FutEv_Grid"
                                || checkboxName == "chk_EV_FutSrvc_Grid")
                            {
                                var cbx = document.getElementById( checkboxName );
                                cbx.checked = true;
                                toggleMapMenuCheckbox(cbx, null, null);
                                cbx = null;
                            }
                           break;
                        }
                        case CamerasTabId: {
                           
                           if (checkboxName == "chk_CAM_Border_Grid"
                                || checkboxName == "chk_CAM_TrafficInt_Grid"
                                || checkboxName == "chk_CAM_TrafficHigh_Grid"
                                || checkboxName == "chk_CAM_Port_Grid")
                            {
                                var cbx = document.getElementById( checkboxName );
                                cbx.checked = true;
                                toggleMapMenuCheckbox(cbx, null, null);
                                cbx = null;
                            }
                            
                           break;
                        }
                        default: {
                            break;
                        }
                    }    
                }     
            }   
        }
        else
        {
            // load grid with default state based on active tab.
            
            switch( activeTab )     
            {
            
                case "Motorists" : {
                
                    if (tabSelectedId == AdvisoriesTabId) {
                        
                       //Brian NOTE : commented out the line below, as this was overwriting
                       //the grid everytime you switched tabs
                       
                        // turn on default Events checkboxes and layers on grid
                       // TurnOnDefaultEventsCheckboxesAndLayersOnGrid();
                    }        
                    else if (tabSelectedId == CamerasTabId) {
           
                        // no default camera layers to show
                    }  
                    
                    break;
                }
                case "Transit" : {

                    if (tabSelectedId == AdvisoriesTabId) {

                       //Brian NOTE : commented out the line below, as this was overwriting
                       //the grid everytime you switched tabs

                        // turn on all Events checkboxes and layers
                        //var cbx = document.getElementById( "chk_EV_CurEv_Grid" );
                        //cbx.checked = true;
                        //toggleMapMenuCheckbox(cbx, null, null);
                    }        
                    else if (tabSelectedId == CamerasTabId) {
           
                        // no default camera layers to show
                    }
                    
                    break;
                    
                }
                case "Cycling" : {
                
                    if (tabSelectedId == AdvisoriesTabId) {
                        
                        // no default event layers to show
                    }        
                    else if (tabSelectedId == CamerasTabId) {
           
                        // no default camera layers to show
                    }
                    
                    break;
                }
                case "Gateways" : {
                        
                    if (tabSelectedId == AdvisoriesTabId) {
                        
                        // no default event layers to show
                    }        
                    else if (tabSelectedId == CamerasTabId) {
           
                        // no default camera layers to show
                    }

                    break;
                }
                case "Visitors" : {
                        
                    if (tabSelectedId == AdvisoriesTabId) {
                        
                        // no default event layers to show
                    }        
                    else if (tabSelectedId == CamerasTabId) {
           
                        // no default camera layers to show
                    }
                    
                    break;
                }
                case "Commercial" : {
                    
                    if (tabSelectedId == AdvisoriesTabId) {
                        

                       //Brian NOTE : commented out the line below, as this was overwriting
                       //the grid everytime you switched tabs

                        // turn on default Events checkboxes and layers on grid
                        //TurnOnDefaultEventsCheckboxesAndLayersOnGrid();
                    }        
                    else if (tabSelectedId == CamerasTabId) {
           
                        // no default camera layers to show
                    }
                    
                    break;
                }
                default: {
        
                    break;
                }
                
            } //end switch( activeTab )
            
        }// end else   
        
        
        
    }

    //*******************************************************************************
    // Function:     ResetHTMLSelectOptions
    // Author:       Michael Chu
    // Project:      iMove Build 0.3
    // Date:         Sep 11 2006
    //
    // Description:  Reset the dropdownlists to select default value.
    //               This will result in showing all results rather than filtered.
    //
    // Parameters:   tab - the description of the tab to be reset for
    //               (Advisories, CameraGroups, Cameras)
    // Returns:
    // Called By:    one of the HTML Select onclick event
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //
    //*******************************************************************************
    function ResetHTMLSelectOptions()
    {
// Debug variable (set to 1 to debug)
var debug = 0;

        var tab = GridTabSelected();

if (debug)
    alert("ResetHTMLSelectOptions for tab: " + tab);
    
        switch (tab) {
            case AdvisoriesTabId: {
                var regionASelect = document.getElementById(AdvisoryRegionSelectName);
                //var typeASelect = document.getElementById(AdvisoryTypeSelectName);
                var severityASelect = document.getElementById(AdvisorySeveritySelectName);
                
                regionASelect.selectedIndex = 0;
                //typeASelect.selectedIndex = 0;
                severityASelect.selectedIndex = 0;
                regionASelect = null;
                severityASelect = null;
                break;
            }
            case CameraGroupsTabId: {
                var nameCGSelect = document.getElementById(CameraGroupNameSelectName);
                var descriptionCGSelect = document.getElementById(CameraGroupDescriptionSelectName);
                var regionCGSelect = document.getElementById(CameraGroupRegionSelectName);
                
                nameCGSelect.selectedIndex = 0;
                descriptionCGSelect.selectedIndex = 0;
                regionCGSelect.selectedIndex = 0;
                nameCGSelect = null;
                descriptionCGSelect = null;
                regionCGSelect = null;
                break;
            }
            case CamerasTabId: {

                var regionCSelect = document.getElementById(CameraRegionSelectName);
                //var typeCSelect = document.getElementById(CameraTypeSelectName);
                var statusCSelect = document.getElementById(CameraStatusSelectName);                

if (debug)
{
    alert("regionCSelect selectedIndex is : " + regionCSelect.selectedIndex + "\r\n" +
        "statusCSelect selectedIndex is : " + statusCSelect.selectedIndex + "\r\n");
}
                    
                regionCSelect.selectedIndex = 0;
                //typeCSelect.selectedIndex = 0;
                statusCSelect.selectedIndex = 0;
                regionCSelect = null;
                statusCSelect = null;
if (debug)
{
    alert("regionCSelect selectedIndex is : " + regionCSelect.selectedIndex + "\r\n" +
        "statusCSelect selectedIndex is : " + statusCSelect.selectedIndex + "\r\n");
}
                break;
            }
            case BusRoutesTabId: {

                var regionBSelect = document.getElementById(BusRouteRegionSelectName);
                var exchangeBSelect = document.getElementById(BusRouteExchangeSelectName);
                
                // The following filter criterion has been taken out of requirement.
                // It will be kept here for future reference.
//                var typeBSelect = document.getElementById(BusRouteTypeSelectName);                
                                    
                regionBSelect.selectedIndex = 0;
                exchangeBSelect.selectedIndex = 0;
//                typeBSelect.selectedIndex = 0;

                //remove all bus routes screen and grid
                TurnOffAllExistingBusRouteLayers();

                if (isFullScreenMap == true){

                    //delete all full screen active bus route cookies
                    Delete_Cookie( FSactiveBusRoutesCookieName, '/', '' );
                    Delete_Cookie( FSactiveBusRoutesStopsCookieName, '/', '' );
                    Delete_Cookie( FShighlightBusRouteCookieName, '/', '' );
               
                } else {

                    //delete all active bus route cookies
                    Delete_Cookie( activeBusRoutesCookieName, '/', '' );
                    Delete_Cookie( activeBusRoutesStopsCookieName, '/', '' );
                    Delete_Cookie( highlightBusRouteCookieName, '/', '' );
                }

                //reload the bus routes data grid as per normal
                LoadGridDataWhenNotPanAndZoom();                
                regionBSelect = null;
                exchangeBSelect = null;
                break;
            }
            default: {
                break;
            }
        }
    }

    //*******************************************************************************
    // Function:     ResetHTMLSelectOptions
    // Author:       Michael Chu
    // Project:      iMove Build 0.9
    // Date:         Dec 05 2006
    //
    // Description:  Reset all checkboxes to uncheck.
    //
    // Parameters:   
    // Returns:
    // Called By:    ResetHandler()
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //
    //*******************************************************************************
    function ResetHTMLCheckboxes()
    {
    
        // only load saved state if it is on the advisories or cameras grid
        var tabSelectedId = GridTabSelected();
            
        if (tabSelectedId == AdvisoriesTabId || tabSelectedId == CamerasTabId)
	    {
                    
            switch (tabSelectedId) {
                case AdvisoriesTabId: {

                    var cbx;
                    cbx = document.getElementById( "chk_EV_CurInc_Grid" );
                    cbx.checked = false;
                    toggleMapMenuCheckbox(cbx, null, null);
                     
                    cbx = document.getElementById( "chk_EV_CurCon_Grid" );
                    cbx.checked = false;
                    toggleMapMenuCheckbox(cbx, null, null);
                    
                    cbx = document.getElementById( "chk_EV_CurEv_Grid" );
                    cbx.checked = false;
                    toggleMapMenuCheckbox(cbx, null, null);
                    
                    cbx = document.getElementById( "chk_EV_FutCon_Grid" );
                    cbx.checked = false;
                    toggleMapMenuCheckbox(cbx, null, null);
                    
                    cbx = document.getElementById( "chk_EV_FutEv_Grid" );
                    cbx.checked = false;
                    toggleMapMenuCheckbox(cbx, null, null);
                    
                    cbx = document.getElementById( "chk_EV_FutSrvc_Grid" );
                    cbx.checked = false;
                    toggleMapMenuCheckbox(cbx, null, null);
                    
                    cbx = null;
                    
                    break;
                }
                case CamerasTabId: {
                    
                    var cbx;
                    cbx = document.getElementById( "chk_CAM_Border_Grid" );
                    cbx.checked = false;
                    toggleMapMenuCheckbox(cbx, null, null);
                    
                    cbx = document.getElementById( "chk_CAM_TrafficInt_Grid" );
                    cbx.checked = false;
                    toggleMapMenuCheckbox(cbx, null, null);
                    
                    cbx = document.getElementById( "chk_CAM_TrafficHigh_Grid" );
                    cbx.checked = false;
                    toggleMapMenuCheckbox(cbx, null, null);
                    
                    cbx = document.getElementById( "chk_CAM_Port_Grid" );
                    cbx.checked = false;
                    toggleMapMenuCheckbox(cbx, null, null);
                    
                    cbx = null;
                    
                    break;
                }
            }
        }


    }
    

    //*******************************************************************************
    // Function:     loadXMLDoc
    // Author:       Michael Chu
    // Project:      iMove Build 0.8
    // Date:         Nov 14, 2006
    //
    // Description:  Load the xml data for dropdownlists used
    //               for the corresponding tab - using different method 
    //               for different browsers. Supports IE and firefox.
    //
    // Parameters:   fileCode - the description of the file to be loaded 
    //               (Advisories_Region, Advisories_Type, Advisories_Severity, 
    //               CameraGroups_Name, CameraGroups_Description, CameraGroups_Region, 
    //               Cameras_Region, Cameras_Type, Cameras_Status,
    //               BusRoutes_Region, BusRoutes_Exchange, BusRoutes_Type)
    // Returns:
    // Called By:    LoadFilterBarContentBasedOnXMLData()
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //  Michael Chu  Nov 14 2006 Modify to add filter bar for bus routes
    //*******************************************************************************
    function loadXMLDoc(fileCode, xmlFile) {

// Debug variable (set to 1 to debug)
var debug = 0;

if (debug)
    alert("START calling function loadXMLDoc");
        
        if(window.XMLHttpRequest) {
        
            // Safari/Mozilla - branch for native XMLHttpRequest object 

    	    var req = new XMLHttpRequest();
            //req.onreadystatechange = requestStateHandler;
            
            req.onreadystatechange = function(){requestStateHandler(req, fileCode);};

            req.open("GET", xmlFile, true);
            req.send("");
        }
        else if (document.implementation.createDocument) 
        {
if (debug)
    alert("Browser: FireFox");
        
            //Firefox
            var xmlDocument = document.implementation.createDocument('', 'doc', null);
            
            //The individual load handler function is added during load event
            xmlDocument.addEventListener('load', function (e){loadXMLDocForDDL(this, fileCode);}, false);
            
            // must call this load method after listener is added, otherwise it might not fire
            var loadResult = xmlDocument.load(xmlFile); // returns true if success load

            if (loadResult) 
            {
if (debug)
    alert("XML Doc loaded");    
            
            }
            else 
            {
                feedError1();
                return false;
            }
        }
        else 
        { //IE
            var xmlDocument = new ActiveXObject('Microsoft.XMLDOM');
            xmlDocument.async = false;
            var loadResult = xmlDocument.load(xmlFile);
if (debug)
    if (!loadResult)
        //alert("Load XML file status: failed for: " + xmlFile);
        alert("Oops - we're not able to complete this request right now. Please try again. If you still have problems, please let us know at webmaster@i-move.ca Thank you.");
        
            if (loadResult) 
            {
                loadXMLDocForDDL(xmlDocument, fileCode);
            } 
            else 
            {
                feedError1();
                return false;
            }
        }
        return true;
    }

    //*******************************************************************************
    // Function:     requestStateHandler
    // Author:       Michael Chu
    // Project:      iMove Build 1.7
    // Date:         Jan 15, 2007
    //
    // Description:  AJAX request state handler. When request is ready,
    //               it will call function loadXMLDocForDDL(). Used for the 
    //               browser Safari.
    //
    // Parameters:   req - XMLHttpRequest request object 
    //               fileCode - the description of the file to be loaded 
    //               (Advisories_Region, Advisories_Type, Advisories_Severity, 
    //               CameraGroups_Name, CameraGroups_Description, CameraGroups_Region, 
    //               Cameras_Region, Cameras_Type, Cameras_Status,
    //               BusRoutes_Region, BusRoutes_Exchange, BusRoutes_Type)
    // Returns:
    // Called By:    loadXMLDoc()
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //  
    //*******************************************************************************
    function requestStateHandler(req, fileCode) {
        
        try {
            if (req.readyState == 4) { //response ready
                if (req.status == 200) { //OK response
                    loadXMLDocForDDL(req.responseXML.documentElement, fileCode);
                } else {
                    alert('There was a problem with the request.');
                }
            }
        }
        catch( e ) {
            alert('Caught Exception: ' + e.description);
        }
    }

    //*******************************************************************************
    // Function:     loadXMLDocHandler
    // Author:       Michael Chu
    // Project:      iMove Build 0.3
    // Date:         Sep 11 2006
    //
    // Description:  The event handler for browser compatibility handles the
    //               FireFox xml document's load event. It simplies delegate
    //               the processing to function loadXMLDocForDDL().
    //
    // Parameters:   
    // Returns:
    // Called By:    xml document's load event that is added in function loadXMLDoc()
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //
    //*******************************************************************************
    function loadXMLDocHandler(xmlDocument, fileCode)
    {
// Debug variable (set to 1 to debug)
var debug = 0;

if (debug)
    alert("fileCOde: " + fileCode + "");
    
        loadXMLDocForDDL(xmlDocument,fileCode);
    }

    //*******************************************************************************
    // Function:     loadXMLDocForDDL
    // Author:       Michael Chu
    // Project:      iMove Build 0.8
    // Date:         Nov 14 2006
    //
    // Description:  The event handler takes the xml document
    //               and parse the needed elements to populate a dropdownlist
    //               on the front end.
    //
    // Parameters:   xmlDoc - xml document
    //               fileCode - the description of the file to be loaded 
    //               (Advisories_Region, Advisories_Type, Advisories_Severity, 
    //               CameraGroups_Name, CameraGroups_Description, CameraGroups_Region, 
    //               Cameras_Region, Cameras_Type, Cameras_Status,
    //               BusRoutes_Region, BusRoutes_Exchange, BusRoutes_Type)
    // Returns:
    // Called By:    xml document's load event that is added in function loadXMLDoc()
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //  Michael Chu  Nov 14 2006 Modify to add filter bar for bus routes
    //*******************************************************************************
    function loadXMLDocForDDL(xmlDoc, fileCode)
    {
// Debug variable (set to 1 to debug)
var debug = 0;

if (debug)
    alert("loadXMLDocForDDL(\""+ fileCode + "\")");

        switch (fileCode) {
            // Advisories
            case "Advisories_Region": {
                traverseDocAndLoadDDL(xmlDoc, "Advisory_ddlRegion", "Regions", "region", "id", "name");
                break;
            }
            case "Advisories_Type": {
                traverseDocAndLoadDDL(xmlDoc, "Advisory_ddlType", "EventTypes", "eventType", "id", "descr");
                break;
            }
            case "Advisories_Severity": {
                traverseDocAndLoadDDL(xmlDoc, "Advisory_ddlSeverity", "EventPriorities", "eventPriority", "id", "descr");
                break;
            }
            // Camera Groups
            case "CameraGroups_Name": {
                traverseDocAndLoadDDL(xmlDoc, "CameraGroup_ddlName", "CameraGroups", "cameraGroup", "id", "groupName");
                break;
            }
            case "CameraGroups_Description": {
                traverseDocAndLoadDDL(xmlDoc, "CameraGroup_ddlDescription", "CameraGroups", "cameraGroup", "id", "descr");
                break;
            }
            case "CameraGroups_Region": {
                traverseDocAndLoadDDL(xmlDoc, "CameraGroup_ddlRegion", "Regions", "region", "id", "name");
                break;
            }
            // Cameras
            case "Cameras_Region": {
                traverseDocAndLoadDDL(xmlDoc, "Camera_ddlRegion", "Regions", "region", "id", "name");
                break;
            }
            case "Cameras_Type": {
                traverseDocAndLoadDDL(xmlDoc, "Camera_ddlType", "CameraTypes", "cameraType", "id", "descr");
                break;
            }
            case "Cameras_Status": {
                traverseDocAndLoadDDL(xmlDoc, "Camera_ddlStatus", "CameraStatus", "cameraStatus", "id", "descr");
                break;
            }
            case "BusRoutes_Region": {
                traverseDocAndLoadDDL(xmlDoc, "BusRoute_ddlRegion", "Regions", "region", "id", "name");
                break;
            }
            case "BusRoutes_Exchange": {
                traverseDocAndLoadDDL(xmlDoc, "BusRoute_ddlExchange", "Exchanges", "exchange", "id", "name");
                break;
            }
//            case "BusRoutes_Type": {
//                traverseDocAndLoadDDL(xmlDoc, "BusRoute_ddlType", "BusRouteTypes", "busRouteType", "id", "descr");
//                break;
//            }
            default: {
                break;
            }
        }
    }

    //*******************************************************************************
    // Function:     traverseDocAndLoadDDL
    // Author:       Michael Chu
    // Project:      iMove Build 0.3
    // Date:         Sep 11 2006
    //
    // Description:  Traverse the XML document and parse the data and 
    //               add selections for the dropdownlists based on the data.
    //
    // Parameters:   xmlDoc - xml document data
    //               ddlName - dropdownlist that selection data will be added
    //               rootElementName - root element name
    //               childElementName - child element name
    //               valueElementName - name of element used for the value of the dropdownlist
    //               textElementName - name of element used for the text of the dropdownlist
    // Returns:
    // Called By:    loadXMLDocHandler()
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //
    //*******************************************************************************
    function traverseDocAndLoadDDL(xmlDoc, ddlName, rootElementName, childElementName, valueElementName, textElementName)
    {
// Debug variable (set to 1 to debug)
var debug = 0;

if (debug)
    alert("traverseDocAndLoadDDL(\"" + ddlName + "\")");

       // Retrieve the dropdownlist
       var ddl = document.getElementById(ddlName);
       
       
if (debug)
{
    if (ddl == null)
        alert("Cannot find dropdownlist: (\"" + ddlName + "\")");
    else
        alert("Dropdownlist found");
}

    
       // Value
       var value="";   // value attribute 
       
       // Text
       var text="";     // text attribute
       
       // Retrieve rows
       var Rows = xmlDoc.getElementsByTagName(childElementName);

if (debug)
    alert("Rows.length: " + Rows.length);
           
       
       for(i = 0; i < Rows.length; i++){
   
            // Get the text and value of the option to be added.
            text = Rows[i].getElementsByTagName(textElementName);
            text = text[0].firstChild.nodeValue;
            value = Rows[i].getElementsByTagName(valueElementName);
            value = value[0].firstChild.nodeValue;
            
            // Append the option
            appendOptionLast(ddlName, text, value);
            
        }  
        ddl = null; 
    }

    //*******************************************************************************
    // Function:     LoadGridContentBasedOnXMLData
    // Author:       Michael Chu
    // Project:      iMove Build 0.2
    // Date:         Sep 07 2006
    //
    // Description:  This function loads the xml data for events
    //               and build the grid with this data into html code
    //               that will be populate into the div element corresponding
    //               to the content grid to be displayed.
    //
    // Parameters:   grid - the description of the grid to be loaded 
    //               (Events, CameraGroups, Cameras)
    //               file - the file location of the xml data file
    //               obj - the object that invokes the call
    // Returns:
    // Called By:    Whenever the specified grid needs to be loaded again.
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //
    //*******************************************************************************
    function LoadGridContentBasedOnXMLData(grid, file, obj)
    {
        
        loadXMLForGrid(grid, file, obj);
    }
    
    //*******************************************************************************
    // Function:     loadXMLForGrid
    // Author:       Michael Chu
    // Project:      iMove Build 0.7
    // Date:         Nov 9, 2006
    //
    // Description:  Load the xml file - using different method 
    //               for different browsers. Supports IE and firefox.
    //
    // Parameters:   grid - the description of the grid to be loaded 
    //               (Events, CameraGroups, Cameras)
    //               file - the file location of the xml data file
    //               obj - the object that invokes the call
    // Returns:
    // Called By:    LoadGridContentBasedOnXMLData()
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    // Michael Chu   Nov 9, 2006 Modify to account for bus routes case.
    //*******************************************************************************
    function loadXMLForGrid(grid, xmlFile, obj) {

// Debug variable (set to 1 to debug)
var debug = 0;

if (debug)
    alert("START calling function loadXMLForGrid(\"" + grid + "\")");

        // temporary variable for representing current grid to display
        var divGrid = "";
        
        switch (grid) {
                case "Events": {
                
                
                    // add the sorting query string for sorting the data
                    if (xmlFile.lastIndexOf("Sort") == -1)
                        xmlFile += "&Sort=started";
                        
                    // if the sorting is not based on toggling, then 
                    // add the sorting order query string
                    if (xmlFile.lastIndexOf("SortToggle") == -1)
                    {
                        if (xmlFile.lastIndexOf("SortOrder") == -1)
                            xmlFile += "&SortOrder=false";
                    }
                    
                    // special case: generate number for each advisory
                    if (xmlFile.lastIndexOf("Numbered") == -1)
                        xmlFile += "&Numbered=true";
                    
                    // special case: generate out of boundary flag for advisories
                    if (xmlFile.lastIndexOf("FlagOutOfBound") == -1)
                        xmlFile += "&FlagOutOfBound=true";
                    
                    // Set grid 1 to be displayed
                    divGrid = divGridContentName;
                    
                    break;
                }
                case "CameraGroups": {
                    
                    // add the sorting query string for sorting the data
                    if (xmlFile.lastIndexOf("Sort") == -1)
                        xmlFile += "&Sort=groupName,descr,region";

                    // Set grid 1 to be displayed
                    divGrid = divGridContentName;
                    
                    break;
                }
                case "Cameras": {
                    // add the sorting query string for sorting the data
                    if (xmlFile.lastIndexOf("Sort") == -1)
                        xmlFile += "&Sort=shortDescr,region";
        
                    // Set grid 1 to be displayed
                    divGrid = divGridContentName;
                    
                    break;
                }
                case "BusRoutes": {
                    
                    // add the sorting query string for sorting the data
                    if (xmlFile.lastIndexOf("Sort") == -1)
                        xmlFile += "&Sort=routeNumber,routeName";
                    
                    // add the query string for the grid to be displayed
                    if (xmlFile.lastIndexOf("GridNumber") == -1)
                        xmlFile += "&GridNumber=1";
        
                    // Set grid 1 to be displayed
                    divGrid = divGridContentName;
                    
                    break;
                }                
                case "BusRouteDetails": {
                    
                    // SPECIAL CASE: 
                    
                    // no sort expression
                    
                    // use default response type (XML)
                    
                    // Set the corresponding grid to be displayed
                    divGrid = findBusRoutesDetailsDivName(obj);
                    
                    break;
                }
                case "BusRoutesMap": {
                    
                    // add the sorting query string for sorting the data
                    if (xmlFile.lastIndexOf("Sort") == -1)
                        xmlFile += "&Sort=routeNumber,name";
                        
                    // add the query string for the grid to be displayed
                    if (xmlFile.lastIndexOf("GridNumber") == -1)
                        xmlFile += "&GridNumber=2";
        
                    // Set grid 2 to be displayed
                    divGrid = divGridContentName2;
                    
                    break;
                }
                case "EventCameras": {
                    // SPECIAL CASE: 
                    
                    // no sort expression
                    
                    // use default response type (XML)
                    
                    LoadClosestCameras(grid, xmlFile, obj);
                    return true;
                    //return true; // exit: this is an exception case
                    // where we are not using XMLHttpRequest since
                    // the performance is not impacted much here using client
                    // side parsing
                    break;
                }
                default: {
                    break;
            }
        }
        
        
        // add the reponse type as query parameter
        if (xmlFile.lastIndexOf("resultType") == -1)
            xmlFile += "&resultType=GridHTML";
        
        // this will reset any current xmlhttp thread
        var xmlhttp = null;
        
        // code for Mozilla, etc.
        if (window.XMLHttpRequest)
        {
          xmlhttp = new XMLHttpRequest();
        }
        // code for IE
        else if (window.ActiveXObject)
        {
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        if (xmlhttp!=null)
        {
            
            xmlhttp.onreadystatechange = function () {state_Change(xmlhttp, divGrid);}


    
if (debugPerformance)
    PrintElapseTime("START get grid response");
        
        
          // Since IE cache response for same url request,
          // we will add timestamp to generate a new request response
          if (window.ActiveXObject)
          {
              var timeStamp;
              timeStamp = new String(new Date());
              timeStamp = URLEncode(timeStamp);
            
              xmlFile += "&TimeStamp=" + timeStamp;
          }

//debugCouldNotReadMemoryError(xmlFile, "generateGrid");

if (debugThreadAJAX)
{
    countThreadAJAX2++;
    if (countThreadAJAX2 > 2)
        alert("countThreadAJAX2:" + countThreadAJAX2);
}
    // increase the number of grid download AJAX threads
    countThreadAJAXForGrid++;

          // Specifies the method, URL, asynchronous
          xmlhttp.open("GET", xmlFile, true);
    
          // Sends the request without any content
          xmlhttp.send(null);
          
if (debugPerformance)
    PrintElapseTime("state_Change(): start download xml file " + xmlFile);
    
        }
        else
        {
          alert("Your browser does not support XMLHTTP.");
          feedError();
          return false;
        }
        
        return true;
    }
    
    //*******************************************************************************
    // Function:     LoadClosestCameras
    // Author:       Michael Chu
    // Project:      iMove Build 0.6
    // Date:         Oct 19 2006
    //
    // Description:  Load the xml file - using different method 
    //               for different browsers. Supports IE and firefox.
    //
    // Parameters:   grid - the description of the grid to be loaded 
    //               (Events, CameraGroups, Cameras)
    //               file - the file location of the xml data file
    //               obj - the object that invokes the call
    // Returns:
    // Called By:    loadXMLForGrid()
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //
    //*******************************************************************************
    function LoadClosestCameras(grid, xmlFile, obj)
    {
        if (window.XMLHttpRequest) {
        
            // Safari/Mozilla - branch for native XMLHttpRequest object 

    	    var req = new XMLHttpRequest();
            //req.onreadystatechange = requestStateHandler;
            
            req.onreadystatechange = function(){loadHandlerEventCamerasForSafari(req, obj);};

            req.open("GET", xmlFile, true);
            req.send("");
        }
        else if (document.implementation.createDocument) 
        {//Firefox
            var xmlDocument = document.implementation.createDocument('', 'doc', null);
            var loadResult = xmlDocument.load(xmlFile);
            
            if (loadResult) 
            {
                xmlDocument.addEventListener('load', function(e){loadHandlerEventCameras(this, obj);}, false);
            }
            else 
            {
                feedError();
                return false;
            }
        }
        else 
        { //IE
            
            //alert("load closest cameras");
            var xmlDocument = new ActiveXObject('Microsoft.XMLDOM');
            xmlDocument.async = false;
            
            var loadResult = xmlDocument.load(xmlFile);
            
            if (loadResult) 
            {
                // process xml document with DOM methods e.g.
                traverseEventCameras(xmlDocument, obj);
            } 
            else 
            {
                feedError();
                return false;
            }
        }
        return true;
    }
    
    //*******************************************************************************
    // Function:     state_Change
    // Author:       Michael Chu
    // Project:      iMove Build 0.6
    // Date:         Oct 19 2006
    //
    // Description:  This event handler is triggered each time the state of the 
    //               request changes. The states run from 0 (uninitialized) to 4
    //               (complete). By having the function xmlhttpChange() check for
    //               the state changing, we can tell when the process is complete 
    //               and continue only if it has been successful.
    //
    // Parameters:   
    // Returns:
    // Called By:    
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //
    //*******************************************************************************
    function state_Change(xmlhttpobj, divGrid)
    {
        
                // if xmlhttp shows "loaded"
                if (xmlhttpobj.readyState == 4)
                {
                    // if "OK"
                    if (xmlhttpobj.status == 200)
                    {
                        
                        // decrease the number of grid download AJAX threads
                        countThreadAJAXForGrid--;
if (debugThreadAJAX)
{
    countThreadAJAX2--;
}

//if (!debugPerformance)
//    PrintElapseTime("START innerHTML=xmlhttp.responseText");
            
                        // Retrieve response
                        var textResponse = xmlhttpobj.responseText;
                        
                        // Get reference to div element 
                        var gridElement = document.getElementById(divGrid);
                        
                        // deals with memory leak
                        // it has been commented out because this is long process
/*if (!debugPerformance)
    PrintElapseTime("START purge");                        */
                        //purge( gridElement );
                        gridElement.innerHTML = "";
/*if (!debugPerformance)
    PrintElapseTime("end purge");                        */
                        // Indicates whether this is related to bus routes
                        var busRoutesGrid1 = textResponse.indexOf("\"pnlBusRouteResults\"");
                        
//if (divGrid==divGridContentName || divGrid==divGridContentName2)
//if (busRoutesGrid1 >= 0)
//    PrintElapseTime("start state change - loading content for grid: " + divGrid);
                        

//alert(textResponse);
                        // Set text response for grid content
                        gridElement.innerHTML = textResponse;
                        
                        // Hide loading message for bus routes grid 1.
                        //if (busRoutesGrid1 >= 0)
                        if (countThreadAJAXForGrid == 0)
                        {
                            hideLoadingGrid();
                        }
                        
                        // Clean up xml http request object
                        xmlhttpobj = null;
                        gridElement = null;
    
if (debugPerformance)
    PrintElapseTime("state_Change(): end download xml file for grid " + divGrid);
                    }
                    else
                    {
                        alert("Problem retrieving data:" + xmlhttpobj.statusText);
                    }
                } 
        
    }
    
    //*******************************************************************************
    // Function:     loadHandlerEvents
    // Author:       Michael Chu
    // Project:      iMove Build 0.2
    // Date:         Sep 07 2006
    //
    // Description:  Firefox - event handler for when the Events XML file 
    //               is loaded.
    //
    // Parameters:   xmlDoc - xml document
    //               obj - the object that invokes original call
    // Returns:
    // Called By:    XML file load event
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //
    //*******************************************************************************
    function loadHandlerEvents (xmlDoc, obj) {
        traverseEvents(xmlDoc, obj);
    }
    
    //*******************************************************************************
    // Function:     loadHandlerEventCameras
    // Author:       Michael Chu
    // Project:      iMove Build 0.2
    // Date:         Sep 07 2006
    //
    // Description:  Firefox - event handler for when the event's closest cameras
    //               XML file is loaded.
    //
    // Parameters:   xmlDoc - xml document
    //               obj - the object that invokes original call
    // Returns:
    // Called By:    XML file load event
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //
    //*******************************************************************************
    function loadHandlerEventCameras (xmlDoc, obj) {
        traverseEventCameras(xmlDoc, obj);
    }
    
    //*******************************************************************************
    // Function:     loadHandlerEventCamerasForSafari
    // Author:       Michael Chu
    // Project:      iMove Build 1.8
    // Date:         Jan 15, 2007
    //
    // Description:  AJAX request state handler. When request is ready,
    //               it will call function loadXMLDocForDDL(). Used for the 
    //               browser Safari.
    //
    // Parameters:   req - XMLHttpRequest request object 
    //               obj - the object that invokes original call
    // Returns:
    // Called By:    LoadClosestCameras()
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //  
    //*******************************************************************************
    function loadHandlerEventCamerasForSafari (req, obj) {
        
        try {
            if (req.readyState == 4) { //response ready
                if (req.status == 200) { //OK response
                    traverseEventCameras(req.responseXML.documentElement, obj);
                } else {
                    alert('There was a problem with the request for loading advisory cameras.');
                }
            }
        }
        catch( e ) {
            alert('Caught Exception: ' + e.description);
        }
    }

    //*******************************************************************************
    // Function:     loadHandlerCameraGroups
    // Author:       Michael Chu
    // Project:      iMove Build 0.2
    // Date:         Sep 07 2006
    //
    // Description:  Firefox - event handler for when the CameraGroups XML file 
    //               is loaded.
    //
    // Parameters:   xmlDoc - xml document
    //               obj - the object that invokes original call
    // Returns:
    // Called By:    XML file load event
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //
    //*******************************************************************************
    function loadHandlerCameraGroups (xmlDoc, obj) {
        traverseCameraGroups(xmlDoc, obj); //Call the Commen function with 'this' data.
    }

    //*******************************************************************************
    // Function:     loadHandlerCameras
    // Author:       Michael Chu
    // Project:      iMove Build 0.2
    // Date:         Sep 07 2006
    //
    // Description:  Firefox - event handler for when the Cameras XML file 
    //               is loaded.
    //
    // Parameters:   xmlDoc - xml document
    //               obj - the object that invokes original call
    // Returns:
    // Called By:    XML file load event
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //
    //*******************************************************************************
    function loadHandlerCameras (xmlDoc, obj) {
        traverseCameras(xmlDoc, obj); //Call the Commen function with 'this' data.
    }
    
    
    //*******************************************************************************
    // Function:     CheckLoadBusRoutesGridDetails
    // Author:       Michael Chu
    // Project:      iMove Build 1.8
    // Date:         Jan 16 2007
    //
    // Description:  This will check if a user has clicked on the expand or collapse
    //               image to view the bus route's details. It will not load
    //               the grid content if the user is collapsing the row.
    //
    // Parameters:   linkImage - the object that invokes original call
    //               routeId - bus route id
    //               
    // Returns:
    // Called By:    When user expands the individual event row.
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //
    //*******************************************************************************
    function CheckLoadBusRoutesGridDetails(linkImage, routeId)
    {
    
// Debug variable (set to 1 to debug)
var debug = 0;

        var index = linkImage.src.lastIndexOf("/");
        var lastIndex = linkImage.src.length;
        var src = linkImage.src.substring(index+1, lastIndex);

if (debug)
    alert("link image: " + src + ".\r\n" +
        "RouteId: " + routeId + "\r\n");

        if (src == "minus.gif")
        {
if (debug)
    alert("LoadGridContentBasedOnXMLData('BusRouteDetails')");
            
            LoadGridContentBasedOnXMLData("BusRouteDetails", "/atisservices/services/BusRoutesGrid.aspx?resultType=GridHTML&detailsId=" + routeId, linkImage);
        }
        else
        {
if (debug)
    alert("Did not LoadGridContentBasedOnXMLData('BusRouteDetails')");
            ; // do nothing
        }
            
    }
    
    
    //*******************************************************************************
    // Function:     CheckLoadGridContent
    // Author:       Michael Chu
    // Project:      iMove Build 0.3
    // Date:         Sep 11 2006
    //
    // Description:  This will check if a user has clicked on the expand or collapse
    //               image to view the event closest cameras. It will not load
    //               the grid content if the user is collapsing the row.
    //
    // Parameters:   tree - xml document data
    //               obj - the object that invokes original call
    // Returns:
    // Called By:    When user expands the individual event row.
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //
    //*******************************************************************************
    function CheckLoadGridContent(linkImage, Longitude, Latitude)
    {
// Debug variable (set to 1 to debug)
var debug = 0;

        var index = linkImage.src.lastIndexOf("/");
        var lastIndex = linkImage.src.length;
        var src = linkImage.src.substring(index+1, lastIndex);

if (debug)
    alert("link image: " + src + ".\r\n" +
        "Longitude: " + Longitude + "\r\n" +
        "Latitude: " + Latitude + "\r\n");

        if (src == "minus.gif")
        {
if (debug)
    alert("LoadGridContentBasedOnXMLData('EventCameras')");
            
            LoadGridContentBasedOnXMLData("EventCameras", "/atisservices/services/Cameras.aspx?ClosestLng=" + Longitude + "&ClosestLat=" + Latitude, linkImage);
        }
        else
        {
if (debug)
    alert("Did not LoadGridContentBasedOnXMLData('EventCameras')");
            ; // do nothing
        }
            
    }
    
    //*******************************************************************************
    // Function:     traverseEventCameras
    // Author:       Michael Chu
    // Project:      iMove Build 0.2
    // Date:         Sep 07 2006
    //
    // Description:  Traverse the XML document and parse the data and build
    //               the HTML output for the div element 'Event_<event id>_Cameras'.
    //
    // Parameters:   tree - xml document data
    //               obj - the object that invokes original call
    // Returns:
    // Called By:    When user expands the individual event row.
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //
    //*******************************************************************************
    function traverseEventCameras(tree, obj) {

// Debug variable (set to 1 to debug)
var debug = 0;

       var strOutput = "";  // Output HTML response
       
       // Cameras
       var ImageURL="";     // imageUrl element
       
       var id = obj.id;

if (debug)
    alert("obj.id: " + id);       
       
       var index = id.indexOf("_");
       var lastIndex = id.lastIndexOf("_");
       
       // Coming from image object
       //Table_" + IncidentID + "_Image
       //var index = 5;
       //var lastIndex = 7;
       var IncidentID = obj.id.substring(index+1, lastIndex);
       var divContentName = "Event_" + IncidentID + "_Cameras";
       
       var childElementName = "camera";
       var Cameras = tree.getElementsByTagName(childElementName);
              
        // Closest cameras
        // The following builds the string to display closest cameras
        strOutput = strOutput + "<table border=\"0\" width=\"100%\">";
            
        // display in each row, up to four cameras, if cameras still exist.
        var count = tree.getElementsByTagName(childElementName).length;
        var n = 0;


        
        var rowCount = count / 4;
        if (count % 4 > 0)
            rowCount ++;
if (debug)
    alert("rowCount: " + rowCount);  
        
        if (rowCount > 0)
        {
            strOutput += "<tr>";
            strOutput += "<td align=\"left\" colspan=\"4\">";
            strOutput += "View closest cameras<br />";
            strOutput += "</td>";
            strOutput += "</tr>";
        }
        else
        {
            strOutput += "<tr>";
            strOutput += "<td colspan=\"4\">";
            strOutput += "Oops - there is no closest camera located in this area.<br />";
            strOutput += "</td>";
            strOutput += "</tr>";
        }
            
        for(r = 0; r < rowCount; r++){
            strOutput = strOutput + "<tr>";
                
            for(c = 0; c < 4; c++){
                if (n < count)
                {
                    strOutput = strOutput + "<td align=\"center\" style=\"width:125px;\">";
                        
                    ImageURL = Cameras[n].getElementsByTagName("imageUrl");
                    ImageURL = ImageURL[0].firstChild.nodeValue;
                    
                    Description = Cameras[n].getElementsByTagName("shortDescr");
                    Description = Description[0].firstChild.nodeValue;
                    
                    // Encode the string passed as query string
                    DescriptionEncoded = URLEncode(Description);      

                    var lImageTestTemp = ImageURL;        
                    var lImageTest=0;                    
                    var lImageNewSrcURL;

                    //check to see if image is from the new MOT data
                    lImageTest = lImageTestTemp.indexOf('getFile.aspx');   

                    if (lImageTest != -1){        
                        
                        ImageURLEncoded = URLEncode(ImageURL);
                        
                        //create the new image source URL                            
                        lImageNewSrcURL = ImageURL + getTimeStampAndQueryString();
                        
                       // alert("yes: " + lImageNewSrcURL);            
                        
                    } else {
                        //alert("no: " + lImageTestTemp);            
                        ImageURLEncoded = URLEncode(ImageURL);                        
                        
                        //create the new image source URL                            
                        lImageNewSrcURL = ImageURL + getTimeStampQueryString();
                        
                        //alert("no: " + lImageNewSrcURL);
                    }

                    //ImageURLEncoded = URLEncode(ImageURL);                                        
                    
                    strOutput += "<a href='#Table_" + IncidentID + "_Cameras' onclick='window.open(\"/IndividualCamera?PictureURL=" + ImageURLEncoded + "&Name=" + DescriptionEncoded + "\",\"_blank\",\"width=450,height=550\");'>";
                    strOutput += "<img title='ThumbNail' alt=\"ThumbNail\" border=\"0\" width=\"80px\" height=\"60px\" src='" + lImageNewSrcURL + "' /><br />";
                    //strOutput += "<img title='ThumbNail' alt=\"ThumbNail\" border=\"0\" width=\"80px\" height=\"60px\" src='" + ImageURL + getTimeStampQueryString() + "' /><br />";
                    strOutput += "Click to enlarge";
                    strOutput += "</a>";
                    
                    strOutput += "</td>";
                    
                    // increase counter to move to next camera
                    n++;
                }
                    
            } // end inner For
            
            strOutput = strOutput + "</tr>";
        }// end outer For
        
        strOutput = strOutput + "</table>";
    
        var divE =  document.getElementById(divContentName);

if (debug)
    if (divE == null)
        alert("EventCameras: divContentName is null: " + divContentName);
        
       //strOutput = "Testing closest cameras";
       // put the HTML output into the div element
       //document.getElementById(divContentName).innerHTML = strOutput;
       divE.innerHTML = strOutput;
       divE = null;
       
if (debug)
    alert("divE.innerHTML:" + divE.innerHTML);
    }
    
    //*******************************************************************************
    // Function:     findBusRoutesDetailsDivName
    // Author:       Michael Chu
    // Project:      iMove Build 1.8
    // Date:         Jan 16 2007
    //
    // Description:  Find the div element in which the user has expanded 
    //               the bus route record.
    //
    // Parameters:   obj - the object that invokes original call
    // Returns:
    // Called By:    When user expands the individual bus route row.
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //
    //*******************************************************************************
    function findBusRoutesDetailsDivName(obj) {

// Debug variable (set to 1 to debug)
var debug = 0;

       var strOutput = "";  // Output HTML response
       
       // Cameras
       var ImageURL="";     // imageUrl element
       
       var id = obj.id;

if (debug)
    alert("obj.id: " + id);       
       
       // find the grid table number (1 or 2)
       var tableIndex = id.indexOf("Table");
       var tableNoIndex = 0;
       if (tableIndex != -1)
        tableNoIndex = tableIndex + 5;
       var tableNo = id.substring(tableNoIndex, tableNoIndex+1);
       
       var index = id.indexOf("_");
       var lastIndex = id.lastIndexOf("_");
       
       // Coming from image object
       //Table_" + Route_ID + "_Image
       //var index = 5;
       //var lastIndex = 7;
       var RouteID = obj.id.substring(index+1, lastIndex);
       var divContentName = "BusRoute" + tableNo + "_" + RouteID + "_Details";
       
       return divContentName;
       
    }
    
    //*******************************************************************************
    // Function:     View_Selected_Cameras
    // Author:       Michael Chu
    // Project:      iMove Build 0.2
    // Date:         Sep 08 2006
    //
    // Description:  Opens a new popup window to display multi camera viewer.
    //
    // Parameters:   
    // Returns:
    // Called By:    
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //
    //*******************************************************************************
    function View_Selected_Cameras(){
    
        var total=0;
        HTMLOutput="";
        bChecked=false;
        var QueryString="?Cameras=";
     
        for(var i=0; i < document.aspnetForm.SelectCamera.length; i++)
        {
            if(document.aspnetForm.SelectCamera[i].checked){
                QueryString += document.aspnetForm.SelectCamera[i].value + ",";
                bChecked=true;
		    }
        }
    
        if(bChecked==true){
            window.open("/MultiCameraViewer" + QueryString,"_blank","width=825,height=695,scrollbars=yes");
        }else{
            alert("Please select a camera.");
        }
    }

    //*******************************************************************************
    // Function:     feedError
    // Author:       Michael Chu
    // Project:      iMove Build 0.2
    // Date:         Sep 08 2006
    //
    // Description:  Show error message that load is not successful for the grid.
    //
    // Parameters:   
    // Returns:
    // Called By:    LoadGridContentBasedOnXMLData()
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //
    //*******************************************************************************
    function feedError() {
      
       var strOutput = "";  // Output HTML response
       
       strOutput = "<table style=\"width:600px;\">";
       strOutput += "<tr><td>Oops - we're sorry, but there's been an error loading your requested data. Please close this browser window and open a new window and try again. If you are still experiencing problems please let us know at webmaster@i-move.ca.</td>";
       //strOutput += "<tr><td>There has been an error loading the information on the grid. Please close browser and try again.</td>";
       strOutput += "</tr>";
       strOutput += "</table>";
    
       // put the HTML output into the div element
       document.getElementById(divGridContentName).innerHTML = strOutput;
    }
    //*******************************************************************************
    // Function:     feedError1
    // Author:       Michael Chu
    // Project:      iMove Build 0.4
    // Date:         Sep 22 2006
    //
    // Description:  Show error message that load is not successful for the filter search bar.
    //
    // Parameters:   
    // Returns:
    // Called By:    loadXMLDoc()
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //
    //*******************************************************************************
    function feedError1() {
      
      //alert("There has been an error loading the information on the drop down list. Please close browser and try again.");
      alert("Oops - we're not able to complete this request right now. Please try again. If you still have problems, please let us know at webmaster@i-move.ca Thank you.");
//       var strOutput = "";  // Output HTML response
//              
//       
//       strOutput = "<table style=\"width:600px;\">";
//       strOutput += "<tr><td>There has been an error loading the information on the drop down list. Please close browser and try again.</td>";
//       strOutput += "</tr>";
//       strOutput += "</table>";
//    
//       // put the HTML output into the div element
//       document.getElementById(divSearchBarContentName).innerHTML = strOutput;
    }
    
    
    // The following functions  might be called by FireFox code.
    function verifyCameraGroups() { 
            if(xmlDoc.readyState!=4)
                    return false; 
    }
    function verifyCameras() { 
            if(xmlDoc.readyState!=4)
                    return false; 
    }
    function verifyEvents() { 
            if(xmlDoc.readyState!=4)
                    return false; 
    }
    
    

    
//*******************************************************************************
// Function:     ClearGridContentForTab
// Author:       michael.chu@cgi.com
// Project:      iMove Build - 0.8
// Date:         Nov 16, 2006
//
// Description:  Clear Grid area content.
//
// Parameters:   
// Returns:      
// Calls:        
// Called By:    
//
// Revision History:
//
//   Name        Date        Description
//  ------       ------      ------------------------------------------------
//
//*******************************************************************************    
function ClearGridContentForTab(tabSelectedId) {

    if (tabSelectedId == "")
	{
	    tabSelectedId = AdvisoriesTabId;
	}
    
    var clearGrid2 = false;
	if (tabSelectedId == AdvisoriesTabId 
	    || tabSelectedId == CameraGroupsTabId
	    || tabSelectedId == CamerasTabId)
	    clearGrid2 = true;

    // Clear the second grids on all tabs except the bus routes
    // NOTE: Can't clear search bar 1 and grid 1 since the search bar 1 has been filled already.
    if (clearGrid2 == true)
    {
        var divSearchBarContent2 = document.getElementById(divSearchBarContentName2);
        divSearchBarContent2.innerHTML = "";
        
        var divGridContent2 = document.getElementById(divGridContentName2);
        divGridContent2.innerHTML = "";
        divSearchBarContent2 = null;
        divGridContent2 = null;
    }

}

//*******************************************************************************
// Function:     ClearGridRelatedCookiesForTab
// Author:       michael.chu@cgi.com
// Project:      iMove Build - 0.8
// Date:         Nov 16, 2006
//
// Description:  Clear Grid related cookies for the specific tab.
//
// Parameters:   
// Returns:      
// Calls:        
// Called By:    
//
// Revision History:
//
//   Name        Date        Description
//  ------       ------      ------------------------------------------------
//
//*******************************************************************************    
function ClearGridRelatedCookiesForTab() {

    var tabSelectedId = GridTabSelected();

    if (tabSelectedId == "")
	{
	    tabSelectedId = AdvisoriesTabId;
	}
    
	if (tabSelectedId == BusRoutesTabId)
    {

        //Brian commented out all these lines below. Feb 14 2007
        //NOTE:  these lines were causing all the bus routes to dissapear when you switched tabs

        // Before deleting cookie, we need to turn off bus routes layers.
//        TurnOffAllExistingBusRouteLayers();
    
//	    Delete_Cookie( activeBusRoutesCookieName, '/', '' );
//	    Delete_Cookie( activeBusRoutesStopsCookieName, '/', '' );
//	    Delete_Cookie( highlightBusRouteCookieName, '/', '' );
    }

}


    
    //*******************************************************************************
    // Function:     CheckIfGridIsInitializedProperly
    // Author:       Michael Chu
    // Project:      iMove Build 0.9
    // Date:         Dec 08 2006
    //
    // Description:  Check to see if grid is loaded properly. Due to AJAX calls,
    //               sometimes the grid will not be loaded since default layers
    //               have not been set before call to LoadGridData() happens.
    //
    // Parameters:   
    // Returns:
    // Called By:    
    //
    // Revision History:
    //
    //   Name        Date        Description
    //  ------       ------      ------------------------------------------------
    //
    //*******************************************************************************
    function CheckIfGridIsInitializedProperly(){
        
        var gridElement = document.getElementById(divGridContentName);
        
        if (gridElement.innerHTML == null || gridElement.innerHTML == "")
            LoadGridData();
        gridElement = null;
    }