<!-- include event dependencies -->
<script src="../build/oop/oop-min.js"></script>
<script src="../build/event-custom-base/event-custom-base-min.js"></script>
<script src="../build/event-custom-complex/event-custom-complex-min.js"></script>
<script src="../build/intl/intl-min.js"></script>
<script src="../build/dom-core/dom-core-min.js"></script>
<script src="../build/dom-base/dom-base-min.js"></script>
<script src="../build/selector-native/oop-min.js"></script>
<script src="../build/node-core/node-core-min.js"></script>
<script src="../build/node-base/node-base-min.js"></script>
<script src="../build/event-base/event-base-min.js"></script>
<div id="contentContainer">
<div id="demo"></div>

    <!--a ul with an arbitrarily large number of children:-->
    <ul>
        {{#each readyItems}}
            <li id='li-{{this}}'>child node #{{this}}</li>
        {{/each}}
    </ul>

    <img src="{{componentAssets}}/uluru.jpg" width="500" alt="Uluru" id="image" />

</div>

<script>
YUI().use('*', function (Y) {
    var results = Y.one('#demo');

    //assign page load handler:
    Y.on("load", function () {
        results.append("<p>The window load event fired.  The page and all of its image data, including the large image of Uluru, has completed loading.</p>");
    }, Y.config.win);

    //assign domready handler:
    Y.on("domready", function () {
        results.append("<p>The 'domready' event fired.  The DOM is now safe to modify via script.</p>");
    });
    
    //assign 'contentready' handler:
    Y.on("contentready", function () {
        results.append("<p>The 'contentready' event fired for the element 'contentContainer'.  That element and all of its children are present in the DOM.</p>");
    }, "#contentContainer");

    //assign 'available' handler:
    Y.on("available", function () {
        results.append("<p>The 'available' event fired on the element 'contentContainer'.  That element is present in the DOM.</p>");
    }, "#contentContainer");
    
    results.append("<p>As the page loads, you'll see the 'available', 'contentready', 'domready', and window load events logged here as they fire in sequence.</p>");

});
</script>
