<?php $this->headScript()->captureStart() ?>
YAHOO.util.Event.onDOMReady(function () {

//Datatable add row
Yagis.Datatable.prototype.addRow = function() {
    YAHOO.util.Connect.asyncRequest('POST', this.options.addDataUrl, {
        success: function (o) {
            try {
                var responseText = YAHOO.lang.JSON.parse(o.responseText);

                //Handle invalid reply code response
                if(responseText.replyCode != 200) {
                    return;
                }

                if(responseText.id != null) {
                    var options = {id: responseText.id};
                } else {
                    var options = {};
                }

                this.dt.addRow(options, 0);
            } catch (e) {

            }
        } ,
        failure: function(o) {

        } ,
        scope: this
        }
    );
};

var rolesArr = [
    <?php $i=0;?>
    <?php foreach ($this->roles as $role):?>
        <?php $i++;?>
        <?php if($i == count($this->roles)):?>
            "<?=$role->key?>"
        <?php else:?>
            "<?=$role->key?>",
        <?php endif;?>
    <?php endforeach;?>
];

var groupsArr = [
    <?php $i=0;?>
    <?php foreach ($this->groups as $group):?>
        <?php $i++;?>
        <?php if($i == count($this->groups)):?>
            "<?=$group?>"
        <?php else:?>
            "<?=$group?>",
        <?php endif;?>
    <?php endforeach;?>
];

//Rules
var rulesOptions = {
    fields : [
        "id" ,
        "role" ,
        "resource" ,
        "privilege" ,
        "group"
    ] ,
    columnDefs : [
        {key: "id", resizeable:true, sortable:true, width: 25, label: '<?=$this->translate('id')?>'} ,
        {
            key: "role" ,
            resizeable:true ,
            sortable:true ,
            editor: new YAHOO.widget.DropdownCellEditor({dropdownOptions: rolesArr}) ,
            width: 50 ,
            label: '<?=$this->translate('role')?>'
        } ,
        {key: "resource", resizeable:true, sortable:true, editor: "textbox", width: 200, label: '<?=$this->translate('resource')?>'} ,
        {key: "privilege", resizeable:true, sortable:true, editor: "textbox", width: 150, label: '<?=$this->translate('privilege')?>'} ,
        {
            key: "group" ,
            resizeable:true ,
            sortable:true ,
            editor: new YAHOO.widget.DropdownCellEditor({dropdownOptions: groupsArr, disableBtns:true}) ,
            width: 50,
            label: '<?=$this->translate('group')?>'
        }
    ],
    dataUrl : '<?=$this->url(array())?>/ruleget' ,
    addDataUrl : '<?=$this->url(array())?>/ruleadd' ,
    updateDataUrl : '<?=$this->url(array())?>/ruleupdate' ,
    deleteDataUrl : '<?=$this->url(array())?>/ruledelete' ,
    container : 'ruleContainer' ,
    rowsPerPage :  <?=$this->recordsPerPage?> ,
    keyColumn : 'id'
};

function Rules(options) {
    Rules.superclass.constructor.call(this, options);
};
YAHOO.lang.extend(Rules, Yagis.Datatable);

Rules.prototype.deleteButton = new YAHOO.widget.Button('rulesDeleteButton');
Rules.prototype.addButton = new YAHOO.widget.Button('rulesAddButton');

var rules = new Rules(rulesOptions);
rules.initialize();

//Roles
var rolesOptions = {
    fields : [
       "key" ,
        "extends"
    ] ,
    columnDefs : [
        {key: "key", resizeable:true, sortable:true, width: 50, label: '<?=$this->translate('key')?>'} ,
        {
            key: "extends" ,
            resizeable:true ,
            sortable:true ,
            editor: "textbox" ,
            width: 150 ,
            editor: new YAHOO.widget.CheckboxCellEditor({checkboxOptions: rolesArr}),
            label: '<?=$this->translate('extends')?>'
        }
    ],
    dataUrl : '<?=$this->url(array())?>/roleget' ,
    addDataUrl : '<?=$this->url(array())?>/roleadd' ,
    updateDataUrl : '<?=$this->url(array())?>/roleupdate' ,
    deleteDataUrl : '<?=$this->url(array())?>/roledelete' ,
    container : 'roleContainer' ,
    rowsPerPage :  <?=$this->recordsPerPage?> ,
    keyColumn : 'key'
};

function Roles(options) {
    Roles.superclass.constructor.call(this, options);
};
YAHOO.lang.extend(Roles, Yagis.Datatable);

//Add
Roles.prototype.addRow = function() {

    var handleNo = function() {
        this.addDialog.hide();
        Yagis.Util.destroyPanel(this.addDialog);
    };

    var handleYes = function() {

        var text = YAHOO.util.Dom.get('roleName').value;

        for(var i in rolesArr) {
            var role = rolesArr[i];
            if(role == text) {
                this.addDialog.hide();
                Yagis.Util.destroyPanel(this.addDialog);
                this.triggerError(ya.translate._('roleAlreadyExists'));
                return;
            }
        }

        if(text.length == 0) {
            this.addDialog.hide();
            Yagis.Util.destroyPanel(this.addDialog);
            this.triggerError(ya.translate._('nameEmpty'));
            return;
        }

        var url = this.options.addDataUrl + '/key/' + text;

        YAHOO.util.Connect.asyncRequest('GET', url, {
            success: function (o) {
                try {
                    var responseText = YAHOO.lang.JSON.parse(o.responseText);

                    //Handle invalid reply code response
                    if(responseText.replyCode != 200) {
                        this.triggerError(pObj.parseErrors(responseText.errors));
                        this.addDialog.hide();
                        Yagis.Util.destroyPanel(this.addDialog);
                        return;
                    }

                    window.location = '';

                } catch (e) {

                }
            } ,
            failure: function(o) {

            } ,
            scope: this
            }
        );

    }

    this.addDialog = new YAHOO.widget.SimpleDialog("simpledialog1",
         { width: "300px",
           fixedcenter: true,
           visible: true,
           draggable: true,
           close: true,
           text: '<label>' + ya.translate._('name') + '</label><input type="text" name="role_name" id="roleName" style="width: 200px;"/>',
           constraintoviewport: true,
           buttons: [ { text: ya.translate._('add'), handler: Yagis.Util.bind(handleYes, this), isDefault:true },
                      { text: ya.translate._('cancel') ,  handler: Yagis.Util.bind(handleNo, this) } ]
         }
    );

    this.addDialog.setHeader(ya.translate._('addNewRole'));
    this.addDialog.render("addDialog");

};

Roles.prototype.deleteButton = new YAHOO.widget.Button('rolesDeleteButton');
Roles.prototype.addButton = new YAHOO.widget.Button('rolesAddButton');

var roles = new Roles(rolesOptions);
roles.initialize();

});
<?php $this->headScript()->captureEnd()?>

<div id="aclContainer">
	<div style="float: left;">
		<strong><?=$this->translate('rules')?>:</strong>
		<div id="ruleContainer"></div>
		<button id="rulesAddButton"><?=$this->translate('add')?></button>
		<button id="rulesDeleteButton" disabled><?=$this->translate('deleteSelected')?></button>
	</div>

	<div style="float: right; width: 300px;">
		<strong><?=$this->translate('roles')?>:</strong>
		<div id="roleContainer"></div>
		<button id="rolesAddButton"><?=$this->translate('add')?></button>
		<button id="rolesDeleteButton" disabled><?=$this->translate('deleteSelected')?></button>
	</div>
</div>
<div id="addDialog"></div>
<div id="errorPanel">
</div>