function loadListOfDistricts(areaId) {
    var areaMenu = $('#area-selector-menu');
    areaMenu.removeClass('area-selector-default-width');
    var classToAdd = '';
    for (var i = 0; i < areas.length; i ++) {
        $('#area-selector-menu-content-dash').show();
        if (areas[i] == areaId) {
            $('#area-menu-content-districts-' + areas[i]).show();
            classToAdd = 'area-selector-'+areas[i]+'-width';
        } else {
            $('#area-menu-content-districts-' + areas[i]).hide();
            areaMenu.removeClass('area-selector-'+areas[i]+'-width');
        }
    }
    areaMenu.addClass(classToAdd);

    updateAreaFrameSize();
}

/**
 * Shows or hides category list baloon, according to its previous state.
 */
function toggleCategorySelectorMenu() {
    // hide area baloon
    closeAreaSelectorMenu();
    $('#category-content').toggle();
    $('#category-shadow').toggleClass('shadow-off');
}

function showAreaSelectorMenu() {
    // hide category baloon
    $('#category-content').hide();
    $('#category-shadow').addClass('shadow-off');

    var areaMenu = $('#area-selector-menu');
    // all other dialogs except current "area-selector-menu" should be hidden before open this
    hideOtherDialogs(areaMenu);

    var draggable = $('#area-selector-menu-draggable');
//    var dimensions = getScreenSize();
//
//    //if dialog is out of the screen - just return it to screen
//    //else hide/unhide it
//    var top = draggable.css('top');
//    top = parseInt(top.substring(0, top.length-2));
//    var left = draggable.css('left');
//    left = parseInt(left.substring(0, left.length-2));
//
//    //respect global position for the dialog
//    var topOffset = areaMenu.css('top');
//    topOffset = parseInt(topOffset.substring(0, topOffset.length-2));
//    var leftOffset = areaMenu.css('left');
//    leftOffset = parseInt(leftOffset.substring(0, leftOffset.length-2));
//
//    if (top+topOffset > dimensions.height || left+leftOffset > dimensions.width
//            || top+topOffset < 0 || left+leftOffset < 0) {
//        draggable.css({left:'',top:''});
//    } else {
        draggable.css({left:'',top:''});
        areaMenu.toggle();
        updateAreaFrameSize();
//    }
}

function closeAreaSelectorMenu() {
	$('#area-selector-menu').hide();
	$('#area-selector-menu-draggable').css({left:'',top:''}); 
}

function updateAreaFrameSize() {
        var areaMenu = $('#area-selector-menu');
        if (!areaMenu.is(":hidden")) {
        //calculate width and height as they change with error messages
        var frame = $('#area-selector-selector-menu');

        var width = areaMenu.width();
        $('#area-selector-menu iframe').attr('width', width);
//        2px is hardcoded constant to reflect borders
        var width = frame.width() + 2;

        $('#area-selector-menu iframe').attr('width', width);
//            3 px is hardcoded constant to reflect borders
        var height = frame.height() + 3;

        $('#area-selector-menu iframe').attr({ height: height});
    }
}