$(function () {

    var plot = $.plot($("#placeholder"), [{ data: price_history, yaxis: 2, color: '#C9522B', shadowSize: 5}],
        {   xaxis: {mode: 'time'},
            y2axis: {min: 0, autoscaleMargin: 0.3, tickFormatter: function (v, axis) { return "£" + v.toFixed(axis.tickDecimals) }},
            legend: false,
            lines: { show: true },
            points: { show: true },
            grid: {hoverable:true, clickable:true, backgroundColor: '#EFFFFE'}
        });
    
    function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': '#fee',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
    }
    
    var previousPoint = null;
    $("#placeholder").bind("plothover", function (event, pos, item) {
        $("#hover-tip").fadeOut(200);
        $("#x").text(pos.x.toFixed(2));
            if (item) {
                if (previousPoint != item.datapoint) {
                    previousPoint = item.datapoint;
    
                    $("#tooltip").remove();
                    var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);
                    show_date = new Date();
                    show_date.setTime(x);
                    str_show_date = show_date.toDateString();
                    showTooltip(item.pageX, item.pageY,  str_show_date + "<br/>&pound;" + y);
                    }
                }
            else {
                $("#tooltip").remove();
                previousPoint = null;            
            }
    });
});

// On document ready, display hint on graph
$(document).ready(function() {
    $('<div id="hover-tip">Hover over the points!</div>').css( {
            'font-size': '0.9em',
            position: 'absolute',
            top: 130,
            left: 15,
            border: '1px solid #C9522B',
            padding: '2px',
            'background-color': '#FFF4EF',
            opacity: 0.80
    }).appendTo("#placeholder");
    
    $("div#placeholder").hover(function()
    {
        $("#hover-tip").fadeOut(200);
    }); 
    
});