var i = 1;
var cont = 0;
var total = 0;
var vetUF = new Array();
vetUF["html"] = "";
var vetCidades = new Array();
var vetSelecionados = new Array();
var vetInicialmenteSelecionados = new Array(512, 495);
var orientacaoSelecionada = "H";

$(document).ready(function(){
    $('#check-vertical').click(function(){
        orientacaoSelecionada = "V";
        atualizaVisualizacao();
    });
    
    $('#check-horizontal').click(function(){
        orientacaoSelecionada = "H";
        atualizaVisualizacao()
    });
    
    $('#adicionar').click(function(){
        var atualizar = add($('#valor-cidade').val());
        if (atualizar) {
           atualizaVisualizacao();
        }
    });
    
    $("#gerar-codigo").click(function(){
         $("#colar-codigo").val(geraCodigo());
    });
    
    $("#colar-codigo").click(function(){
        $(this).focus();
        $(this).select();
    });

    $.ajax({
        type: "GET",
        url: urlXmlGetInfo,
        dataType: "xml",
        complete: function(data){
            var json = $.xmlToJSON(data.responseXML);
            
            var tam = json.UFGroup[0].UF.length;
            var isigla = "";
            
            for (i = 0; i < tam; i++) {
                isigla = json.UFGroup[0].UF[i].sigla;
                
                vetUF[isigla] = new Array();
                vetUF[isigla]["nome"] = json.UFGroup[0].UF[i].Text;
                vetUF[isigla]["cidades"] = "";

                vetUF["html"] += '<option value="'+isigla+'">' + isigla + "</option>";
            }
            
            tam = json.CidadeGroup[0].Cidade.length;
            
            var id;
            for (i = 0; i < tam; i++) {
                isigla = json.CidadeGroup[0].Cidade[i].uf;
                iid = json.CidadeGroup[0].Cidade[i].id;
                nomeCidade = json.CidadeGroup[0].Cidade[i].Text;
                vetUF[isigla]["cidades"] += '<option value="' + iid + '">' + nomeCidade + "</option>";
                
                vetCidades[iid] = isigla + " - " + nomeCidade;
            }
            
            $("#valor-uf").append(vetUF["html"]);
            $("#valor-uf").change(function(){
                $("#valor-cidade").empty();
                $("#valor-cidade").append(vetUF[$(this).val()]["cidades"]);
            });
            
			   $("#valor-uf").val("RS");
			
            $("#valor-cidade").append(vetUF[$("#valor-uf").val()]["cidades"]);
            
            for (i in vetInicialmenteSelecionados) {
                add(vetInicialmenteSelecionados[i]);
            }
            
            $("#loading-xml").hide();
            $("#dock-cidades").show();
            
            atualizaVisualizacao();
            
        }
    });
    
    
});

function add(idCidade){
    if (vetSelecionados["cidade-" + idCidade] != undefined) {
        alert("Você já adicionou essa cidade"); 
        return false;
    }
    
    if (total < 5) {
       vetSelecionados["cidade-" + idCidade] = vetSelecionados.length;
       vetSelecionados[vetSelecionados.length] = idCidade;

        total++;
        cont++;
        var linha = idCidade;
        
        if (i == 1) 
            i = 2;
        else 
            i = 1;
        $('#selecionadas').append('<div id="' + linha + '" class="zebra  linha' + i + '"><div class="f-left">' + vetCidades[idCidade] + '</div><div class="f-right"><img id="excluir-' + linha + '" class="excluir" src="images/ico-excluir.gif" width="12" height="10" alt="Excluir" title="Excluir" /></div><br class="clr" />');
        
        $('#excluir-' + linha).click(function(){
			if (total == 1) {
				alert("Você não pode excluir todas as cidades.");
			} else {			
				vetSelecionados[vetSelecionados["cidade-" + $(this).parent().parent().attr("id")]] = undefined;
				vetSelecionados["cidade-" + $(this).parent().parent().attr("id")] = undefined;
				
				total--;
				i = 1;
				$(this).parent().parent().remove();
				
				$('.zebra').each(function(){
					if (i == 1) 
						i = 2;
					else 
						i = 1;
					$(this).attr("class", "zebra linha" + i);
				});
				
				atualizaVisualizacao();
			}
        });
        return true;
    }
    
    alert("Limite máximo de 5 cidades"); 
    
    return false;
}

function geraCodigo(){
   return insereWidget(orientacaoSelecionada,geraStrCidades(),true);   
}

function flashEncode(str) {
   return encodeURIComponent(str);
}

function geraStrCidades(){
    var stringCidades = "";
    var tam = vetSelecionados.length;
    for (k = 0; k <= tam; k++) {
        if (vetSelecionados[k] != undefined) {
            stringCidades += vetSelecionados[k] + ",";
        }
    }
    stringCidades = stringCidades.substr(0, stringCidades.length - 1);
    return stringCidades;
}

function atualizaVisualizacao(){
    $('#dock-view').fadeOut('fast', function(){
        $("link[rel=stylesheet]").attr({href : "css/"+orientacaoSelecionada.toLowerCase()+".css"});
        $('#dock-view').html(insereWidget(orientacaoSelecionada, geraStrCidades(), true));
        $('#dock-view').fadeIn('slow');
    });
}

function insereWidget(orientacao, cidadeId, retorno) {

	if (retorno == undefined) retorno = false;

	var flashVars = "cidadeId="+cidadeId+"&urlResult="+flashEncode(urlXmlResult)+"&urlIcons="+flashEncode(urlIcons);
	
   
   var strVejaCompleta = "Mais previs&atilde;o do tempo";
   
   var horizontal = '<style type="text/css"><!-- @import url("'+liveSite+'/css/h.css"); --></style><div id="widget-clima"><div id="box-tempo-horizontal"><div class="box-tempo-horizontal-mg"><div class="f-left"><a href="http://www.clicrbs.com.br/clictempo" title="clicTempo" target="_blank"><img src="'+liveSite+'images/img-tempo-widget.gif" width="62" height="25" alt="Tempo" title="Tempo" /></a><a href="http://www.clicrbs.com.br" title="clicRBS" target="_blank"><img src="'+liveSite+'images/bt-logo-widget.gif" width="62" height="25" alt="clicRBS" title="clicRBS" /></a></div><div class="veja-completo"><a href="http://www.clicrbs.com.br/clictempo" title="'+strVejaCompleta+'" target="_blank">'+strVejaCompleta+'</a></div><br class="clr" /><object type="application/x-shockwave-flash" data="'+liveSite+'flash/tempo_horizontal_2011.swf" width="258" height="62" wmode="transparent"><param name="movie" value="'+liveSite+'tempo_horizontal_2011.swf" /><param name="wmode" value="transparent" /><param name="FlashVars" value="'+flashVars+'" /></object><div class="fique-informado"><a href="'+linkFiqueInformado+'" title="Informe-se! Acesse o clicRBS." target="_blank">Informe-se! Acesse o clicRBS.</a></div><div class="adquira"><a href="javascript:void(0);" onClick="'+linkTempoNoSeuSite+'" title="Tempo no seu site!">Tempo no seu site!</a></div></div></div></div>';
   
   var vertical = '<style type="text/css"><!-- @import url("'+liveSite+'/css/v.css"); --></style><div id="widget-clima"><div id="box-tempo-vertical"><div class="box-tempo-vertical-mg"><div class="topo"><a href="http://www.clicrbs.com.br/clictempo" title="clicTempo" target="_blank"><img src="'+liveSite+'images/img-tempo-widget.gif" width="62" height="25" alt="Tempo" title="Tempo" /></a><a href="http://www.clicrbs.com.br" title="clicRBS" target="_blank"><img src="'+liveSite+'images/bt-logo-widget.gif" width="62" height="25" alt="clicRBS" title="clicRBS" /></a></div><object type="application/x-shockwave-flash" data="'+liveSite+'flash/tempo_vertical_2011.swf" width="134" height="115" wmode="transparent"><param name="movie" value="'+liveSite+'flash/tempo_vertical_2011.swf" /><param name="wmode" value="transparent" /><param name="FlashVars" value="'+flashVars+'" /></object><div class="veja-completo"><a href="http://www.clicrbs.com.br/clictempo" target="_blank" title="'+strVejaCompleta+'">'+strVejaCompleta+'</a></div></div><div class="fique-informado"><a href="'+linkFiqueInformado+'" title="Informe-se! Acesse o clicRBS.">Informe-se! Acesse o clicRBS.</a></div><div class="adquira"><a href="javascript:void(0);" onClick="'+linkTempoNoSeuSite+'" title="Tempo no seu site!">Tempo no seu site!</a></div></div></div>';

	var htmlRetorno = "";	
	if (orientacao == "H") { htmlRetorno += horizontal; } else { htmlRetorno += vertical; }   
    if (retorno) { return htmlRetorno; } else { document.write(htmlRetorno); }
}