var projectTable = {
               detailDialog : null,
            addButton : null,
            removeButton : null,
            refreshButton : null,
            formCtrl : null,
            ds : null,
            gridCtrl : null,
            toolbar : null,
            isLoaded : false,
            init : function() {

                   Ext.QuickTips.init();

                var ds = new Ext.data.Store({
                       proxy: new Ext.data.HttpProxy({url:'ajax/AsyncHandler?action=LOADPROJECTS'}),
                    reader: new Ext.data.JsonReader({},
                        [
                           {name: 'company', sortType:'asUCString'},
                           {name: 'description', sortType:'asUCString'},
                           {name: 'processtype', sortType:'asUCString'},
                           {name: 'status', sortType:'asUCString'},
                              {name: 'id'}
                        ]),
                    sortInfo:{field: 'company', direction: "ASC"}
                });
                ds.load({waitMsg:'Loading',params:{start:0, limit:25}});
                projectTable.ds = ds;

                var xg = Ext.grid;
                projectTable.gridCtrl = new xg.GridPanel({
                    ds: ds,
                    autoExpandColumn: 'company',
                    columns: [
                        {header: "Id", width: 40, sortable: true, dataIndex: 'id', renderer: function(v,p){return formatId(v)}},
                         {id:'company',header: "Name", width: 100, sortable: true, dataIndex: 'company',renderer: projectTable.projectName},
                        {header: "Description", width: 300, sortable: true, dataIndex: 'description', renderer: function (v,p) {
                                                                                                                            p.attr = 'ext:qtip="' + v + '"';
                                                                                                                            return v;
                                                                                                                         } },
                        {header: "Process Type", width: 100, sortable: true, dataIndex: 'processtype'},
                        {header: "Status", width: 120, sortable: true, dataIndex: 'status'}
                    ],
                    loadMask: {msg:"Loading..."},
                    frame:true,
                    collapsible: false,
                    animCollapse: false,
                    title: 'Project Management',
                    tbar:[],
                    layout:'fit',
                    headerAsText:false,
                    selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
                    renderTo: document.body
                });

                 projectTable.addButton = new Ext.Toolbar.Button({
                        text:'Add',
                        tooltip:'Add a new project',
                        iconCls:'add'
                });
                projectTable.removeButton = new Ext.Toolbar.Button({
                        text:'Delete',
                        tooltip:'Delete the selected project',
                        iconCls:'remove'
                });
                projectTable.refreshButton = new Ext.Toolbar.Button({
                        text:'Refresh',
                        tooltip:'Refresh table data',
                        iconCls:'refresh'
                });

                projectTable.toolbar = projectTable.gridCtrl.getTopToolbar();
                projectTable.refreshButton.on('click', function(){
                    projectTable.ds.reload({waitMsg:'Loading',params:{start:0, limit:25, action:'LOADTASKS'}});
                });

                projectTable.addButton.on('click', function(){
                    projectTable.formCtrl.form.reset();
                    projectTable.formCtrl.setTitle("Add Project");
                    projectTable.detailDialog.show(projectTable.addButton.getEl());
                });

                projectTable.removeButton.on('click', function(){
                    var selections = projectTable.gridCtrl.selModel.getSelections()
                    if (selections.length > 0) {
                        Ext.MessageBox.show({
                           title: 'Confirm Deletion?',
                           msg: 'Do you want to delete the <b>' + selections.length + '</b> selected project(s)?',
                           buttons: Ext.MessageBox.YESNO,
                           fn: function(btn,ids){
                                                       if (btn == "yes") {
                                                        var selections = projectTable.gridCtrl.selModel.getSelections()
                                                        var ids = "";
                                                        if (selections.length > 0) {
                                                            for (i = 0; i < selections.length; i++) {
                                                                var record = selections[i];
                                                                if (ids != "") {
                                                                    ids += ",";
                                                                }
                                                                ids += record.data.id;
                                                            }
                                                        }
                                                            projectTable.ds.reload({waitMsg:'Loading',params:{deleteAction:true, idList:ids}});
                                                        }
                                               },
                          icon: Ext.MessageBox.WARNING
                       });
                   }
                });

                projectTable.toolbar.add('->');
                projectTable.toolbar.add(projectTable.addButton);
                projectTable.toolbar.add(projectTable.removeButton);
                projectTable.toolbar.add(projectTable.refreshButton);

                projectTable.formCtrlNameField = new Ext.form.TextField ({
                        fieldLabel: 'Name',
                        name: 'name',
                        anchor:'95%',
                        allowBlank: false,
                        maxLength: 1024
                });

                Ext.form.Field.prototype.msgTarget = 'side';
                projectTable.formCtrl = new Ext.FormPanel({
            		buttonAlign: 'right',
               	 	labelAlign: 'right',
                    labelWidth: 75,
                    title: 'Project Details',
                    frame:true,
                    defaultType: 'textfield',
                    defaults: {width: 290},
                    waitMsgTarget: true,
                    reader: new Ext.data.JsonReader({id: "id"}, ['name', 'description', 'projectId']),
                    items:	[
                                {
                                    xtype:'hidden',
                                    name: 'projectId'
                                },
                                    projectTable.formCtrlNameField
                                ,
                                {
                                    xtype:'htmleditor',
                                    id:'description',
                                    fieldLabel:'Description',
                                    height:200,
                                    anchor:'95%'
                                }
                            ],
                            buttons:[
                                           {
                                            text: 'Save',
                                            handler: function(){
                                                projectTable.formCtrl.form.submit({url:'ajax/AsyncHandler',
                                                    waitMsg:'Saving Data...',
                                                    params:{action:'UPDATEPROJECT'},
                                                    success:function(form, action) {
                                                        projectTable.detailDialog.hide();
                                                        projectTable.ds.load({waitMsg:'Loading',params:{start:0, limit:25}});
                                                    },
                                                    failure:function(form, action) {
                                                        if (action.result) {
                                                            Ext.MessageBox.show({
                                                                title: 'Error',
                                                                msg: action.result.data[0].msg,
                                                                buttons: Ext.MessageBox.OK,
                                                                icon: Ext.MessageBox.ERROR
                                                            });
                                                        }
                                                    }
                                                });
                                                }
                                        },
                                        {
                                            text: 'Cancel',
                                            handler: function() {
                                                   projectTable.detailDialog.hide();
                                            }
                                        }
                                    ]
                });

                if(!projectTable.detailDialog){
                    projectTable.detailDialog = new Ext.Window({
                        //el:'hello-win',
                        layout:'fit',
                        width:700,
                        height:300,
                        closeAction:'hide',
                        plain: true,
                        items: projectTable.formCtrl,
                        modal: true,
                        resizable : false,
                        closable: false,
                        renderTo: document.body
                    });
                };

                projectTable.detailDialog.on('show', function(){
                    projectTable.formCtrlNameField.getEl().dom.focus();
                }, null, {delay: 100});
            },

            projectName : function(value, p, record, rowindex, colindex, store) {
                //p.attr =  'ext:qtitle="'  + "Detail for Monday " + v + '"';
                p.attr = 'ext:qtip="' + value + '"';
                var projectId = projectTable.ds.getAt(rowindex).get('id');
                return "<span style='text-align:left' class='tbName' onmouseover='className=\"tbHover\"' onmouseout='className=\"tbName\"' onclick='projectTable.showProjectDetails(\"" + projectId + "\")'>" + value + "</span>";
            },

            showProjectDetails : function(projectId) {
                projectTable.detailDialog.show(projectTable.addButton.getEl());
                projectTable.formCtrl.setTitle("Edit Project");
                projectTable.formCtrl.form.load({
                                                url:'ajax/AsyncHandler?action=LOADPROJECT&projectId=' + projectId,
                                                waitMsg:'Loading'
                                                });
            }
        }

        function formatId(id) {
            var s = id.replace(/^0+/,'');
            if (s.length == 0) return '0';
            else return s;
        }