/* 
This hook ties in the home page interactions.
*/
$(document).bind('afterready', function (ev) {
    
    $('#recent-searches li:nth-child(1)').css('opacity', 0.33);
    $('#recent-searches li:nth-child(2)').css('opacity', 0.66);
    
    var bubbleTempalte = tmpl(' \
            <li data-recent-search-id="<%=id%>" <% if (even) { %>class="even" <% } %>>\
                <h2><a href="/search/?trade=<%=trade_id%>&where=<%=where%>"><%=trade_name%> in <%=where%></a></h2>\
                <div class="tail"></div>\
            </li>');
    $('#recent-searches').data('even', false);

    $('#consumers').everyTime(5000, function(ev) {
        
        // Find the most recent consumer search
        var mostRecentSearchId = $('#recent-searches li:last').attr('data-recent-search-id');
        
        // Get the next search
        $.ajax({url: '/json/recent-searches/',
                cache: false,
                data: {'recent_search': mostRecentSearchId}, 
                dataType: 'json', 
                success: function (recentSearch) {
            
            if (recentSearch === null) {
                return;
            }
            
            // Collect and toggle the bubble alignment
            var even = $('#recent-searches').data('even');
            $('#recent-searches').data('even', !even);
            recentSearch.even = !even;
            
            // Create the HTML for the recent search
            $('#recent-searches').data('recentSearchHTML', bubbleTempalte(recentSearch));
            
            // Remove the oldest recent search
            $('#recent-searches li:first').fadeOut(500, function (ev) {
                $(this).css('visibility', 'hidden');
                $(this).show();
                
                $('#recent-searches').append($('#recent-searches').data('recentSearchHTML'));
                $('#recent-searches li:last').hide();
                $(this).slideUp(500, function (ev) {
                    $('#recent-searches li:last').slideUp(500, function (ev) {
                        $('#recent-searches li:first').remove();
                    });
                    $('#recent-searches li:last').fadeIn(500);
                });
                
                // Fade the other items to the correct opacity
                setbBubbleOpacity();
            });
            
        }});
        
    });
    
    /** Set the opacity for each of the bubbles on the page */
    function setbBubbleOpacity() {
        $('#recent-searches li:nth-child(2)').fadeTo(500, 0.33);
        $('#recent-searches li:nth-child(3)').fadeTo(500, 0.66);
    }
});