<script type="text/javascript">
// Create a YUI instance and request the console module and its dependencies
YUI().use("console", "console-filters", "dd-plugin", function (Y) {

// Create and render the three Console instances
var basic, newOnBottom, customStrings;

basic = new Y.Console({
    style: 'block' // keeps the Console in the page flow as a block element
}).render( '#basic' );

newOnBottom = new Y.Console({
    style: 'inline', // keeps the Console in the page flow as an inline element
    newestOnTop: false,
    visible: false
}).render( "#add_to_bottom" );

customStrings = new Y.Console({
    strings: {
        title : 'Draggable Console with filters!',
        pause : 'Wait',
        clear : 'Flush',
        collapse : 'Shrink',
        expand : 'Grow'
    },
    visible: false
}).plug(Y.Plugin.ConsoleFilters)
  .plug(Y.Plugin.Drag, { handles: ['.yui3-console-hd'] })
  .render('#demo');

// Set up the button listeners
function toggle(e,cnsl) {
    if (cnsl.get('visible')) {
        cnsl.hide();
        this.set('innerHTML','show console');
    } else {
        cnsl.show();
        cnsl.syncUI(); // to handle any UI changes queued while hidden.
        this.set('innerHTML','hide console');
    }
}

function report(e,type) {
    Y.log(this.get('value'),type);
    e.preventDefault();
}

// Display a message in the Console for reference
Y.log("Click the buttons below to log messages");

// Pass the corresponding Console instance to the handler as a second arg
Y.on('click', toggle, '#toggle_basic',    null, basic);
Y.on('click', toggle, '#toggle_atb',      null, newOnBottom);
Y.on('click', toggle, '#toggle_cstrings', null, customStrings);

// Set the context of the event handler to the input text node
// for convenience and pass the message type as a second arg
Y.on('click', report, '#info',  Y.one('#info_text'),  'info');
Y.on('click', report, '#warn',  Y.one('#warn_text'),  'warn');
Y.on('click', report, '#error', Y.one('#error_text'), 'error');

});
</script>
