// GraphIT JS Library
// Display charts from GraphIT data feed.

// Default chart options


// Function call to show tooltip of a piece of data
function show_tooltip(x, y, contents, color) {
	
	color_text = new RGBColor(color);
	color_background = new RGBColor(color_text.toRGB());
	color_background.r += 100;
	color_background.g += 100;
	color_background.b += 100;
	
	$('<div id="tooltip">' + contents + '</div>').css({
		position: 'absolute',
		display: 'none',
		top: y + 5,
		left: x + 5,
		border: '2px solid ' + color_text.toRGB(),
		padding: '4px',
		'background-color': color_background.toRGB(),
		opacity: 0.50,
		'-moz-border-radius': '20px',
		'-webkit-border-radius': '20px',
		'-moz-border-radius-topleft': '0',
		'-webkit-border-radius-topleft': '0',
		color: color_text.toRGB(),
		'font-weight': 'bold',
	}).appendTo("body").fadeIn(200);
}

// Declare element as container for chart.
function graphitize(element, url, refresh_time, timeformat, timeunit, eachtimeunit, maxi, mini, op) {
	
	// Default values :
	var refresh_time = typeof(refresh_time) != 'undefined' ? refresh_time * 1000 : 60000;
	var timeformat = typeof(timeformat) != 'undefined' ? timeformat : '%hh';
	var timeunit = typeof(timeunit) != 'undefined' ? timeunit : 'hour';
	var eachtimeunit = typeof(eachtimeunit) != 'undefined' ? eachtimeunit : 2;

	var options = {
		xaxis: {
				mode: "time",
				timeformat: timeformat,
				tickSize: [eachtimeunit, timeunit],
		},
		points: { show: false },
		lines: { show: true },
		yaxis: {},
		legend: {
			margin: 10,
		},
		grid: {
			hoverable: true,
		}
	};
	
	if (typeof(maxi) != 'undefined') {
		options["yaxis"]["max"] = maxi;
	}
	if (typeof(mini) != 'undefined') {
		options["yaxis"]["min"] = mini;
	}
	
	if (typeof(op) != 'undefined') {
		var options = op;
	}
	
	// Displaying a border the first time
	element.css("border", "solid 1px #AAA");
	
	function refresh_chart() {
		// Displaying loading icon
		element.css("background-image", "url(js/images/loading.gif)");
		element.css("background-position", "right bottom");
		element.css("background-repeat", "no-repeat");
	
		$.getJSON(url, function(data, state) {
			if (state == "success" || state == undefined) {
				var datasets = [];
				
				for (var feed in data) {
					var datafeed = new Array();
					datafeed["label"] = feed;
					datafeed["data"] = [];
					for (var i=0; i<data[feed].length; i++) {
						datafeed["data"].push([data[feed][i][0], data[feed][i][1]]);
					}
					datasets.push(datafeed);
				}
				
				// Rendering chart
				$.plot(element, datasets, options);
				
				// Showing tooltip on hover :
				element.bind("plothover", function (event, pos, item) {
					$("#tooltip").remove();
					if (item) {
						show_tooltip(item.pageX, item.pageY, item.datapoint[1], item.series.color);
					}
				});

				// Hidding loading icon
				element.css("border", "0");
				element.css("background-image", "none");
			}
			else {
				element.css("background-image", "url(js/images/loading.gif)");
			}
		});
	}

	refresh_chart();
	if (refresh_time) {
		setInterval(refresh_chart, refresh_time);
	}
}