/**
 * @overview Alert.js
 * A collection of components for sending alerts about content
 * @author Patrick Paul-Hus
 */
/**
 * BQ.widget.Alert
 * A component for sending an alert to the moderators.
 * @author Patrick Paul-Hus
 */
/**
* Vincent Maillot vincent.maillot@cossette.com
* 09/09/15
* Ticket 5924 : création d'une fenetre d'alerte pour le signalement d'abus
**/
BQ.widget.Alert = Ext.extend(Ext.Window, {

    controller: '/json/BQAAlert',
    actions: {
        send: 'warn'
    },
    frame: false,
    center: true,
    buttonAlign: 'center',
    modal: true,
    autoHeight: true,
    width: 730,
    closeAction:'destroy',
    draggable: false,
    resizable: false,
    shadow: false,
    title: App.t('words_alert'),

    /**
    * L'option qu'on choisi d'afficher par défaut lors de l'ouverture du formulaire
    **/
    defaultActivatedOption: 0, // 0 = aucune, 1 = la premiere, 2 = etc...
    
    /**
    * @cfg {string} btnId
    * the dom id of the button that will show the form
    */
    btnId: null,

    /**
    * @cfg {integer} contentId
    * the id of the content for which you want to send an alert
    */
    contentId: null,

    initComponent: function() {

        // on initialise les composants de la fenetre
        this.items = this.build();

        this.on('show', function() {
                        // on s'assure de bien resetter le formulaire
                        this.getForm().form.reset();
                        this.show();
                        
                        // on set l'option par défaut qui sera activée
                        this.init();
                        
                        // parcours de toutes les options disponibles pour leur attacher l'evenement onclick
                        // Option 1 : non respect du droit d'auteur
                        Ext.get('radioOption1').on('click', function(e) {
                            this.activateRadio(1);
                        }, this);
                        new Ext.ToolTip({
                            target: 'abusOption1',
                            anchor: 'right',
                            trackMouse: true,
                            html: App.t('mouseover_report_popup_copyright')
                        });

                        // Option 2 : atteinte à la vie privée
                        Ext.get('radioOption2').on('click', function(e) {
                            this.activateRadio(2);
                        }, this);
                        new Ext.ToolTip({
                            target: 'abusOption2',
                            anchor: 'right',
                            trackMouse: true,
                            html: App.t('mouseover_report_popup_privacy')
                        });
                        
                        // Option 3 : contenu inapproprié
                        Ext.get('radioOption3').on('click', function(e) {
                            this.activateRadio(3);
                        }, this);
                        new Ext.ToolTip({
                            target: 'abusOption3',
                            anchor: 'right',
                            trackMouse: true,
                            html: App.t('mouseover_report_popup_inappropriate')
                        });
        }, this);
            
        
        BQ.widget.Alert.superclass.initComponent.call(this);
    },

  /**
   * Builds the actual Ext form
   */
    build: function() {
    
        // on recupere la langue d'interface en cours
        var jLang = BQ.content.TemplateMethods.getLang();
    
        var html_header_intro = '<p>'+App.t("alert_window_text_main") + '</p>'+
                                '<p style="font-weight:bold;font-style:italic;">' + App.t("alert_window_text_select") + '</p>';
    
        // template HTML de la premiere option
        var html_option1  = '<table style="width:95%">'+
                                '<tr>'+
                                    '<td class="td_options_radio">'+
                                        '<p><input type="radio" class="x-form-radio" name="signaler" id="radioOption1" /></p>'+
                                    '</td>'+
                                    '<td id="abusOption1" class="td_disabled">'+
                                        '<p><label for="radioOption1" style="font-weight:bold;cursor:pointer;">'+App.t("alert_window_text_option1_1")+'</label>'+
                                        App.t("alert_window_text_option1_2")+
                                        '<a target="_blank" class="href_disabled" id="optionHref1">' + App.t("nom_form_signal_droit_auteur") + '</a><sup>1</sup></p>' +
                                        '<input type="hidden" name="url_pdf1" id="url_pdf1" value="'+BQJSConfig["root"]+'/static/pdf/signal_droit_auteur_'+jLang+'.pdf?message='+this.contentId+'">'+
                                        '<p>' + App.t("alert_window_text_option1_4") + '</p>'+
                                    '</td>'+
                                '</tr>'+
                                '<tr>'+
                                    '<td></td><td><hr class="hr_options"></td>'+
                                '</tr>'+
                            '</table>';
                            
        // template HTML de la deuxieme option
        var html_option2  = '<table style="width:95%">'+
                                '<tr>'+
                                    '<td class="td_options_radio">'+
                                        '<p><input type="radio" class="x-form-radio" name="signaler" id="radioOption2" /></p>'+
                                    '</td>'+
                                    '<td id="abusOption2" class="td_disabled">'+
                                        '<p><label for="radioOption2" style="font-weight:bold;cursor:pointer;">'+App.t("alert_window_text_option2_1")+'</label>'+
                                        App.t("alert_window_text_option2_2")+
                                        '<a target="_blank" class="href_disabled" id="optionHref2">' + App.t("nom_form_signal_vie_privee") + '</a><sup>1</sup></p>' +
                                        '<input type="hidden" name="url_pdf2" id="url_pdf2" value="'+BQJSConfig["root"]+'/static/pdf/signal_vie_privee_'+jLang+'.pdf?message='+this.contentId+'">'+
                                        '<p>' + App.t("alert_window_text_option2_4") + '</p>'+
                                    '</td>'+
                                '</tr>'+
                                '<tr>'+
                                    '<td></td><td><hr class="hr_options"></td>'+
                                '</tr>'+
                            '</table>';

        // template HTML de la troisieme option
        var html_option3  = '<table style="width:95%">'+
                                '<tr>'+
                                    '<td class="td_options_radio">'+
                                        '<p><input type="radio" class="x-form-radio" name="signaler" id="radioOption3" /></p>'+
                                    '</td>'+
                                    '<td id="abusOption3" class="td_disabled">'+
                                        '<p><label for="radioOption3" style="font-weight:bold;cursor:pointer;">'+App.t("alert_window_text_option3_1")+'</label>'+
                                        App.t("alert_window_text_option3_2")+
                                        '<span style="font-style:italic;">'+ App.t("alert_window_text_option3_3")+'</span></p>'+
                                        "<div style='width:100%;text-align:center;'><textarea name='comment' id='comment3' COLS=75 ROWS=6 readonly='true'></textarea></div>"+
                                        '<div style="height:30px;"></div>';
                                    '</td>'+
                                '</tr>'+
                                '<tr>'+
                                    '<td></td><td><hr class="hr_options"></td>'+
                                '</tr>'+
                            '</table>';

        // template HTML du footer
        var html_footer_adobe = '<table style="width:95%"><tr><td class="td_options_radio"></td>'+
                                    '<td>'+
                                        '<sup>1</sup> <span class="href_disabled">' + App.t("alert_window_text_adobe") + '</span><br/>' +
                                        '<a href="http://get.adobe.com/reader/" target="_blank" class="href_enabled">' + App.t("alert_window_text_adobe_dwl") + '</a>'+
                                    '</td>'+
                                '</tr></table>';
    
        // construction du formulaire
        return {
            xtype: 'form',
            border: false,
            bodyStyle: 'padding: 8px',
            
            items: [
                {
                    xtype: 'panel',
                    autoHeight: true,
                    preventBodyReset: true,
                    html: html_header_intro
                },
                {
                    xtype: 'panel',
                    autoHeight: true,
                    preventBodyReset: true,
                    id: 'premiere_option',
                    html: html_option1
                },
                {
                    xtype: 'panel',
                    autoHeight: true,
                    preventBodyReset: true,
                    id: 'deuxieme_option',
                    html: html_option2
                },
                {
                    xtype: 'panel',
                    autoHeight: true,
                    preventBodyReset: true,
                    id: 'troisieme_option',
                    html: html_option3,
                    buttonAlign: 'right',
                    // on ajoute un bouton "send"
                    buttons: [
                        {
                            text: App.t("send"),
                            disabled: true,
                            id: 'btnSend3',
                            style: "position:absolute; bottom:58px; right:50px"
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    autoHeight: true,
                    preventBodyReset: true,
                    html: html_footer_adobe
                }
            ],
            buttons: [{
                text: App.t("close"),
                handler: function(){
                    this.destroy();
                },
                scope: this
            }],
            listeners: {
                beforeaction: function(form, action) {
                    Ext.MessageBox.wait(BQJSLabels.alert_wait_message, BQJSLabels.alert_wait_title);
                },
                actioncomplete: function(form, action) {
                    Ext.MessageBox.hide();
                    App.setAlert(App.STATUS_OK, action.result.msg);
                    this.destroy();
                },
                actionfailed: function(form, action) {
                    Ext.MessageBox.hide();
                    App.setAlert(App.STATUS_ERROR, action.result.msg);
                    this.destroy();
                },
                scope: this
            }
        };
    },


    /**
    * Returns the Ext form
    */
    getForm: function() {
        return this.items.first();
    },


    /**
    * Event handler that is executed when the send button is pressed.
    */
    onSend: function(btn, ev) {
        form = this.getForm().form;

        if (!form.isValid() || document.getElementById('comment3').value == '') {
            return App.setAlert(App.STATUS_ERROR, BQJSLabels.phrase_form_is_invalid);
        }
        
        form.submit({
            url: this.controller + '/' + this.actions.send,
            method: 'POST',
            params: {
                contentId: this.contentId
            },
            scope: this
        });
    },
    

    /**
    * Fonction qui permet d'activer une option par défaut dans le formulaire d'abus
    **/
    activateRadio: function(radioId) 
    {
        if(Ext.get('radioOption'+radioId))
        {
            // on parcourt toutes les options disponibles
            var cpt_radio = 0;
            while(Ext.get('radioOption'+(cpt_radio+1)))
            {
                // on incrémente immédiatement le compteur d'options, pour s'assurer de ne jamais boucler à l'infini
                cpt_radio++;

                // le choix activé
                if(cpt_radio == radioId)
                {
                    document.getElementById('radioOption'+cpt_radio).checked = true;
                
                    // la zone activée
                    document.getElementById('abusOption'+cpt_radio).className = 'td_enabled';

                    // s'il y a un lien, on le réactive
                    if(document.getElementById('optionHref'+cpt_radio))
                    {
                        document.getElementById('optionHref'+cpt_radio).className = 'href_enabled';

                        var url_pdf = document.getElementById('url_pdf'+cpt_radio).value;
                        document.getElementById('optionHref'+cpt_radio).setAttribute("href", url_pdf);
                    }
                    
                    // s'il y a un textarea, on le reactive
                    if(Ext.get('comment'+cpt_radio))
                    {
                        document.getElementById('comment'+cpt_radio).readOnly = false;
                        Ext.get('btnSend'+cpt_radio).dom.className = 'x-btn-wrap x-btn';
                        Ext.get('btnSend'+cpt_radio).dom.style.color = '#3A332F';
                        Ext.get('btnSend'+cpt_radio).dom.disabled = false;
                        Ext.get('btnSend'+cpt_radio).on('click', function(e) { this.onSend() },this);
                    }
                }
                // on désactive les autres choix
                else
                {
                    document.getElementById('radioOption'+cpt_radio).checked = false;
                
                    // zone désactivée
                    document.getElementById('abusOption'+cpt_radio).className = 'td_disabled';
                    // s'il y a un lien, on le désactive
                    if(Ext.get('optionHref'+cpt_radio))
                    {
                        document.getElementById('optionHref'+cpt_radio).className = 'href_disabled';
                        document.getElementById('optionHref'+cpt_radio).removeAttribute("href");
                    }
                    // s'il y a un textarea, on le désactive et on le vide
                    if(Ext.get('comment'+cpt_radio))
                    {
                        document.getElementById('comment'+cpt_radio).readOnly = 'readOnly';
                        //document.getElementById('comment'+cpt_radio).innerHTML = '';
                        Ext.get('btnSend'+cpt_radio).dom.className = 'x-btn-wrap x-btn  x-item-disabled';
                        Ext.get('btnSend'+cpt_radio).dom.disabled = true;
                        Ext.get('btnSend'+cpt_radio).on('click', function(e) {},this);
                    }
                }
            }

        }
        // si on n'a pas réussi à activer l'option qu'on a setté, on ne fait rien => on n'en sélectionne aucune

    },

    /**
    * Affichage du formulaire avec l'activation de l'option par défaut
    **/
    init: function()
    {
        this.activateRadio(this.defaultActivatedOption);
    }
    
});