﻿
    var mapParam = {
        name: "houston_region",
        showIncidents: "true",
        showRoadClosures: "true",
        showLaneClosures: "false",
        showCameras: "false",
        showDms: "false",
        showTransit: "false",
        showWeather: "false"
        };
        
    var mapDataPath = "../data/layers/";
    var weatherDataPath = "../data/layers/weather/";
    var imageMapData = "";
    var procRequestCount = 0;
    
    var weatherImageCount = 5;
    var weatherImageNum = 1;
    var weatherTimer = 0;
    
    var mapSettingsCookie = new Cookie(document, "tsMapSettingsCookie", 3600);
    
    if (parent.frames.length > 0) 
    {
	   parent.location.href = location.href;
	}
    
    window.onload = function() 
    {
        setInterval("refreshCurrentMap()", 180000);
        initialize();

        if (mapParam.name == "houston_area_all")
        {
           document.getElementById("mapImage").style.height = "780px";
           document.getElementById("topImage").style.height = "780px";
        }
    }
    
    function refreshCurrentMap()
    {
        setMap();
        setMapLayers();
        toggleImageMap();
    }
    
    function initialize()
    {
        parseQueryString();
        initCookies();
        setCheckboxValues();
        setMap();
        setMapLayers();
        toggleImageMap(); 
        toggleWeatherAnimationControlDisplay();
        disableActiveLink(mapParam.name);   
    }
    
    function initCookies()
    {
        //check for existing cookie. 
        //currently, cookie settings will override the query string.
        if (mapSettingsCookie.load() && mapSettingsCookie.showIncidents && mapSettingsCookie.showRoadClosures && mapSettingsCookie.showLaneClosures && mapSettingsCookie.showCameras && mapSettingsCookie.showDms && mapSettingsCookie.showTransit) 
        {   
            document.getElementById("chkSave").checked = true;
       
            mapParam.showIncidents = mapSettingsCookie.showIncidents;
            setCheckedStatus(mapParam.showIncidents, document.mapControl.chkIncidents);
            mapParam.showRoadClosures = mapSettingsCookie.showRoadClosures;
            setCheckedStatus(mapParam.showRoadClosures, document.mapControl.chkRoadClosures);
            mapParam.showLaneClosures = mapSettingsCookie.showLaneClosures;
            setCheckedStatus(mapParam.showLaneClosures, document.mapControl.chkLaneClosures);
            mapParam.showCameras = mapSettingsCookie.showCameras;
            setCheckedStatus(mapParam.showCameras, document.mapControl.chkCameras);
            mapParam.showDms = mapSettingsCookie.showDms;
            setCheckedStatus(mapParam.showDms, document.mapControl.chkDms);
            mapParam.showTransit = mapSettingsCookie.showTransit;
            setCheckedStatus(mapParam.showTransit, document.mapControl.chkTransit);
            mapParam.showWeather = mapSettingsCookie.showWeather;
            setCheckedStatus(mapParam.showWeather, document.mapControl.chkWeather);
        }
        else
        {
            document.getElementById("chkSave").checked = false;
        }
    }
    
    function passMapSettings(href)
    {
        window.location.href = href + getQueryUrl();
    }
   
    function setCheckboxValues()
    {
        setCheckedStatus(mapParam.showIncidents, document.mapControl.chkIncidents);
        setCheckedStatus(mapParam.showRoadClosures, document.mapControl.chkRoadClosures);
        setCheckedStatus(mapParam.showLaneClosures, document.mapControl.chkLaneClosures);
        setCheckedStatus(mapParam.showCameras, document.mapControl.chkCameras);
        setCheckedStatus(mapParam.showDms, document.mapControl.chkDms);
        setCheckedStatus(mapParam.showTransit, document.mapControl.chkTransit);
        setCheckedStatus(mapParam.showWeather, document.mapControl.chkWeather);
    }
    
    function setCheckedStatus(thisMapParamItem, checkboxItem)
    {
        if (thisMapParamItem == "true")
        {
            checkboxItem.checked = true;
        }
        else 
        {
            checkboxItem.checked = false;
        }
    }
    
    function getCheckboxValues(checkboxId)
    {
        var thisCheckbox = document.getElementById(checkboxId);
        
        switch (thisCheckbox.id)
        {
            case "chkIncidents":
                mapParam.showIncidents = String(thisCheckbox.checked);
                setLayer(mapParam.showIncidents, document.incidentImage, "_layer_incident.gif");
                break;
            case "chkRoadClosures":
                mapParam.showRoadClosures = String(thisCheckbox.checked);
                setLayer(mapParam.showRoadClosures, document.roadClosureImage, "_layer_roadclosure.gif");
                break;
            case "chkLaneClosures":
                mapParam.showLaneClosures = String(thisCheckbox.checked);
                setLayer(mapParam.showLaneClosures, document.laneClosureImage, "_layer_laneclosure.gif");
                break;
            case "chkCameras":
                mapParam.showCameras = String(thisCheckbox.checked);
                setLayer(mapParam.showCameras, document.cameraImage, "_layer_camera.gif");
                setLayer(mapParam.showCameras, document.regionalCameraImage, "_layer_regional_camera.gif");
                break;
            case "chkDms":
                mapParam.showDms = String(thisCheckbox.checked);
                setLayer(mapParam.showDms, document.dmsImage, "_layer_dms.gif");
                break;
            case "chkTransit":
                mapParam.showTransit = String(thisCheckbox.checked);
                setLayer(mapParam.showTransit, document.transitImage, "_layer_transit.gif");
                break;
            case "chkWeather":
                mapParam.showWeather = String(thisCheckbox.checked);
                setLayer(mapParam.showWeather, document.weatherImage, "_layer_weather.gif");
                break;
            default:
               break;
        }
        toggleImageMap();
        processCookieSettings();
        
        toggleWeatherAnimationControlDisplay();
    }
    
    function toggleWeatherAnimationControlDisplay()
    {
        switch (mapParam.showWeather)
        {
            case "true":
                displayElement("weatherAnimationControl");
                break;
            default:
                hideElement("weatherAnimationControl");
                break;
        }
    }
    
    function parseQueryString()
    {
        mapParam.name = getQueryVar("mapname", mapParam.name);
        mapParam.showIncidents = getQueryVar("inc", mapParam.showIncidents);
        mapParam.showRoadClosures = getQueryVar("rc", mapParam.showRoadClosures);
        mapParam.showLaneClosures = getQueryVar("lc", mapParam.showLaneClosures);
        mapParam.showCameras = getQueryVar("cam", mapParam.showCameras);
        mapParam.showDms = getQueryVar("dms", mapParam.showDms);
        mapParam.showTransit = getQueryVar("tr", mapParam.showTransit);
        mapParam.showWeather = getQueryVar("wthr", mapParam.showWeather);
    }
    
    function getQueryVar(variable, defaultValue) 
    { 
      var query = window.location.search.substring(1).toLowerCase(); 
      var vars = query.split("&"); 
      for (var i=0;i<vars.length;i++) 
      { 
        var pair = vars[i].split("="); 
        if (pair[0] == variable) 
        { 
          return pair[1];
        } 
      }
      return defaultValue;
    }
    
    function setMap()
    {
        document.speedImage.src = mapDataPath + mapParam.name + "_layer_speed.gif" + urlArg();
        document.radarImage.src = mapDataPath + mapParam.name + "_pub_layer_radar.gif" + urlArg();
        document.linkImage.src = mapDataPath + mapParam.name + "_layer_link.gif" + urlArg();
    }
    
    function setMapLayers(thisMapParam)
    {
        setLayer(mapParam.showIncidents, document.incidentImage, "_layer_incident.gif");
        setLayer(mapParam.showRoadClosures, document.roadClosureImage, "_layer_roadclosure.gif");
        setLayer(mapParam.showLaneClosures, document.laneClosureImage, "_layer_laneclosure.gif");
        setLayer(mapParam.showCameras, document.cameraImage, "_layer_camera.gif");
        setLayer(mapParam.showCameras, document.regionalCameraImage, "_layer_regional_camera.gif");
        setLayer(mapParam.showDms, document.dmsImage, "_layer_dms.gif");     
        setLayer(mapParam.showTransit, document.transitImage, "_layer_transit.gif");
        setLayer(mapParam.showWeather, document.weatherImage, "_layer_weather.gif");
    }
    
    
    function setLayer(paramValue, imageHtml, imageSuffix)
    {
        var webPath = mapDataPath;
        
        if ((paramValue == "true") && (imageSuffix == "_layer_weather.gif"))
        {
             webPath = weatherDataPath;    
        }
        if (paramValue === "true")
        {
            imageHtml.src = webPath + mapParam.name + imageSuffix + urlArg();
        }
        else
        {
            imageHtml.src = mapDataPath + "map_blank.gif";
        }    
    }
    
    function showWeatherAnimation()
    {
        if ((mapParam.showWeather == "true") && (!weatherTimer))
        {
            toggleWeatherImages();
        }
        else
        {
            //alert("weather not shown or animation already running.");
            return;
        }
    }
    
    function toggleWeatherImages()
    {
        //alert(weatherDataPath + mapParam.name + "_layer_weather_x.gif");
        
        if (weatherImageNum > weatherImageCount)
        {
            //weatherImageNum = 1;
            clearTimeout(weatherTimer);
            weatherTimer = null;
            weatherImageNum = 1;
            return;
        }
        document.weatherImage.src = weatherDataPath + mapParam.name + "_layer_weather_" + weatherImageNum + ".gif" + urlArg();
        //alert(document.weatherImage.src);
        weatherImageNum++;
        weatherTimer = setTimeout("toggleWeatherImages()", 1000);   
    }
    
    function getQueryUrl()
    {
        var currentMapArgs = "";
        if (mapParam.showIncidents == "true")
        {
            currentMapArgs += "&inc=true";
        }
        if (mapParam.showRoadClosures == "true")
        {
            currentMapArgs += "&rc=true";
        }
        if (mapParam.showLaneClosures == "true")
        {
            currentMapArgs += "&lc=true";
        }
        if (mapParam.showCameras == "true")
        {
            currentMapArgs += "&cam=true";
        }
        if (mapParam.showDms == "true")
        {
            currentMapArgs += "&dms=true";
        }
        if (mapParam.showTransit == "true")
        {
            currentMapArgs += "&tr=true";
        }
        if (mapParam.showWeather == "true")
        {
            currentMapArgs += "&wthr=true";
        }
        
        return currentMapArgs;
    }
    
    function toggleImageMap()
    {
        thisUrlArg = urlArg();
        procRequestCount = 0;
        imageMapData = "";
        getImageMapData(mapDataPath + mapParam.name + "_imagemap_speeds.txt" + thisUrlArg);
        getImageMapData(mapDataPath + mapParam.name + "_pub_imagemap_radar.txt" + thisUrlArg);
        getImageMapData(mapDataPath + mapParam.name + "_imagemap_link.txt" + thisUrlArg); 
        
        if (mapParam.showIncidents == "true")
        {
            getImageMapData(mapDataPath + mapParam.name + "_imagemap_incident.txt" + thisUrlArg);
        }
        
        if (mapParam.showRoadClosures == "true")
        {
            getImageMapData(mapDataPath + mapParam.name + "_imagemap_roadclosure.txt" + thisUrlArg);
        }
        
        if (mapParam.showLaneClosures == "true")
        {
            getImageMapData(mapDataPath + mapParam.name + "_imagemap_laneclosure.txt" + thisUrlArg);
        }
        
        if (mapParam.showCameras == "true")
        {
            getImageMapData(mapDataPath + mapParam.name + "_imagemap_camera.txt");
            getImageMapData(mapDataPath + mapParam.name + "_imagemap_regional_camera.txt");
        }
        
        if (mapParam.showDms == "true")
        {
            getImageMapData(mapDataPath + mapParam.name + "_imagemap_dms.txt");            
        }
        
        if (mapParam.showTransit == "true")
        {
            getImageMapData(mapDataPath + mapParam.name + "_imagemap_transit.txt");            
        }
        if (mapParam.showWeather == "true")
        {
            getImageMapData(mapDataPath + mapParam.name + "_imagemap_weather.txt");            
        }

        
    }
    
    function urlArg()
    {
        return "?arg=" + Math.round(Math.random() * 10000000)
    }
    
    //code for processing image maps using httprequest
    function getHTTPObject() 
    {
        var xhr = false;
        if (window.XMLHttpRequest) 
        {
            xhr = new XMLHttpRequest();
        } 
            else if (window.ActiveXObject) 
            {
                try 
                {
                    xhr = new ActiveXObject("Msxml2.XMLHTTP");
                } 
                catch(e) 
                {
                try 
                {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                } 
                catch(e) 
                {
                    xhr = false;
                }
            }
        }
        return xhr;
    }
    
    function getImageMapData(file) 
    {
        var request = getHTTPObject();
        var imageMapDataText = "";
        if (request) 
        {
            request.onreadystatechange = function() 
            {
                grabImageMap(request, file);
             
            };
            request.open("GET", file, true);
            request.send(null);
        }
     }
    
    function grabImageMap(request, file) 
    {
        var imageMapDataText = "";
        if (request.readyState == 4) 
        {
            //this is when the client has fully received the request.
            if (request.status == 200 || request.status == 304)
            {
                var imageMapDataText;
                imageMapDataText = request.responseText;
                if (imageMapDataText.substring(0,5) == "<area" )
                {
                    if (file.indexOf("_link") != -1)
                    {
                        imageMapDataText = insertMapUrlArgs(imageMapDataText);
                    }
                    imageMapData += imageMapDataText;
                }
                procRequestCount += 1;
                if (isLastRequest() == true)
                {
                    showImageMap();
                }
            }
         }
    }
    
    function insertMapUrlArgs(imageMapDataText)
    {
        var searchStr = "\\[args\\]";
        var replaceStr = getQueryUrl();
        var re = new RegExp(searchStr, "g");
        var newImageMapDataText = imageMapDataText.replace(re, replaceStr);
        
        return newImageMapDataText;
    }
    
    function showImageMap()
    {
        var useMapValue = Math.round(Math.random() * 10000000);
        document.topImage.useMap = "#" + useMapValue;
        var imageMapPrefix = "<map name=\"" + useMapValue + "\">";
        var imageMapSuffix = "</map>";
        document.getElementById("mapImageMap").innerHTML = imageMapPrefix + imageMapData + imageMapSuffix;
    }
    
    function isLastRequest()
    {
        var values = "";
        //for the speed and link layer.
        var requestCount = 3;
        
        for (var value in mapParam)
        {
            if (mapParam[value] == "true")
            {
                requestCount += 1;
            }
        }
        if (mapParam.showCameras == "true")
        {
            requestCount += 1;
        }
        if (requestCount == procRequestCount)
        {
            return true;
        }
        else
        {
            return false;
        }
    }
    
    function disableActiveLink(name)
    {
        theLink = document.getElementById(name);
        theLink.removeAttribute("href");
        theLink.onclick = null;
        theLink.style.fontWeight = "bold";
    }
    
    function displayElement(element)
    {
        var oElement = document.getElementById(element);
        oElement.style.visibility = "visible";
    }
    
    function hideElement(element)
    {
        var oElement = document.getElementById(element);
        oElement.style.visibility = "hidden";
    }
    
    function incidentMouseover(x, y, data)
    {
        if (x > 412)
        {
            x = x - 220;
        }
        showGenericTooltip(x, y, 18, 45, "<table border='0' cellpadding='1' cellspacing='0' style='width: 200px;'><tr><td style='background-color: #d3d3d3; font: bold 11px Arial;'><img src='../images/ts_logo_icon.gif' style='margin-right: 5px; vertical-align: bottom;'/>Roadway Incident</td></tr><tr><td bgcolor='#eeeeee'>" + data + "</td></tr></table>");
    }
    
    function incidentMouseout()
    {
        hideGenericTooltip();
    }
    
    function roadClosureMouseover(x, y, data)
    {
        if (x > 412)
        {
            x = x - 220;
        }
        showGenericTooltip(x, y, 18, 45, "<table border='0' cellpadding='1' cellspacing='0' style='width: 200px;'><tr><td style='background-color: #d3d3d3; font: bold 11px Arial;'><img src='../images/ts_logo_icon.gif' style='margin-right: 5px; vertical-align: bottom;'/>Road Closure</td></tr><tr><td bgcolor='#eeeeee'>" + data + "</td></tr></table>");
    }
    
    function roadClosureMouseout()
    {
        hideGenericTooltip();
    }
    
    function laneClosureMouseover(x, y, data)
    {
        if (x > 412)
        {
            x = x - 220;
        }
        showGenericTooltip(x, y, 18, 45, "<table border='0' cellpadding='1' cellspacing='0' style='width: 200px;'><tr><td style='background-color: #d3d3d3; font: bold 11px Arial;'><img src='../images/ts_logo_icon.gif' style='margin-right: 5px; vertical-align: bottom;'/>Roadway Lane Closure</td></tr><tr><td bgcolor='#eeeeee'>" + data + "</td></tr></table>");
    }
    
    function laneClosureMouseout()
    {
        hideGenericTooltip();
    }
    
    function cameraMouseover(x, y, cameraLocation, imageUrl)
    {
        if (x > 412)
        {
            x = x - 235;
        }
        var currentDate = new Date();
        var htmlText = "<div style='width: 215px; text-align: center;'><b>" + cameraLocation + "</b><br/>";
        htmlText += "<img src='" + imageUrl + "?arg=" + currentDate.getTime().toString(10) + "' width='210' height='171' alt='Roadway Camera' border='1' /><br/>Click camera icon to enlarge image.</div>";
        showGenericTooltip(x, y, 15, 100, htmlText);
    }
    
    function cameraMouseout()
    {
        hideGenericTooltip();
    }
    
    function dmsMouseover(x, y, signLocation, signId)
    {
        if (x > 412)
        {
            x = x - 220;
        }
        var currentDate = new Date();
        var htmlText = "<div style='width: 200px; text-align: center;'><b>" + signLocation + "</b><br/>";
        htmlText += "<img src='../dms/processDMSimage.aspx?imageid=" + signId + "&arg=" + currentDate.getTime().toString(10) + "' width='197' alt='Roadway Message Sign' /></div>";
        showGenericTooltip(x, y, 15, 45, htmlText);
    }
    
    function dmsMouseout()
    {
        hideGenericTooltip();
    }
    
    function transitMouseover(x, y, data, org)
    {
        var orgIconImgSrc;
        if(org == "METRO")
        {
            orgIconImgSrc = "<img src='../images/metro_icon.gif' height=\'15\' width=\'16\' style='margin: 3px; vertical-align: middle;'/>" 
        }
        else
        {
            orgIconImgSrc = "<img src=\'../images/bus_icon_small.gif\' height=\'13\' width=\'13\' style='margin: 3px; vertical-align: middle;' />";
        }
        showGenericTooltip(x, y, 10, 15, orgIconImgSrc + data);
    }
    
    function transitMouseout()
    {
        hideGenericTooltip();
    }
    
    function showGenericTooltip(x, y, xOffset, yOffset, data)
    {
        var oDiv = document.getElementById("genericTooltip");
        oDiv.style.visibility = "visible";
        xCoord = x + xOffset;
        yCoord = y - yOffset;
        oDiv.style.left = xCoord + "px";
        oDiv.style.top = yCoord + "px";
        //oDiv.style.border = "solid 1px #cccccc";
        document.getElementById("genericTooltipText").innerHTML = data;
    }
    
    function hideGenericTooltip()
    {
        var oDiv = document.getElementById("genericTooltip");
        oDiv.style.visibility = "hidden";     
    }
    
    function swapImg(imgId, newImg)
    {
        var img = document.getElementById(imgId);
        img.src  = newImg;
    }
    
    function showWin(url,winType) 
    {     
        var winWidth, winHeight;

        switch (winType) 
        {
            case "speed":
                winWidth = 400;
                winHeight = 275;
                break;
            case "dms":
                winWidth = 425;
                winHeight = 290;
                break;
            case "inc":
                winWidth = 400;
                winHeight = 250;
                break;
            case "lc":
                winWidth = 500;
                winHeight = 300;
                break;
            case "rc":
                winWidth = 500;
                winHeight = 300;
                break;
            case "cam":
                winWidth = 570;
                winHeight = 420;
                break;
           default:
                winWidth = 500;
                winHeight = 500;
                break;
        }
    	var winStyle = "menubar=no,resizable=no,scrollbars=no,status=no,width=" + winWidth + ",height=" + winHeight + ",top=0,left=0";
	    window.open(url, '', winStyle);
     }
     
     function processCookieSettings()
     {
        if (document.getElementById("chkSave").checked == true)
        {
            mapSettingsCookie.showIncidents = document.getElementById("chkIncidents").checked;
            mapSettingsCookie.showRoadClosures = document.getElementById("chkRoadClosures").checked;
            mapSettingsCookie.showLaneClosures = document.getElementById("chkLaneClosures").checked;
            mapSettingsCookie.showCameras = document.getElementById("chkCameras").checked;
            mapSettingsCookie.showDms = document.getElementById("chkDms").checked;
            mapSettingsCookie.showTransit = document.getElementById("chkTransit").checked;
            mapSettingsCookie.showWeather = document.getElementById("chkWeather").checked;
            mapSettingsCookie.store();
        }
        else
        {
            mapSettingsCookie.remove();
        }
     }