Ext.namespace("Optima");

Optima.FormComment = Ext.extend(Ext.FormPanel,{
   loadMask : null,
   cookie : null,
   initComponent : function(){
         this.cookie = new Ext.state.CookieProvider({
                        path: "",
                        expires: new Date(new Date().getTime()+(1000*60*60*24*1)),
                        domain: ""
                    });
         Ext.form.VTypes["emailText"] = "Format incorrect";
        Ext.apply(this,{
         labelWidth : 200,
            title : "Poster un commentaire",
            collapsed : true,
            collapsible : true,
            titleCollapse : true,
            frame : true,
            bodyStyle : "padding:10px",
            items : [
               {
                 xtype:'label',
                 html : 'Votre commentaire ne sera affiché qu\'après validation de l\'administrateur (environ 24H)',
                 cls:"commentForm"
               },
               {
                  xtype:"textfield",
                  name : "titre",
                  fieldLabel : "Titre *",
                  blankText : 'Titre obligatoire',
                  allowBlank : false
               },
               {
                  xtype:"textfield",
                  name : "nom",
                  fieldLabel : "Surnom *",
                  blankText : 'Surnom obligatoire',
                  allowBlank : false
               },
               {
                  xtype:"textfield",
                  name : "mail",
                  fieldLabel : "Mail (non diffusé)*",
                  blankText : 'Mail obligatoire',
                  vtype : "email",
                  allowBlank : false
               },
               {
                  xtype:"textarea",
                  fieldLabel : "Message *",
                  blankText : 'Message obligatoire',
                  allowBlank : false,
                  width : 600,
                  height : 200,
                  name : "message"
               }
            ],
            buttonAlign : 'center',
            buttons : [
               {
                  text:"Valider",
                  handler : function() {
                     if (this.form.isValid()){
                        if (!this.loadMask){
                           this.loadMask = new Ext.LoadMask(this.body,{msg:"Enregistrement du commentaire..."});
                        }
                        this.loadMask.show();
                        
                        this.form.submit({
                           scope : this,
                           url : "./service/addComment.php",
                           failure : function() {
                              this.loadMask.hide();
                              Ext.Msg.alert("Avertissement","Impossible d'enregistrer votre commentaire");
                           },
                           success : function(form,action) {
                              var res = Ext.util.JSON.decode(action.response.responseText);
                              this.loadMask.hide();
                              if (res.success){
                                 Ext.Msg.alert("Information","Votre commentaire a été enregistré.<br/>Il sera publié après validation par l'administrateur.(sous 24 à 48h)");
                                 this.cookie.set("vote",true);
                                 this.buildState();
                              }else{
                                 Ext.Msg.alert("Information","Impossible d'enregistrer votre commentaire.");
                              }
                              
                           }
                        })
                        
                     }
                  },
                  scope : this
               },
               {
                  text:"Annuler",
                  handler : function() {
                     this.getForm().reset();
                     this.collapse();
                  },
                  scope : this
               }
            ]
        });
        Optima.FormComment.superclass.initComponent.call(this);
    },
    onRender : function(ct, position){
        Optima.FormComment.superclass.onRender.call(this, ct, position);
        this.buildState();
    },
    buildState : function() {
      if (this.cookie.get("vote") === true){
         this.collapse(true);
         this.setDisabled(true);
      }
    }
});

Optima.ListPanel = Ext.extend(Ext.DataView,{
   autoHeight: true,
   overClass: 'over',
   itemSelector : "div.comment",
   initComponent : function(){
      
      var st = new Ext.data.JsonStore({
         url: 'service/viewCommentaire.php',
         baseParams : {
            begin : 0,
            length : 20
         }, 
         root: 'rows',
         totalProperty:"totalCount",
         fields: ['surnom', 'msg', {name:'dateCommentaire', type:'date',dateFormat:'d/m/Y'}],
         listeners : {
            load : function() {
               Ext.getBody().repaint();
            }
         }
      });
      Ext.apply(this,{
         store:st,
         emptyText : "Pas de commentaires"
      });
      
      Optima.ListPanel.superclass.initComponent.call(this);
   },
   
   tpl : new Ext.XTemplate(
           '<div id="commentBox"><tpl for=".">',
           '<div class="comment">',
           '<div class="commentForm" style="text-align:right">Le {[values.dateCommentaire.format("d/m/Y")]}</div>',
           '<h2>Message de {surnom}</h2>',
           '<BLOCKQUOTE> <p>{msg}</p></BLOCKQUOTE> ',
           '</div>',
           '</tpl>',
           '</div>'
   )
});

Ext.onReady(function() {
   
   var list = new Optima.ListPanel();
   
   new Ext.Panel({
      applyTo : "comment",
      autoHeight : true,
      title : false,
      border : false,
      items : [
         new Optima.FormComment({
            listeners : {
              expand:function() {Ext.getBody().repaint();} ,
              collapse:function() {Ext.getBody().repaint();} 
            }
         }),
         list,
         new Ext.PagingToolbar({
            style : "background-image: url(img/bg.png);background-repeat: repeat-x;background-position: bottom left;border-bottom:1px solid #FB5D9B;border-left:1px dotted #FB5D9B;border-right:1px dotted #FB5D9B;",
            afterPageText : "sur {0}",
            firstText : "Prmière Page",
            prevText : "Page précédente",
            nextText : "Page suivante",
            lastText : "Dernière Page",
            refreshText : "Rafraichir",
            applyTo : "link",
            store : list.store
         })
      ]
   });
   list.store.load({params:{start:0, limit:20}});
   
   
});