$.jsPanel( options );

// or
var myPanel = $.jsPanel( options );

$.jsPanel({
	position: {
    	my: "left-top",
        at: "left-top"
    },
    contentSize: {
    	width:  600,
        height: 350
    },
    contentAjax: {
    	url:  // some url,
        done: function (data, textStatus, jqXHR, panel) {
        	// the keyword "this" inside the function refers to the panel
        },
        fail: function (jqXHR, textStatus, errorThrown, panel) {
        	//the keyword "this" inside the function refers to the panel
        }
    },
    headerTitle: "my example jsPanel",
    theme:       "rebeccapurple",
    callback: function (panel) {
    	// do whatever you like
        // the keyword "this" inside the callback function refers to the panel
    }
});

$.jsPanel.defaults = {
    autoclose: false,
    border: false,
    callback: false,
    container: 'body',
    content: false,
    contentAjax: false,
    contentIframe: false,
    contentOverflow: 'hidden',
    contentSize: {
        width: 400,
        height: 200
    },
    custom: false,
    dblclicks: false,
    draggable: {
        handle: 'div.jsPanel-hdr, div.jsPanel-ftr',
        opacity: 0.8
    },
    dragit: {
        axis:        false,
        containment: false,
        handles:     '.jsPanel-titlebar, .jsPanel-ftr.active',
        opacity:     0.8,
        start:       false,
        drag:        false,
        stop:        false,
        disableui:   false
    },
    footerToolbar: false,
    headerControls: {
        buttons: true,
        iconfont: 'jsglyph',
        close: false,
        maximize: false,
        minimize: false,
        normalize: false,
        smallify: false
    },
    headerLogo: false,
    headerRemove: false,
    headerTitle: 'jsPanel',
    headerToolbar: false,
    id: () => `jsPanel-${jsPanel.ID += 1}`,
    maximizedMargin: {
        top: 5,
        right: 5,
        bottom: 5,
        left: 5
    },
    minimizeTo: true,
    onbeforeclose: false,
    onbeforemaximize: false,
    onbeforeminimize: false,
    onbeforenormalize: false,
    onbeforesmallify: false,
    onbeforeunsmallify: false,
    onclosed: false,
    onmaximized: false,
    onminimized: false,
    onnormalized: false,
    onbeforeresize: false,
    onresized: false,
    onsmallified: false,
    onunsmallified: false,
    onfronted: false,
    onwindowresize: false,
    position: {
        my: 'center',
        at: 'center'
    },
    resizable: {
        handles: 'n, e, s, w, ne, se, sw, nw',
        autoHide: false,
        minWidth: 40,
        minHeight: 40
    },
    resizeit: {
        containment: false,
        handles:     'n, e, s, w, ne, se, sw, nw',
        minWidth:    40,
        minHeight:   40,
        maxWidth:    10000,
        maxHeight:   10000,
        start:       false,
        resize:      false,
        stop:        false,
        disableui:   false
    },
    rtl: false,
    setstatus: false,
    show: false,
    template: false,
    theme: 'default'
};

// deviating defaults for modal jsPanels
$.jsPanel.modaldefaults = {
    draggable: 'disabled',
    dragit: false,
    headerControls: {controls: 'closeonly'},
    position: 'center',
    resizable: 'disabled',
    resizeit: false,
    onwindowresize: true,
};

// deviating defaults for jsPanel tooltips
$.jsPanel.tooltipdefaults = {
    draggable: 'disabled',
    dragit: false,
    headerControls: {buttons: 'closeonly'},
    position: {fixed: false},
    resizable: disabled,
    resizeit: false,
};

// deviating defaults for jsPanel hints
$.jsPanel.hintdefaults = {
    autoclose: 8000,
    draggable: 'disabled',
    dragit: false,
    headerControls: {buttons: 'closeonly'},
    resizable: 'disabled',
    resizeit: false,
};