jQuery.boxFx test case : Stream Twitter w/ JSONP

More infos : https://github.com/molokoloco/jQuery.boxFx

by molokoloco

HTML

<script src="https://rawgithub.com/molokoloco/jQuery.boxFx/master/js/modernizr.min.js"></script>
<script src="https://rawgithub.com/molokoloco/jQuery.boxFx/master/js/jquery.boxFx.tools.js"></script>
<script src="https://rawgithub.com/molokoloco/jQuery.boxFx/master/js/jquery.boxFx.js"></script>
<div id="boxFxZone1">
    <!--// Here come the Seeds //-->
</div>

<p style="text-align:center">
    <a href="javascript:void(0);" id="start">Start</a> |
    <a href="javascript:void(0);" id="stop">Stop</a> |
    <a href="javascript:void(0);" id="reset" title="Clear elements cache">Reset</a> 
    [<a href="https://github.com/molokoloco/jQuery.boxFx">Code on Github</a>]
</p>

CSS

* {
    font:11px trebuchet,verdana;
    color:white;
}

body {
    background:#666666;
}

#boxFxZone1 {
    position:relative; /* particule seeds childs are abs. positionned inside */
    width:500px;
    height:500px;
    background:#333333; /* Solid color for perfs */
    border:1px solid black;
    outline:1px solid grey;
    overflow:hidden; /* Crop particule visibility inside box ? */
    margin: 25px auto; /* centered in our page div */
}

#boxFxZone1 > div {
    position:absolute;
    width:300px;
    height:60;
    color:orange;
    background:yellow;
    padding: 5px;
}

#boxFxZone1 > div:hover {
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -ms-animation-play-state:paused;
    -o-animation-play-state:paused;
        animation-play-state:paused;
    cursor:wait;
}

#boxFxZone1 a {
    color:orange;
}

#boxFxZone1 img {
    float:right;
    border:1px solid white;
    width:48px;
    height:48px;
}

JavaScript

$(document).ready(function(){ // PAGE DOM READY, CUSTOM SCRIPT EXAMPLE
    
    ///////////////////////////////////////////////////////////////////////////////
    // Data for filling the template is provided by a function with asynchronous JSONP inside
    // Ex. : http://jsfiddle.net/molokoloco/Ebc27/ - http://stackoverflow.com/q/8190016/174449
    ///////////////////////////////////////////////////////////////////////////////
    
    var twitsObj = null,
        twitsCurrent = 0,
        jsonReq = null,
        reqQueue = [];
    
    // I want each call to "streamNewTweet()" to give back a new tweet...
    var streamNewTweet = function(_self) { // Plugin inject 'self' context when calling streamNewTweet(), must give it back
        // db('streamNewTweet', _self, twitsCurrent);
        var dfd = $.Deferred(); // http://api.jquery.com/category/deferred-object/
        if (!jsonReq) { // Let's do our first request
            jsonReq = $.ajax({
                //cache: false,
                dataType: 'jsonp',
                url: 'http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?', // Here our distant webservice
                data: {tags: 'cat', tagmode:'any', format: 'json'},
                error: function() {
                    console.log(arguments);  
                },
                success: function(data) {
                    console.log('data.items', data.items);
                    
                    twitsObj = $.map(data.items, function(obj) { // Map all tweets to 'options.seeds' {template}
                        return {
                            username: obj.author,
                            title: obj.title,
                            image: obj.media.m
                        };
                    });
                    
                    for (var i in reqQueue) { // Resolve awaiting result(s)
                        reqQueue[i]['dfd'].resolve(reqQueue[i]['self'], twitsObj[i]); // Give back 'self' context +...