var Aubrilam_Form = Class.create({

    /**
     * Form elements
     */
    steps : [ 'etape1_sel_product', 'etape1_height', 'etape1_diameter' ],
    
    /**
     * Temp store for select fill.
     */
    store : {},
    
    /**
     * Form incrementor.
     */
    incr : 0,
    
    /**
     * Init event hooks on select and "add" button
     */
    initStep1 : function() {
        var _this = this;
        // Hooking selects onChange
        $(this.steps).each(function(id, name) {
            $('select[name='+name+'_'+_this.incr+']').change(function() {
                _this.changeStep(id, this);
            });
        });
        
        if(this.incr == 0)
        {
            $('a#addButton').click(function(){
                _this.addForm();
                return false;
            });
        }
    },
    
    /**
     * Actions performed when changing a select.
     */
    changeStep : function(step, element) {
        var tmpName = $(element).attr('name');
        
        var reg = new RegExp('_([0-9]*)$', 'g');
        var res = reg.exec(tmpName);
        var formId = res[1];
        
        var current = this.getSelect(step, formId);
        
        //Actions on select elements
        switch(step)
        {
            case 0:
                var next = this.getSelect(step+1, formId);
                var last = this.getSelect(step+2, formId)
                
                this.unlock(step+1, formId);
                this.lock(step+2, formId);
                
                //emptying
                next.html('<option>'+Aubrilam_Lang.etape1_height_default+'</option>');
                last.html('<option>'+Aubrilam_Lang.etape1_diameter_default+'</option>');
                
                //filling : 
                var store = Aubrilam_Products[current.val()];
                
                for(i in store)
                {
                    next.append('<option value="'+i+'">'+i+'</option>')
                }
                
                break;
            case 1:
                var prev= this.getSelect(step-1, formId);
                var next = this.getSelect(step+1, formId);
                var store = Aubrilam_Products[prev.val()][current.val()];
                this.unlock(step+1, formId);
                
                next.html('<option>'+Aubrilam_Lang.etape1_diameter_default+'</option>');
                
                //filling
                $(store).each(function(id, name){
                    next.append('<option value="'+name+'">'+name+'</option>')
                })
                
                break;
            case 3:
                break;
        }
    },
    
    /**
     * Disables a select from type and form id
     */
    lock:function(step, formId)
    {
        var element = this.getSelect(step, formId);
        element.html('');
        element.attr('disabled', 'disabled');
    },
    
    /**
     * Enables a select from type and form id
     */
    unlock:function(step, formId)
    {
        var element = this.getSelect(step, formId);
        element.attr('disabled', '');
    },
    
    /**
     * Returns a $ select element.
     */
    getSelect:function(step, formId)
    {
        return $('select[name='+this.steps[step]+'_'+formId+']');
    },
    
    /**
     * Adds a new form inside a div.
     */
    addForm:function(){
        var _this = this;
        if(this.incr == 0)
        {
            this.incr++;
        }
        
        if(this.incr < 4)
        {
            if(this.incr == 3)
            {
                $('a#addButton').slideUp('fast');
            }
            
            var regs = {
                INCR : this.incr
            }
            
            var template = '<hr><div id="addonContainer_INCR" class="formAddonContainer">'+
            '<p class="form">Produit</p>'+
            '<select name="etape1_sel_product_INCR" class="select">'+
            '    <option value="">'+Aubrilam_Lang.etape1_sel_product_+'</option>'+
            '    <option value="DÔME">DÔME</option>'+
            '    <option value="DÔME XL">DÔME XL</option>'+
            '    <option value="MOSHI">MOSHI</option>'+
            '    <option value="MOSHI XL">MOSHI XL</option>'+
            '    <option value="SUMU">SUMU</option>'+
            '    <option value="SUMU XL">SUMU XL</option>'+
            '</select>'+
            '<p class="form">'+Aubrilam_Lang.etape1_quantity_+'</p>'+
            '<input name="etape1_quantity_INCR" type="text" class="input"/>'+
            '<p class="form">'+Aubrilam_Lang.etape1_height_+'</p>'+
            '<select name="etape1_height_INCR" type="text" class="input" disabled="disabled">'+
            '    <option value="">'+Aubrilam_Lang.etape1_height_default+'</option>'+
            '</select>'+
            '<p class="form">'+Aubrilam_Lang.etape1_diameter_+'</p>'+
            '<select name="etape1_diameter_INCR" type="text" class="input" disabled="disabled">'+
            '    <option value="">'+Aubrilam_Lang.etape1_diameter_default+'</option>'+
            '</select>'+
            '<p class="form">'+Aubrilam_Lang.etape1_shade_+'</p>'+
            '<select name="etape1_sel_shade_INCR" class="select">'+
                '<option value="">'+Aubrilam_Lang.etape1_sel_shade_+'</option>'+
                '<option value="acajou">'+Aubrilam_Lang.shade_1+'</option>'+
                '<option value="brume">'+Aubrilam_Lang.shade_2+'</option>'+
                '<option value="châtaigner">'+Aubrilam_Lang.shade_3+'</option>'+
                '<option value="chêne clair">'+Aubrilam_Lang.shade_4+'</option>'+
                '<option value="chêne foncé">'+Aubrilam_Lang.shade_5+'</option>'+
                '<option value="ébène">'+Aubrilam_Lang.shade_6+'</option>'+
                '<option value="épice">'+Aubrilam_Lang.shade_7+'</option>'+
                '<option value="graphite">'+Aubrilam_Lang.shade_8+'</option>'+
                '<option value="mémoire">'+Aubrilam_Lang.shade_9+'</option>'+
                '<option value="origine">'+Aubrilam_Lang.shade_10+'</option>'+
                '<option value="tonnelier">'+Aubrilam_Lang.shade_11+'</option>'+
            '</select>'+
            '<p class="form">'+Aubrilam_Lang.etape1_lantern_+'</p>'+
            '<input name="etape1_lantern_INCR" type="text" class="input"/>'+
            '<div>';
            
            for(i in regs){
                var reg = new RegExp('('+i+')', 'g');
                var template = template.replace(reg, regs[i]);
            };
            
            $('a#addButton').parent().before(template);
    
            //Adding event hooks
            $('div#addonContainer_'+this.incr).slideDown('fast');
            _this.initStep1();
            this.incr++;
        }
        
    }
});