<div id="createo1">
    <button type="button" class="do">Create First Instance</button> Construct o1, with default attribute values
    <div class="example-out"></div>
</div>
<div id="updateo1">
    <button type="button" class="do">Update First Instance</button> Update the first instance, using set
    <div class="example-out"></div>
</div>
<div id="createo2">
    <button type="button" class="do">Create Second Instance</button> Create the second instance, passing initial values to the constructor
    <div class="example-out"></div>
</div>

<script type="text/javascript">

// Get a new instance of YUI and
// load it with the required set of modules

YUI().use("node", "attribute", function(Y) {

    // Setup custom class which we want to
    // add managed attribute support to

    function MyClass(cfg) {

        // When constructed, setup the initial attributes for the instance, by calling the addAttrs method.
        var attrs = {
            // Add 3 attributes, foo, bar and foobar
            "foo" : {
                value:5
            },

            "bar" : {
                value:"Hello World!"
            },

            "foobar" : {
                value:true
            }
        };

        this.addAttrs(attrs, cfg);
    }

    // Augment custom class with Attribute
    Y.augment(MyClass, Y.Attribute);

    function displayValues(o, title, node) {
        var str =
            '<div class="myclass"><div class="myclass-title">'
            + title +
            '</div><ul class="myclass-attrs"><li>foo: '
            + o.get("foo")
            + '</li><li>bar: '
            + o.get("bar")
            + '</li><li>foobar: '
            + o.get("foobar")
            + '</li></ul></div>';

        Y.one(node).set("innerHTML", str);
    }

    Y.on("click", function() {

        // Create a new instance, but don't provide any initial attribute values.
        var o1 = new MyClass();

        // Display current values
        displayValues(o1, "o1 with default values, set during construction", "#createo1 .example-out");

        Y.on("click", function() {

            // Update values, using the "set" method
            o1.set("foo", 10);
            o1.set("bar", "Hello New World!");
            o1.set("foobar", false);

            displayValues(o1, "o1 values updated using set, after construction", "#updateo1 .example-out");

        }, "#updateo1 .do");

    }, "#createo1 .do");

    Y.on("click", function() {

        var o2 = new MyClass({
            foo: 7,
            bar: "Aloha World!",
            foobar: false
        });

        displayValues(o2, "o2 values set during construction", "#createo2 .example-out");

    }, "#createo2 .do");
});
</script>
