// JavaScript Document

//carrega a start assim que a página for carregada
$(document).ready(function() { start(); });

//procura pelo select com o estado e coloca o onchange
function start(){
	
	carregaLoader();
	
    //chama a função carregaCidades quando o valor do select é modificado
    $("#estado").change(
        function (){
            carregaCidades(this.value);
        }
     );
}

// função que insere o Loader na página
function carregaLoader() {
	var body = $("body");
	var pElm = $(document.createElement("div"));
	pElm.append("Aguarde...");
    pElm.addClass("loading_hide");
    pElm.attr("id","loading");
    //inserimos o p no body
    body.append(pElm);
}

//carrega a cidade referente ao estado :D
function carregaCidades(idestado){
	
	idestado = parseInt(idestado);

	if ((idestado > 0) && (idestado < 28))
	{
		//pega o xml montado com as cidades do estado
		var url = "http://www.powerself.com.br/sys/ajax/cidades_xml.php";
		//var url = "http://michael/powerself/sys/ajax/cidades_xml.php";
		
	   	$("#loading").show("slow"); //mostra o carregando...
	   	// trava os selects
	   	$("#estado").attr("disabled","disabled");
	   	$("#cidade").attr("disabled","disabled");
 
    	//ajax em jquery, quando por get, use $.get(), quando por post, use $.post()
    	$.get( url, {"idestado": idestado}, colocarCidades);
	}

}

function colocarCidades(xmlCidades){
    //var cidades =$("form[@name=frm2]").find("select[@id=cidade]");
    var cidades = $("#cidade");
    //procura no xml os filhos de <estado>
	xml_cidades = $("estado", xmlCidades);
    cidades.empty();//tira os elementos 'antigos' do select (jquery)
    var oldOption = $(document.createElement("option"));//option com o valor 'Escolha uma cidade'
    oldOption.val("").append("Escolha uma cidade");//passamos o valor
    //inserimos o option antigo no select
    cidades.append(oldOption);
    //colocamos as cidades no dropdown
    xml_cidades.find("cidade").each(
        function(){
            //graças ao encadeamento, criamos um elemento gastando apenas uma
            //linha (tudo bem, quebrada para melhorar a leitura).
            var nOption = $( document.createElement( "option" ) )
               .val( $( this ).attr( "cdg" ) )
               .append( this.childNodes[0].nodeValue );
               
            cidades.append(nOption);
        }
    );
    $("#loading").hide("slow");//esconde o carregando...
    //destrava os selects
    $("#estado").attr("disabled","");
    $("#cidade").attr("disabled","");
}