updateListeVille = 
{
    base     : '',
    link     : null,
    wait     : null,
    select   : null,
    trigger  : null,
    lastPays : '',
    lastCp   : '',
    lastTabIndex : 0,
    incTabIndex : false,
    datas    : new Array(),
    /**
     * Place l'élément d'attente
     */
    waiting : function()
    {
        this.link.detach();
        this.select.parent().append(this.wait);
    },
    /**
     * Place le lien de mise à jour
     */
    updated : function()
    {
        this.wait.detach();
        this.select.parent().append(this.link);
    },
    /**
     * Initialise le systeme
     */
    init : function()
    {
        // récupère la base de la requête
        this.base = $('base').attr('href');

        // créer le texte d'attente
        this.wait = $.create('span', {}, $.create('img', {
                src:'http://image.weebio.fr/tpl/v2/loader.gif',
                alt:'Veuillez patienter...'
            }).css('vertical-align', 'middle'));

        // créer le lien de recharge de la liste
        this.link = $.create('a', {href:'#'}, 'mettre à jour la liste')
            .addClass('puce')
            .click(function() {updateListeVille.start(0);return false;});

        // créer le select
        this.select = $.create('select', {id:'ville2',name:'ville',tabindex:'0'});

        // si le formulaire est validé, on valide le select
        if ($('P.congrat', $('#Fadresse')).size() > 0) this.select.addClass('good');

        // créer le paragraphe
        $.create('p', {}, [ $.create('label', {'for':'ville'}, 'Ville :'), ' ', this.select, this.wait])
            .insertBefore($('#adresse').parent());

        $.create('hr').insertBefore($('#adresse').parent());

        // ajoute les trigger
        $('#pays').change(function() {updateListeVille.start(5);});
        $('#cp').change(function() {updateListeVille.start(2);})
            .keyup(function() {updateListeVille.start(2);})
            .focusin(function() {updateListeVille.start(10);})
            .focusout(function() {updateListeVille.start(0);});

        // la fancybox pour la ville quand autre est sélectionné
        $('#Fadresse').submit(function() {
            if ($('#ville2').val() == '0') {updateListeVille.showFancy();return false;}
            return true;
        });

        // passe le formulaire en mode actif
        $('#mode').val('on');

        // met à jour la liste des villes
        this.request();

        // change l'ordre des tabindexs
        $('*[tabindex]', $('#Fadresse')).each(function()
        {
            var tab = parseInt($(this).attr('tabindex'));

            if (tab == 0 || updateListeVille.incTabIndex)
            {
                tab = updateListeVille.lastTabIndex + 1;

                $(this).attr('tabindex', tab);

                updateListeVille.incTabIndex = true;
            }

            updateListeVille.lastTabIndex = tab;
        });
    },
    /**
     * Demande la mise à jour du champ Ville
     */
    start : function(timetolaod)
    {
        this.waiting();

        if (timetolaod > 0)
        {
            // supprime la dernière demande
            if (this.trigger != null)
            {
                window.clearTimeout(this.trigger);
                this.trigger = null;
            }

            // ajout une nouvelle demande
            this.trigger = window.setTimeout('updateListeVille.fire()', timetolaod * 1000);
        }
        else
        {
            // supprime la dernière demande
            if (this.trigger != null)
            {
                window.clearTimeout(this.trigger);
                this.trigger = null;
            }

            this.request();
        }
    },
    /**
     * Lance la mise à jour du champ ville
     */
    fire : function()
    {
        this.trigger = null;
        this.request();
    },
    /**
     * Met à jour select avec les données fournis
     */
    update : function(datas)
    {
        // vide le select
        this.select.empty();

        // récupère la valeur de la ville dans le champ caché s'il existe
        var villeInput = $('input#ville');
        var villeUser  = '';

        if (villeInput.size() > 0)
        {
            // récupère la valeur du champ cacher
            villeUser = villeInput.val()
            // supprime le champ cacher
            villeInput.remove();
        }

        // rempli le select
        for(var ville in datas)
        {
            var option = $.create('option', {value:datas[ville]}, ucFirst(datas[ville].toLowerCase()));

            if (datas[ville] == villeUser) option.attr('selected', 'selected');

            this.select.append(option);
        }

        // en cas de ville non listée
        this.select.append($.create('option', {value:'0'}, 'Autre'));

        // remet le lien update en place
        this.updated();

        // met en cache les résultats
        this.datas[this.lastPays + '-' + this.lastCp] = datas;
    },
    /**
     * Récupère la liste des villes
     */
    request : function()
    {
        var pays = $('#pays').val();
        var cp   = $('#cp').val();

        if (this.datas[pays + '-' + cp]) this.update(this.datas[pays + '-' + cp]);
        else if (this.lastPays == pays && this.lastCp == cp) this.updated();
        else $.getJSON(this.base +
            'geo/get-villes/' +
            pays + '/' + 
            cp + '/', function(datas) {updateListeVille.update(datas);});

        this.lastPays = pays;
        this.lastCp = cp;
    },
    /**
     * Affiche la fancy box pour choisir le nom de la ville
     */
    showFancy : function()
    {
        var actionSubmit = function() {
            // récupère la fancy
            var fancy = $('#fancybox-outer');
            // supprime l'avertissement précédent
            $('p.advert', fancy).remove();
            // récupère la valeur rentrée
            var v = $.trim($('#villeFancy').val().toUpperCase());
            // si la valeur est vide on averti sinon on mémorise et valide le
            // formulaire
            if (v == '') {
                $('p', fancy).before($.create('p', {'class':'advert'}, 'Veuillez entrer votre ville.'));
                $('p.advert', fancy).hide().fadeIn(1200);
                $('#villeFancy', fancy).focus();
                $.fancybox.resize();
            } else {
                $('#ville2').append($.create('option', {value:v}, v)).val(v);
                $.fancybox.close();
                $('#Fadresse').submit();
            }
            return false;
        }

        var content = $.create('form', {'class':'t11 mtop'},
            $.create('fieldset', {},
                $.create('p', {}, [
                    $.create('label', {'for':'villeFancy'}, 'Ville :'),
                    $.create('br'),
                    $.create('input', {type:'text',name:'ville',id:'villeFancy',size:'30'}),
                    $.create('br'),
                    $.create('a', {'class':'btn','href':'#'}, 'Valider').click(actionSubmit)
                ])
            )
        ).submit(actionSubmit);
            
        $.fancybox({
            'title'          : 'Entrez le nom de votre ville',
            'transitionIn'	 : 'elastic',
            'transitionOut'	 : 'elastic',
            'speedIn'		 : 600,
            'speedOut'		 : 200,
            'modal'          : true,
            'autoDimensions' : false,
            'width'          : 325,
            'height'         : 200,
            'content'        : content,
            'centerOnScroll' : true,
            'onComplete'     : function() {$('#villeFancy').focus();}
        });
    }
};

$(document).ready(function()
{
    $('form .advert').hide().fadeIn(1200);
    $('form .congrat').hide().fadeIn(1200);

    if ($('#identify').size() > 0)
    {
        if ($('#method').val() == 'simple')
            $('#password').focus();
        else
            $('#login').focus();
    }

    if ($('#ville').size() > 0)
    {
        updateListeVille.init();
    }
});