PopoutHelp

Help setting the options of the popout widget from the dialog extension

by Keelz

HTML

<body>
    <div id="body-container">
		<h1>PopOut Plugin</h1>
        <div id="jquery-container">
            <div id="popOutContainer" title="Usefull Stuff">
                <p>Hello1</p>
            </div>
        </div>
    </div>
</body>

JavaScript

(function( $ ) {
   
    //Start of my widget
    $.widget( "window.popOut", {

        options: {
            viewState: 1
            //Declaring the initial options value
        },

        _create: function() {
            this._openDialog();
        },

        _setOption: function( key, value ) {
            this.options[ key ] = value;
        },
        //My open button
        _openDialog: function(){
            var self = this;
            this.testButton = $('<button></button>')
                .addClass('testGateStateButton')
                .click(function(){
                    self._setOption( "viewState" , 2);
                    //viewState option changed to 2
                    self._createPopOutWindow();
                    
                })
                .appendTo('#body-container');
        },

        //creation of dialog box
        _createPopOutWindow: function(){
            $(this.element).dialog({
                    options: {
                    },
                    autoOpen: true,
                    title:'',
                    dialogClass: "no-close",
                    position: {
                        my: "center",
                        at: "center",
                        of: $("body") },
                    create: function(event, ui) {

                    }
                }
            );
        },
        destroy: function() {
            // Call the base destroy function.
            $.Widget.prototype.destroy.call( this );
        },

        setView: function(viewStatePar){
            self._setOption( "viewState" , viewStatePar);
            

        }

    });

    //adding another button to the Dialog box title in the dialog init function
    var _init = $.ui.dialog.prototype._init;
    $.ui.dialog.prototype._init = function() {
        var self = this;
        var dialog_id = this.uiDialogTitlebar.next().attr('id');
        _init.apply(this, arguments);
        this.uiDialogTitlebar.append('<button...