jQuery.ajaxSetup({ "error": function(XMLHttpRequest, textStatus, errorThrown) {
    alert(textStatus);
    alert(errorThrown);
    alert(XMLHttpRequest.responseText);
}
});

function SetSimpleSearchDropDowns(stateElement, stateAdvancedElement, metroAreaElement, metroAreaAdvancedElement) {
    var state = document.getElementById(stateElement);
    var metroArea = document.getElementById(metroAreaElement);
    var stateAdvanced = document.getElementById(stateAdvancedElement);
    var metroAreaAdvanced = document.getElementById(metroAreaAdvancedElement);

    state.selectedIndex = stateAdvanced.selectedIndex;
    metroArea.selectedIndex = metroAreaAdvanced.selectedIndex;
}

function SetAdvancedSearchDropDowns(stateElement, stateAdvancedElement, metroAreaElement, metroAreaAdvancedElement) {
    var state = document.getElementById(stateElement);
    var metroArea = document.getElementById(metroAreaElement);
    var stateAdvanced = document.getElementById(stateAdvancedElement);
    var metroAreaAdvanced = document.getElementById(metroAreaAdvancedElement);

    stateAdvanced.selectedIndex = state.selectedIndex;
    metroAreaAdvanced.selectedIndex = metroArea.selectedIndex;
}

function SearchStateChanged(stateElement, stateAdvancedElement, metroAreaElement, metroAreaAdvancedElement) {
    ModifyMetroArea(stateElement, metroAreaElement);
    ModifyMetroArea(stateElement, metroAreaAdvancedElement);
}

function SearchStateAdvancedChanged(stateElement, stateAdvancedElement, metroAreaElement, metroAreaAdvancedElement) {
    ModifyMetroArea(stateAdvancedElement, metroAreaElement);
    ModifyMetroArea(stateAdvancedElement, metroAreaAdvancedElement);
}

function SearchMetroAreaChanged(metroAreaElement, metroAreaElement1) {
    var metroArea = document.getElementById(metroAreaElement);
    var metroArea1 = document.getElementById(metroAreaElement1);
    
    metroArea1.selectedIndex = metroArea.selectedIndex;    
}

function ModifyMetroArea(stateElement, metroAreaElement) {
    var state = document.getElementById(stateElement);
    var metroArea = document.getElementById(metroAreaElement);

    var stateSelectedValue = state.options[state.selectedIndex].value;
    var metroAreaSelectedValue = metroArea.options[metroArea.selectedIndex].value;

    state.disabled = true;
    metroArea.disabled = true;

    metroArea.options.length = 0;
    var opt = document.createElement('option');
    opt.text = 'Select Metro Area ...';
    opt.value = '0';
    metroArea.options.add(opt);

    jQuery.getJSON("http://" + document.location.hostname + "/Handlers/JSONUpdateMetroAreaDD.ashx",
                        { sv: stateSelectedValue },
                        function(data) {
                            jQuery.each(data, function(i, item) {
                                var opt = document.createElement('option');
                                opt.text = item.Text;
                                opt.value = item.Value;
                                metroArea.options.add(opt);
                            });
                            state.disabled = false;
                            metroArea.disabled = false;
                            SetMetroAreaSelectedValue(metroArea, metroAreaSelectedValue);
                        });
    // reselect Metro Area if it exists
    //setTimeout(function() { SetMetroAreaSelectedValue(metroArea, metroAreaSelectedValue) }, 100);
}

function SetMetroAreaSelectedValue(ddElement, ddValue) {
    for (x = 0; x < ddElement.options.length; x++) {
        if (ddElement.options[x].value == ddValue) {
            ddElement.selectedIndex = x;
        }
    }
    return;
}