jQuery(function($){
    
    $('td.chart div.expander a').click(function(){
        $('td.chart div.hideable').slideToggle();
        $(this).hide().siblings('a').show();
    });
    
    $('.chart table.data .legend').prepend( $('<div />').addClass('dot') );
    
    // Build the business avg data graph    
    (function(){
        // Get the colours dynamically from the CSS
        var currentDestAvgColor = $("th.legend.current div.dot").css("background-color");
        var globalDestAvgColor  = $("th.legend.global  div.dot").css("background-color");
        
        var shadowSizePix = 0;
        var currentDestAvgSeries = {    color: currentDestAvgColor,
                                        data: currentDestAvgRatingArray,
                                        label: "Destination Avg.",
                                        shadowSize: 0 };
                        
        var globalDestAvgSeries  = {    color: globalDestAvgColor,
                                        data: globalDestAvgRatingArray,
                                        label: "Global Avg.",
                                        shadowSize: 0 };
        
        // We'll have to build the legend ourselves. Setting show=false for now.        
        var legendOptions = {   show: false, container: $("#businessReviewLegend")};
                                
        var options = { legend: legendOptions,
                        yaxis: { min: 40.0, max: 100.0, tickDecimals: 1 },
                        xaxis: {mode: "time"}, // Setting the mode to time should autoformat, otherwise try -> /*, timeformat: "%b", tickSize: [2, "month"], ticks: 8*/
                        grid: { color: "#999999", borderWidth: 1} };
                        
        $.plot($("td.chart div.graph"), [globalDestAvgSeries, currentDestAvgSeries], options);
    })();

});