// JScript 文件
Ext.onReady(function(){
    Ext.QuickTips.init();
    var ds = new Ext.data.Store({
        proxy: new Ext.data.ScriptTagProxy({
            url: 'data/get_messages.aspx'
        }),
        reader: new Ext.data.JsonReader({
            root: 'messages',
            totalProperty: 'totalCount',
            id: 'message_id'
        }, [
            {name: 'messageId', mapping: 'message_id'},
            {name: 'title', mapping: 'message_title'},
            {name: 'face', mapping: 'author_face'},
            {name: 'author', mapping: 'message_author'},
            {name: 'postTime', mapping: 'post_time'},
            {name: 'excerpt', mapping: 'message_content'},
            {name: 'reply', mapping: 'message_reply'}
        ]),

        baseParams: {limit:10}
    });

 
  var resultTpl = new Ext.XTemplate(
        '<tpl for=".">',
        '<table style="width:600px;margin:auto; border-top:  #7f9db9 1px solid;" cellspacing="0" >',
            '<tr  valign="top">',
            '<td style="width:130px; background-color: #f2f7fb;" valign="middle">',
            '<img src={face} alt="face" />',
            '<br/>{author}',
            '</td>',
            '<td style="width:450; text-align:left;" valign="top">',
            '<div style="color: gray;width:450;text-align:right;">{postTime}</div><br/>',
            '<p style="color: gray;  width:450px;table-layout:fixed;word-wrap:break-word;word-break:break-all;overflow:hidden;">',
            '{excerpt}',
            '<p style="color:#0f5087; margin-top: 10px; margin-left: 24px;">',
            '{reply}',
            '</p>',
            '</p>',
            '</td>',
            '</tr>',
        '</table></tpl>'
    );
    var panel = new Ext.Panel({
        applyTo: 'search-panel',
        id:'search-panel',
        width:600,
        autoHeight:true,
        border:false,
        layout:'form',
        items: new Ext.DataView({
            tpl: resultTpl,
            store: ds,
            itemSelector: 'div.search-item'
        }),

        tbar: new Ext.PagingToolbar({
            store: ds,
            pageSize: 10,
            displayInfo: true,
            displayMsg: '显示 <em>{0}</em> - <em>{1}</em> 条，共有 <em>{2}</em> 条',
            emptyMsg: "No topics to display"
        }),
          
        bbar: new Ext.PagingToolbar({
            store: ds,
            pageSize: 10,
            displayInfo: true,
            displayMsg: '显示 <em>{0}</em> - <em>{1}</em> 条，共有 <em>{2}</em> 条',
            emptyMsg: "No topics to display"
        })
    });
    ds.on('beforeload',function(ds,options){
      Ext.get('search-panel').mask('正在加载，请等待...');
    });
    ds.on('load',function(ds,records,options){
      Ext.get('search-panel').unmask();
     });
    ds.load({params:{start:0, limit:10}});
    /////////////////////////////////////////////////////////////
     var username;
     var face;
     var store = new Ext.data.SimpleStore({
                         fields: ['href', 'face'],
                         data : Ext.addtoodata.faces // from states.js
                });
     var win;
     var nameTextBox=new Ext.form.TextField({
                    id:'nameTextBox',
                    fieldLabel: '输入您的昵称',
                    labelSeparator:'：',
                    name: 'nameTextBox',
                    allowBlank:false,
                    maxLength:25,
                    blankText:'请输入您的昵称',
                    width:210
                }); 
     var faceCombo = new Ext.form.ComboBox({
                    fieldLabel: '选择一个表情',
                    labelSeparator:'：',
                    store: store,
                    displayField:'face',
                    typeAhead: false,
                    mode: 'local',
                    triggerAction: 'all',
                    //emptyText:'Select a state...',
                    //selectOnFocus:true,
                    readOnly:true,
                    width:100
                 });
    
     var header2 = {
			 html : '<img id="face-img" src="Images/face/em1.gif" alt="face" style="border-left: #CAD9EC 120px solid; border-right: #CAD9EC 365px solid;background-color: #CAD9EC;" />', 
			 border:false
		     };           
     var contentTextBox=new Ext.form.TextArea({
                    fieldLabel: '填写留言内容',
                    labelSeparator:'：',
                    name: 'contentTextBox',
                    allowBlank:false,
                    maxLength:1000,
                    blankText:'填写留言内容',
                    xtype: 'textarea',
                    width:429,
                    height:124
                });             
     var signButton =Ext.get('signButton');
     faceCombo.on('select',function(combo,record,index){
           Ext.get('face-img').dom.src= record.get('href');   
           face= record.get('href');   
                
       });
     signButton.on('mouseover',function(e){
       signButton.dom.style.background='#739BE0';
       });
     signButton.on('mouseout',function(e){
       signButton.dom.style.background='';
       });  
     signButton.on('click',function(e){
          if(!win){
             win = new Ext.Window({
                el:'win',
               
                layout:'form',
                width:547,
                height:310,
                closeAction:'hide',
                modal :true,
                plain: true,
                title:'签写留言',
                border:false,
                bodyBorder:false,
                resizable:false,
            
               labelWidth:100, 
               
               items:[nameTextBox,faceCombo,header2,contentTextBox],
                
                buttons: [{
                    text:'确定',
                    handler:signGuestbook
                },{
                    text: '取消',
                    handler: function(){
                        Ext.get('face-img').dom.src='Images/face/em1.gif';
                        win.hide();
                       
                    }
                }]
            }); 
        
        };
       if(username){
          nameTextBox.setValue(username);
       }
       faceCombo.setValue('1 偷笑'); 
       face='Images/face/em1.gif';
       contentTextBox.reset(); 
       win.show(this);
     
     });
  
 function signGuestbook(){
     
      if(!nameTextBox.validate()|!contentTextBox.validate()){
        return;
      }
      Ext.get('face-img').dom.src='Images/face/em1.gif'; 
      win.hide();
      Ext.MessageBox.show({
                       msg: '正在保存，请等待...',
                       width:250,
                       wait:true,
                       animEl: 'mb7'
                   });
      Ext.Ajax.request({
		        url: 'data/sign_guestbook.aspx',
		        params: {name:nameTextBox.getValue(),face:face,content:contentTextBox.getValue()},
		       
		        callback: function(options,success,response){
		           
		           
		           var oResponse = Ext.decode(response.responseText);
		           if(oResponse.success){
		               //alert(oResponse.response); 
		               ds.load({params:{start:0, limit:10}});
		               Ext.example.msg('爱读提示您', oResponse.response);
                       
		           }
		           else{
		              Ext.MessageBox.show({
                            title: '错误提示',
                            msg: oResponse.response,
                            buttons: Ext.MessageBox.OK,
                            animEl: 'mb9',
                            //fn: showResult,
                            icon: Ext.MessageBox.ERROR
                       });
		           }
		          
		        },
		        success:function(){
		           Ext.MessageBox.hide();
		        },
        		failure:function(){
        		    Ext.MessageBox.show({
                    title: '错误提示',
                    msg: '通信失败！',
                    buttons: Ext.MessageBox.OK,
                    animEl: 'mb9',
                    //fn: showResult,
                    icon: Ext.MessageBox.ERROR
                  });
        		}
	         });   
   };            
  function getUsername(){
      Ext.Ajax.request({
		        url: 'data/get_username.aspx',
		        params: {need:'yes'},
		       
		        callback: function(options,success,response){
		           
		           
		           var oResponse = Ext.decode(response.responseText);
		           if(oResponse.success){
		               username=oResponse.response; 
		           }
		         }  

	         });   
   };            
 
  getUsername();
});