// http://gisweb.azdeq.gov/arcgis/emaps/
// ADEQ: Arizona Department of Environmental Quality

function ShowTOC()
{
    // assume user finished with select
    // measure distance invalid when not showing measure form
    switch (_currentTool)
    {
        case "select":
        case "measure":
            SetTool("pan");
            break;
    }
    _currentForm = "";

    html = '<br><table cellspacing="0" cellpadding="0">';
    html += '<tr><td class="title" style="white-space:nowrap">&nbsp; &nbsp; Table of Contents</td></tr>';
    html += '<tr><td>&nbsp;</td></tr>';
    html += '<tr><td class="nowrap">';

    // add folders
    for (var folder in _layers)
    {
        // add folder name with + icon
        html += '&nbsp;<span id="i' + folder + '"><img src="images/toc/plus.png" width="11" height="11" alt="Click to show layers" onclick="OpenFolder(\'' + folder + '\')"></span>';
        html += '&nbsp;<b><span class="folder" onclick="ToggleFolder(\'' + folder + '\')" title="Click to show/hide layers">' + folder + '</span></b>';
        html += '<br><span id="l' + folder + '"></span><br>';
    }
    
    // esri attribution
    html += '<table><tr>';
    html += '<td width="20">&nbsp;</td>';
    html += '<td><fieldset style="width:160px">';
    html += 'Base map courtesy of<br>ESRI\'s ArcGIS Online';
    html += '</fieldset></td>';
    html += '</tr></table>';

    html += '<br><hr><br>';

    // toc help
    html += '<b>&nbsp;Table of Contents Help</b><br>';
    html += '<br>&nbsp;<b>Folders:</b>';
    html += '<table>';
    html += '<tr><td align="right"><img src="images/toc/plus.png"></td><td class="nowrap"> - Click to show layers</td></tr>';
    html += '<tr><td align="right"><img src="images/toc/minus.png"></td><td class="nowrap"> - Click to hide layers</td></tr>';
    html += '<tr><td align="right"><b>Name</b></td><td class="nowrap"> - Click to show/hide layers</td></tr>';
    html += '</table>';
    html += '<br>&nbsp;<b>Layers:</b>';
    html += '<table>';
    html += '<tr><td align="right"><img src="images/toc/checked.png"></td><td class="nowrap"> - Visible, click to hide</td></tr>';
    html += '<tr><td align="right"><img src="images/toc/unchecked.png"></td><td class="nowrap"> - Hidden, click to show</td></tr>';
    html += '<tr><td align="right"><b>Name</b></td><td class="nowrap"> - Active layer</td></tr>';
    html += '<tr><td align="right">Name</td><td class="nowrap"> - Click to make active layer</td></tr>';
    html += '<tr><td align="right"><img src="images/toc/hyperlink.png"></td><td class="nowrap"> - Hyperlinked features</td></tr>';
    html += '<tr><td align="right"><img src="images/toc/legend.png"></td><td class="nowrap"> - Click to display legend</td></tr>';
    html += '</table>';

    html += '<br></td></tr></table>';
    dojo.byId("panel").innerHTML = html;
    dojo.byId("panel").style.backgroundColor = "#FFC0A0";
    
    // open previously open folders
    for (var folder in _folders)
    {
        if (_folders[folder] == "open") OpenFolder(folder);
    }
}

function OpenFolder(folder)
{
    // change + to -
    dojo.byId('i'+folder).innerHTML = '<img src="images/toc/minus.png" width="11" height="11" alt="Click to hide layers" onclick="CloseFolder(\'' + folder + '\')">';

    // add folder layers
    var html = "";
    var hasActive = false;
    var layers = _layers[folder];
    for (var layer in layers)
    {
        var layerID = LayerID(layer);
        if (layerID >= 0)
        {
            var symbolPng = layers[layer];
            if (layerID == _activeLayer) hasActive = true;

            // checkbox
            html += '<input type="checkbox"';
            html += ' id="c' + layerID + '"';
            if (LayerVisible(layerID)) html += ' checked';
            html += ' onclick="LayerVisibility(' + layerID + ')">';

            // swatch
            if (symbolPng.length > 0) html += ' <img src="images/toc/swatches/' + symbolPng + '.png" width="13" height="13" style="margin-bottom:-1px">&nbsp;';

            // layer name
            html += ' <span id="l' + layerID + '" title="Click to make active layer" style="cursor:default;';
            html += '" onclick="SelectLayer(\''  + layerID + '\')">' + layer + '</span>';

            // hyperlink
            for (var i = 0; i < _hyperlinks.length; i++)
            {
                if (_hyperlinks[i][LAYER] == layer)
                {
                    html += ' <img src="images/toc/hyperlink.png" width="13" height="13" style="margin-bottom:-1px">&nbsp;';
                    break;
                }
            }

            // detailed legend for categorized symbology
            if (_legends.indexOf("~" + layer + "~") >= 0)
            {
                html += ' &nbsp; <input type="button" style="width:48px; height:20px; font-family:verdana,arial; font-size:x-small;" value="Legend" onclick="ShowLegend(\'' + layer + '\')">';
            }

            html += '<br>';
        }
    }
    dojo.byId('l'+folder).innerHTML = html;
    
    // update folder list
    _folders[folder] = "open";

    // select active layer if in this folder
    if (hasActive) SelectLayer(_activeLayer);
}

function CloseFolder(folder)
{
    // change - to +
    dojo.byId('i'+folder).innerHTML = '<img src="images/toc/plus.png" width="11" height="11" alt="Click to show layers" onclick="OpenFolder(\'' + folder + '\')">';

    // hide layers
    dojo.byId('l'+folder).innerHTML = '';

    // update folder list
    _folders[folder] = "closed";
}

function CloseFolders()
{
    for (var folder in _folders)
    {
        CloseFolder(folder);
    }
}

function ToggleFolder(folder)
{
    _folders[folder] == "open" ? CloseFolder(folder) : OpenFolder(folder);
}

function ShowLegend(layerName)  // toc button click
{
    var png = layerName.toLowerCase().replace(/ |\//g, "-");

    var html = '<table width="93%" cellspacing="0">';
    html += '<tr><td align="left">';
    html += '<img src="images/close.gif" width="16" height="14" alt="Close - Show TOC" onclick="ShowTOC()">';
    html += '</td><td align="right">';
    html += '<img src="images/close.gif" width="16" height="14" alt="Close - Show TOC" onclick="ShowTOC()">';
    html += '</td></tr>';
    html += '<tr><td align="center" class="nowrap">';
    html += '<span class="title">' + layerName + '</span><br><br>';
    html += '</td></tr>';
    html += '<tr><td class="nowrap">';
    html += '<img src="images/toc/legends/' + png + '.png" alt="">';
    html += '</td></tr></table>';

    dojo.byId("panel").innerHTML = html;
    dojo.byId("panel").style.backgroundColor = "white";
}