var respFuncs = {
    "cloud": function(content,url,response) {
                        var sizes = [10,12,14,16,18,20,22,24,28,36];
                        var maxCount = response.maxCount;
                        var range = maxCount / 9;
                        var htmlArr = $.map(response.tokens, function(e,i) {
                            return "<a href='"+url + "/" + escape(e.word) +"' style='font-size:"+ sizes[parseInt(e.count / range)] + "pt'>" + e.word + "</a>";
                        });
                        var cloud = $("<div/>").addClass('cloud').html(htmlArr.join(''))
                        content.html(cloud);
     },
    "bars": function(content,url,response) {
        var table = $('<table/>');
        var sorted = response.tokens;
        var htmlRows = $.map(sorted, function(e,i) {
            var perc = Math.round( 100* (response.maxCount > 0 ? (100 * e.count) / response.maxCount : 0)) / 100;
            var w = $.trim(e.word);
            w = w == '' ? '--NONE--' : w;
            return "<tr><td class='name'><a href='"+url + "/" + escape(w) +"'>"+w+"</a></td><td class='count'>"+e.count+"</td><td class='graph'><div class='graph_bar' name='"+perc+"'></div><div>"+perc+"%</div></td>";
        }).join('');
        content.html($("<div/>").addClass('bars').append(table.append(htmlRows)));
        
        table.find('div.graph_bar').each(function() {
            var $d = $(this);
            var w100 = $d.parent().width() - 60; //380;
            var val = $d.attr('name');
            var nw = (val * w100) / 100;
            $d.animate({ width: nw }, 1000);
        });
        
    }
};

function _showLoadingMsg() { _hideErrorMsg(); $('#topmsg_loading').show();  }
function _showErrorMsg()  {  _hideLoadingMsg(); $('#topmsg_error').show();  }
function _hideLoadingMsg() {  $('#topmsg_loading').hide(); }
function _hideErrorMsg() {  $('#topmsg_error').hide(); }

function _error() { _hideLoadingMsg(); _showErrorMsg(); }

function _updateContent(content,url,view) {
        _showLoadingMsg();
        $.ajax({url: url,
           dataType: 'json',
           success: function( response ){
               
               if( response.status && response.status == 'ERROR')
                   _error();
               else if (response.maxCount &&  respFuncs[view])
                    respFuncs[view](content,url,response);
               else {
                
                   $( "#tweetTmpl" ).tmpl(response ).appendTo( $("#tweetList").html('') );
                    
               }
           },
           complete: function() { setTimeout(_hideLoadingMsg,2000); }/*,
           error: _error*/
        });
        return false;
}
$(function() {
    
    $('#dialog').dialog({ autoOpen:false, modal:true, resizable:false, width:640, height: 400, title: 'TweetList: Back-Text Colors are per user preferences'});
    
    //defaults
   $('header')
    .data('url','/api/words')
    .data('view','cloud')
    .delegate('a','click',function(){
        if ($(this).attr('id') == 'btnRefresh') return;
        $(this).closest('div').find('a').removeClass('selected');
        $(this).addClass('selected');
   }).delegate('div.by_entity a','click',function() {
        var btn = $(this),url = btn.attr('href');
        var hd = btn.closest('header').data('url',url);
        return _updateContent($('div.content'),url,hd.data('view'));     
    }).delegate('div.view a','click',function() {
        
        var btn = $(this), view = btn.attr('href');
        var hd = btn.closest('header').data('view',view);
        if (hd.data('url') == '/api/words') {
            alert("Sorry, There is a lot of data!, We aren't able to render  words as bars");
            return false;
        }
        return _updateContent($('div.content'),hd.data('url'),view);  
    }).delegate('div.refresh a','click',function() {
        var btn = $(this);
        var hd = btn.closest('header');
        return _updateContent($('div.content'),hd.data('url'),hd.data('view'));  
    });
    
    $('div.content').delegate('div.cloud a,div.bars a','click',function() {
           var btn = $(this), url = btn.attr('href');
          return _updateContent($('#dialog').find('ul').html('<p>Loading Tweets...</p>').end().dialog('open'),url,'');
    })
   
    $('header div.by_entity a.selected').click();     
});