<div id="speeddate">

    <h1>Speed Dating With Attributes</h1>

    <div id="john">
        <button type="button" class="hi">Hi I'm John</button>
        <button type="button" class="taken" disabled="disabled">I like Jane</button>
        <div class="shirt"></div>
    </div>

    <div id="jane">
        <button type="button" disabled="disabled" class="hi">Hey, I'm Jane</button>
        <button type="button" class="upgrade" disabled="disabled">No way!, I save whales too!</button>
        <button type="button" class="taken" disabled="disabled">I like John</button>
        <div class="shirt"></div>
    </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 SpeedDater(cfg) {

        // When constructed, setup the initial attributes for the
        // instance, by calling the addAttrs method.

        var attrs = {
            // Add 3 attributes: name, personality, available
            name : {
                writeOnce:true
            },
    
            personality : {
                value:50
            },
    
            available : {
                value:true
            }
        };

        this.addAttrs(attrs, cfg);
    }

    // Setup static property to hold attribute config

    SpeedDater.NAMETAG = '<div class="sd-nametag"><div class="sd-hd">Hello!</div><div class="sd-bd">I\'m <span class="sd-name">{name}</span> and my PersonalityQuotientIndex is <span class="sd-personality">{personality}</span></div><div class="sd-ft sd-availability">{available}</div></div>';

    SpeedDater.prototype.applyNameTag = function(where) {

        var tokens = {
            name: this.get("name"),
            available: (this.get("available")) ? "I'm still looking" : "Sorry, I'm taken",
            personality: this.get("personality")
        };

        var str = Y.Lang.sub(SpeedDater.NAMETAG, tokens);
        this.nameTag = Y.Node.create(str);
        Y.one(where).appendChild(this.nameTag);
    };

    SpeedDater.prototype.updateNameTag = function() {

        var taken = (this.get("available")) ? "I'm still looking" : "Sorry, I'm taken";
        var name = this.get("name");
        var personality = this.get("personality");

        this.nameTag.one(".sd-name").set("innerHTML", name);
        this.nameTag.one(".sd-availability").set("innerHTML", taken);

        var personalityEl = this.nameTag.one(".sd-personality"); 
        personalityEl.set("innerHTML", personality);

        if (personality > 90) {
            personalityEl.addClass("sd-max");
        }
    }

    // Augment custom class with Attribute
    Y.augment(SpeedDater, Y.Attribute);
    
    var john, jane;

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

        if (!john) {

            // Set both name and personality during construction 
            john = new SpeedDater({
                name: "John",
                personality: 76.43
            });
            john.applyNameTag("#john .shirt");

            Y.one("#jane .hi").set("disabled", false); 
        }

    }, "#john .hi");

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

        if (!jane) {

            // Set name during construction
            jane = new SpeedDater({
                name: "Jane"
            });

            // Set personality after construction
            jane.set("personality", 82);

            jane.applyNameTag("#jane .shirt");

            Y.all("#jane button").set("disabled", false);
            Y.all("#john button").set("disabled", false); 
        }

    }, "#jane .hi");

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

        john.set("available", false);
        john.updateNameTag();
        
    }, "#john .taken");

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

        jane.set("available", false);
        jane.updateNameTag();

    }, "#jane .taken");

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

        jane.set("personality", 98);
        jane.updateNameTag();

    }, "#jane .upgrade");

 });
</script>
