Custom JavaScript CSS Animated Bar Graph
<p>I need to fix a few bugs in code that has been written by another developer and I'm really struggling at the moment to work out what to do. We have a site at <a href="http://www.olympicsbuzz.com/" rel="nofollow">http://www.olympicsbuzz.com/</a> and if you click on Olympic Mentions you'll see an animated bar graph appear. Basically, this shows the positive, neutral and negative social mentions for each day of a specific week, and the user can slide between different weeks.</p>

<p>You'll notice as you slide to the next week, it animates. Slide to the week after and it doesn't. Any ideas what's happening here?</p>

<p>Here's the code:</p>

<pre><code>var olympics_mentions_data;
var global_olympics_current_week;
var total_weeks = 0;

function animateOlympicsWeek(week)
{
    var heights;
    var height;
    var week_container = $('#olympics-mentions #blocks #weeks .week[week="'+week+'"]');
    $(week_container).find('.days .day').each(function(i, day){
        $(day).find('.block').each(function(j, block){
            heights = $(block).attr('style').match(/height(\w)?:[^;]*;/);
            heights = heights[0].split(':');
            heights[1] = $.trim(heights[1]);
            height = heights[1].substring(0,heights[1].length-3);
            $(block).css('height',0);
            $(block).css('display','block');
            $(block).delay((i*100)+(j*600)).animate({height: height},{easing: 'easeOutBounce', duration: 600});
        });
    });
}

$(document).ready(function() {

    // OLYMPICS MENTIONS
    olympics_mentions_data = new Array();
    olympics_mentions_data["2012/06/21"] = [
        [4700,8500,3750],
        [6000,5700,1350],
        [4000,4900,5150],
        [4100,8500,1750],
        [6100,5700,1350],
        [4000,4900,5150],
        [4000,4900,5150]
    ];
    olympics_mentions_data["2012/06/28"] = [
        [4700,8500,3750],
        [6000,5700,1350],
        [4000,4900,5150],
        [4100,8500,1750],
        [6100,5700,1350],
        [4000,4900,5150],
        [4000,4900,5150]
    ];
    olympics_mentions_data["2012/07/05"] = [
        [4700,8500,3750],
        [6000,5700,1350],
        [4000,4900,5150],
        [4100,8500,1750],
        [6100,5700,1350],
        [4000,4900,5150],
        [4000,4900,5150]
    ];

    total_weeks = 0;
    for(week in olympics_mentions_data)
    {
        total_weeks++;
    }


    for(week in olympics_mentions_data)
    {
        global_olympics_current_week = week;
        break;
    }

    buildOlympicsMentions(olympics_mentions_data);

    $("#olympics-mentions #bar #blocks #controller").jFlow({
        controller: ".jFlowControl-olympics",
        slides: "#olympics-mentions #bar #blocks #weeks",
        width: "772px",
        height: "282px",
        prev: "#olympics-mentions .prev",
        next: "#olympics-mentions .next",
        duration: '600',
        easing: "easeInOutExpo",
        loop: false
    });

    function buildOlympicsMentions(data)
    {
        var max_mentions = 20000;
        var week_number = 0;
        var controller_item;
        var week_container;
        var total_daily_mentions;
        var days_container;
        var day_left;
        var day_container;
        var block_bottom;
        var mention_num;
        var mention_type;
        var percentage;
        var block_height;
        var block;

        // Populate scale
        $('#olympics-mentions #bar #scale .upper').text((max_mentions&gt;1000)?max_mentions/1000+'k':max_mentions);
        $('#olympics-mentions #bar #scale .middle').text((max_mentions/2)&gt;1000?max_mentions/2000+'k':max_mentions/2);
        $('#olympics-mentions #bar #scale .lower').text('0');

        // Loop through each week's worth of data
        for(week in data)
        {
            week_number++;
            day_left = 2;

            // Build new controller item for jFlow slider
            controller_item = document.createElement('span');
            controller_item.setAttribute('class','jFlowControl-olympics');
            controller_item.innerHTML = week;

            // Build new week block container
            week_container = document.createElement('div');
            if(week==global_olympics_current_week)
                week_container.setAttribute('class','week current');
            else
                week_container.setAttribute('class','week');
            week_container.setAttribute('week',week);

            days_container = document.createElement('div');
            days_container.setAttribute('class','days');

            infos_container = document.createElement('div');
            infos_container.setAttribute('class','infos');

            // Loop through each day of the week
            for(var day=0; day&lt;data[week].length; day++)
            {
                // Get total number of mentions in the day
                total_daily_mentions = 0;
                for(var j=0; j&lt;data[week][day].length; j++)
                {
                    total_daily_mentions += data[week][day][j];
                }

                // Build new day block container and set position
                day_container = document.createElement('div');
                day_container.setAttribute('class','day');
                day_container.setAttribute('style','left: '+day_left+'px');

                daily_percentage = total_daily_mentions / max_mentions;
                block_bottom = 0;

                // Build and position day mentions blocks
                mention_num = 0;
                for(var j=0; j&lt;data[week][day].length; j++)
                {
                    if(mention_num==0)
                        mention_type = 'positive';
                    if(mention_num==1)
                        mention_type = 'neutral';
                    if(mention_num==2)
                        mention_type = 'negative';

                    percentage = (data[week][day][j] / total_daily_mentions) * daily_percentage;
                    block_height = Math.round(percentage * 250);
                    block = document.createElement('div');
                    block.setAttribute('class', 'block '+mention_type);
                    block.setAttribute('style', 'height: '+block_height+'px; bottom: '+block_bottom+'px; display: none;');
                    day_container.appendChild(block);
                    block_bottom += block_height;

                    mention_num++;
                }

                // Build and position day info blocks
                day_date = new Date(week);
                day_info_container = document.createElement('div');
                day_info_container.setAttribute('class','info');
                day_info_container.setAttribute('style', 'left: '+day_left+'px;');
                day_info_container.innerHTML = $.datepicker.formatDate('DD&lt;br /&gt;dd MM', day_date);

                infos_container.appendChild(day_info_container);

                days_container.appendChild(day_container);

                week_container.appendChild(days_container);
                week_container.appendChild(infos_container);

                day_left += 108 + 2;
            }

            // Append week block to mentions
            $('#olympics-mentions #blocks #weeks').append(week_container);

            // Append jFlow controller item to controller container
            $('#olympics-mentions #blocks #controller').append(controller_item);
        }
    }

    $('#olympics-mentions #bar .prev').click(function(){
        $('#olympics-mentions #bar #weeks').find('.week').each(function(current_week_number, current_week){
            if($(current_week).hasClass('current')){
                if(current_week_number!=0){
                    $(current_week).removeClass('current');
                    $('#olympics-mentions #bar #weeks').find('.week').each(function(week_number, week){
                        if(week_number==(current_week_number-1)){
                            global_olympics_current_week = $(week).attr('week');
                            $(week).addClass('current');
                            setTimeout(function(){
                                animateOlympicsWeek($(week).attr('week'));
                            }, 600);
                        }
                    });
                    setTimeout(function(){
                        $('#olympics-mentions #bar #weeks .week[week="'+$(global_olympics_current_week).attr('week')+'"]').find('.days .day').each(function(i, day){
                            $(day).find('.block').each(function(j, block){
                                $(block).css('display','none');
                            })
                        });
                    }, 600);
                }
            }
        });
    });
    $('#olympics-mentions #bar .next').click(function(){
        $('#olympics-mentions #bar #weeks').find('.week').each(function(current_week_number, current_week){
            if($(current_week).hasClass('current')){
                if(current_week_number!=(total_weeks-1)){
                    $(current_week).removeClass('current');
                    $('#olympics-mentions #bar #weeks').find('.week').each(function(week_number, week){
                        if(week_number==(current_week_number+1)){
                            global_olympics_current_week = $(week).attr('week');
                            $(week).addClass('current');
                            setTimeout(function(){
                                animateOlympicsWeek($(week).attr('week'));
                            }, 600);
                        }
                    });
                    setTimeout(function(){
                        $('#olympics-mentions #bar #weeks .week[week="'+$(global_olympics_current_week).attr('week')+'"]').find('.days .day').each(function(i, day){
                            $(day).find('.block').each(function(j, block){
                                $(block).css('display','none');
                            })
                        });
                    }, 600);
                }
            }
        });
    });
});
</code></pre>

<p>I also have another issue with the individual days, they all seem to show the exact same day when what is required is each day within that week.</p>

<p>I would really appreciate any help you guys can offer as I'm certainly no JavaScript expert. Thanks.</p>
