var diSelectBoxParentLocations = {};
var diResultsCache = {};


function fOnChangeSelectBox(sID, iSelectID, iMaxHeight, bWithProperties, iListingTypeID)
{
    function onChangeSelectBox(event)
    {
        iLocationID_Parent = diSelectBoxParentLocations[iSelectID];
        iLocationID_Selected = parseInt($(sID + '_' + iSelectID).getValue());

        //console.log('onChangeSelectBox: sID = %s, iSelectID = %s, iMaxHeight = %s, iLocationID_Parent = %s, iLocationID_Selected = %s', 
        //    sID, iSelectID, iMaxHeight, iLocationID_Parent, iLocationID_Selected);
        
        // update form
        setLocationID(sID, iLocationID_Selected);
        
        if (iSelectID != iMaxHeight - 1)
        {
            if (iLocationID_Parent == iLocationID_Selected)
            {
                // empty + disable any subsequent select boxes
                for (var iIndex = iSelectID + 1; iIndex < iMaxHeight; iIndex++)
                {
                    fillSelectBox(sID, iIndex, [], null, null, iMaxHeight);
                    $(sID + '_' + iIndex).disable();
                }
            }
            else
            {
                // reload contents of next select box
                loadSelectBox(sID, iSelectID + 1, iLocationID_Selected, null, iMaxHeight, bWithProperties, iListingTypeID);
                
                // empty + disable any subsequent select boxes
                for (var iIndex = iSelectID + 2; iIndex < iMaxHeight; iIndex++)
                {
                    fillSelectBox(sID, iIndex, [], null, null, iMaxHeight);
                    $(sID + '_' + iIndex).disable();
                }
            }
        }
    }
    
    return onChangeSelectBox;
}


function fillSelectBox(sID, iSelectID, arResults, iLocationID_Parent, iLocationID_Selected, iMaxHeight)
{
    var oSelectBox = $(sID + '_' + iSelectID);
    var arOptions = [];
    
    arOptions[arOptions.length] = '<option value="' + iLocationID_Parent + '">-</option>';
    
    for (var iIndex = 0; iIndex < arResults.length; iIndex++)
    {
        if (arResults[iIndex][0] == iLocationID_Selected)
        {
            arOptions[arOptions.length] = '<option value="' + arResults[iIndex][0] + '" selected="selected">' + arResults[iIndex][1] + '</option>';
        }
        else
        {
            arOptions[arOptions.length] = '<option value="' + arResults[iIndex][0] + '">' + arResults[iIndex][1] + '</option>';
        }
    }
    
    oSelectBox.update(arOptions.join(''));
    oSelectBox.enable();
    diSelectBoxParentLocations[iSelectID] = iLocationID_Parent;
    
    var oSelectorDIV = document.getElementById(sID + '_Div');
    oSelectorDIV.style.cursor = 'default';
}


function setLocationID(sID, iLocationID)
{
    if (!isNaN(iLocationID))
    {
        //console.log('setLocationID: %s', iLocationID);
        document.getElementById(sID).value = iLocationID;
    }
}


function loadSelectBox(sID, iSelectID, iLocationID_Parent, iLocationID_Selected, iMaxHeight, bWithProperties, iListingTypeID)
{
    //console.log('loadSelectBox: iSelectID = %s, iLocationID_Parent = %s, iLocationID_Selected = %s', 
    //    iSelectID, iLocationID_Parent, iLocationID_Selected)

    if (typeof(iLocationID_Parent) == 'undefined')
    {
        return;
    }

    var oSelectorDIV = document.getElementById(sID + '_Div');
    oSelectorDIV.style.cursor = 'wait';

    if (typeof(diResultsCache[iLocationID_Parent]) == 'undefined')
    {
        //console.log('cache miss for %s', iLocationID_Parent);
        
        if (bWithProperties)
        {
            var sURL = '/user/location-select-with-properties/?iLocationID=' + iLocationID_Parent + '&iListingTypeID=' + iListingTypeID;   
        }
        else
        {
            var sURL = '/user/location-select/?iLocationID=' + iLocationID_Parent;
        }
    
        new Ajax.Request(sURL, {
            method: 'get',
            onSuccess: function(transport) {
                var arResults = eval("(" + transport.responseText + ")");
                diResultsCache[iLocationID_Parent] = arResults;
                fillSelectBox(sID, iSelectID, arResults, iLocationID_Parent, iLocationID_Selected, iMaxHeight);
            }
        });
    }  
    else
    {
        //console.log('cache hit for %s', iLocationID_Parent);
        arResults = diResultsCache[iLocationID_Parent];
        fillSelectBox(sID, iSelectID, arResults, iLocationID_Parent, iLocationID_Selected, iMaxHeight);
    }    
}


function initSelectBox(sID, iSelectID, arLocationIDs, iMaxHeight, bWithProperties, iListingTypeID)
{
    var oSelectorDIV = document.getElementById(sID + '_Div');
    
    oSelectorDIV.innerHTML += '<select class="location-selector-2" id="' + sID + '_' + iSelectID 
        + '" disabled="disabled"><option value="">-</option></select>';
        
    loadSelectBox(sID, iSelectID, arLocationIDs[iSelectID], arLocationIDs[iSelectID + 1], iMaxHeight, 
        bWithProperties, iListingTypeID);
    
    Event.observe(window, 'load', function() {
        Event.observe(sID + '_' + iSelectID, 'change', fOnChangeSelectBox(sID, iSelectID, iMaxHeight, 
            bWithProperties, iListingTypeID));
    });
}


function initSelector(sID, arLocationIDs, iMaxHeight, bWithProperties, iListingTypeID)
{
    /*
        iMaxHeight = 4
        arLocationIDs = [123, 456, 789]
        
        => select 0: choices are locations with parent 123, selected location is 456
        => select 1: choices are locations with parent 456, selected location is 789
        => select 2: choices are locations with parent 789, no location is selected
        => select 3: no choices, no location is selected
    */
    
    for (var iSelectID = 0; iSelectID < iMaxHeight; iSelectID++)
    {
        initSelectBox(sID, iSelectID, arLocationIDs, iMaxHeight, bWithProperties, iListingTypeID);
    }
    
    setLocationID(sID, arLocationIDs[arLocationIDs.length - 1]);
}