var $j = jQuery.noConflict();

function loader() {
	$j('#placeholder').html('<img src="/images/spinner-ffffff.gif" />');
}

/*
$j(function () {
    var data = [
	    {
		  	data: <%= @graph.inspect %>,
			color: "#4FAE44",
			points: {show: false}
	    }			
    ];

    var options = {
		grid: { hoverable: true, autoHighlight: false, mouseActiveRadius: 10000 },
        series: {
            lines: { show: true },
            points: { show: true }
        },
        xaxis: {
            mode: "time",
			timeformat: "%b %y", 
            minTickSize: [3, "month"],
            min: (new Date()).getTime() - (1000 * 60 * 60 * 24 * 360),
            max: <%= @graph.last[0] %>
        },
        selection: { mode: "x" }
    };

    var placeholder = $j("#placeholder");

    var plot = $j.plot(placeholder, data, options);

	$j("#onemonth").click(function () {
	        $j.plot(placeholder, data, {
				grid: { hoverable: true, autoHighlight: false, mouseActiveRadius: 10000 },
	            xaxis: {
	                mode: "time",
					timeformat: "%d %b", 
	                minTickSize: [3, "day"],
	                min: (new Date()).getTime() - (1000 * 60 * 60 * 24 * 28),
	                max: <%= @graph.last[0] %>
	            }
	        });
			$j("#graphEpoch").html("1 month view");
	    });
	
	$j("#threemonth").click(function () {
	        $j.plot(placeholder, data, {
				grid: { hoverable: true, autoHighlight: false, mouseActiveRadius: 10000 },
	            xaxis: {
	                mode: "time",
					timeformat: "%b %y", 
	                minTickSize: [21, "day"],
	                min: (new Date()).getTime() - (1000 * 60 * 60 * 24 * 84),
	                max: <%= @graph.last[0] %>
	            }
	        });
			$j("#graphEpoch").html("3 month view");
	    });
	
	$j("#sixmonth").click(function () {
	        $j.plot(placeholder, data, {
				grid: { hoverable: true, autoHighlight: false, mouseActiveRadius: 10000 },
	            xaxis: {
	                mode: "time",
					timeformat: "%b %y", 
	                minTickSize: [1, "month"],
	                min: (new Date()).getTime() - (1000 * 60 * 60 * 24 * 180),
	                max: <%= @graph.last[0] %>
	            }
	        });
			$j("#graphEpoch").html("6 month view");
	    });
	
	$j("#ninemonth").click(function () {
	        $j.plot(placeholder, data, {
				grid: { hoverable: true, autoHighlight: false, mouseActiveRadius: 10000 },
	            xaxis: {
	                mode: "time",
					timeformat: "%b %y", 
	                minTickSize: [2, "month"],
	                min: (new Date()).getTime() - (1000 * 60 * 60 * 24 * 270),
	                max: <%= @graph.last[0] %>
	            }
	        });
			$j("#graphEpoch").html("9 month view");
	    });
	
	$j("#oneyear").click(function () {
	        $j.plot(placeholder, data, {
				grid: { hoverable: true, autoHighlight: false, mouseActiveRadius: 10000 },
	            xaxis: {
	                mode: "time",
					timeformat: "%b %y", 
	                minTickSize: [3, "month"],
	                min: (new Date()).getTime() - (1000 * 60 * 60 * 24 * 360),
	                max: <%= @graph.last[0] %>
	            }
	        });
			$j("#graphEpoch").html("1 year view");
	    });

	function showTooltip(x, y, contents) {
	        $j('<div id="tooltip">' + contents + '</div>').css( {
	            position: 'absolute',
	            display: 'none',
	            top: y + 5,
	            left: x + 5,
	            border: '1px solid #999',
	            padding: '2px',
	            'background-color': '#fff',
	            opacity: 0.80
	        }).appendTo("body").fadeIn(200);
	    }
	
	function updateRate(x, y, contents) {
	        document.getElementById('hoverRate').innerHTML = "" + contents;
	    }

	    var previousPoint = null;
	    $j("#placeholder").bind("plothover", function (event, pos, item) {
	        $j("#x").text(pos.x.toFixed(2));
	        $j("#y").text(pos.y.toFixed(2));

	            if (item) {
	                if (previousPoint != item.datapoint) {
	                    previousPoint = item.datapoint;

	                    $j("#tooltip").remove();
	                    var x = item.datapoint[0].toFixed(4),
	                        y = item.datapoint[1].toFixed(2);
							info = item.datapoint[2];

	                    showTooltip(item.pageX, item.pageY, "" + info);
						//updateRate(item.pageX, item.pageY, "" + info)
	                }
	            }
	            else {
	                $j("#tooltip").remove();
	                previousPoint = null;            
	            }
	    });
});*/