function setTrafficPosition() 
{
    return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(41,7)); 
}

function setTrafficButtonStyle(button, isKey) 
{
    button.style.color = "#000000";
    button.style.backgroundColor = "#FFFFFF";
    button.style.fontSize = "12px";
    button.style.border = "1px solid black";
    button.style.textAlign = "center";
    button.style.cursor = "pointer";
    if (isKey == false)
    {
        button.style.width = "4em";
        button.style.cssFloat = "left";
        button.style.styleFloat = "left";
    }
    else
    {
        button.style.width = "1em";
        button.style.cssFloat = "right";
        button.style.styleFloat = "right";
    }
}

function setButtonStyleNormal(button) {
    button.className = "";
}

function setButtonStyleBold(button) {
    button.className = "highlight";
}

function setupTrafficControl(map)
{
    var trafficOn = false;
    var isKey = false;
    var keyOn = false;
    var traffic = document.createElement("div");
    traffic.id = "traffic_outer"
    var inner = document.createElement("div");
    inner.id = "traffic_inner";
    //inner.onclick = toggleTraffic;
    var trafficOptions = { incidents: true };
    trafficInfo = new GTrafficOverlay(trafficOptions);
    //this.setButtonStyle_(traffic, isKey);
    inner.appendChild(document.createTextNode("Traffic"));
    GEvent.addDomListener(inner, "click", function() {
        var button = document.getElementById("traffic_inner");
        if (trafficOn == false) {
            map.addOverlay(trafficInfo);
            trafficOn = true;
            setButtonStyleBold(button);
        }
        else {
            map.removeOverlay(trafficInfo);
            trafficOn = false;
            setButtonStyleNormal(button);
        }
    });
    traffic.appendChild(inner);

    var keyDiv = document.createElement("div");
    keyDiv.id = "legend";
    //isKey = true;
    //this.setButtonStyle_(keyDiv, isKey);
    keyDiv.appendChild(document.createTextNode("?"));
    GEvent.addDomListener(keyDiv, "click", function() {
        var key = document.getElementById("legend");
        if (keyOn == false) {
            document.getElementById("keyDiv").style.display = "block";
            keyOn = true;
            setButtonStyleBold(key);
        }
        else {
            document.getElementById("keyDiv").style.display = "none";
            keyOn = false;
            setButtonStyleNormal(key);
        }
    });
    traffic.appendChild(keyDiv);

    map.getContainer().appendChild(traffic);
    return traffic;
}

/* ************************************************************************
    Following are the functions to implement the More button functionality
   ************************************************************************/

var timer;
var chosen = [];
var layers;

function setMorePosition() 
{
    return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(110, 7));
}

function setupMoreControl(map) 
{
    layers = [
        { name: 'Pano', obj: new GLayer('com.panoramio.all') },
        { name: 'Tube', obj: new GLayer('com.youtube.all') },
        { name: 'Wiki', obj: new GLayer('org.wikipedia.en') }
    ];
    var more = document.getElementById("outer_more");
    var buttonDiv = document.createElement("div");
    buttonDiv.id = "morebutton";
    buttonDiv.title = "Show and Hide Layers";
    var textDiv = document.createElement("div");
    textDiv.id = "more_inner";
    textDiv.appendChild(document.createTextNode("More..."));
    buttonDiv.appendChild(textDiv);

    try
    {
        // Register Event handlers
        more.onmouseover = showLayerbox;
        more.onmouseout = setClose;
        buttonDiv.onclick = toggleLayers;

        // Insert the button just after outer_more div
        more.insertBefore(buttonDiv, document.getElementById("box"));
        // Remove the whole div from its location and reinsert it to the map
        map.getContainer().appendChild(more);
    }
    catch (ex)
    {
    }    
    return more;
}

function switchLayer(checked, layer) {

    /* Function was originally borrowed from Esa:
    *  http://esa.ilmari.googlepages.com/dropdownmenu.htm
    */
    var layerbox = document.getElementById("box");
    var boxlink = document.getElementById("boxlink");
    var button = document.getElementById("more_inner");

    if (checked) {
        map.addOverlay(layer);
        // Reset chosen array
        chosen.length = 0;
        /* Highlight the link and
        *  make the button font bold.
        */
        boxlink.className = "highlight";
        layerbox.className = "highlight";
        button.className = "highlight";
    }
    else {
        map.removeOverlay(layer);
        /*  Reset the link and the button
        * if all checkboxes were unchecked.
        */
        if (!checkChecked()) {
            boxlink.blur();
            boxlink.className = "";
            layerbox.className = "";
            button.className = "";
        }
    }
}

function showLayerbox() 
{
    if (window.timer) clearTimeout(timer);
    document.getElementById("box").style.display = "block";
    var button = document.getElementById("more_inner");
    button.style.borderBottomWidth = "4px";
    button.style.borderBottomColor = "white";
}

function setClose() 
{
    var layerbox = document.getElementById("box");
    var button = document.getElementById("more_inner");
    var bottomColor = checkChecked() ? "#6495ed" : "#c0c0c0";

    timer = window.setTimeout(function() {
        layerbox.style.display = "none";
        button.style.borderBottomWidth = "1px";
        button.style.borderBottomColor = bottomColor;
    }, 400);
}

// Returns true if a checkbox is still checked otherwise false
function checkChecked() 
{
    var boxes = document.getElementsByName("mark");
    for (var i = 0; i < boxes.length; i++) {
        if (boxes[i].checked) return true;
    }
    return false;
}

function toggleLayers() 
{
    if (chosen.length > 0) {
        var copy = chosen.slice();
        for (var i = 0; i < copy.length; i++) {
            var index = parseInt(copy[i]);
            switchLayer(true, layers[index].obj);
            document.getElementsByName("mark")[index].checked = true;
        }
    }
    else {
        hideAll();
    }
}

function hideAll() 
{
    var boxes = document.getElementsByName("mark");
    for (var i = 0; i < boxes.length; i++) 
    {
        if (boxes[i].checked) 
        {
            boxes[i].checked = false;
            switchLayer(false, layers[i].obj);
            chosen.push(i);
        }
    }
}