/www/jssrc/blerg/Welcome.js
enyo.kind({
    name: "blerg.Welcome",
    statics: {
        locationDetect: function(l) {
            if (l.hash.match(/^(#\/?)?$/))
                return {kind: "blerg.Welcome"}
            else
                return false;
        }
    },
    components: [
        {components: [
            {style: "float: right; text-align: center; margin: 0 0 1em 1em;", components: [
                {style: "font-size: 14pt; margin-bottom: 4pt;", content: "Curious? Click this unbelievably obnoxious button!"},
                {kind: "onyx.Button", content: "I want to Blërg!", classes: "signup-button", onclick: "startSignup"}
            ]}
        ]},
        {allowHtml: true, content: '<h2>I am 12 and what is this</h2> <p>Blërg is a microblogging platform.  Or maybe a miniblogging platform.  Blërg is not sure.  Blërg is a lot like <a href="http://twitter.com/">Twitter</a>, but aims to fix some of its idiosyncracies.  Blërg does not want to be a full blogging platform like <a href="http://wordpress.com/">Wordpress</a> or <a href="http://livejournal.com/">Livejournal</a>.  Blërg is also an <a href="/doc/">open source tagged text database engine</a> written in C that does the back-end work. Blërg\'s author finds it entertaining to anthropomorphize Blërg in the third person.</p>'},
        {name: "moreLink", kind: "blerg.Link", onNavigate: "loadMore", content: "Tell me more..."},
        {style: "clear: both;"},
        {name: "contentBox", allowHtml: true},
        {classes: "latest", components: [
            {classes: "latest-posts", components: [
                {name: "latestPostsScroller", classes: "latest-scroller", onmouseover: "pauseTicker", onmouseout: "startTicker", components: [
                    {tag: "h2", content: "Latest posts"},
                    {name: "latestPosts"}
                ]}
            ]},
            {classes: "latest-tags", components: [
                {classes: "latest-scroller", components: [
                    {tag: "h2", content: "Latest tags"},
                    {name: "latestTags"}
                ]}
            ]}
        ]}
    ],
    create: function() {
        this.inherited(arguments);

        this.bubble("onSetTitle", {section: "Welcome!"});
        this.loadLatest();
    },
    destroy: function() {
        this.stopTicker();
        this.inherited(arguments);
    },
    loadMore: function() {
        var req = new enyo.Ajax({
            url: "/welcome.html",
            handleAs: "text"
        });
        req.response(function(inSender, inResponse) {
            this.$.contentBox.setContent(inResponse);
            this.$.moreLink.hide();
        }.bind(this));
        req.go();
    },
    startSignup: function() {
        this.bubble('onStartSignup');
    },
    loadLatest: function() {
        var req = new enyo.Ajax({
            url: baseURL + '/latest.json'
        });
        req.response(function(inSender, inResponse) {
            this.$.latestTags.destroyComponents();
            for (var i = 0; i < inResponse.tags.length; i++) {
                var v = inResponse.tags[i];
                this.$.latestTags.createComponent({
                    kind: "blerg.Link",
                    href: baseURL + "/#/tag/" + v,
                    content: "#" + v,
                    classes: "ref"
                });
                this.$.latestTags.createComponent({tag: null, content: " "});
            }
            this.$.latestTags.render();

            this.$.latestPosts.destroyComponents();
            for (var i = 0; i < inResponse.records.length; i++) {
                var v = inResponse.records[i];
                this.$.latestPosts.createComponent({kind: "blerg.BriefRecord"}, v);
            }
            this.$.latestPosts.render();
            this.startTickerCycle();
        }.bind(this));
        req.go();
    },
    startTickerCycle: function() {
        var starter = function() {
            if (this.$.latestPostsScroller.hasNode()) {
                var n = this.$.latestPostsScroller.node;
                if (n.scrollTop >= n.scrollHeight - n.clientHeight)
                    n.scrollTop = 0;
                this.startTicker();
            } else {
                this.tickerTimeout = setTimeout(starter, 1000);
            }
        }.bind(this)
        this.tickerTimeout = setTimeout(starter, 2500);
    },
    startTicker: function() {
        if (this.tickerInterval)
            return;
        this.tickerInterval = setInterval(this.ticker.bind(this), 100);
    },
    pauseTicker: function() {
        clearInterval(this.tickerInterval);
        this.tickerInterval = null;
    },
    stopTicker: function() {
        clearTimeout(this.tickerTimeout);
        this.tickerTimeout = null;
        clearInterval(this.tickerInterval);
        this.tickerInterval = null;
    },
    ticker: function() {
        var n = this.$.latestPostsScroller.node;
        if (n.scrollTop < n.scrollHeight - n.clientHeight) {
            n.scrollTop += 2;
        } else {
            this.stopTicker();
            this.startTickerCycle();
        }
    }
});