function getXMLHttpRequest() {
    if (window.XMLHttpRequest){
        ret = new XMLHttpRequest();
    }else if (window.ActiveXObject){
        ret = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return ret;
}

function get_states_from_country(field, field_suffix, dep_suffix){
    var req = getXMLHttpRequest()
    var country = field.options[field.selectedIndex].value;
    var url = "@@states-ajax?country=" + country;
    req.open("GET", url, true);
    req.onreadystatechange = function(){
                                 update_callback(req, field.id, field_suffix, dep_suffix);
                             };
    req.send(null);
}

function update_sequence(field_id, field_suffix, dep_suffix, response){
//field.id, country, state
    var dep_field_id = "country";
    var dep_container = document.getElementById("state_container");
    var dep_field = document.getElementById("hidden_state");
    var dep_value = (dep_field.selectedIndex >= 0) ? dep_field.options[dep_field.selectedIndex].value : '';

    var state_options = "<select name=\"state\" id=\"state\">";
    for (var i = 0; i < response.length; i++){
        if (dep_field.getAttribute('value') == response[i][0]){
            state_options += "<option value=\"" + response[i][0] + "\" selected>" + response[i][1] + "</option>\n";
        }else{
            state_options += "<option value=\"" + response[i][0] + "\">" + response[i][1] + "</option>\n";
        }
    }
    state_options += "</select>";

    dep_container.innerHTML = state_options;
}

function update_callback(req, field_id, field_suffix, dep_suffix){
   if (req.readyState == 4){
        var response = req.responseText;
        response = eval(response);
        update_sequence(field_id, field_suffix, dep_suffix, response);
    }
}