var perso = {
    
    /**
     * Rend dynamique la page.
     * Doit être appelé après le chargement de la page, que ce soit en ajax ou pas.
     * Cette initialisation se fait à la fin du code html de la page.
     */
    dynamise: function(){
	           
	    this.reset();
	    
	    /**
	     * Séléction du produit
	     */
	    
	    /** Met le formulaire à jour quand on le selectionne le contenant */
	    $("#form_produit input[@name='contenant']").click(function(){
	        perso.produit.setContenant($(this).val());
	    });
	    
	    /** Met le formulaire à jour quand on le selectionne le contenant */
        $("#form_produit input[@name='contenance']").click(function(){
            perso.produit.setContenance($(this).val());
            perso.produit.setQuantitesOptions($(this).parent().next().find('option').clone());
        });
	    
	    /** Passe à la suite quand on clique sur le bouton */
	    $('#form_produit input.button').click(function(){
	        perso.produit.bloquer();
	        perso.creation.debloquer();
	        $.scrollTo($('#form_creation'),{speed:800,easing:'easeOutBack', axis:'y'});
	    });
	    
	    /**
	     * Création
	     */
	    
	    /** Info bulle */
	    $('#dl_image').Tooltip({
	        track: true,
	        delay: 0,
	        showURL: false,
	        showBody: " - ",
	        extraClass: "pretty",
	        fixPNG: true,
	        opacity: 0.95,
	        left:0
	    });
	    
	    /** upload de l'image */
	    $("#form_creation form.upload_image").ajaxForm({
	        dataType:  'json',      /** pour que le json soit évalué automatiquement */
	        success: function(data) {
	            
	            if(data.error != undefined){
	                $.blockUI_alert(data.error);
	            }
	            else if(data.imageSrc != undefined){
	                
	                var img = new Image();
	                /** Quand l'image sera chargée, on devra */
	                $(img).load(function () {
	                    /** La mettre dans #gobelet */
	                    $('#gobelet').empty().append(this);
	                    /** la rendre redimmensionable */
	                    $(this).resizable({
	                        handles: 'all',
	                        ghost: true, /** Sinon ça fait des trucs bizarres... */
	                        maxHeight: 200,
	                        maxWidth: 160,
	                        containment: $('#gobelet')
	                    });
	                    /** la rendre déplaçable */
	                    $('#gobelet div.ui-wrapper').draggable({
	                        containment: $('#gobelet')
	                    });
	                });
	                /** On charge l'image */
	                $(img).attr('src', data.imageSrc);
	            }
	        }
	    });
	    
	    /** selection de la couleur */
	    $('table.palette td').click(function(){
	        perso.creation.couleur = $(this).attr('class');
	        perso.creation.updateImageApercu();
	    });
	    
	    /**
	     * Quand l'utilisateur clique sur le bouton, on remplit tous les champs
	     * cachés.
	     */
	    $("#form_creation form.save input[@type='submit']").click(function(){
	        var form = $("#form_creation form.save");
	        form.find("[@name='contenant']").val(perso.produit.getContenant());
	        form.find("[@name='contenance']").val(perso.produit.getContenance());
	        form.find("[@name='quantite']").val(perso.produit.getQuantite());
	        form.find("[@name='couleur']").val(perso.creation.getCouleur());
	        
	        perso.creation.image.calculer();
	        form.find("[@name='img_x']").val(perso.creation.image.x);
	        form.find("[@name='img_y']").val(perso.creation.image.y);
	        form.find("[@name='img_height']").val(perso.creation.image.height);
	        form.find("[@name='img_width']").val(perso.creation.image.width);
	    });
	    
	    /** sauvegarde de la création */
	    $("#form_creation form.save").ajaxForm({
            dataType:  'json',      /** pour que le json soit évalué automatiquement */
            beforeSubmit: function() {
                $.blockUI({message: '<div class="blockUI-chargement">Chargement...</div>'});
            },
            error: function(){$.unblockUI()},
	        success: function(json) {
                $.unblockUI();
                if (json.error != undefined) {
	               $.blockUI_alert(json.error);
                }
                else{
                    $('div.boite.recapitulatif div.corps').html(json.recapitulatif);
	                perso.creation.bloquer();
	                perso.contact.debloquer();
	                $.scrollTo($('#form_contact'),{speed:800,easing:'easeOutBack', axis:'y'});
                }
	        }
	    });
        
        /**
         * voir contact.js pour le reste
         */
    },
    
    reset: function(){
        
        /** On cache la contenance et la quantité dans la partie "Votre produit" */
        $('#form_produit fieldset.specifications').hide();
        /** cache les fieldset enfants du bloc contenance */
        $('#form_produit fieldset.specifications > fieldset').hide();
        /** cache la quantité */
        $('#form_produit fieldset.specifications fieldset.quantite').hide();
	       
	       /*---A MOI--- cache les couleurs*/
	       
	       $('#form_creation div.ma_palette > fieldset').hide();
	    /**
	     * On bloque les parties création et contact,
	     * On applique l'overlay uniquement sur les enfant pour ne pas qu'il sorte
	     * sur les cotés
	     */
	    
	    this.creation.bloquer();
        this.contact.bloquer();
	    
	    /** On affiche l'image initiale en haut à droite */
	    this.produit.contenant = undefined;
	    this.produit.updateImage();
	    
	    this.creation.couleur = 'sans';
	    
	    /** On reset tous les formulaires */
        $('input').clearFields();
        $('form').resetForm();
    },
    
    /**
     * Utilitaires pour gérer la partie "Votre produit"
     */
    produit: {
        
        /**
         * @var string
         * @access private
         */
        contenant: undefined,
        
        /**
         * @var string
         * @access private
         */
        contenance: undefined,
        
	    /**
	     * Met le formulaire à jour en fonction d'un contenant séléctionné.
	     * 
	     *  - affiche la séléction de la contenance et de la quantité
	     *  - met l'image en haut à droite à jour
	     *  - met l'aperçu à jour
	     * 
	     * @param string "gobelet" ou "pot"
	     * @return void
	     */
	    setContenant: function(contenant)
	    {
            this.contenant = contenant;
            
            /** on cache la quantité */
            $('#form_produit fieldset.specifications fieldset.quantite').hide();
            /** on affiche la contenance */
            $('#form_produit fieldset.specifications').show('low');
            /** on affiche la palette */
            $('#form_creation div.ma_palette').show('low');
            
            this.updateImage();
            perso.creation.updateImageApercu();
            
            /**
             * Pour chaque div enfant de .contenance, s'il à la classe type,
             * on l'affiche, sinon on l'efface.
             */
            $('#form_produit fieldset.specifications > fieldset').each(function(){
                $(this).hasClass(contenant) ?  $(this).show('low') : $(this).hide();
            });
            
            $('#form_creation .ma_palette > fieldset').each(function(){
                $(this).hasClass(contenant) ?  $(this).show('low') : $(this).hide();
            });
	    },
	    
	    /**
	     * Donne le type de produit séléctionné
	     *
	     * @return string
	     */
	    getContenant: function()
	    {
	       return this.contenant;
	    },
	    
	    setContenance: function(contenance)
	    {
	       this.contenance = contenance;
	       
	       $('#form_produit fieldset.specifications fieldset.quantite').show('low');
	    },
	    
	    /**
         * Donne la contenance séléctionnée
         *
         * @return string
         */
	    getContenance: function()
	    {
	       return this.contenance;
	    },
	    
	    setQuantitesOptions: function(options)
	    {
	       $('#form_produit fieldset.specifications fieldset.quantite select').empty().append(options);
	    },
	    
	    /**
         * Donne la quantité séléctionnée
         *
         * @return string
         */
	    getQuantite: function()
	    {
	       return $("#form_produit fieldset.specifications fieldset.quantite select").val();
	    },
	    
	    /**
	     * Affiche en haut à droite l'image qui représente le type de contenant
	     * séléctionné.
	     *
	     * @return void
	     */
	    updateImage: function(){
	        var tag = $("#form_produit .droite img");
	        switch(this.contenant){
	            case undefined:
	                tag.attr('src', './public/images/personnalisation/tous.jpg'); break;
	            default:
	               tag.attr('src', './public/images/personnalisation/' + this.contenant + 's.jpg'); break;
	        }
	    },
	    
	    /**
	     * Bloque cette partie.
	     *
	     * @return void
	     */
	    bloquer: function(){
            $('#form_produit').block(perso.blockStyle);
	    }
    },
    
    /**
     * Utilitaires concernants la partie création.
     */
    creation: {
        
        /**
         * @var string
         * @access private
         */
        couleur: 'sans',
        
        /**
         * Calcule la taille et la position de l'image utilisateur
         */
        image: {
            x: undefined,
            y: undefined,
            width: undefined,
            height: undefined,
            calculer: function()
            {
                var divApercu = $('#gobelet');
                /**
                 * Position de l'image du gobelet par rapport à div#gobelet
                 * elle est centrée et de taille 350x350
                 */
                var gobeletX = (divApercu.width() - 350)/2;
                var gobeletY = (divApercu.height() - 350)/2;
                /**
                 * Position de l'image de l'utilisateur par rapport à  div#gobelet
                 */
                var img = $('#gobelet img');
                var imageX = img.offset().left - divApercu.offset().left;
                var imageY = img.offset().top - divApercu.offset().top;
                
                this.x = imageX - gobeletX;
                this.y = imageY - gobeletY;
                this.width = img.width();
                this.height = img.height();
            }
        },
        
        /**
         * Met l'image de fond de l'aperçu à jour en fonction du contexte
         * (type et couleur séléctionnée)
         */
        updateImageApercu: function()
        {
            var contenant = perso.produit.contenant;
            if(this.couleur != 'sans'){
                var url = "./public/images/personnalisation/" + contenant + "_" + this.couleur + ".jpg";
            }
            else{
                var url = "./public/images/personnalisation/" + contenant + ".jpg";
            }
            $("#gobelet").css({backgroundImage:'url(' + url + ')'});
        },
        
        /**
         * Retourne la couleur séléctionnée
         */
        getCouleur: function()
        {
            return this.couleur;
        },
        
        /**
         * Bloque cette partie
         */
        bloquer: function()
        {
            $('#form_creation').block(perso.blockStyle);
        },
        
        /**
         * Débloque cette partie
         */
        debloquer: function()
        {
            $('#form_creation').unblock({fadeOut: 0});
        }
    },
    
    /**
     * Accès au éléments de la dernière partie du formulaire (récapitulatif et contact).
     */
    contact: {
        
        bloquer: function(){
            $('#form_contact').block(perso.blockStyle);
        },
        debloquer: function(){
            $('#form_contact').unblock({fadeOut: 0});
        }
    },
    
    /**
     * Style utilisé pour le blocage des formulaires.
     * le style par défaut est définit à la fin de page-loading.js
     * @see lib/jquery.blockUI.js
     */
    blockStyle: {
        message:null,
        overlayCSS: {  
            backgroundColor: 'white',  
            opacity: '0.7',
            cursor: 'default'
        }
    }
}