﻿// ===== Map ====================================================================================================
// ==============================================================================================================

var iyaImages = new Array();

function imagePreload()
{
    var images = new Array();

    images[0] = TEMPLATE_BASE_URL + "images/inyourarea/map/Roadwork.png";
    images[1] = TEMPLATE_BASE_URL + "images/inyourarea/map/RoadworkRed.png";
    images[2] = TEMPLATE_BASE_URL + "images/inyourarea/map/RoadworkOrange.png";
    images[3] = TEMPLATE_BASE_URL + "images/inyourarea/map/RoadworkGreen.png";
    images[4] = TEMPLATE_BASE_URL + "images/inyourarea/map/RoadworkGroup.png";
    images[5] = TEMPLATE_BASE_URL + "images/inyourarea/map/RoadworkGroupRed.png";
    images[6] = TEMPLATE_BASE_URL + "images/inyourarea/map/RoadworkGroupOrange.png";
    images[7] = TEMPLATE_BASE_URL + "images/inyourarea/map/RoadworkGroupGreen.png";
    images[8] = TEMPLATE_BASE_URL + "images/inyourarea/map/Investment.png";
    images[9] = TEMPLATE_BASE_URL + "images/inyourarea/map/InvestmentGroup.png";
    images[10] = TEMPLATE_BASE_URL + "images/inyourarea/map/Incident.png";
    images[11] = TEMPLATE_BASE_URL + "images/inyourarea/map/IncidentGroup.png";
    images[12] = TEMPLATE_BASE_URL + "images/inyourarea/map/Leisure.png";
    images[13] = TEMPLATE_BASE_URL + "images/inyourarea/map/ShadowV2.png";
    images[14] = TEMPLATE_BASE_URL + "images/inyourarea/map/loading_data.jpg";
    images[15] = TEMPLATE_BASE_URL + "images/inyourarea/map/loader.gif";

    for (var i = 0; i < images.length; i++)
    {
        iyaImages[i] = new Image();
        iyaImages[i].src = isIE6 ? images[i].replace(/\.png/gi, ".gif") : images[i];
    }

    images = null;
}

imagePreload();

function tcIYA_onTabChanged(selectedTab)
{
    switch (selectedTab)
    {
        case 0:
            dcsMultiTrack('DCS.dcsuri', '/IYAtab/overview', 'WT.ti', 'IYA tab overview');
            break;
        case 1:
            dcsMultiTrack('DCS.dcsuri', '/IYAtab/water-quality', 'WT.ti', 'IYA tab water quality');
            break;
        case 2:     // Incidents
            googlemapmanager.initialise("gmcIncidentMap");
            dcsMultiTrack('DCS.dcsuri', '/IYAtab/incidents', 'WT.ti', 'IYA tab incidents');
            break;
        case 3:     // Roadworks
            googlemapmanager.initialise("gmcRoadworkMap");
            dcsMultiTrack('DCS.dcsuri', '/IYAtab/investments-and-roadworks', 'WT.ti', 'IYA tab investments & roadworks');
            break;
        case 4:     // Leisure
            googlemapmanager.initialise("gmcLeisureMap");
            dcsMultiTrack('DCS.dcsuri', '/IYAtab/leisure', 'WT.ti', 'IYA tab leisure');
            break;
        case 5:
            dcsMultiTrack('DCS.dcsuri', '/IYAtab/weather', 'WT.ti', 'IYA tab weather');
            break;
        default:
            break;
    }
}

function tcIYA_onBeforeTabChanged(selectedTab)
{
    if (googlemapmanager.maps.getByName("gmcIncidentMap"))
        return !(googlemapmanager.maps.getByName("gmcIncidentMap").initialising || googlemapmanager.maps.getByName("gmcRoadworkMap").initialising || googlemapmanager.maps.getByName("gmcLeisureMap").initialising)
    else
        return false;
}

function listbox_Click(evt)
{
    var e = evt || event, srcElement, div;
    if (e)
    {
        srcElement = e.srcElement ? e.srcElement : e.target;

        if (srcElement.nodeName.toLowerCase() == "p")
            div = srcElement.parentNode;
        else
            div = srcElement;

        if (div && div._gm)
            div._gm.click();
    }
}

function gmcIncidentMap_visibleMarkersChanged(googleMap)
{
    var 
            visibleMarkers = googleMap.visibleMarkers,
            listbox = document.getElementById("hgcListBoxIncidents"),
            div = null,
            span = null,
            p = null;

    while (listbox.childNodes.length > 0)
        listbox.removeChild(listbox.childNodes[0]);

    if (visibleMarkers.count > 0)
    {
        for (var i = 0; i < visibleMarkers.count; i++)
        {
            div = document.createElement("div");
            div._gm = visibleMarkers.items[i];

            if (div.addEventListener)
                div.addEventListener("click", listbox_Click, false);
            else if (div.attachEvent)
                div.attachEvent("onclick", alert);

            div.onclick = listbox_Click;

            listbox.appendChild(div);

            p = document.createElement("p");
            p.innerHTML = visibleMarkers.items[i].label;
            div.appendChild(p);

            if (visibleMarkers.items[i] == googleMap.activeMarker)
            {
                div.style.backgroundPosition = "0px -74px";
                div.setAttribute("onmouseover", "");
                div.setAttribute("onmouseout", "");
            }
            else
            {
                div.style.backgroundPosition = "0px 0px";
                div.setAttribute("onmouseover", "setImageBGPositionY(this, -37);");
                div.setAttribute("onmouseout", "setImageBGPositionY(this, 0);");
            }
        }
    }
    else
    {
        div = document.createElement("div");
        listbox.appendChild(div);
        p = document.createElement("p");
        p.innerHTML = "There are no incidents";
        div.appendChild(p);
    }

    listbox = null;
    div = null;
    span = null;
    p = null;
}

function gmcIncidentMap_markerClick(googleMarker)
{
    var 
            info = document.getElementById("divIncidentMap_Info"),
            listbox = document.getElementById("hgcListBoxIncidents");

    if (info)
        info.innerHTML = googleMarker.infoHTML;

    for (var i = 0; i < listbox.childNodes.length; i++)
    {
        if (listbox.childNodes[i]._gm == googleMarker)
        {
            listbox.childNodes[i].style.backgroundPosition = "0px -74px";
            listbox.childNodes[i].setAttribute("onmouseover", "");
            listbox.childNodes[i].setAttribute("onmouseout", "");
            //listbox.childNodes[i].scrollIntoView(true);
        }
        else
        {
            listbox.childNodes[i].style.backgroundPosition = "0px 0px";
            listbox.childNodes[i].setAttribute("onmouseover", "setImageBGPositionY(this, -37);");
            listbox.childNodes[i].setAttribute("onmouseout", "setImageBGPositionY(this, 0);");
        }
    }
    //googleMarker.googleMap.div.scrollIntoView(true);
}

function gmcIncidentMap_infoWindowClosed(googleMarker)
{
    var 
            info = document.getElementById("divIncidentMap_Info"),
            listbox = document.getElementById("hgcListBoxIncidents");

    if (info)
        info.innerHTML = "";

    for (var i = 0; i < listbox.childNodes.length; i++)
    {
        listbox.childNodes[0].style.backgroundPosition = "0px 0px";
        listbox.childNodes[0].setAttribute("onmouseover", "setImageBGPositionY(this, -37);");
        listbox.childNodes[0].setAttribute("onmouseout", "setImageBGPositionY(this, 0);");
    }
}

function gmcRoadworkMap_visibleMarkersChanged(googleMap)
{
    var 
            visibleMarkers = googleMap.visibleMarkers,
            listbox = document.getElementById("hgcListBoxRoadworks"),
            div = null,
            span = null,
            p = null;

    while (listbox.childNodes.length > 0)
        listbox.removeChild(listbox.childNodes[0]);

    if (visibleMarkers.count > 0)
    {
        for (var i = 0; i < visibleMarkers.count; i++)
        {
            div = document.createElement("div");
            div._gm = visibleMarkers.items[i];

            if (div.addEventListener)
                div.addEventListener("click", listbox_Click, false);
            else if (div.attachEvent)
                div.attachEvent("onclick", listbox_Click);
            else
                div.onclick = listbox_Click;

            listbox.appendChild(div);

            p = document.createElement("p");
            p.innerHTML = visibleMarkers.items[i].label;
            div.appendChild(p);

            if (visibleMarkers.items[i] == googleMap.activeMarker)
            {
                if (visibleMarkers.items[i].groupName.substr(0, 11).toLowerCase() == "investment:")
                {
                    div.style.backgroundPosition = "-1800px -74px";
                }
                else if (visibleMarkers.items[i].groupName.substr(0, 9).toLowerCase() == "roadwork:")
                {
                    if (visibleMarkers.items[i].isGroup)
                        div.style.backgroundPosition = "-1200px -74px";
                    else
                        div.style.backgroundPosition = "-600px -74px";
                }
                div.setAttribute("onmouseover", "");
                div.setAttribute("onmouseout", "");
            }
            else
            {
                if (visibleMarkers.items[i].groupName.substr(0, 11).toLowerCase() == "investment:")
                {
                    div.style.backgroundPosition = "-1800px 0px";
                }
                else if (visibleMarkers.items[i].groupName.substr(0, 9).toLowerCase() == "roadwork:")
                {
                    if (visibleMarkers.items[i].isGroup)
                        div.style.backgroundPosition = "-1200px 0px";
                    else
                        div.style.backgroundPosition = "-600px 0px";
                }
                div.setAttribute("onmouseover", "setImageBGPositionY(this, -37);");
                div.setAttribute("onmouseout", "setImageBGPositionY(this, 0);");
            }
        }
    }
    else
    {
        div = document.createElement("div");
        listbox.appendChild(div);
        p = document.createElement("p");
        p.innerHTML = "There are no roadworks";
        div.appendChild(p);
    }

    listbox = null;
    div = null;
    span = null;
    p = null;
}

function gmcRoadworkMap_markerClick(googleMarker)
{
    var 
            info = document.getElementById("divRoadworkMap_Info"),
            listbox = document.getElementById("hgcListBoxRoadworks");

    if (info)
        info.innerHTML = googleMarker.infoHTML;

    for (var i = 0; i < listbox.childNodes.length; i++)
    {
        if (listbox.childNodes[i]._gm == googleMarker)
        {
            if (listbox.childNodes[i]._gm.groupName.substr(0, 11).toLowerCase() == "investment:")
            {
                listbox.childNodes[i].style.backgroundPosition = "-1800px -74px";
            }
            else if (googleMarker.groupName.substr(0, 9).toLowerCase() == "roadwork:")
            {
                if (googleMarker.isGroup)
                    listbox.childNodes[i].style.backgroundPosition = "-1200px -74px";
                else
                    listbox.childNodes[i].style.backgroundPosition = "-600px -74px";
            }
            listbox.childNodes[i].setAttribute("onmouseover", "");
            listbox.childNodes[i].setAttribute("onmouseout", "");
            //listbox.childNodes[i].scrollIntoView(true);
        }
        else
        {
            if (listbox.childNodes[i]._gm.groupName.substr(0, 11).toLowerCase() == "investment:")
            {
                listbox.childNodes[i].style.backgroundPosition = "-1800px 0px";
            }
            else if (listbox.childNodes[i]._gm.groupName.substr(0, 9).toLowerCase() == "roadwork:")
            {
                if (listbox.childNodes[i]._gm.isGroup)
                    listbox.childNodes[i].style.backgroundPosition = "-1200px 0px";
                else
                    listbox.childNodes[i].style.backgroundPosition = "-600px 0px";
            }
            listbox.childNodes[i].setAttribute("onmouseover", "setImageBGPositionY(this, -37);");
            listbox.childNodes[i].setAttribute("onmouseout", "setImageBGPositionY(this, 0);");
        }
    }
    //googleMarker.googleMap.div.scrollIntoView(true);
}

function gmcRoadworkMap_infoWindowClosed(googleMarker)
{
    var 
            info = document.getElementById("divRoadworkMap_Info"),
            listbox = document.getElementById("hgcListBoxRoadworks");

    if (info)
        info.innerHTML = "";

    for (var i = 0; i < listbox.childNodes.length; i++)
    {
        if (listbox.childNodes[i]._gm.groupName.substr(0, 11).toLowerCase() == "investment:")
        {
            listbox.childNodes[i].style.backgroundPosition = "-1800px 0px";
        }
        else if (listbox.childNodes[i]._gm.groupName.substr(0, 9).toLowerCase() == "roadwork:")
        {
            if (listbox.childNodes[i]._gm.isGroup)
                listbox.childNodes[i].style.backgroundPosition = "-1200px 0px";
            else
                listbox.childNodes[i].style.backgroundPosition = "-600px 0px";
        }
    }
}

function gmcLeisureMap_visibleMarkersChanged(googleMap)
{
    var 
            visibleMarkers = googleMap.visibleMarkers,
            listbox = document.getElementById("hgcListBoxLeisure"),
            div = null,
            span = null,
            p = null;

    while (listbox.childNodes.length > 0)
        listbox.removeChild(listbox.childNodes[0]);

    if (visibleMarkers.count > 0)
    {
        for (var i = 0; i < visibleMarkers.count; i++)
        {
            div = document.createElement("div");
            div._gm = visibleMarkers.items[i];

            if (div.addEventListener)
                div.addEventListener("click", listbox_Click, false);
            else if (div.attachEvent)
                div.attachEvent("onclick", listbox_Click);
            else
                div.onclick = listbox_Click;

            listbox.appendChild(div);

            p = document.createElement("p");
            p.innerHTML = visibleMarkers.items[i].label;
            div.appendChild(p);

            if (visibleMarkers.items[i] == googleMap.activeMarker)
            {
                div.style.backgroundPosition = "-2400px -74px";
                div.setAttribute("onmouseover", "");
                div.setAttribute("onmouseout", "");
            }
            else
            {
                div.style.backgroundPosition = "-2400px 0px";
                div.setAttribute("onmouseover", "setImageBGPositionY(this, -37);");
                div.setAttribute("onmouseout", "setImageBGPositionY(this, 0);");
            }
        }
    }
    else
    {
        div = document.createElement("div");
        listbox.appendChild(div);
        p = document.createElement("p");
        p.innerHTML = "There are no reservoirs";
        div.appendChild(p);
    }

    listbox = null;
    div = null;
    span = null;
    p = null;
}

function gmcLeisureMap_markerClick(googleMarker)
{
    var 
            info = document.getElementById("divLeisureMap_Info"),
            listbox = document.getElementById("hgcListBoxLeisure");

    if (info)
        info.innerHTML = googleMarker.infoHTML;

    for (var i = 0; i < listbox.childNodes.length; i++)
    {
        if (listbox.childNodes[i]._gm == googleMarker)
        {
            listbox.childNodes[i].style.backgroundPosition = "-2400px -74px";
            listbox.childNodes[i].setAttribute("onmouseover", "");
            listbox.childNodes[i].setAttribute("onmouseout", "");
            //listbox.childNodes[i].scrollIntoView(true);
        }
        else
        {
            listbox.childNodes[i].style.backgroundPosition = "-2400px 0px";
            listbox.childNodes[i].setAttribute("onmouseover", "setImageBGPositionY(this, -37);");
            listbox.childNodes[i].setAttribute("onmouseout", "setImageBGPositionY(this, 0);");
        }
    }
    //googleMarker.googleMap.div.scrollIntoView(true);
}

function gmcLeisureMap_infoWindowClosed(googleMarker)
{
    var 
            info = document.getElementById("divLeisureMap_Info"),
            listbox = document.getElementById("hgcListBoxLeisure");

    if (info)
        info.innerHTML = "";

    for (var i = 0; i < listbox.childNodes.length; i++)
    {
        listbox.childNodes[i].style.backgroundPosition = "-2400px 0px";
        listbox.childNodes[i].setAttribute("onmouseover", "setImageBGPositionY(this, -37);");
        listbox.childNodes[i].setAttribute("onmouseout", "setImageBGPositionY(this, 0);");
    }
}

function SelectIncident(latitude, longitude)
{
    tcIYA.showTab(2);
    SelectMarker(googlemapmanager.maps.getByName("gmcIncidentMap"), latitude, longitude)
}

function SelectInvestmentsorRoadwork(latitude, longitude)
{
    var icon = document.getElementById("iconCurrent");

    tcIYA.showTab(3);
    if (icon.className == "Grey" || icon.className == "GreyHover")
        ToggleCurrentRoadworks();
    SelectMarker(googlemapmanager.maps.getByName("gmcRoadworkMap"), latitude, longitude);
}

function SelectLeisure(latitude, longitude)
{
    tcIYA.showTab(4);
    SelectMarker(googlemapmanager.maps.getByName("gmcLeisureMap"), latitude, longitude);
}

function SelectMarker(map, latitude, longitude)
{
    if (map)
    {
        for (var j = 0; j < map.markers.count; j++)
        {
            if (map.markers.items[j].location.latitude == latitude && map.markers.items[j].location.longitude == longitude)
            {
                map.markers.items[j].click();
                break;
            }
        }
    }
}

function ResetRoadworks()
{
    var 
            gmcRoadworkMap = googlemapmanager.maps.getByName("gmcRoadworkMap"),
            spanCurrent = document.getElementById("mapControlCurrent"),
            iconCurrent = document.getElementById("iconCurrent"),
            spanNextMonth = document.getElementById("mapControlNextMonth"),
            iconNextMonth = document.getElementById("iconNextMonth"),
            spanAfterNextMonth = document.getElementById("mapControlAfterNextMonth"),
            iconAfterNextMonth = document.getElementById("iconAfterNextMonth");

    spanCurrent.setAttribute("onmouseover", "this.childNodes[0].className='RedHover'");
    spanCurrent.setAttribute("onmouseout", "this.childNodes[0].className='Red'");
    iconCurrent.className = "Red";

    spanNextMonth.setAttribute("onmouseover", "this.childNodes[0].className='GreyHover'");
    spanNextMonth.setAttribute("onmouseout", "this.childNodes[0].className='Grey'");
    iconNextMonth.className = "Grey";

    spanAfterNextMonth.setAttribute("onmouseover", "this.childNodes[0].className='GreyHover'");
    spanAfterNextMonth.setAttribute("onmouseout", "this.childNodes[0].className='Grey'");
    iconAfterNextMonth.className = "Grey";

    for (var i = 0; i < gmcRoadworkMap.markers.count; i++)
        gmcRoadworkMap.markers.items[i].display = (gmcRoadworkMap.markers.items[i].tag == "current" || gmcRoadworkMap.markers.items[i].tag == "");

    gmcRoadworkMap.updateMarkers();
}

function ToggleCurrentRoadworks()
{
    var gmcRoadworkMap = googlemapmanager.maps.getByName("gmcRoadworkMap"), span = document.getElementById("mapControlCurrent"), icon = document.getElementById("iconCurrent");

    if (icon.className == "Grey" || icon.className == "GreyHover")
    {
        icon.className = "Red";
        span.setAttribute("onmouseover", "this.childNodes[0].className='RedHover'");
        span.setAttribute("onmouseout", "this.childNodes[0].className='Red'");
    }
    else
    {
        icon.className = "GreyHover";
        span.setAttribute("onmouseover", "this.childNodes[0].className='GreyHover'");
        span.setAttribute("onmouseout", "this.childNodes[0].className='Grey'");
    }

    for (var i = 0; i < gmcRoadworkMap.markers.count; i++)
    {
        if (gmcRoadworkMap.markers.items[i].tag == "current")
        {
            if (icon.className == "Grey" || icon.className == "GreyHover")
                gmcRoadworkMap.markers.items[i].display = false;
            else
                gmcRoadworkMap.markers.items[i].display = true;
        }
    }

    gmcRoadworkMap.updateMarkers();
}

function ToggleRoadworksNextMonth()
{
    var gmcRoadworkMap = googlemapmanager.maps.getByName("gmcRoadworkMap"), span = document.getElementById("mapControlNextMonth"), icon = document.getElementById("iconNextMonth");

    if (icon.className == "Grey" || icon.className == "GreyHover")
    {
        icon.className = "Orange";
        span.setAttribute("onmouseover", "this.childNodes[0].className='OrangeHover'");
        span.setAttribute("onmouseout", "this.childNodes[0].className='Orange'");
    }
    else
    {
        icon.className = "GreyHover";
        span.setAttribute("onmouseover", "this.childNodes[0].className='GreyHover'");
        span.setAttribute("onmouseout", "this.childNodes[0].className='Grey'");
    }

    for (var i = 0; i < gmcRoadworkMap.markers.count; i++)
    {
        if (gmcRoadworkMap.markers.items[i].tag == "next-month")
        {
            if (icon.className == "Grey" || icon.className == "GreyHover")
                gmcRoadworkMap.markers.items[i].display = false;
            else
                gmcRoadworkMap.markers.items[i].display = true;
        }
    }

    gmcRoadworkMap.updateMarkers();
}

function ToggleRoadworksAfterNextMonth()
{
    var gmcRoadworkMap = googlemapmanager.maps.getByName("gmcRoadworkMap"), span = document.getElementById("mapControlAfterNextMonth"), icon = document.getElementById("iconAfterNextMonth");

    if (icon.className == "Grey" || icon.className == "GreyHover")
    {
        icon.className = "Green";
        span.setAttribute("onmouseover", "this.childNodes[0].className='GreenHover'");
        span.setAttribute("onmouseout", "this.childNodes[0].className='Green'");
    }
    else
    {
        icon.className = "GreyHover";
        span.setAttribute("onmouseover", "this.childNodes[0].className='GreyHover'");
        span.setAttribute("onmouseout", "this.childNodes[0].className='Grey'");
    }

    for (var i = 0; i < gmcRoadworkMap.markers.count; i++)
    {
        if (gmcRoadworkMap.markers.items[i].tag == "after-next-month")
        {
            if (icon.className == "Grey" || icon.className == "GreyHover")
                gmcRoadworkMap.markers.items[i].display = false;
            else
                gmcRoadworkMap.markers.items[i].display = true;
        }
    }

    //        for (var i = 0; i < gmcRoadworkMap.markerGroups.count; i++)
    //        {
    //            if (gmcRoadworkMap.markerGroups.items[i].tag == "after-next-month-group")
    //            {
    //                if (icon.className == "Grey" || icon.className == "GreyHover")
    //                    gmcRoadworkMap.markerGroups.items[i].display = false;
    //                else
    //                    gmcRoadworkMap.markerGroups.items[i].display = true;
    //            }
    //        }

    gmcRoadworkMap.updateMarkers();

}

function ChangeMarkerIcon(googleMarker, image)
{
    if (googleMarker.tag != "")
        googleMarker.changeIcon(image);
}

function ChangeMarkerIconV3(marker, image)
{
    if (marker.marker)
    {
        if (marker.tag != "")
        {
            if (isIE6) image.replace("png", "gif");
            var img = new Image();
            img.src = image;

            icon = new google.maps.MarkerImage(image,
                                               new google.maps.Size(img.width, img.height),
                                               new google.maps.Point(0, 0),
                                               new google.maps.Point(img.width / 2, img.height));
            img = null;

            marker.marker.setIcon(icon);
        }
    }
}



var filters = true;
function ToggleMapFilters()
{
    var filterControls = document.getElementById("MapFilters"), mapControlMinMax = document.getElementById("mapControlMinMax");
    if (filterControls)
    {
        if (!filters)
        {
            filterControls.style.display = "block";
            mapControlMinMax.className = "MapControlsMinimise";
            filters = true;
        }
        else
        {
            filterControls.style.display = "none";
            mapControlMinMax.className = "MapControlsMaximise";
            filters = false;
        }
    }
}

function initTab()
{
    switch (selectedTab)
    {
        case 'water-quality':
            tcIYA.selectedTab = 1;
            break;
        case 'incidents':
            tcIYA.selectedTab = 2;
            break;
        case 'investments':
        case 'roadworks':
            tcIYA.selectedTab = 3;
            break;
        case 'leisure':
            tcIYA.selectedTab = 4;
            break;
        default:
        case '':
            break;
    }

    selectedTab = '';

    tcIYA.showTab(tcIYA.selectedTab);
    //tcIYA_onTabChanged(tcIYA.selectedTab);
}
