var smallOverviewImageMapControl;
var overviewSelect;
var smallOverviewImageMapControlInit = false;


function ShowSmallOverviewImageMap(index)
{
    if (!smallOverviewImageMapControlInit)            
    {               
        smallOverviewImageMapControlInit = true;
        smallOverviewImageMapControl = document.createElement("div");                
        smallOverviewImageMapControl.id = "smallOverviewImageMapControl";               
        smallOverviewImageMapControl.style.top = (window.document.body.offsetHeight - 310) + "px";             
        smallOverviewImageMapControl.style.left = "13px";                
        smallOverviewImageMapControl.style.width = "180px";
        smallOverviewImageMapControl.style.height = "280px";                
        smallOverviewImageMapControl.style.border = "0px solid #ccc";               
        //smallOverviewImageMapControl.style.background = "#fff";               
        smallOverviewImageMapControl.style.overflow = "hidden";               
        
        //add the imagemaps
        for(var i=0; i<arrOverviewImageMaps.length;i++)
        {
            smallOverviewImageMapControl.appendChild(GetOverviewImagemapElem(i));
        }
        map.AddControl(smallOverviewImageMapControl);

        FillOverviewSelectionElem();
        
        SelectOverview(0);
    }
}


function GetOverviewImagemapElem(index)
{
    var iMapElem = document.createElement("div");
    iMapElem.id = "imageMap_" + index;
    iMapElem.innerHTML = xmlOverviewImagemapHtml[index].xml;     
    iMapElem.width = "180px";
    iMapElem.height = "280px";
    iMapElem.width = "180px";
    iMapElem.style.overflow = "hidden";      
    iMapElem.style.display = "none";         
    return iMapElem; 
}

function FillOverviewSelectionElem()
{
    var selElem = document.getElementById("overviewSelection");
    for(var i=0; i< arrOverviewImageMaps.length; i++)
    {
        var opt = new Option(arrOverviewImageMaps[i].name);
        selElem.options[selElem.options.length] = opt;
    }
}

function SelectOverview(index)
{
    //var index = overviewSelect.selectedIndex;
    for(var i=0; i<arrOverviewImageMaps.length; i++)
    {
        if(i==index)
        {
            document.getElementById("imageMap_" + i).style.display = "block";
        }
        else
        {
            document.getElementById("imageMap_" + i).style.display = "none";
        }
    }
    SetActiveOverviewOverlay(arrOverviewImageMaps[index].overlayName);
}