var tags = [
'AJAX',
'Cloud',
'Facebook',
'HTML5',
'jQuery',
'MVC',
'MVVM',
'SharePoint',
'Silverlight',
'Surface',
'Twitter',
'UX',
'Visual Studio',
'WCF',
'Windows 7'];

var gfx = ['ajax',
'cloud',
'facebook',
'html5',
'jquery',
'mvc',
'mvvm',
'sharepoint',
'silverlight',
'surface',
'twitter',
'ux',
'vs',
'wcf',
'win7'
];

var items = [];

function doIt() {
    $.ajax({ type: 'get', dataType: "html", url: "rss.xml",
    success: gotIt
});
}

function gotIt(data) {
    for (var i in tags) {
        var regx = new RegExp(tags[i], "gim");
        var matches = data.match(regx);
        if (matches != null) {
            addGraphics(gfx[i], matches.length);
        }
        var leg = "<nobr><img src='" + gfx[i] + ".gif' height='30' width='30'><br/>" + tags[i] + "</nobr><br />";
        $('#legend').html($('#legend').html() + leg);
    }
    animatethem();
}

function addGraphics(gf, times) {
    // using 800x600 canvas
    for (var i=0; i < times; i++) {
    
        var xr = Math.floor(Math.random() * (1201-60));
        var yr = Math.floor(Math.random() * (1000-60));
        var imgCode = "<img id='" + gf + i.toString(10) + "' src='" + gf + ".gif' height='60' width='60' style='position:absolute;'>";
        $('#viz').prepend(imgCode);
        $('#' + gf + i.toString(10)).css('top', yr + 'px')
        $('#' + gf + i.toString(10)).css('left', xr + 'px');
        items[items.length] = gf + i.toString(10);
    }
}

function animatethem() {
    for (var i = 0; i < items.length; i++) {
        var xr = Math.floor(Math.random() * (1201-60));
        var yr = Math.floor(Math.random() * (1000-60));
        $('#' + items[i]).animate( { top: yr + "px", left: xr + "px" }, 5000 );
    }

    var t = setTimeout("animatethem()", 5000);
    
}



$(document).ready(doIt);