/**
 * Executed when document is finished loading elements into DOM
 */
$(document).ready(function() {

	var placeholder = $("#placeholder");

	//~ placeholder.bind("plotselected", function (event, ranges) {
		//~ $("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1));
//~
		//~ plot = $.plot(placeholder, data,
			//~ $.extend(true, {}, options, {
			//~ xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
		//~ }));
//~
	//~ });

	if (typeof(jQuery.fn.scrollable) == "function") {
		// select one or more elements to be scrollable-enabled
		//alert("v");
		$(".scrollable").scrollable({
			clickable: false,
			keyboard: true,
			item: ".item",
			size: 1,
			onReload: function(){
				$(".item, #fade").height($(".scrollable").height());
			}
		}).navigator({
			navi: ".nav",
			naviItem: 'a',
			activeClass: 'active'
		});
	}

  if (typeof(graph_data) != "undefined") {
		var options = {
	    series: {
	      lines: { show: true }
	      //points: { show: true }
	    },
	    grid: {
				hoverable: true
			},
			xaxis: {
				mode: "time",
				zoomRange: [-1, 280195600100],
				panRange: [915163930600.0, 1375559934700.0]
			},
			yaxis: {
				zoomRange: [0.01, 1.75],
				panRange: [-1, 2]
			},
			zoom: {
				interactive: true
			},
			pan: {
				interactive: true
			}
			//selection: { mode: "x" },
	  };

	  var data = [{ data: graph_data }];

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

	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) {
		if (item) {
			if (previousPoint != item.datapoint) {
				previousPoint = item.datapoint;

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

				var dt = new Date(x * 1);

				var day = dt.getDate();
				var month = dt.getMonth() + 1;
				var year = dt.getFullYear();

				showTooltip(item.pageX, item.pageY, day+"."+month+"."+year + " / " + y);
			}
		} else {
			$("#tooltip").remove();
			previousPoint = null;
		}
	});



 // show pan/zoom messages to illustrate events
    placeholder.bind('plotpan', function (event, plot) {
        var axes = plot.getAxes();
        $(".message").html("Panning to x: "  + axes.xaxis.min.toFixed(2)
                           + " &ndash; " + axes.xaxis.max.toFixed(2)
                           + " and y: " + axes.yaxis.min.toFixed(2)
                           + " &ndash; " + axes.yaxis.max.toFixed(2));
    });

    placeholder.bind('plotzoom', function (event, plot) {
        var axes = plot.getAxes();
        $(".message").html("Zooming to x: "  + axes.xaxis.min.toFixed(2)
                           + " &ndash; " + axes.xaxis.max.toFixed(2)
                           + " and y: " + axes.yaxis.min.toFixed(2)
                           + " &ndash; " + axes.yaxis.max.toFixed(2));
    });

    // add zoom out button
    $('<div class="button" style="right:20px;top:20px">zoom out</div>').appendTo(placeholder).click(function (e) {
        e.preventDefault();
        plot.zoomOut();
    });

    // and add panning buttons


    // little helper for taking the repetitive work out of placing
    // panning arrows
    function addArrow(dir, right, top, offset) {
        $('<img class="button" src="/lk.lv/img/arrow-' + dir + '.gif" style="right:' + right + 'px;top:' + top + 'px">').appendTo(placeholder).click(function (e) {
            e.preventDefault();
            plot.pan(offset);
        });
    }

    addArrow('left', 55, 60, { left: -100 });
    addArrow('right', 25, 60, { left: 100 });
    addArrow('up', 40, 45, { top: -100 });
    addArrow('down', 40, 75, { top: 100 });

});