// JScript File

CEMSurvey = new Class({
    Implements: [Options],
    texts: {
        'close': 'Fermer la fenêtre',
        'title_0': 'Est-ce que vous avez assisté au concert',
        'title_1': 'Avez-vous aimé ce concert',
        'title_2': "Est-ce que quelqu'un vous a contacté pour assister au concert",
        'title_3': 'Êtes-vous satisfait du service ?',
        'title_4': 'Notre suggestion',
        'title_small': "* 1 étant pas du tout et 5 étant excellent",
        //'p_concert': '${concert} - ???, <br />${lieu},<br />${date} dernier ?',
        'concert': '',
        'lieu': '',
        'date': '',
        'dernier': 'dernier',
        'vos_commentaire': 'Vos commentaires :',
        'chkboxReq': 'Vous remplir le formulaire'
    },
    options: {
        topDistance: 4,
        start_at: 1,
        steps: [{
            type: 1,
            buttons: [{
                'id': 'yes',
                'label': 'Oui',
                'action': function(btn){
                    if(!btn.disabled){
                        btn.disabled = true;
                        this.storage['step_0'] = true;
                        this.next();
                    }
                }
            }, {
                'id': 'no',
                'label': 'Non',
                'action': function(btn){
                    if(!btn.disabled){
                        btn.disabled = true;
                        this.storage['step_0'] = false;
                        this.jump(2);
                    }
                }
            }]
        }, {
            type: 2,
            buttons: [{
                'id': 'submit',
                'label': 'Soumettre',
                'action': function(btn){
                    if(!btn.disabled){
                
                        var form = this.form;
                        var qs = document.id(form).toQueryString();
                        var data = qs.parseQueryString();
                        
                        var msg = [];
                        if(!data['cem_0_liked']){
                            msg.push( this.texts.chkboxReq );
                        }
                        if(!data['cem_0_comments']){
                            data['cem_0_comments'] = '';
                        }
                        if(msg.length){
                            alert( msg.join("\r\n") );
                        } else {
                            this.storage["step_1"] = data;
                            btn.disabled = true;
                            this.next();
                        }
                    }
                }
            }]
        }, {
            type: 1,
            buttons: [{
                'id': 'yes',
                'label': 'Oui',
                'action': function(btn){
                    if(!btn.disabled){
                        btn.disabled = true;
                        this.storage['step_2'] = true;
                        this.next();
                    }
                }
            }, {
                'id': 'no',
                'label': 'Non',
                'action': function(btn){
                    if(!btn.disabled){
                        this.storage['step_2'] = false;
                        this.hide();
                        this.send();
                    }
                }
            }]
        }, {
            type: 2,
            buttons: [{
                'id': 'submit',
                'label': 'Soumettre',
                'action': function(btn){
                    if(!btn.disabled){
                        
                        var form = this.form;
                        var qs = document.id(form).toQueryString();
                        var data = qs.parseQueryString();
                        
                        var msg = [];
                        if(!data['cem_0_liked']){
                            msg.push( this.texts.chkboxReq );
                        }
                        if(!data['cem_0_comments']){
                            data['cem_0_comments'] = '';
                        }
                        if(msg.length){
                            alert( msg.join("\r\n") );
                        } else {
                            this.storage["step_3"] = data;
                            btn.disabled = true;
                        }
                    
                        this.hide();
                        this.send();
                    }
                }
            }]
        }, {
            type: 3,
            buttons: []
        }]
    },
    storage: {
    },
    currentStep: 0,
    initialize: function(options, texts){
        this.setOptions(options);
        this.setTexts(texts);
        this.currentStep = (this.options.start_at-1) || 0;
        this.createElements();
    },
    setTexts: function(texts){
        for(var k in texts)
            this.texts[k] = texts[k];
    },
    show: function(){
        var el = this.cem_survey;
        el.setStyles({'opacity':0, 'display':''});
        el.fade('in');
    },
    hide: function(){
        var el = this.cem_survey;
        
        var fxOut = new Fx.Tween(el, {
            property: 'opacity'
        });
        fxOut.addEvent('complete', function(){
            el.setStyle('display', 'none');
        });
        fxOut.start('1', '0');
    },
    send: function(){
        
        var req = new Request({
            data: $extend(this.storage, {
                'concert_id': this.options.concert_id,
                'start_at': this.options.start_at
            }),
            method: 'post',
            url: baseURL + 'ajax/send_survey.aspx',
            onSuccess: function(t,d){
                
            }
        });
        
        req.send();
    },
    createStep: function(){
        var self = this;
        var h1 = new Element('h1', {
            'html': this.texts['title_' + this.currentStep]
        });
        h1.inject( this.innerContainer );
        
        var survey_type = '' + this.options.steps[this.currentStep].type;
        switch(survey_type){
            case '1':
                var html_arr = [];
                html_arr.push(this.texts.concert);
                
                if(this.texts.lieu){
                    html_arr.push(', <br />');
                    html_arr.push(this.texts.lieu);
                }
                
                if(this.texts.date && this.currentStep != 2){
                    html_arr.push(',<br />');
                    html_arr.push(this.texts.date);
                    html_arr.push(' ');
                    html_arr.push( (this.currentStep === 0) ? this.texts.dernier : '' );
                }
                
                html_arr.push(' ?');
                
                var p_concert = new Element('p', {
                    'class': 'concert',
                    'html': html_arr.join('')
                });
                p_concert.inject( this.innerContainer );
                
                
                var p_btns = new Element('p', {
                    'class': 'btns'
                });
                p_btns.inject( this.innerContainer );
                
                var buttons = this.options.steps[this.currentStep].buttons;
                buttons.each(function(btn){
                    var a = new Element('a', {
                        'href': '#',
                        'events': {
                            'click': function(){
                                btn.action.bind(self)(btn);
                                return false;
                            }
                        }
                    });
                    var img = new Element('img', {
                        'src': '/data/jmc/Files/image/bt_survey_'+btn.id+'_'+self.options.language+'.jpg',
                        'alt': btn.label
                    }).inject(a);
                    a.inject(p_btns);
                });
                break;
            case '2':
                new Element('br').inject(h1);
                new Element('small', {
                    'text': this.texts.title_small
                }).inject(h1);
                
                var form = new Element('form', {
                    'method': 'post',
                    'action': ''
                });
                form.inject( this.innerContainer );
                this.form = form;
                
                var ul = new Element('ul');
                for(var i = 1, l = 5; i <= l; i++){
                    var li = new Element('li');
                    var attr_id = 'cem_0_liked_' + i;
                    new Element('label', {
                        'for': attr_id,
                        'text': i
                    }).inject(li);
                    new Element('input', {
                        'type': 'radio',
                        'name': 'cem_0_liked',
                        'id': attr_id,
                        'value': i
                    }).inject(li);
                    li.inject(ul);
                }
                ul.inject( form );
                
                
                var p_comments = new Element('p', {
                    'class': 'comments'
                }).inject( form );
                new Element('label', {
                    'text': this.texts.vos_commentaire//'Vos commentaires :'
                }).inject(p_comments);
                new Element('textarea', {
                    'name': 'cem_0_comments',
                    'cols': 20,
                    'rows': 3
                }).inject(p_comments);
                
                
                var p_btns = new Element('p', {
                    'class': 'btns'
                });
                p_btns.inject( form );
                
                var buttons = this.options.steps[this.currentStep].buttons;
                buttons.each(function(btn){
                    var a = new Element('a', {
                        'href': '#',
                        'events': {
                            'click': function(){
                                btn.action.bind(self)(btn);
                                return false;
                            }
                        }
                    });
                    var img = new Element('img', {
                        'src': '/data/jmc/Files/image/bt_survey_'+btn.id+'_'+self.options.language+'.jpg',
                        'alt': btn.label
                    });
                    img.inject(a);
                    a.inject(p_btns);
                });
                
                break;
            case '3':
                var concert = this.texts.concert;
                var div = new Element('div', {
                    'class': 'sugg_inner'
                });
                div.inject( this.innerContainer );
                
                var a = new Element('a', {
                    'text': 'En savoir plus >',
                    'href': concert.properties.url[0]
                });
                a.clone().set('html', concert.title).inject( 
                    new Element('strong').inject( 
                        new Element('p').inject( div )
                    )
                );
                
                new Element('p', {
                    'html': concert.properties.data[0]
                }).inject( div );
                
                a.inject(
                    new Element('p').inject( div )
                );
                break;
        }
    },
    createElements: function(){
        this.cem_survey = new Element('div', {
            'class': 'cem_survey',
            'styles': {
                'display': 'none'
            }
        });
        
        var self = this;
        var close = new Element('a', {
            'class': 'close',
            'href': '#',
            'text': this.texts.close,
            'events': {
                'click': function(){
                    //var self = $(this);
                    //self.getParent().setStyle('display', 'none');
                    self.hide();
                    return false;
                }
            }
        });
        close.inject( this.cem_survey );
        
        
        this.innerContainer = new Element('div', {
            'class': 'cem_container'
        });
        
        this.createStep(this.currentStep);
        
        this.innerContainer.inject( this.cem_survey );
        
        this.cem_survey.inject(document.body);
        
        var wh = (window.getHeight() == 0) ? window.getScrollHeight() : window.getHeight();
        var st = 0;//document.body.scrollTop || document.documentElement.scrollTop;
        var top = st + (wh / this.options.topDistance);
        
        var ww = (window.getWidth() == 0) ? window.getScrollWidth() : window.getWidth();
        this.cem_survey.setStyles({top: top, display: ''});
        var size = this.cem_survey.getComputedSize()
        var left = (ww / 2) - (size.totalWidth / 2);
        this.cem_survey.setStyles({'left': left, 'display': 'none'});
    },
    next: function(){
        this.jump(this.currentStep+1);
    },
    jump: function(step){
        this.previousStep = this.currentStep;
        this.currentStep = step;
        var self = this;
        
        var oldContainer = this.innerContainer;
        
        this.innerContainer = new Element('div', {
            'class': 'cem_container'
        });
        var newContainer = this.innerContainer
        
        this.createStep(step);
        
        var fxOut = new Fx.Tween(oldContainer, {
            property: 'opacity'
        });
        fxOut.addEvent('complete', function(){
            oldContainer.dispose();
            newContainer.setStyle('opacity', 0);
            newContainer.inject( self.cem_survey )
            newContainer.fade('in');
        });
        fxOut.start('1', '0');
        
        
    }
});