//////////////////////////////////////////////////////////////////////
// Objet d'edition d'un label formé a partir d'une clef multilingue //
//////////////////////////////////////////////////////////////////////
function ResourceEditor(){

    //Attributs
    this.disabled = false,
    this.labelEditorHtml = null, //Fenetre d'edition html   
    this.labelEditorText = null, //Fenetre d'edition text
    this.menu = null, //Menu contextuel    
    this.currentKey = null, //Nom de la clef
    this.currentLabel = null, //Nom du label : 'res_currentKey_label' 
    this.currentTypeEditor = null, //Type de l'editeur : html ou text 
    this.applicationPath = null, //Chemin de l'application courante
    //Libellés
    this.resourceEditTheKey = null,
    this.resourceEmptyField = null,
    this.resourceCareful = null,
    this.resourceErrorEditKey = null,
    this.resourceValidate = null,
    this.resourceCancel = null,
    this.applicationPath = null,
    //Survol d'un label
    this.overLabel = function(value, type) {

        if (this.disabled) return;

        //value contient la clef multilingue pointée  
        resourceEditor.currentKey = value;
        resourceEditor.currentLabel = 'res_' + value + '_label';
        resourceEditor.currentTypeEditor = type;
        resourceEditor.menu.hide();
        var el = Ext.get('res_' + value + '_label');
        var div_arrow = Ext.get('div_arrow');
        var div_arrow_img = Ext.get('div_arrow_img');
        var div_arrow_left = Ext.get('div_arrow_left');
        var div_arrow_top = Ext.get('div_arrow_top');
        var div_arrow_bottom = Ext.get('div_arrow_bottom');
        // on redimensionne et place
        div_arrow.setBounds(0, 0, 0, 0);
        div_arrow_left.setBounds(0, 0, 0, 0);
        div_arrow_top.setBounds(0, 0, 0, 0);
        div_arrow_bottom.setBounds(0, 0, 0, 0);

        //Calcul des position différent sur IE et FF
        var positionOfEl = el.getAnchorXY();
        var sizeOfEl = el.getSize();

        div_arrow.setBounds(//La fleche
                    sizeOfEl.width + positionOfEl[0] - 1, //X
                    positionOfEl[1] - 1, //Y
                    sizeOfEl.height + 4, //Width
                    sizeOfEl.height + 2); //Height    

        div_arrow_img.setHeight(sizeOfEl.height); //Height                
        div_arrow_img.setWidth(sizeOfEl.height); //Width

        div_arrow_left.setBounds(//Bordure gauche
                    positionOfEl[0] - 1,
                    positionOfEl[1] - 1,
                    1,
                    sizeOfEl.height + 2);

        div_arrow_top.setBounds(//Bordure haut
                    positionOfEl[0],
                    positionOfEl[1] - 1,
                    sizeOfEl.width - 1,
                    1);

        div_arrow_bottom.setBounds(//Bordure bas
                    positionOfEl[0],
                    positionOfEl[1] + sizeOfEl.height,
                    sizeOfEl.width - 1,
                    1);

        window.clearTimeout(this.hideTimeoutId);
        this.show();

    },

    //Sortie d'un label
    this.outLabel = function() {
        window.clearTimeout(this.hideTimeoutId);
        this.hideTimeoutId = window.setTimeout('resourceEditor.hide();', 1000);
    },
    this.hide = function() {
        Ext.get('div_arrow').setVisible(false);
        Ext.get('div_arrow_img').setVisible(false);
        Ext.get('div_arrow_left').setVisible(false);
        Ext.get('div_arrow_top').setVisible(false);
        Ext.get('div_arrow_bottom').setVisible(false);
    },
    this.show = function() {
        Ext.get('div_arrow').setVisible(true);
        Ext.get('div_arrow_img').setVisible(true);
        Ext.get('div_arrow_left').setVisible(true);
        Ext.get('div_arrow_top').setVisible(true);
        Ext.get('div_arrow_bottom').setVisible(true);
    },
    this.hideTimeoutId = null,

    //Initialisation des objets
    this.init = function() {
        // On cree les div qui seront toujours présentes avec la fleche
        // Une div a droite format contenant la flecghe
        // 3 div formant le contour du label survolé, afin de le laisser clickable s'il contient un lien          
        var div_arrow = document.createElement('div'); //Div affichant l'image
        div_arrow.setAttribute('id', 'div_arrow');
        div_arrow.setAttribute('style', 'z-index:14999');

        var div_arrow_img = document.createElement('div'); //Div affichant l'image
        div_arrow_img.setAttribute('id', 'div_arrow_img');
        div_arrow_img.setAttribute('style', 'z-index:14999');

        var div_arrow_left = document.createElement('div'); // Div encadrant le label
        div_arrow_left.setAttribute('id', 'div_arrow_left');
        div_arrow_left.setAttribute('style', 'z-index:14999');

        var div_arrow_bottom = document.createElement('div'); // Div encadrant le label
        div_arrow_bottom.setAttribute('id', 'div_arrow_bottom');
        div_arrow_bottom.setAttribute('style', 'z-index:14999');

        var div_arrow_top = document.createElement('div'); // Div encadrant le label        
        div_arrow_top.setAttribute('id', 'div_arrow_top');
        div_arrow_top.setAttribute('style', 'z-index:14999');

        Ext.getBody().appendChild(div_arrow);
        Ext.getBody().appendChild(div_arrow_left);
        Ext.getBody().appendChild(div_arrow_bottom);
        Ext.getBody().appendChild(div_arrow_top);
        Ext.get('div_arrow').appendChild(div_arrow_img);

        Ext.get('div_arrow').addClass('x-arrow');
        Ext.get('div_arrow_img').addClass('x-arrow-img');
        Ext.get('div_arrow_left').addClass('x-arrow-border-left');
        Ext.get('div_arrow_bottom').addClass('x-arrow-border-top');
        Ext.get('div_arrow_top').addClass('x-arrow-border-top');

        Ext.get('div_arrow').setVisible(false);
        //Menu contextuel lors d'un click sur un label
        this.menu = new Ext.menu.Menu({
            id: 'menu',
            items: [{
                text: this.resourceEditTheKey,
                iconCls: 'x-key-resource',
                handler: function() {
                    //On souhaite modifier cette clef                    
                    if (this.currentTypeEditor == 'html') {
                        this.labelEditorHtml.setTitle(this.resourceEditTheKey + ' ' + this.currentKey);
                        this.labelEditorHtml.show();
                        this.labelEditorHtml.items.items[0].items.items[0].setValue(document.getElementById(this.currentLabel).innerHTML);
                    } else {
                        this.labelEditorText.setTitle(this.resourceEditTheKey + ' ' + this.currentKey);
                        this.labelEditorText.show();
                        this.labelEditorText.items.items[0].items.items[0].setValue(document.getElementById(this.currentLabel).innerHTML);
                    }
                }, scope: this}]
            });

            //Affichage du menu au click sur la arrow
            Ext.get('div_arrow_img').addListener('click', function(e) {
                resourceEditor.menu.showAt(e.xy);
            });

            //Au survol de la arrow, on l'affiche 
            Ext.get('div_arrow').addListener('mouseover', function(e) {
                window.clearTimeout(resourceEditor.hideTimeoutId);
                resourceEditor.show();
            });

            //En sortant, on la cache
            Ext.get('div_arrow').addListener('mouseout', function(e) {
                window.clearTimeout(resourceEditor.hideTimeoutId);
                resourceEditor.hideTimeoutId = window.setTimeout('resourceEditor.hide();', 1000);
            });

            this.htmlEditor = new Ext.form.HtmlEditor({
                id: 'resourceHtmlEditor',
                hideLabel: true,
                autoHeight: true,
                enableSourceEdit: true,
                id: 'labelEditorHtml_field'
            });

            //Fenetre d'edition html
            this.labelEditorHtml = new Ext.Window({
                id: 'labelEditorHtml',
                resizable: false,
                border: false,
                closeAction: 'hide',
                width: 560,
                modal: true,
                items: [
                new Ext.FormPanel({
                    autoRender: true,
                    border: false,
                    layout: 'fit',
                    items: [this.htmlEditor],
                        buttons: [{
                            text: this.resourceValidate,
                            handler: function() {
                                //Requete de maj de la clef    
                                if (this.labelEditorHtml.items.items[0].items.items[0].getValue() != "") {
                                    var params = { 'name': resourceEditor.currentKey, 'value': this.labelEditorHtml.items.items[0].items.items[0].getValue() };
                                    resourceEditor.update(params, function(options, success, response) {
                                        if (success) {
                                            //Modification du champ avec le dom
                                            document.getElementById(resourceEditor.currentLabel).innerHTML = this.labelEditorHtml.items.items[0].items.items[0].getValue();
                                        }
                                        this.labelEditorHtml.hide();
                                    }
                                    , this);
                                } else {
                                    Ext.Msg.alert(this.resourceCareful, this.resourceEmptyField);
                                }
                            }, scope: this
                        }, {
                            text: this.resourceCancel,
                            handler: function() {
                                this.labelEditorHtml.hide();
                            }, scope: this}]
                        })]
                    });

                    //Fenetre d'edition text
                    this.labelEditorText = new Ext.Window({
                        id: 'labelEditorText',
                        resizable: false,
                        border: false,
                        closeAction: 'hide',
                        width: 400,
                        modal: true,
                        items: [
                new Ext.Panel({
                    hideBorders: true,
                    autoRender: true,
                    border: false,
                    layout: 'fit',
                    items: [{
                        xtype: 'textarea',
                        autoHeight: true,
                        hideLabel: true,
                        id: 'labelEditor_field',
                        anchor: '100%'}],
                        buttons: [{
                            text: this.resourceValidate,
                            handler: function() {
                                //Requete de maj de la clef
                                if (this.labelEditorText.items.items[0].items.items[0].getValue() != "") {
                                    var params = { 'name': resourceEditor.currentKey, 'value': this.labelEditorText.items.items[0].items.items[0].getValue() };
                                    resourceEditor.update(params, function(options, success, response) {
                                        if (success) {
                                            //Modification du champ avec le dom
                                            document.getElementById(resourceEditor.currentLabel).innerHTML = this.labelEditorText.items.items[0].items.items[0].getValue();
                                        } else {
                                            Ext.Msg.alert(this.resourceCareful, this.resourceErrorEditKey + ' ' + resourceEditor.currentKey);
                                        }
                                        this.labelEditorText.hide();
                                    }, this);
                                } else {
                                    Ext.Msg.alert(this.resourceCareful, this.resourceEmptyField);
                                }
                            }, scope: this
                        }, {
                            text: this.resourceCancel,
                            handler: function() {
                                this.labelEditorText.hide();
                            }, scope: this}]
                        })]
                    });
                },

    this.update = function(params, callback, scope) {
        Ext.Ajax.request({
            url: (this.applicationPath || '') +'ResourceEditorService.svc/setkey',
            method: 'POST',
            jsonData: Ext.encode(params),
            scope: scope,
            callback: callback
        });
    }

    this.setDisabled = function(disabled) {
        this.disabled = disabled;
    }
}

//Initialisation de l'objet dans la page
var resourceEditor = new ResourceEditor();
Ext.onReady(resourceEditor.init,resourceEditor);