function ClearDropDownList(element)
{
   GetElementByID(element).options.length = 0;
}


function FillMapAreasList(selIndexMapArea,selIndexCamera)  
{
    ClearDropDownList('ddlMapAreas');
    
    
    try
    {
        for(var i=0;i<_ddlMA.length;i++)
       {
            GetElementByID('ddlMapAreas').options[i]=new Option(_ddlMA[i][1],_ddlMA[i][0]); //text, value 
        
       } 
       GetElementByID('ddlMapAreas').selectedIndex=selIndexMapArea;
       
       FillCameraList(selIndexCamera);
    }
    catch(e){alert("FillMapAreasList " + e.message);}            
}


function FillCameraList(selIndexCamera) {
    
    ClearDropDownList('ddlCameras');
    
    try
    {
        var selectedMapAreaId =GetElementByID('ddlMapAreas').options[GetElementByID('ddlMapAreas').selectedIndex].value;
        
        var ddlIndex = 0;
        
        for(var i=0;i<_ddlCM.length;i++)
        {
            if (_ddlCM[i].mapAreaId == selectedMapAreaId)
            {
                GetElementByID('ddlCameras').options[ddlIndex] = new Option(_ddlCM[i].name, _ddlCM[i].url + "||" + _ddlCM[i].entityId);  
                ddlIndex++;
            } 
        } 
        try
        {
            GetElementByID('ddlCameras').selectedIndex = selIndexCamera;
            
            if( GetElementByID('ddlCameras').options.length>0)
            {
                GetCameraImageForFirstTime();
            }
            else
            {
                GetElementByID('ddlCameras').options[0] = new Option("No cameras present", 0);
                PicFail();
            } 
        }
        catch (e) {
            alert("FillCameraList " + e.message);
        }            
    }
    catch (e) {
        alert("FillCameraList " + e.message);
    }     
}


function PicFail() {

    GetElementByID('cameraImg').src = "images/misc/tempHolder.jpg";

    SetTextByElement('ctl00_lblCameraID', "No cameras present");
}

function GetCameraImageForFirstTime() {
    
    //Retrieving url
    var url = GetElementByID('ddlCameras').options[GetElementByID('ddlCameras').selectedIndex].value.split("||")[0];

    GetElementByID('cameraImg').src = url;

    SetTextByElement('ctl00_lblCameraID', GetElementByID('ddlCameras').options[GetElementByID('ddlCameras').selectedIndex].text);   
}


function SetCameraImageWithAjax() {

    var url =  GetElementByID('ddlCameras').options[GetElementByID('ddlCameras').selectedIndex].value.split("||")[0];

    DisplayCameraOnDashBoard(GetElementByID('ddlCameras').options[GetElementByID('ddlCameras').selectedIndex].value.split("||")[1], //id
                "", //direction
               GetElementByID('ddlCameras').options[GetElementByID('ddlCameras').selectedIndex].text, //camera name
               GetElementByID('ddlMapAreas').selectedIndex, //selected index of ddl map areas
               GetElementByID('ddlCameras').selectedIndex,
               url);  //selected index of ddl camera
}

function SetAreaListWithAjax() {

    //Camera ddl has not been changed, so we  need to pass -1 instead of a selected index
    DisplayCameraOnDashBoard(-1, //id
                "", //direction
               GetElementByID('ddlCameras').options[GetElementByID('ddlCameras').selectedIndex].text, //camera name
               GetElementByID('ddlMapAreas').selectedIndex, //selected index of ddl map areas
               GetElementByID('ddlCameras').selectedIndex) //selected index of ddl camera
               
    FillCameraList(0); //set the camera drop down list and text
}