function ToggleBubble(id)
{
    if (document.getElementById(id).style.display == 'block')
    {
        CloseBubble(id);
    }
    else
    {
        OpenBubble(id);
    }
}

function OpenBubble(id)
{
    DisplayModal();
    
    var MarkerId = id.replace('Bubble_', 'Marker_');
    HideMarker(MarkerId);
    
    document.getElementById(id).style.display = 'block';
    document.getElementById(id).style.zIndex = 100;
    
    var OldTop = document.getElementById(MarkerId).style.top.replace('px','');
    document.getElementById(id).style.top = OldTop - document.getElementById(id).offsetHeight + 39 + 'px';
}

function CloseBubble(id)
{
    HideModal();
    
    var MarkerId = id.replace('Bubble_', 'Marker_');
    ShowMarker(MarkerId);
    
    document.getElementById(id).style.display = 'none';
    document.getElementById(id).style.zIndex = 5;
}

function ShowMarker(id)
{
    document.getElementById(id).style.display = 'block';
}

function HideMarker(id)
{
    document.getElementById(id).style.display = 'none';
}

function FocusMarker(id)
{
    document.getElementById(id).style.zIndex = 90;
}

function UnFocusMarker(id)
{
    document.getElementById(id).style.zIndex = 5;
}

function DisplayModal()
{
    document.getElementById('Modal').style.display = 'block';
}

function HideModal()
{
    document.getElementById('Modal').style.display = 'none';
}

/*
// Create new marker.
function AddMarker(x, y, id)
{
    var NewMarker = document.createElement('div');
    
    NewMarker.setAttribute('id', id);
    NewMarker.setAttribute('class', 'MarkerShadow');
    
    NewMarker.style.top = 475 - y - 10 + "px";
    NewMarker.style.left = x - 10 + "px";
    
    // Create actual marker graphic.
    var InnerMarker = document.createElement('div');
    
    InnerMarker.setAttribute('class', 'Marker');
    InnerMarker.setAttribute('onclick', 'DisplayEvent(' + x + ', ' + y + ', "' + id + '")');
    
    NewMarker.appendChild(InnerMarker);
    document.getElementById('MapContainer').appendChild(NewMarker);
}

// Displays an event summary on the map.
function DisplayEvent(x, y, id)
{
    var BubbleBottom = document.createElement('div');
    
    BubbleBottom.setAttribute('id', id + "Bubble");
    BubbleBottom.setAttribute('class', 'MarkerBottom');
    
    BubbleBottom.style.display = 'none';
        
    var BubbleMid = document.createElement('div');
    
    BubbleMid.setAttribute('id', id + "Bubble");
    BubbleMid.setAttribute('class', 'MarkerContent');
    
    BubbleMid.innerHTML = "<p>This is an event</p>";
    
    var BubbleTop = document.createElement('div');
    
    BubbleTop.setAttribute('id', id + "Bubble");
    BubbleTop.setAttribute('class', 'MarkerTop');
    
    document.getElementById('MapContainer').appendChild(BubbleBottom);
    BubbleBottom.appendChild(BubbleTop);
    BubbleBottom.appendChild(BubbleMid);
        
    document.getElementById(id).style.display = 'none';
    BubbleBottom.style.display = 'block';
    
    BubbleBottom.style.left = x - 122 + "px";
    BubbleBottom.style.top = y + 3 - document.getElementById(id + "Bubble").offsetHeight + "px";
}
*/