<button type="button" id="show">Show Overlay</button>
<button type="button" id="hide">Hide Overlay</button>

<script type="text/javascript">
YUI().use("overlay", "json", "gallery-widget-io", "escape", function(Y) {

    /* Setup local variable for Y.WidgetStdMod, since we use it multiple times */
    var StdMod = Y.WidgetStdMod,
        transportAvailable = false;

    StdModIO = function(config) {
        StdModIO.superclass.constructor.apply(this, arguments);
    };

    Y.extend(StdModIO, Y.Plugin.WidgetIO, {
        initializer: function() {
            Y.on('io:xdrReady', function() {
                transportAvailable = true;
            });

            Y.io.transport({
                id:'flash',
                yid: Y.id,
                src:'io.swf' //Relative path to the .swf file from the current page.
            });
        },

        setHTML: function(content) {
            var overlay = this.get('host');
            overlay.setStdModContent(this.get('section'), content);
        }

    }, {
        NAME: 'stdModIO',
        NS: 'io',
        ATTRS: {
            section: {
                value:StdMod.BODY,
                validator: function(val) {
                    return (!val || val == StdMod.BODY || val == StdMod.HEADER || val == StdMod.FOOTER);
                }
            }
        }
    });

    /* The Pipes feed URIs to be used to dispatch io transactions */
    var pipes = {

        // uri data
        baseUri : 'http:/'+'/pipes.yahooapis.com/pipes/pipe.run?_id=6b7b2c6a32f5a12e7259c36967052387&_render=json&url=http:/'+'/',
        feeds : {
            ynews : {
                title: 'Yahoo! US News',
                uri: 'rss.news.yahoo.com/rss/us'
            },
            yui : {
                title: 'YUI Blog',
                uri: 'feeds.yuiblog.com/YahooUserInterfaceBlog'
            },
            slashdot : {
                title: 'Slashdot',
                uri: 'rss.slashdot.org/Slashdot/slashdot'
            },
            ajaxian: {
                title: 'Ajaxian',
                uri: 'feeds.feedburner.com/ajaxian'
            },
            daringfireball: {
                title: 'Daring Fireball',
                uri: 'daringfireball.net/index.xml'
            },
            wiredtech: {
                title: 'Wire: Tech Biz',
                uri: 'www.wired.com/rss/techbiz.xml'
            },
            techcrunch: {
                title: 'TechCrunch',
                uri: 'feedproxy.google.com/Techcrunch'
            }
        },

        // The default formatter, responsible for converting the JSON responses recieved,
        // into HTML, using JSON for the parsing step, and substitute for some basic templating functionality
        formatter : function (val) {
            var formatted = "Error parsing feed data";
            try {
                var json = Y.JSON.parse(val);
                if (json && json.count) {
                    var html = ['<ul class="yui3-feed-data">'];
                    var linkTemplate = '<li><a href="{link}" target="_blank">{title}</a></li>';

                    Y.each(json.value.items, function(v, i) {
                        if (i < 10) {
                            v.title = Y.Escape.html(v.title);
                            v.link = Y.Escape.html(v.link);
                            html.push(Y.Lang.sub(linkTemplate, v));
                        }
                    });
                    html.push("</ul>");
                    formatted = html.join("");
                } else {
                    formatted = "No Data Available";
                }
            } catch(e) {
                formatted = "Error parsing feed data";
            }
            return formatted;
        }
    };

    /* Helper function, to generate the select dropdown markup from the pipes feed data */
    function generateHeaderMarkup() {
        var optTemplate = '<option value="{id}">{title}</option>',
            html = ['<select id="feedSelector" class="yui3-feed-selector"><option value="-1" class="yui3-prompt">Select a Feed...</option>'];

        Y.Object.each(pipes.feeds, function(v, k, o) {
            html.push(Y.Lang.sub(optTemplate, {id:k, title:v.title}));
        });
        html.push('</select>');

        return html.join("");
    }

    /* Create a new Overlay instance, with content generated from script */
    var overlay = new Y.Overlay({
        width:"40em",
        visible:false,
        align: {
            node:"#show",
            points: [Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.BL]
        },
        zIndex:10,
        headerContent: generateHeaderMarkup(),
        bodyContent: "Feed data will be displayed here"
    });

    overlay.render();
    /*
     * Add the Standard Module IO Plugin, and configure it to use flash, and a formatter specific
     * to the pipes response we're expecting from the uri request we'll send out.
     */
    overlay.plug(StdModIO, {
        uri : pipes.baseUri + pipes.feeds["ynews"].uri,
        cfg:{
            xdr: {
                use:'flash'
            }
        },
        formatter: pipes.formatter,
        loading: '<img class="yui3-loading" width="32px" height="32px" src="{{componentAssets}}/img/ajax-loader.gif">'
    });

    Y.on("change", function(e) {
        var val = this.get("value");
        if (transportAvailable) {
            if (val != -1) {
                overlay.io.set("uri", pipes.baseUri + pipes.feeds[val].uri);
                overlay.io.refresh();
            }
        } else {
            overlay.io.setHTML("Flash doesn't appear to be available. Cross-domain requests to pipes cannot be made without it.");
        }
    }, "#feedSelector");

    Y.on("click", function(e) {
        overlay.show();
    }, "#show");

    Y.on("click", function(e) {
        overlay.hide();
    }, "#hide");

});
</script>
