O2OA/x_desktop_web/x_component_Forum/Setting.js

MWF.xApplication.Forum = MWF.xApplication.Forum || {};
MWF.xDesktop.requireApp("Template", "Explorer", null, false);
MWF.require("MWF.widget.Identity", null,false);

MWF.xApplication.Forum.Setting = new Class({
    Extends: MWF.widget.Common,
    Implements: [Options, Events],
    options: {
        "style": "default",
        "index" : 0
    },

    initialize: function (node, app, actions, options) {
        this.setOptions(options);
        this.app = app;
        this.lp = app.lp;
        this.path = "/x_component_Forum/$Setting/";
        this.loadCss();
        this.actions = actions;
        this.node = $(node);
    },
    loadCss: function () {
        this.cssPath = "/x_component_Forum/$Setting/" + this.options.style + "/css.wcss";
        this._loadCss();
    },
    load: function () {
        //this.middleContent = this.app.middleContent;
        this.createNaviContent();
        this.createContentDiv();

        this.resizeWindowFun = this.resizeWindow.bind(this)
        this.resizeWindow();
        this.app.addEvent("resize", this.resizeWindowFun);
    },
    destroy: function(){
        if( this.contentDiv )this.contentDiv.empty();
        if( this.explorer ){
            this.explorer.destroy();
            delete this.explorer;
        }
        if(this.resizeWindowFun)this.app.removeEvent("resize",this.resizeWindowFun);
        this.node.empty();
        delete this;
    },
    resizeWindow: function(){
        var size = this.app.node.getSize();
        var topSize = this.app.topNode ? this.app.topNode.getSize() : {"x": 0, "y": 0};
        // var topSize = {"x": 0, "y": 0};
        //var pt = this.app.contentContainerNode.getStyle("padding-top").toFloat();
        //var pb = this.app.contentContainerNode.getStyle("padding-bottom").toFloat();

        var height = size.y - topSize.y; //- pt - pb;
        this.naviDiv.setStyles({"height":height+"px"});
        this.naviContentDiv.setStyles({"height":(height-120)+"px"});
        this.contentDiv.setStyles({"height":height+"px"});
    },
    createNaviContent: function(){
        this.naviDiv = new Element("div.naviDiv",{
            "styles":this.css.naviDiv
        }).inject(this.node);

        this.naviTitleDiv = new Element("div.naviTitleDiv",{
            "styles":this.css.naviTitleDiv,
            "text": this.lp.setting
        }).inject(this.naviDiv);
        this.naviContentDiv = new Element("div.naviContentDiv",{"styles":this.css.naviContentDiv}).inject(this.naviDiv);
        this.naviBottomDiv = new Element("div.naviBottomDiv",{"styles":this.css.naviBottomDiv}).inject(this.naviDiv);

        var jsonUrl = this.path+"navi.json";
        MWF.getJSON(jsonUrl, function(json){
            json.each(function(data, i){
                var naviContentLi = new Element("li.naviContentLi",{"styles":this.css.naviContentLi}).inject(this.naviContentDiv);
                naviContentLi.addEvents({
                    "mouseover" : function(ev){
                        if(this.bindObj.currentNaviItem != this.node) this.node.setStyles( this.styles );
                    }.bind({"styles": this.css.naviContentLi_over, "node":naviContentLi, "bindObj": this }),
                    "mouseout" : function(ev){
                        if(this.bindObj.currentNaviItem != this.node)this.node.setStyles( this.styles )
                    }.bind({"styles": this.css.naviContentLi, "node":naviContentLi, "bindObj": this }) ,
                    "click" : function(ev){
                        if( this.bindObj.currentNaviItem )this.bindObj.currentNaviItem.setStyles( this.bindObj.css.naviContentLi );
                        this.node.setStyles( this.styles );
                        this.bindObj.currentNaviItem = this.node;
                        this.node.store( "index" , i );
                        if( this.action && this.bindObj[this.action] )this.bindObj[this.action]();
                    }.bind({"styles": this.css.naviContentLi_current, "node":naviContentLi, "bindObj": this, "action" : data.action }) ,
                });
                var naviContentImg = new Element("img.naviContentImg",{
                    "styles":this.css.naviContentImg,
                    "src":this.path+this.options.style+"/icon/"+data.icon
                }).inject(naviContentLi);
                var naviContentSpan = new Element("span.naviContentSpan",{
                    "styles":this.css.naviContentSpan,
                    "text":data.title
                }).inject(naviContentLi);
                if( i == this.options.index )naviContentLi.click();
            }.bind(this));
        }.bind(this));
    },
    createContentDiv: function(){
        this.contentDiv = new Element("div.contentDiv",{"styles":this.css.contentDiv}).inject(this.node);
    },
    openCategorySetting: function(){
        if( this.contentDiv )this.contentDiv.empty();
        if( this.explorer ){
            this.explorer.destroy();
            delete this.explorer;
        }
        this.explorer = new MWF.xApplication.Forum.Setting.CategorySettingExplorer(this.contentDiv, this.app, this,{style:this.options.style});
        this.explorer.load();
    },
    openSectionSetting: function(){
        if( this.contentDiv )this.contentDiv.empty();
        if( this.explorer ){
            this.explorer.destroy();
            delete this.explorer;
        }
        this.explorer = new MWF.xApplication.Forum.Setting.SectionSettingExplorer(this.contentDiv, this.app, this,{style:this.options.style});
        this.explorer.load();
    },
    openSystemSetting : function(){
        if( this.contentDiv )this.contentDiv.empty();
        if( this.explorer ){
            this.explorer.destroy();
            delete this.explorer;
        }
        this.explorer = new MWF.xApplication.Forum.Setting.SystemSettingExplorer(this.contentDiv, this.app, this,{style:this.options.style});
        this.explorer.load();
    },
    openRoleSetting: function(){
        if( this.contentDiv )this.contentDiv.empty();
        if( this.explorer ){
            this.explorer.destroy();
            delete this.explorer;
        }
        this.explorer = new MWF.xApplication.Forum.Setting.RoleSettingExplorer(this.contentDiv, this.app, this,{style:this.options.style});
        this.explorer.load();
    },
    openPermissionSetting: function(){
        if( this.contentDiv )this.contentDiv.empty();
        if( this.explorer ){
            this.explorer.destroy();
            delete this.explorer;
        }
        this.explorer = new MWF.xApplication.Forum.Setting.PermissionSettingExplorer(this.contentDiv, this.app, this,{style:this.options.style});
        this.explorer.load();
    },
    selectPerson: function( item, type , count ){
        if( type == "person" ){
            var title = this.lp.selectPerson
        }else if( type == "department" ){
            title = this.lp.selectDepartment
        }else if( type == "company" ){
            title = this.lp.selectCompany
        }
        MWF.xDesktop.requireApp("Organization", "Selector.package",null, false);
        var value = item.get("text").split( "," );
        var options = {
            "type": type,
            "title": title ,
            "count" : count,
            "names": value || [],
            "onComplete": function(items){
                var arr = [];
                items.each(function(item){
                    arr.push(item.data.name);
                }.bind(this));
                item.set("text",arr.join(","));
            }.bind(this)
        };
        var selector = new MWF.OrgSelector(this.app.content, options);
    }

});

MWF.xApplication.Forum.Setting.CategorySettingExplorer = new Class({
    Extends: MWF.widget.Common,
    Implements: [Options, Events],
    options: {
        "style": "default"
    },
    initialize: function (container, app, parent, options) {
        this.container = container;
        this.parent = parent;
        this.app = app;
        this.css = this.parent.css;
        this.lp = this.app.lp;
    },
    load: function () {
        this.container.empty();
        if( this.app.access.isAdmin() ){
            this.loadToolbar();
        }
        this.loadView();
    },
    destroy : function(){
        if(this.resizeWindowFun)this.app.removeEvent("resize",this.resizeWindowFun);
        this.view.destroy();
    },
    loadToolbar: function(){
        this.toolbar = new Element("div",{
            styles : this.css.toolbar
        }).inject(this.container)

        this.createActionNode = new Element("div",{
            styles : this.css.toolbarActionNode,
            text: this.lp.createCategory
        }).inject(this.toolbar);
        this.createActionNode.addEvent("click",function(){
            var form = new MWF.xApplication.Forum.Setting.CategorySettingForm(this, {}, {
                onPostOk : function(){
                    this.view.reload();
                }.bind(this)})
            form.create();
        }.bind(this))

        this.fileterNode = new Element("div",{
            styles : this.css.fileterNode
        }).inject(this.toolbar);
    },
    loadView : function(){
        this.viewContainer = Element("div",{
            "styles" : this.css.viewContainer
        }).inject(this.container);

        this.resizeWindow();
        this.resizeWindowFun = this.resizeWindow.bind(this)
        this.app.addEvent("resize", this.resizeWindowFun );

        this.view = new MWF.xApplication.Forum.Setting.CategorySettingView( this.viewContainer, this.app, this, {
            templateUrl : this.parent.path+"listItemCategory.json",
            scrollEnable : true
        } )
        this.view.load();
    },
    resizeWindow: function(){
        var size = this.container.getSize();
        if( this.toolbar ){
            this.viewContainer.setStyles({"height":(size.y-121)+"px"});
        }else{
            this.viewContainer.setStyles({"height":(size.y-56)+"px"});
        }
    }
})

MWF.xApplication.Forum.Setting.CategorySettingView = new Class({
    Extends: MWF.xApplication.Template.Explorer.ComplexView,
    _createDocument: function(data){
        return new MWF.xApplication.Forum.Setting.CategorySettingDocument(this.viewNode, data, this.explorer, this);
    },
    _getCurrentPageData: function(callback, count){
        if (!count)count = 20;
        //var id = (this.items.length) ? this.items[this.items.length - 1].data.id : "(0)";
        //var filter = this.filterData || {};
        this.actions.listCategoryAllByAdmin( function (json) {
            if (callback)callback(json);
        }.bind(this))
    },
    _removeDocument: function(documentData, all){
        this.actions.deleteCategory(documentData.id, function(json){
            this.reload();
            this.app.notice(this.app.lp.deleteDocumentOK, "success");
        }.bind(this));
    },
    _create: function(){

    },
    _openDocument: function( documentData ){
        var form = new MWF.xApplication.Forum.Setting.CategorySettingForm(this, documentData, {
            onPostOk : function(){
                this.reload();
            }.bind(this)
        })
        //if( this.app.access.hasForumAdminAuthority( documentData ) ){
        if( this.app.access.isAdmin() ){
            form.edit();
        }else{
            form.open();
        }
    },
    _queryCreateViewNode: function(){
    },
    _postCreateViewNode: function( viewNode ){
    },
    _queryCreateViewHead:function(){
    },
    _postCreateViewHead: function( headNode ){
    }

})

MWF.xApplication.Forum.Setting.CategorySettingDocument = new Class({
    Extends: MWF.xApplication.Template.Explorer.ComplexDocument,
    _queryCreateDocumentNode:function( itemData ){
    },
    _postCreateDocumentNode: function( itemNode, itemData ){
    }
})

MWF.xApplication.Forum.Setting.CategorySettingForm = new Class({
    Extends: MWF.xApplication.Template.Explorer.PopupForm,
    Implements: [Options, Events],
    options: {
        "style": "default",
        "width": "1011",
        "height": "90%",
        "hasTop": true,
        "hasIcon": false,
        "hasTopIcon" : true,
        "hasTopContent" : true,
        "hasBottom": true,
        "title": MWF.xApplication.Forum.LP.categoryFormTitle,
        "draggable": true,
        "closeAction": true
    },
    createContent: function () {
        this.formContentNode = new Element("div.formContentNode", {
            "styles": this.css.formContentNode
        }).inject(this.formNode);

        this.formTableContainer = new Element("div.formTableContainer", {
            "styles": this.css.formTableContainer
        }).inject(this.formContentNode);

        this.formTableArea = new Element("div.formTableArea", {
            "styles": this.css.formTableArea
        }).inject(this.formTableContainer);

        this._createTableContent();
    },
    _createTableContent: function () {
        var html = "<table width='100%' bordr='0' cellpadding='5' cellspacing='0' styles='formTable'>" +
            "<tr>" +
            "   <td styles='formTableTitle' lable='forumName' width='10%'></td>" +
            "   <td styles='formTableValue' item='forumName' width='40%'></td>" +
            "   <td styles='formTableTitle' lable='indexListStyle' width='10%'></td>" +
            "   <td styles='formTableValue' item='indexListStyle' width='40%'></td>" +
            "</tr><tr>" +
            "   <td styles='formTableTitle' lable='forumStatus'></td>" +
            "   <td styles='formTableValue' item='forumStatus'></td>" +
            "   <td styles='formTableTitle' lable='creatorName'></td>" +
            "   <td styles='formTableValue' item='creatorName'></td>" +
            "</tr><tr>" +
            "   <td styles='formTableTitle' lable='forumManagerName'></td>" +
            "   <td styles='formTableValue' item='forumManagerName'></td>" +
            "   <td styles='formTableTitle' lable='orderNumber'></td>" +
            "   <td styles='formTableValue' item='orderNumber'></td>" +
            "</tr><tr>" +
            "   <td styles='formTableTitle' lable='forumVisiable'></td>" +
            "   <td styles='formTableValue' item='forumVisiable'></td>" +
            "   <td styles='formTableValue' colspan='2'>" +
            "       <span item='forumVisiableCompanyButton'></span>"+
            "       <span item='forumVisiableDepartmentButton'></span>"+
            "       <span item='forumVisiablePersonButton'></span>"+
            "   </td>" +
            "</tr><tr>" +
            "   <td></td>" +
            "   <td colspan='3'>"+
            "       <div item='forumVisiableCompany'></div>"+
            "       <div item='forumVisiableDepartment'></div>"+
            "       <div item='forumVisiablePerson'></div>"+
            "   </td>" +
            "</tr><tr>" +
            "   <td styles='formTableTitle' lable='forumColorArea'></td>" +
            "   <td styles='formTableValue'>"+
            "       <div item='forumColorArea' style='float:left;'></div>"+
            "       <div item='forumColorButton' style='float:left;'></div>"+
            "   </td>" +
            "   <td styles='formTableTitle' lable='subjectType'></td>" +
            "   <td styles='formTableValue' item='subjectType'></td>" +
                //"</tr><tr>" +
                //"   <td styles='formTableTitle' lable='indexRecommendable'></td>" +
                // "   <td styles='formTableValue' item='indexRecommendable'></td>" +
                //"   <td styles='formTableTitle' lable=''></td>" +
                //"   <td styles='formTableValue' item=''></td>" +
            "</tr><tr>" +
            "   <td styles='formTableTitle' lable='forumNotice'></td>" +
            "   <td styles='formTableValue' item='forumNotice' colspan='3'></td>" +
            "</tr>"
        "</table>"
        this.formTableArea.set("html", html);

        //value : function(){ return this.lp.defaultForumColor }.bind(this), defaultValue : this.lp.defaultForumColor

        var formVisiableButtonStyle = (( !this.isEdited && !this.isNew ) || !this.data.forumVisiable ||(this.data.forumVisiable == this.lp.allPerson )) ? { display:"none"} : { display:""};
        var formVisiableStyle = ( !this.data.forumVisiable ||(this.data.forumVisiable == this.lp.allPerson )) ? { display:"none"} : { display:""};
        var selectColorButtonStyle = (!this.isEdited && !this.isNew) ? { display : "none" } : {};
        MWF.xDesktop.requireApp("Template", "MForm", function () {
            this.form = new MForm(this.formTableArea, this.data, {
                style: "forum",
                isEdited: this.isEdited || this.isNew,
                itemTemplate: {
                    forumName: {text: this.lp.forumName, notEmpty: true},
                    forumManagerName: {text: this.lp.forumManagerName, tType : "person", "defaultValue" : this.app.userName, "count" : 0 },
                    forumVisiable: {text: this.lp.forumVisiable, type : "select", selectValue : this.lp.forumVisiableValue.split(","), event : {
                        change : function( it, ev ){
                            var styles = it.getValue() == this.lp.allPerson ? { display : "none" } : { display : "" };
                            it.form.getItem("forumVisiablePersonButton").setStyles( styles );
                            it.form.getItem("forumVisiableDepartmentButton").setStyles( styles );
                            it.form.getItem("forumVisiableCompanyButton").setStyles( styles );
                            it.form.getItem("forumVisiablePerson").setStyles( styles );
                            it.form.getItem("forumVisiableDepartment").setStyles( styles );
                            it.form.getItem("forumVisiableCompany").setStyles( styles );
                        }.bind(this)
                    }},
                    forumVisiablePersonButton : { value : this.lp.selectPerson , type : "button", style : formVisiableButtonStyle, event : {
                        click : function( it, ev ){
                            this.explorer.explorer.parent.selectPerson( it.form.getItem("forumVisiablePerson").getElements()[0], "person" , 0 ) }.bind(this)
                    }},
                    forumVisiableDepartmentButton : { value : this.lp.selectDepartment , type : "button", style : formVisiableButtonStyle, event : {
                        click : function(it, ev){ this.explorer.explorer.parent.selectPerson( it.form.getItem("forumVisiableDepartment").getElements()[0], "department" , 0 )}.bind(this)
                    }},
                    forumVisiableCompanyButton : { value : this.lp.selectCompany , type : "button", style : formVisiableButtonStyle, event : {
                        click : function(it, ev){ this.explorer.explorer.parent.selectPerson( it.form.getItem("forumVisiableCompany").getElements()[0], "company" , 0 )}.bind(this)
                    }},
                    forumVisiableCompany : { type : "innerText", value : function(){ return this.getRoleMemberByCode("FORUM_GUEST_")["company"].join(",") }.bind(this), style : formVisiableStyle },
                    forumVisiableDepartment : { type : "innerText", value : function(){ return this.getRoleMemberByCode("FORUM_GUEST_")["department"].join(",") }.bind(this), style : formVisiableStyle },
                    forumVisiablePerson : { type : "innerText", value : function(){ return this.getRoleMemberByCode("FORUM_GUEST_")["person"].join(",") }.bind(this), style : formVisiableStyle },
                    indexListStyle: {text: this.lp.indexListStyle, type : "select", selectValue : this.lp.indexListStyleValue.split(",") },
                    forumIndexStyle: {text: this.lp.forumIndexStyle, type : "select", selectValue : this.lp.forumIndexStyleValue.split(",") },
                    indexRecommendable: {text: this.lp.indexRecommendable, type : "select", selectValue : ["true","false"], selectText : this.lp.yesOrNo.split(",") },
                    subjectNeedAudit: {text: this.lp.subjectNeedAudit, type : "select", selectValue : ["true","false"], selectText : this.lp.yesOrNo.split(","), defaultValue : "false" },
                    replyNeedAudit: {text: this.lp.replyNeedAudit, type : "select", selectValue : ["true","false"], selectText : this.lp.yesOrNo.split(","), defaultValue : "false"  },
                    //sectionCreateAble: {text: this.lp.sectionCreateAble, type : "select", selectValue : ["true","false"], selectText : this.lp.yesOrNo.split(",")  },
                    creatorName: {text: this.lp.creatorName, type : "innerText", "defaultValue" : this.app.userName },
                    forumStatus: {text: this.lp.forumStatus, type : "select", selectValue : this.lp.forumStatusValue.split(",") },
                    orderNumber: {text: this.lp.orderNumber, tType : "number" },
                    forumColorArea: {text: this.lp.forumColor, type: "innerText" },
                    forumColorButton : { value : this.lp.selectColor , type : "button", style : selectColorButtonStyle, event : {
                        click : function( it, ev ){ this.selectColor()  }.bind(this)
                    }},
                    subjectType: {text: this.lp.subjectType, type: "text", defaultValue : this.lp.subjectTypeDefaultValue },
                    forumNotice: {text: this.lp.forumNotice, type: "rtf", RTFConfig : { skin : "bootstrapck" }}
                }
            }, this.app);
            this.form.load();

            var forumColorArea = this.formTableArea.getElements("[item='forumColorArea']")[0];
            this.forumColorNode = new Element( "div", {
                styles : { "font-size":"12px", height : "24px", "line-height" : "24px", width : "70px", "margin-right" : "20px" , "color" : "#fff", "text-align" : "center", "background-color" : this.data.forumColor || this.lp.defaultForumColor },
                text : "效果"
            }).inject( forumColorArea )


        }.bind(this), true);
    },
    selectColor: function(){
        var form = new MWF.xApplication.Forum.Setting.ForumColorForm(this, {}, {
            onPostOk : function( color ){
                this.forumColorNode.setStyle( "background-color" , color );
                this.data.forumColor = color;
            }.bind(this)
        })
        form.edit();
    },
    _ok: function (data, callback) {
        this.app.restActions.saveCategory( data, function(json){
            this.saveRole( json.data.id, function(){
                if( callback )callback(json);
                this.fireEvent("postOk")
            }.bind(this))
        }.bind(this));
    },
    saveRole : function( id, callback ){

        var data = this.form.getResult(true, ",", true, false, true);
        if( this.isNew )data.id = id;

        this.saveRoleMember( true,  "forumManagerName" ,"FORUM_SUPER_MANAGER_", data, true )

        var flag = data.forumVisiable != this.lp.allPerson;
        this.saveRoleMember( flag,  "forumVisiable" ,"FORUM_GUEST_", data )


        if( callback )callback();
    },
    saveRoleMember : function( flag, dataKey, code, data , isSingle, callback ){
        var orgArray = [];
        if( flag ){
            if( isSingle ){
                if( data[ dataKey ] ){
                    data[ dataKey ].split(",").each( function( p ){
                        if( p!= "") orgArray.push( { objectName : p, objectType : "人员" } );
                    })
                }
            }else{
                if( data[ dataKey + "Person" ] ){
                    data[ dataKey + "Person" ].split(",").each( function( p ){
                        if( p!= "") orgArray.push( { objectName : p, objectType : "人员" } );
                    })
                }
                if( data[ dataKey + "Department" ] ) {
                    data[dataKey + "Department"].split(",").each(function (p) {
                        if (p != "") orgArray.push({objectName: p, objectType: "部门"});
                    })
                }
                if( data[ dataKey + "Company" ] ) {
                    data[ dataKey + "Company" ].split(",").each( function( p ){
                        if( p!= "") orgArray.push( { objectName : p, objectType : "公司" } );
                    })
                }
            }
        }
        var d = {
            bindObjectArray : orgArray,
            bindRoleCode : code + this.data.id
        };
        this.app.restActions.bindRole( d, function( rData ){
            if( callback )callback(json);
        }.bind(this))
    },
    getRoleMemberByCode : function( code ){
        if( !this.RoleMember )this.RoleMember = {};
        if( this.RoleMember[ code ] ){
            return this.RoleMember[ code ];
        }
        var r = this.RoleMember[ code ] = {
            company : [],
            department : [],
            person : []
        };
        if( this.data && this.data.id ){
            this.actions.listRoleMemberByCode( { "bindRoleCode" : code+ this.data.id }, function(json){
                json.data = json.data || [];
                json.data.each( function( d ){
                    if(d.objectType == "公司"){
                        r.company.push( d.objectName );
                    }else if(d.objectType == "部门"){
                        r.department.push( d.objectName );
                    }else{
                        r.person.push( d.objectName );
                    }
                }.bind(this) )
            }, function(){}, false );
        }
        return r;
    }
});


MWF.xApplication.Forum.Setting.ForumColorForm = new Class({
    Extends: MWF.xApplication.Template.Explorer.PopupForm,
    Implements: [Options, Events],
    options: {
        "style": "default",
        "width": "820",
        "height": "280",
        "hasTop": true,
        "hasIcon": false,
        "hasTopIcon" : true,
        "hasTopContent" : true,
        "hasBottom": false,
        "title": MWF.xApplication.Forum.LP.forumColorFormTitle,
        "draggable": true,
        "closeAction": true
    },
    _createTableContent: function () {

        var div = new Element("div",{
            "styles" : this.css.sectionFormContent
        }).inject(this.formTableArea);
        div.setStyle( "margin-top" , "10px" );

        this.lp.optionsForumColors.each(function(arr, i){
            arr.each( function(c , j ){
                var iconAreaNode = new Element("div",{
                    "styles" : this.css.iconAreaNode
                }).inject(div);
                var iconNode = new Element("div",{
                    "styles" : {height : "20px", width : "40px", "margin" : "5px 5px 5px 5px" , "background-color" : c, "cursor" : "pointer"}
                }).inject(iconAreaNode);

                iconAreaNode.store( "color", c );
                iconAreaNode.addEvents({
                    "click" : function(){
                        this.obj.fireEvent("postOk", this.node.retrieve("color") );
                        this.obj.close();
                    }.bind({ obj : this, node : iconAreaNode })
                })
            }.bind(this))
        }.bind(this));
    }
});

MWF.xApplication.Forum.Setting.SectionSettingExplorer = new Class({
    Extends: MWF.widget.Common,
    Implements: [Options, Events],
    options: {
        "style": "default"
    },
    initialize: function (container, app, parent, options) {
        this.container = container;
        this.parent = parent;
        this.app = app;
        this.css = this.parent.css;
        this.lp = this.app.lp;
    },
    load: function () {
        this.container.empty();
        this.loadToolbar();
    },
    destroy : function(){
        if(this.resizeWindowFun)this.app.removeEvent("resize",this.resizeWindowFun)
        this.view.destroy();
    },
    loadToolbar: function(){
        this.toolbar = new Element("div",{
            styles : this.css.toolbar
        }).inject(this.container)

        this.createActionNode = new Element("div",{
            styles : this.css.toolbarActionNode,
            text: this.lp.createSection
        }).inject(this.toolbar);
        this.createActionNode.addEvent("click",function(){
            var form = new MWF.xApplication.Forum.Setting.SectionSettingForm(this, {}, {
                onPostOk : function(){
                    this.view.reload();
                }.bind(this)})
            form.create();
        }.bind(this))

        this.loadCategoryBar();

        //this.fileterNode = new Element("div",{
        //    styles : this.css.fileterNode
        //}).inject(this.toolbar);
    },
    loadCategoryBar : function(){
        var _self = this;
        //this.categoryBar = new Element("div.categoryBar",{"styles":this.css.categoryBar}).inject(this.contentDiv);

        this.allCategoryNode = new Element("li.allCategoryNode", {
            "styles": this.css.categoryNode,
            "text" : "全部"
        }).inject(this.toolbar)
        this.allCategoryNode.addEvents({
            "mouseover" : function(){ if( this.currentCategoryNode != this.allCategoryNode)this.allCategoryNode.setStyles(this.css.categoryNode_over) }.bind(this),
            "mouseout" : function(){ if( this.currentCategoryNode != this.allCategoryNode)this.allCategoryNode.setStyles(this.css.categoryNode) }.bind(this),
            "click":function(){
                if( this.currentCategoryNode )this.currentCategoryNode.setStyles(this.css.categoryNode);
                this.currentCategoryNode = this.allCategoryNode;
                this.allCategoryNode.setStyles(this.css.categoryNode_current);
                this.loadView(  )
            }.bind(this)
        })
        var isManager = false;
        this.forumAdminObj = {};
        this.app.restActions.listCategoryAllByAdmin( function( json ){
                json.data.each( function( d ){
                    var flag = this.app.access.hasForumAdminAuthority( d );
                    this.forumAdminObj[d.id] = flag;
                    if( !isManager ){
                        isManager = flag;
                    }
                    var categoryNode = new Element("li.categoryNode", {
                        "styles": this.css.categoryNode,
                        "text" : d.forumName
                    }).inject(this.toolbar);
                    categoryNode.store( "categoryId" , d.id );
                    categoryNode.addEvents({
                        "mouseover" : function(){ if( _self.currentCategoryNode != this.node)this.node.setStyles(_self.css.categoryNode_over) }.bind({node : categoryNode }),
                        "mouseout" : function(){ if( _self.currentCategoryNode != this.node)this.node.setStyles(_self.css.categoryNode) }.bind({node : categoryNode }),
                        "click":function(){
                            if( _self.currentCategoryNode )_self.currentCategoryNode.setStyles(_self.css.categoryNode);
                            _self.currentCategoryNode = this.node;
                            this.node.setStyles(_self.css.categoryNode_current);
                            _self.loadView(  )
                        }.bind({ name : d.id, node : categoryNode })
                    })
                }.bind(this))
            }.bind(this), null, false
        )
        if( !isManager )this.createActionNode.destroy();
        this.allCategoryNode.click();
    },
    loadView : function(){
        var categoryId;
        if( this.currentCategoryNode ){
            categoryId = this.currentCategoryNode.retrieve("categoryId");
        }
        categoryId = categoryId || "all";

        if(this.viewContainer)this.viewContainer.destroy();
        this.viewContainer = Element("div",{
            "styles" : this.css.viewContainer
        }).inject(this.container);

        this.resizeWindow();
        this.resizeWindowFun = this.resizeWindow.bind(this)
        this.app.addEvent("resize", this.resizeWindowFun );

        this.view = new MWF.xApplication.Forum.Setting.SectionSettingView( this.viewContainer, this.app, this, {
            templateUrl : this.parent.path+"listItemSection.json",
            scrollEnable : true,
            categoryId : categoryId
        } )
        this.view.load();
    },
    resizeWindow: function(){
        var size = this.container.getSize();
        this.viewContainer.setStyles({"height":(size.y-65)+"px"});
    }
})

MWF.xApplication.Forum.Setting.SectionSettingView = new Class({
    Extends: MWF.xApplication.Template.Explorer.ComplexView,
    _createDocument: function(data){
        return new MWF.xApplication.Forum.Setting.SectionSettingDocument(this.viewNode, data, this.explorer, this);
    },
    _getCurrentPageData: function(callback, count){
        if (!count)count = 20;
        //var id = (this.items.length) ? this.items[this.items.length - 1].data.id : "(0)";
        //var filter = this.filterData || {};
        if( this.options.categoryId == "all" ){
            this.actions.listSectionAll( function (json) {
                if( !json.data )json.data = [];
                if (callback)callback(json);
            }.bind(this))
        }else{
            this.actions.listSectionByAdmin( this.options.categoryId, function (json) {
                if( !json.data )json.data = [];
                if (callback)callback(json);
            }.bind(this))
        }
    },
    _removeDocument: function(documentData, all){
        this.actions.deleteSection(documentData.id, function(json){
            this.reload();
            this.app.notice(this.app.lp.deleteDocumentOK, "success");
        }.bind(this));
    },
    _create: function(){

    },
    _openDocument: function( documentData ){
        var form = new MWF.xApplication.Forum.Setting.SectionSettingForm(this, documentData, {
            title : this.lp.sectionFormTitle + " - " + documentData.sectionName,
            onPostOk : function(){
                this.reload();
            }.bind(this)
        })
        //this.app.access.hasSectionAdminAuthority( documentData , function( flag ){  只有分区管理员可以对分区以下的板块进行增删改，版主不能
        this.app.access.hasForumAdminAuthority( documentData.forumId , function( flag ){
            flag ?  form.edit() : form.open();
        } )
    },
    _queryCreateViewNode: function(){
    },
    _postCreateViewNode: function( viewNode ){
    },
    _queryCreateViewHead:function(){
    },
    _postCreateViewHead: function( headNode ){
    }

})

MWF.xApplication.Forum.Setting.SectionSettingDocument = new Class({
    Extends: MWF.xApplication.Template.Explorer.ComplexDocument,
    mouseoverSection : function(sectionNode, ev){
        var removeNode = sectionNode.getElements("[styles='sectionRemoveNode']")[0];
        if( removeNode )removeNode.setStyle("opacity",1)
    },
    mouseoutSection : function(sectionNode, ev){
        var removeNode = sectionNode.getElements("[styles='sectionRemoveNode']")[0];
        if( removeNode )removeNode.setStyle("opacity",0)
    },
    _queryCreateDocumentNode:function( itemData ){
    },
    _postCreateDocumentNode: function( itemNode, itemData ){
    }
})

MWF.xApplication.Forum.Setting.SectionSettingForm = new Class({
    Extends: MWF.xApplication.Template.Explorer.PopupForm,
    Implements: [Options, Events],
    options: {
        "style": "default",
        "width": "1100",
        "height": "90%",
        "hasTop": true,
        "hasIcon": false,
        "hasTopIcon" : true,
        "hasTopContent" : true,
        "hasBottom": true,
        "title": MWF.xApplication.Forum.LP.sectionFormTitle,
        "draggable": true,
        "closeAction": true
    },
    createToolbar: function(){
        var _self = this;

        this.toolbar = new Element("div",{
            styles : this.css.formToolbar
        }).inject(this.formNode)

        var categoryNode = new Element("li.categoryNode", {
            "styles": this.css.formCategoryNode,
            "text" : this.lp.baseSetting
        }).inject(this.toolbar);
        categoryNode.addEvents({
            "mouseover" : function(){ if( _self.currentCategoryNode != this.node)this.node.setStyles(_self.css.formCategoryNode_over) }.bind({node : categoryNode }),
            "mouseout" : function(){ if( _self.currentCategoryNode != this.node)this.node.setStyles(_self.css.formCategoryNode) }.bind({node : categoryNode }),
            "click":function(){
                if( _self.currentCategoryNode )_self.currentCategoryNode.setStyles(_self.css.formCategoryNode);
                _self.currentCategoryNode = this.node;
                this.node.setStyles(_self.css.formCategoryNode_current);
                _self.baseContainer.setStyle("display","");
                _self.permissionContainer.setStyle("display","none");
            }.bind({ node : categoryNode })
        })
        categoryNode.setStyles( this.css.formCategoryNode_current );
        _self.currentCategoryNode = categoryNode;

        var categoryNode = new Element("li.categoryNode", {
            "styles": this.css.formCategoryNode,
            "text" : this.lp.permissionSetting
        }).inject(this.toolbar);
        categoryNode.addEvents({
            "mouseover" : function(){ if( _self.currentCategoryNode != this.node)this.node.setStyles(_self.css.formCategoryNode_over) }.bind({node : categoryNode }),
            "mouseout" : function(){ if( _self.currentCategoryNode != this.node)this.node.setStyles(_self.css.formCategoryNode) }.bind({node : categoryNode }),
            "click":function(){
                if( _self.currentCategoryNode )_self.currentCategoryNode.setStyles(_self.css.formCategoryNode);
                _self.currentCategoryNode = this.node;
                this.node.setStyles(_self.css.formCategoryNode_current);
                _self.baseContainer.setStyle("display","none");
                _self.permissionContainer.setStyle("display","");
            }.bind({ node : categoryNode })
        })
    },
    createContent: function () {
        this.createToolbar();

        this.formContentNode = new Element("div.formContentNode", {
            "styles": this.css.formContentNode
        }).inject(this.formNode);

        this.formTableContainer = new Element("div.formTableContainer", {
            "styles": this.css.formTableContainer
        }).inject(this.formContentNode);

        this.formTableArea = new Element("div.formTableArea", {
            "styles": this.css.formTableArea
        }).inject(this.formTableContainer);

        this._createTableContent();
    },
    _createTableContent: function () {
        _self = this;
        this.baseContainer = new Element("div").inject(this.formTableArea)

        var html = "<table width='100%' bordr='0' cellpadding='5' cellspacing='0' styles='formTable'>" +
            "<tr>" +
            "   <td styles='formTableTitle' lable='sectionName' width='10%'></td>" +
            "   <td styles='formTableValue' item='sectionName' width='40%'></td>" +
            "   <td styles='formTableTitle' lable='forumId' width='10%'></td>" +
            "   <td styles='formTableValue' item='forumId' width='40%'></td>" +
            "</tr><tr>" +
                //"   <td styles='formTableTitle' lable='sectionType'></td>" +
                //"   <td styles='formTableValue' item='sectionType'></td>" +
                //"</tr><tr>" +
            "   <td styles='formTableTitle' lable='sectionStatus'></td>" +
            "   <td styles='formTableValue' item='sectionStatus'></td>" +
            "   <td styles='formTableTitle' lable='orderNumber'></td>" +
            "   <td styles='formTableValue' item='orderNumber'></td>" +
            "</tr><tr>" +
            "   <td styles='formTableTitle' lable='typeCatagory'></td>" +
            "   <td styles='formTableValue' item='typeCatagory'></td>" +
            "   <td styles='formTableTitle' lable='subjectType'></td>" +
            "   <td styles='formTableValue' item='subjectType'></td>" +
            "</tr><tr>" +
            "   <td styles='formTableTitle' lable='creatorName'></td>" +
            "   <td styles='formTableValue' item='creatorName'></td>" +
            "   <td styles='formTableTitle' lable='createTime'></td>" +
            "   <td styles='formTableValue' item='createTime'></td>" +
            "</tr><tr>" +
            "   <td styles='formTableTitle' lable='sectionIcon'></td>" +
            "   <td styles='formTableValue' item='sectionIconArea' colspan='3' valign='bottom'></td>" +
            "</tr><tr>" +
            "   <td styles='formTableTitle' lable='sectionDescription'></td>" +
            "   <td styles='formTableValue' item='sectionDescription' colspan='3'></td>" +
            "</tr><tr>" +
            "   <td styles='formTableTitle' lable='sectionNotice'></td>" +
            "   <td styles='formTableValue' item='sectionNotice' colspan='3'></td>" +
            "</tr>"
        "</table>"
        this.baseContainer.set("html", html);

        this.permissionContainer = new Element("div", { styles : {"display":"none"} }).inject( this.formTableArea );

        var html = "<table width='100%' bordr='0' cellpadding='5' cellspacing='0' styles='formTable'>" +
            "<tr>" +
            "   <td styles='formTableTitle' lable='moderatorNames'></td>" +
            "   <td styles='formTableValue' item='moderatorNames' colspan='3'></td>"+
            "</tr><tr>" +

            "   <td styles='formTableTitle' lable='sectionVisiable' width='10%'></td>" +
            "   <td styles='formTableValue' item='sectionVisiable' width='40%'></td>" +
            "   <td styles='formTableValue' width='50%' colspan='2'>"+
            "       <span item='sectionVisiableCompanyButton'></span>"+
            "       <span item='sectionVisiableDepartmentButton'></span>"+
            "       <span item='sectionVisiablePersonButton'></span>"+
            "     </td>" +
            "</tr><tr>" +
            "   <td></td>"+
            "   <td styles='formTableValue' colspan='3'>"+
            "       <div styles='formItemSpan' item='sectionVisiableCompany'></div>"+
            "       <div styles='formItemSpan' item='sectionVisiableDepartment'></div>"+
            "       <div styles='formItemSpan' item='sectionVisiablePerson'></div>"+
            " </td>" +

            "</tr><tr>" +
            "   <td styles='formTableTitle' lable='subjectPublishAble' width='10%'></td>" +
            "   <td styles='formTableValue' item='subjectPublishAble' width='40%'></td>" +
            "   <td styles='formTableValue' width='50%' colspan='2'>"+
            "       <span item='subjectPublishCompanyButton'></span>"+
            "       <span item='subjectPublishDepartmentButton'></span>"+
            "       <span item='subjectPublishPersonButton'></span>"+
            "     </td>" +
            "</tr><tr>" +
            "   <td></td>"+
            "   <td styles='formTableValue' colspan='3'>"+
            "       <div styles='formItemSpan' item='subjectPublishCompany'></div>"+
            "       <div styles='formItemSpan' item='subjectPublishDepartment'></div>"+
            "       <div styles='formItemSpan' item='subjectPublishPerson'></div>"+
            " </td>" +

            "</tr><tr>" +
            "   <td styles='formTableTitle' lable='replyPublishAble'></td>" +
            "   <td styles='formTableValue' item='replyPublishAble'></td>" +
            "   <td styles='formTableValue' width='50%' colspan='2'>"+
            "       <span styles='formItemDiv' item='replyPublishCompanyButton'></span>"+
            "       <span styles='formItemDiv' item='replyPublishDepartmentButton'></span>"+
            "       <span styles='formItemDiv' item='replyPublishPersonButton'></span>"+
            "     </td>" +
            "</tr><tr>" +
            "   <td></td>"+
            "   <td styles='formTableValue' coldiv='3'>"+
            "       <div item='replyPublishCompany'></div>"+
            "       <div item='replyPublishDepartment'></div>"+
            "       <div item='replyPublishPerson'></div>"+
            " </td>" +

            "</tr><tr item='indexRecommendTr' style='"+ ( this.data.sectionVisiable == this.lp.byPermission  ? "display:none;" : "display:;" ) +"'>" +
            "   <td styles='formTableTitle' lable='indexRecommendable'></td>" +
            "   <td styles='formTableValue' item='indexRecommendable'></td>" +
            "   <td styles='formTableTitle' lable='indexRecommenPerson' style='"+ ( this.data.indexRecommendable == false  ? "display:none;" : "display:;" ) +"'></td>" +
            "   <td styles='formTableValue' item='indexRecommenPerson' style='"+ ( this.data.indexRecommendable == false ? "display:none;" : "display:;" ) +"'></td>" +

            "</tr><tr>" +
            "   <td styles='formTableTitle' lable='subjectNeedAudit' width='10%'></td>" +
            "   <td styles='formTableValue' item='subjectNeedAudit' width='40%'></td>" +
            "   <td styles='formTableTitle' lable='subjectAuditPerson' width='10%' style='"+ ( this.data.subjectNeedAudit == true  ? "display:;" : "display:none;" ) +"'></td>" +
            "   <td styles='formTableValue' item='subjectAuditPerson' width='40%' style='"+ ( this.data.subjectNeedAudit == true  ? "display:;" : "display:none;" ) +"'></td>" +

            "</tr><tr>" +
            "   <td styles='formTableTitle' lable='replyNeedAudit'></td>" +
            "   <td styles='formTableValue' item='replyNeedAudit'></td>" +
            "   <td styles='formTableTitle' lable='replyAuditPerson' style='"+ ( this.data.replyNeedAudit == true  ? "display:;" : "display:none;" ) +"'></td>" +
            "   <td styles='formTableValue' item='replyAuditPerson' style='"+ ( this.data.replyNeedAudit == true  ? "display:;" : "display:none;" ) +"'></td>" +
            "</tr>"
        "</table>"
        this.permissionContainer.set("html", html);

        var forumNames = [""];
        var forumIds = [""];

        this.app.restActions.listCategoryAllByAdmin( function( json ){
            json.data.each( function( d ){
                if( this.isNew ){
                    if( this.app.access.hasForumAdminAuthority( d ) ){
                        forumNames.push(d.forumName );
                        forumIds.push(d.id);
                    }
                }else{
                    forumNames.push(d.forumName );
                    forumIds.push(d.id);
                }
            }.bind(this))
        }.bind(this), null ,false)

        if( !this.data.typeCatagory ){
            this.data.typeCatagory = this.lp.typeCategorySelectValue.split("|");
        }else{
            this.data.typeCatagory = typeof this.data.typeCatagory == "string" ? this.data.typeCatagory.split("|") : this.data.typeCatagory;
        }
        MWF.xDesktop.requireApp("Template", "MForm", function () {
            this.form = new MForm(this.formTableArea, this.data, {
                style: "forum",
                isEdited: this.isEdited || this.isNew,
                itemTemplate: {
                    sectionName: {text: this.lp.sectionName, notEmpty: true},
                    forumId: {text: this.lp.owneForum, type : "select", "selectText" : forumNames, "selectValue" : forumIds , notEmpty: true, isEdited : function(){ return this.isNew }.bind(this)},

                    sectionVisiable: {text: this.lp.sectionVisiable, type : "select", selectValue : this.lp.sectionVisiableValue.split(","), event : {
                        change : function( it, ev ){
                            this.setItemStyle( it, "sectionVisiable" );
                            if( it.getValue() == this.lp.allPerson ){
                                this.formTableArea.getElements("[item='indexRecommendTr']")[0].setStyle("display","")
                            }else{
                                this.formTableArea.getElements("[item='indexRecommendTr']")[0].setStyle("display","none")
                            }
                        }.bind(this)
                    }},
                    sectionVisiableCompanyButton : { value : this.lp.selectCompany , type : "button", style : this.getButtonStyle("sectionVisiable"), event : {
                        click : function(it, ev){ this.explorer.explorer.parent.selectPerson( it.form.getItem("sectionVisiableCompany").getElements()[0], "company" , 0 )}.bind(this)
                    }},
                    sectionVisiableDepartmentButton : { value : this.lp.selectDepartment , type : "button", style : this.getButtonStyle("sectionVisiable"), event : {
                        click : function(it, ev){ this.explorer.explorer.parent.selectPerson( it.form.getItem("sectionVisiableDepartment").getElements()[0], "department" , 0 )}.bind(this)
                    }},
                    sectionVisiablePersonButton : { value : this.lp.selectPerson , type : "button", style : this.getButtonStyle("sectionVisiable"), event : {
                        click : function( it, ev ){
                            this.explorer.explorer.parent.selectPerson( it.form.getItem("sectionVisiablePerson").getElements()[0], "person" , 0 ) }.bind(this)
                    }},
                    sectionVisiableCompany : { type : "innerText", value : function(){ return this.getRoleMemberByCode("SECTION_GUEST_")["company"].join(",") }.bind(this), style : this.getContainerStyle("sectionVisiable") },
                    sectionVisiableDepartment : { type : "innerText", value : function(){ return this.getRoleMemberByCode("SECTION_GUEST_")["department"].join(",") }.bind(this), style : this.getContainerStyle("sectionVisiable") },
                    sectionVisiablePerson : { type : "innerText", value : function(){ return this.getRoleMemberByCode("SECTION_GUEST_")["person"].join(",") }.bind(this), style : this.getContainerStyle("sectionVisiable") },

                    subjectPublishAble: {text: this.lp.subjectPublishAble, type : "select", selectValue : this.lp.subjectPublishAbleValue.split(","), event : {
                        change : function( it, ev ){  this.setItemStyle( it, "subjectPublish" ); }.bind(this)
                    }},
                    subjectPublishCompanyButton : { value : this.lp.selectCompany , type : "button", style : this.getButtonStyle("subjectPublishAble"), event : {
                        click : function(it, ev){ this.explorer.explorer.parent.selectPerson( it.form.getItem("subjectPublishCompany").getElements()[0], "company" , 0 )}.bind(this)
                    }},
                    subjectPublishDepartmentButton : { value : this.lp.selectDepartment , type : "button", style : this.getButtonStyle("subjectPublishAble"), event : {
                        click : function(it, ev){ this.explorer.explorer.parent.selectPerson( it.form.getItem("subjectPublishDepartment").getElements()[0], "department" , 0 )}.bind(this)
                    }},
                    subjectPublishPersonButton : { value : this.lp.selectPerson , type : "button", style : this.getButtonStyle("subjectPublishAble"), event : {
                        click : function( it, ev ){
                            this.explorer.explorer.parent.selectPerson( it.form.getItem("subjectPublishPerson").getElements()[0], "person" , 0 ) }.bind(this)
                    }},
                    subjectPublishCompany : { type : "innerText", value : function(){ return this.getRoleMemberByCode("SECTION_SUBJECT_PUBLISHER_")["company"].join(",") }.bind(this), style : this.getContainerStyle("subjectPublishAble") },
                    subjectPublishDepartment : { type : "innerText", value : function(){ return this.getRoleMemberByCode("SECTION_SUBJECT_PUBLISHER_")["department"].join(",") }.bind(this), style : this.getContainerStyle("subjectPublishAble") },
                    subjectPublishPerson : { type : "innerText", value : function(){ return this.getRoleMemberByCode("SECTION_SUBJECT_PUBLISHER_")["person"].join(",") }.bind(this), style : this.getContainerStyle("subjectPublishAble") },

                    replyPublishAble: {text: this.lp.replyPublishAble, type : "select", selectValue : this.lp.replyPublishAbleValue.split(","), event : {
                        change : function( it, ev ){  this.setItemStyle( it, "replyPublish" ); }.bind(this)
                    }},
                    replyPublishCompanyButton : { value : this.lp.selectCompany , type : "button", style : this.getButtonStyle("replyPublishAble"), event : {
                        click : function(it, ev){ this.explorer.explorer.parent.selectPerson( it.form.getItem("replyPublishCompany").getElements()[0], "company" , 0 )}.bind(this)
                    }},
                    replyPublishDepartmentButton : { value : this.lp.selectDepartment , type : "button", style : this.getButtonStyle("replyPublishAble"), event : {
                        click : function(it, ev){ this.explorer.explorer.parent.selectPerson( it.form.getItem("replyPublishDepartment").getElements()[0], "department" , 0 )}.bind(this)
                    }},
                    replyPublishPersonButton : { value : this.lp.selectPerson , type : "button", style : this.getButtonStyle("replyPublishAble"), event : {
                        click : function( it, ev ){
                            this.explorer.explorer.parent.selectPerson( it.form.getItem("replyPublishPerson").getElements()[0], "person" , 0 ) }.bind(this)
                    }},
                    replyPublishCompany : { type : "innerText", value : function(){ return this.getRoleMemberByCode("SECTION_REPLY_PUBLISHER_")["company"].join(",") }.bind(this), style : this.getContainerStyle("replyPublishAble") },
                    replyPublishDepartment : { type : "innerText", value : function(){ return this.getRoleMemberByCode("SECTION_REPLY_PUBLISHER_")["department"].join(",") }.bind(this), style : this.getContainerStyle("replyPublishAble") },
                    replyPublishPerson : { type : "innerText", value : function(){ return this.getRoleMemberByCode("SECTION_REPLY_PUBLISHER_")["person"].join(",") }.bind(this), style : this.getContainerStyle("replyPublishAble") },

                    indexRecommendable: {text: this.lp.indexRecommendable, type : "select", selectValue : ["true","false"], selectText : this.lp.yesOrNo.split(",") , defaultValue : "true" ,event : {
                        change : function( it, ev ){
                            var styles = it.getValue() == "true" ? {"display":""} : {"display":"none"};
                            this.permissionContainer.getElements("[item='indexRecommenPerson']")[0].setStyles( styles );
                            this.permissionContainer.getElements("[lable='indexRecommenPerson']")[0].setStyles( styles );
                        }.bind(this)
                    }},
                    indexRecommenPerson : { text: this.lp.indexRecommenPerson , tType : "person", count : 0, value : function(){
                        var v = this.getRoleMemberByCode("SECTION_RECOMMENDER_")["person"].join(",");
                        return v == "" ? this.app.userName : v;
                    }.bind(this)},

                    subjectNeedAudit: {text: this.lp.subjectNeedAudit, type : "select", selectValue : ["true","false"], selectText : this.lp.yesOrNo.split(","), defaultValue : "false" ,event : {
                        change : function( it, ev ){
                            var styles = it.getValue() == "true" ? {"display":""} : {"display":"none"};
                            this.permissionContainer.getElements("[item='subjectAuditPerson']")[0].setStyles( styles );
                            this.permissionContainer.getElements("[lable='subjectAuditPerson']")[0].setStyles( styles );
                        }.bind(this)
                    }},
                    subjectAuditPerson : { text: this.lp.auditPerson , tType : "person", count : 0, value : function(){ return this.getRoleMemberByCode("SECTION_SUBJECT_AUDITOR_")["person"].join(",") }.bind(this) },

                    replyNeedAudit: {text: this.lp.replyNeedAudit, type : "select", selectValue : ["true","false"], selectText : this.lp.yesOrNo.split(",") , defaultValue : "false" ,event : {
                        change : function( it, ev ){
                            var styles = it.getValue() == "true" ? {"display":""} : {"display":"none"};
                            this.permissionContainer.getElements("[item='replyAuditPerson']")[0].setStyles( styles );
                            this.permissionContainer.getElements("[lable='replyAuditPerson']")[0].setStyles( styles );
                        }.bind(this)
                    }},
                    replyAuditPerson : { text: this.lp.auditPerson , tType : "person", count : 0, value : function(){ return this.getRoleMemberByCode("SECTION_REPLY_AUDITOR_")["person"].join(",") }.bind(this) },

                    moderatorNames : {text:this.lp.moderatorNames, tType:"person", count : 0,  defaultValue : this.app.userName },
                    sectionType : {text: this.lp.sectionType, type : "select", selectValue : this.lp.sectionTypeValue.split(",") },
                    //sectionCreateAble: {text: this.lp.sectionCreateAble, type : "select", selectValue : ["true","false"], selectText : this.lp.yesOrNo.split(",")  },
                    creatorName: {text: this.lp.creatorName, type : "innerText", "defaultValue" : this.app.userName },
                    createTime: {text: this.lp.createTime, type : "innerText" },
                    sectionStatus: {text: this.lp.sectionStatus, type : "select", selectValue : this.lp.sectionStatusValue.split(",") },
                    orderNumber: {text: this.lp.orderNumber, tType : "number" },
                    subjectType: {text: this.lp.subjectType, defaultValue : this.lp.subjectTypeDefaultValue },
                    typeCatagory: {text: this.lp.typeCatagory, selectValue : this.lp.typeCategorySelectValue.split("|"),  type : "checkbox", notEmpty : true},
                    sectionDescription : {text: this.lp.sectionDescription, type: "textarea", style:{"height":"45px"} },
                    sectionNotice: {text: this.lp.sectionNotice, type: "rtf", RTFConfig : { skin : "bootstrapck" } },
                    sectionIcon : { text : this.lp.sectionIcon }
                }
            }, this.app);
            this.form.load();

            this.createIconNode();


        }.bind(this), true);
    },
    saveRole : function( id, callback ){
        var data = this.form.getResult(true, ",", true, false, true);
        if( this.isNew )data.id = id;

        this.saveRoleMember( true,  "moderatorNames" ,"SECTION_MANAGER_", data, true );

        var flag = data.sectionVisiable != this.lp.allPerson;
        this.saveRoleMember( flag,  "sectionVisiable" ,"SECTION_GUEST_", data )

        flag = data.subjectPublishAble != this.lp.allPerson;
        this.saveRoleMember( flag,  "subjectPublish" ,"SECTION_SUBJECT_PUBLISHER_", data )

        flag = data.replyPublishAble != this.lp.allPerson;
        this.saveRoleMember( flag,  "replyPublish" ,"SECTION_REPLY_PUBLISHER_", data )

        flag = data.indexRecommendable == "true";
        this.saveRoleMember( flag,  "indexRecommenPerson" ,"SECTION_RECOMMENDER_", data, true );

        flag = data.subjectNeedAudit == "true";
        this.saveRoleMember( flag,  "subjectAuditPerson" ,"SECTION_SUBJECT_AUDITOR_", data, true );

        flag = data.replyNeedAudit == "true";
        this.saveRoleMember( flag,  "replyAuditPerson" ,"SECTION_REPLY_AUDITOR_", data, true );

        if( callback )callback();
    },
    saveRoleMember : function( flag, dataKey, code, data , isSingle, callback ){
        var orgArray = [];
        if( flag ){
            if( isSingle ){
                if( data[ dataKey ] ){
                    data[ dataKey ].split(",").each( function( p ){
                        if( p!= "") orgArray.push( { objectName : p, objectType : "人员" } );
                    })
                }
            }else{
                if( data[ dataKey + "Person" ] ){
                    data[ dataKey + "Person" ].split(",").each( function( p ){
                        if( p!= "") orgArray.push( { objectName : p, objectType : "人员" } );
                    })
                }
                if( data[ dataKey + "Department" ] ) {
                    data[dataKey + "Department"].split(",").each(function (p) {
                        if (p != "") orgArray.push({objectName: p, objectType: "部门"});
                    })
                }
                if( data[ dataKey + "Company" ] ) {
                    data[ dataKey + "Company" ].split(",").each( function( p ){
                        if( p!= "") orgArray.push( { objectName : p, objectType : "公司" } );
                    })
                }
            }
        }
        var d = {
            bindObjectArray : orgArray,
            bindRoleCode : code + this.data.id
        };
        this.app.restActions.bindRole( d, function( rData ){
            if( callback )callback(json);
        }.bind(this))
    },
    getRoleMemberByCode : function( code ){
        if( !this.RoleMember )this.RoleMember = {};
        if( this.RoleMember[ code ] ){
            return this.RoleMember[ code ];
        }
        var r =  {
            company : [],
            department : [],
            person : []
        };
        if( !this.data.id ){
            return r;
        }
        this.RoleMember[ code ] = r;
        if( this.data && this.data.id ){
            this.actions.listRoleMemberByCode( { "bindRoleCode" : code+ this.data.id }, function(json){
                json.data = json.data || [];
                json.data.each( function( d ){
                    if(d.objectType == "公司"){
                        r.company.push( d.objectName );
                    }else if(d.objectType == "部门"){
                        r.department.push( d.objectName );
                    }else{
                        r.person.push( d.objectName );
                    }
                }.bind(this) )
            }, function(){}, false );
        }
        //}
        return r;
    },
    getButtonStyle : function( key ){
        if( this.isEdited || this.isNew  ){
            return this.getContainerStyle( key )
        }else{
            return { display:"none"};
        }
    },
    getContainerStyle : function( key ){
        return (!this.data[key] ||(this.data[key] == this.lp.allPerson )) ? { display:"none"} : { display:""};
    },
    setItemStyle : function( it, preStr ){
        var styles = it.getValue() == this.lp.allPerson ? { display : "none" } : { display : "" };
        it.form.getItem(preStr + "PersonButton").setStyles( styles );
        it.form.getItem(preStr + "DepartmentButton").setStyles( styles );
        it.form.getItem(preStr + "CompanyButton").setStyles( styles );
        it.form.getItem(preStr + "Person").setStyles( styles );
        it.form.getItem(preStr + "Department").setStyles( styles );
        it.form.getItem(preStr + "Company").setStyles( styles );
    },
    createIconNode: function(){
        var iconPth = "/x_component_Forum/$Setting/"+ this.options.style +"/sectionIcon/";
        var defaultIconSrc = iconPth + "forum_icon.png";
        var sectionIconArea = this.formTableArea.getElements("[item='sectionIconArea']")[0];
        this.iconNode = new Element("img",{
            "styles" : this.css.iconNode
        }).inject(sectionIconArea);
        if (this.data.icon){
            this.iconNode.set("src", "data:image/png;base64,"+this.data.icon+"");
        }else{
            this.iconNode.set("src", defaultIconSrc)
        }
        if( this.isEdited || this.isNew ){
            //var selectIconActionNode = new Element("div", {
            //    "styles": this.css.changeIconActionNode,
            //    "text": this.lp.selectIcon
            //}).inject(sectionIconArea);
            //selectIconActionNode.addEvent("click", function () {
            //    this.selectIcon();
            //}.bind(this));

            var changeIconActionNode = new Element("div", {
                "styles": this.css.changeIconActionNode,
                "text": this.lp.uploadIcon
            }).inject(sectionIconArea);
            changeIconActionNode.addEvent("click", function () {
                this.changeIcon();
            }.bind(this));
        }

    },
    selectIcon: function(){
        var form = new MWF.xApplication.Forum.Setting.SectionIconForm(this, {}, {
            onPostOk : function( icon ){
                if( this.formData )this.formData = null;
                this.iconNode.set("src",icon.path );
            }.bind(this)
        })
        form.edit();
    },
    changeIcon: function () {
        if (!this.uploadFileAreaNode) {
            this.uploadFileAreaNode = new Element("div");
            var html = "<input name=\"file\" type=\"file\"/>";
            this.uploadFileAreaNode.set("html", html);

            this.fileUploadNode = this.uploadFileAreaNode.getFirst();
            this.fileUploadNode.addEvent("change", function () {

                var files = fileNode.files;
                if (files.length) {
                    for (var i = 0; i < files.length; i++) {
                        var file = files.item(i);
                        if (!file.type.match('image.*'))continue;

                        this.file = file;
                        this.formData = new FormData();
                        this.formData.append('file', this.file);

                        if (!window.FileReader) continue;
                        var reader = new FileReader();
                        reader.onload = (function (theFile) {
                            return function (e) {
                                this.iconNode.set("src",e.target.result)
                            }.bind(this);
                        }.bind(this))(file);
                        reader.readAsDataURL(file);
                    }
                }

            }.bind(this));
        }
        var fileNode = this.uploadFileAreaNode.getFirst();
        fileNode.click();
    },
    saveIcon: function (id, callback) {
        this.app.restActions.uploadSectionIcon(id, function () {
            if (callback)callback();
        }.bind(this), null, this.formData, this.file);
    },
    _ok: function (data, callback) {
        data.sectionLevel = "主版块";
        data.typeCatagory = data.typeCatagory.split(",").join("|");
        this.app.restActions.saveSection( data, function(json){
            if( this.formData ){
                this.saveIcon( json.data.id, function(){
                    this.saveRole( json.data.id, function( data ){
                        if( callback )callback(json);
                    }.bind(this) )
                }.bind(this) );
            }else{
                this.saveRole( json.data.id, function( data ){
                    if( callback )callback(json);
                }.bind(this) )
            }
            this.fireEvent("postOk")
        }.bind(this));
    },
    setFormNodeSize: function (width, height, top, left) {
        if (!width)width = this.options.width ? this.options.width : "50%"
        if (!height)height = this.options.height ? this.options.height : "50%"
        if (!top) top = this.options.top ? this.options.top : 0;
        if (!left) left = this.options.left ? this.options.left : 0;

        var allSize = this.app.content.getSize();
        var limitWidth = allSize.x; //window.screen.width
        var limitHeight = allSize.y; //window.screen.height

        "string" == typeof width && (1 < width.length && "%" == width.substr(width.length - 1, 1)) && (width = parseInt(limitWidth * parseInt(width, 10) / 100, 10));
        "string" == typeof height && (1 < height.length && "%" == height.substr(height.length - 1, 1)) && (height = parseInt(limitHeight * parseInt(height, 10) / 100, 10));
        300 > width && (width = 300);
        220 > height && (height = 220);

        top = top || parseInt((limitHeight - height) / 2, 10); //+appTitleSize.y);
        left = left || parseInt((limitWidth - width) / 2, 10);

        this.formAreaNode.setStyles({
            "width": "" + width + "px",
            "height": "" + height + "px",
            "top": "" + top + "px",
            "left": "" + left + "px"
        });

        this.formNode.setStyles({
            "width": "" + width + "px",
            "height": "" + height + "px"
        });

        var iconSize = this.formIconNode ? this.formIconNode.getSize() : {x: 0, y: 0};
        var topSize = this.formTopNode ? this.formTopNode.getSize() : {x: 0, y: 0};
        var bottomSize = this.formBottomNode ? this.formBottomNode.getSize() : {x: 0, y: 0};
        var toolbarSize = this.toolbar ? this.toolbar.getSize() : {x: 0, y: 0};

        var contentHeight = height - iconSize.y - topSize.y - bottomSize.y - toolbarSize.y;
        //var formMargin = formHeight -iconSize.y;
        this.formContentNode.setStyles({
            "height": "" + contentHeight + "px"
        });
        this.formTableContainer.setStyles({
            "height": "" + contentHeight + "px"
        });
    }
});

MWF.xApplication.Forum.Setting.SectionIconForm = new Class({
    Extends: MWF.xApplication.Template.Explorer.PopupForm,
    Implements: [Options, Events],
    options: {
        "style": "default",
        "width": "650",
        "height": "400",
        "hasTop": true,
        "hasIcon": false,
        "hasTopIcon" : true,
        "hasTopContent" : true,
        "hasBottom": false,
        "title": MWF.xApplication.Forum.LP.sectionIconFormTitle,
        "draggable": true,
        "closeAction": true
    },
    _createTableContent: function () {
        var iconPath = "/x_component_Forum/$Setting/" + this.options.style +"/sectionIcon/";
        var jsonPath = "/x_component_Forum/$Setting/sectionIcon.json";

        var div = new Element("div",{
            "styles" : this.css.sectionFormContent
        }).inject(this.formTableArea);

        MWF.getJSON(jsonPath, function(json){
            json.icons.each(function(iconName, i){
                var iconAreaNode = new Element("div",{
                    "styles" : this.css.iconAreaNode
                }).inject(div);
                var iconNode = new Element("img",{
                    "styles" : this.css.iconSelectNode,
                    "src" : iconPath + iconName
                }).inject(iconAreaNode);

                iconAreaNode.store( "iconName", iconName );
                iconAreaNode.store( "iconPath", iconPath + iconName );
                iconAreaNode.addEvents({
                    "mouseover" : function(){
                        this.node.setStyles( this.obj.css.iconAreaNodeOver )
                    }.bind({ obj : this, node : iconAreaNode }),
                    "mouseout" : function(){
                        this.node.setStyles( this.obj.css.iconAreaNode )
                    }.bind({ obj : this, node : iconAreaNode }),
                    "click" : function(){
                        var icon = {
                            "path": this.node.retrieve("iconPath"),
                            "name": this.node.retrieve("iconName")
                        }
                        this.obj.fireEvent("postOk", icon );
                        this.obj.close();
                    }.bind({ obj : this, node : iconAreaNode })
                })
            }.bind(this));
        }.bind(this));
    }
});

MWF.xApplication.Forum.Setting.SystemSettingExplorer = new Class({
    Extends: MWF.widget.Common,
    Implements: [Options, Events],
    options: {
        "style": "default"
    },
    initialize: function (container, app, parent, options) {
        this.container = container;
        this.parent = parent;
        this.app = app;
        this.css = this.parent.css;
        this.lp = this.app.lp;
    },
    load: function () {
        this.container.empty();
        this.loadView();
    },
    destroy : function(){
        if(this.resizeWindowFun)this.app.removeEvent("resize",this.resizeWindowFun)
        this.view.destroy();
    },
    loadView : function(){
        this.viewContainer = Element("div",{
            "styles" : this.css.viewContainer
        }).inject(this.container);

        this.resizeWindow();
        this.resizeWindowFun = this.resizeWindow.bind(this)
        this.app.addEvent("resize", this.resizeWindowFun );

        this.view = new MWF.xApplication.Forum.Setting.SystemSettingView( this.viewContainer, this.app, this, {
            templateUrl : this.parent.path+"listItemSystem.json",
            scrollEnable : true
        } )
        this.view.load();
    },
    resizeWindow: function(){
        var size = this.container.getSize();
        this.viewContainer.setStyles({"height":(size.y)+"px"});
    }
})

MWF.xApplication.Forum.Setting.SystemSettingView = new Class({
    Extends: MWF.xApplication.Template.Explorer.ComplexView,
    _createDocument: function(data){
        return new MWF.xApplication.Forum.Setting.SystemSettingDocument(this.viewNode, data, this.explorer, this);
    },

    _getCurrentPageData: function(callback, count){
        if (!count)count = 20;
        //var id = (this.items.length) ? this.items[this.items.length - 1].data.id : "(0)";
        //var filter = this.filterData || {};
        this.actions.listSystemSettingAll(function (json) {
            if (callback)callback(json);
        }.bind(this))
    },
    _removeDocument: function(documentData, all){

    },
    _openDocument: function( documentData ){
        var form = new MWF.xApplication.Forum.Setting.SystemSettingForm(this, documentData, {
            onPostOk : function(){
                this.reload();
            }.bind(this)
        })
        if( MWF.AC.isAdministrator() ){
            form.edit();
        }else{
            form.open();
        }
    }

})

MWF.xApplication.Forum.Setting.SystemSettingDocument = new Class({
    Extends: MWF.xApplication.Template.Explorer.ComplexDocument,
    _queryCreateDocumentNode:function( itemData ){
    },
    _postCreateDocumentNode: function( itemNode, itemData ){

    }
})

MWF.xApplication.Forum.Setting.SystemSettingForm = new Class({
    Extends: MWF.xApplication.Template.Explorer.PopupForm,
    Implements: [Options, Events],
    options: {
        "style": "default",
        "width": "600",
        "height": "320",
        "hasTop": true,
        "hasIcon": false,
        "hasTopIcon" : true,
        "hasTopContent" : true,
        "hasBottom": true,
        "title": MWF.xApplication.Forum.LP.systemSettingFormTitle,
        "draggable": true,
        "closeAction": true
    },
    _createTableContent: function () {
        var html = "<table width='100%' bordr='0' cellpadding='5' cellspacing='0' styles='formTable'>" +
            "<tr><td styles='formTableTitle' lable='configName' width='20%'></td>" +
            "    <td styles='formTableValue' item='configName' width='80%'></td></tr>" +
            "<tr><td styles='formTableTitle' lable='configValue'></td>" +
            "    <td styles='formTableValue' item='configValue'></td></tr>" +
            "<tr><td styles='formTableTitle' lable='orderNumber'></td>" +
            "    <td styles='formTableValue' item='orderNumber'></td></tr>" +
            "<tr><td styles='formTableTitle' lable='description'></td>" +
            "    <td styles='formTableValue' item='description'></td></tr>" +
            "</table>"
        this.formTableArea.set("html", html);

        var configValueSetting = {text: this.lp.configValue };
        configValueSetting.tType = "text";

        MWF.xDesktop.requireApp("Template", "MForm", function () {
            this.form = new MForm(this.formTableArea, this.data, {
                style: "execution",
                isEdited: this.isEdited || this.isNew,
                itemTemplate: {
                    configName: {text: this.lp.configName, type : "innerText" },
                    configValue : configValueSetting,
                    orderNumber: {text: this.lp.orderNumber, type : "innerText" },
                    description: {text: this.lp.description, type : "innerText" }
                }
            }, this.app);
            this.form.load();
        }.bind(this), true);
    },
    _ok: function (data, callback) {
        this.app.restActions.saveSystemSetting( data, function(json){
            if( callback )callback(json);
            this.fireEvent("postOk")
        }.bind(this));
    }
});



MWF.xApplication.Forum.Setting.SelectOrgForm = new Class({
    Extends: MWF.xApplication.Template.Explorer.PopupForm,
    Implements: [Options, Events],
    options: {
        "style": "default",
        "width": "900",
        "height": "230",
        "hasTop": true,
        "hasIcon": false,
        "hasTopIcon" : true,
        "hasTopContent" : true,
        "hasBottom": true,
        "title": MWF.xApplication.Forum.LP.SelectOrgForm,
        "draggable": true,
        "closeAction": true
    },
    _createTableContent: function () {
        var html = "<table width='100%' bordr='0' cellpadding='5' cellspacing='0' styles='formTable'>" +
            "<tr><td styles='formTableTitle' lable='person' width='15%'></td>" +
            "    <td styles='formTableValue' item='person' colspan='3' width='85%'></td></tr>" +
            "<tr><td styles='formTableTitle' lable='department'></td>" +
            "    <td styles='formTableValue' item='department' colspan='3'></td></tr>" +
            "<tr><td styles='formTableTitle' lable='company'></td>" +
            "    <td styles='formTableValue' item='company' colspan='3'></td></tr>" +
            "</table>"
        this.formTableArea.set("html", html);

        MWF.xDesktop.requireApp("Template", "MForm", function () {
            this.form = new MForm(this.formTableArea, this.data, {
                style: "forum",
                isEdited: this.isEdited || this.isNew,
                itemTemplate: {
                    person: {text: this.lp.selectPerson, tType: "person", count: 0},
                    department: {text: this.lp.selectDepartment, tType: "department", count: 0},
                    company: {text: this.lp.selectCompany, tType: "company", count: 0}
                }
            }, this.app);
            this.form.load();
        }.bind(this), false);
    },
    _ok: function (data, callback) {
        var orgArray = [];
        data.person.split(",").each( function( p ){
            orgArray.push( p+"#人员" )
        })
        data.department.split(",").each( function( p ){
            orgArray.push( p+"#组织" )
        })
        data.company.split(",").each( function( p ){
            orgArray.push( p+"#组织" )
        })
        this.app.restActions.saveRole( data, function(json){
            this.app.restActions.getRole( data.id, function( j ){
                var roleData = {
                    bindObjectArray : orgArray,
                    bindRoleCode : j.roleCode
                };
                this.app.restActions.bindRole( roleData, function( rData ){
                    if( callback )callback(json);
                    this.fireEvent("postOk")
                }.bind(this))
            })

        }.bind(this));
    }
});