// For now enable cross-site scripting in jQuery
jQuery.support.cors = true;


var igo_initialized = false;

var dataurl = [];

var g;
var go;
var gol;

var data = [];
var sercnt = 0;
var serreq = 0;
// fetch one series, adding to what we got
var alreadyFetched = {};

var previousPoint = null;

var markings = [];
var mrkcnt = 0;

var igo_tooltips_enabled = true;
var igo_events_enabled = true;

var intgsfmenu = ' \
          <ul> \
            <li><a href="javascript:void(0);" onclick="javascript:showStatic(\'chkgimg\',\'/start=-24h\')">Switch to static</a></li> \
            <li id="enable_tooltips"><a href="javascript:void(0);" onclick="javascript:igo_tooltips(true)">Enable tooltips</a></li> \
            <li id="disable_tooltips"><a href="javascript:void(0);" onclick="javascript:igo_tooltips(false)">Disable tooltips</a></li> \
            <li id="enable_events"><a href="javascript:void(0);" onclick="javascript:igo_events(true)">Enable events</a></li> \
            <li id="disable_events"><a href="javascript:void(0);" onclick="javascript:igo_events(false)">Disable events</a></li> \
          </ul> \
';

var stagsfmenu = ' \
          <ul> \
            <li><a href="javascript:void(0);" onclick="javascript:showInteractive()">Switch to interactive</a></li> \
          </ul> \
';

var ginfo = [];

var gsfmenu_s = ' \
        <li id="stagmenu"><a href="javascript:void(0);" onclick="javascript:return showStatic(\'chkgimg\',\'/start=-24h\');">Static</a> </li> \
        <li><a href="javascript:void(0);" onclick="javascript:return showStatic(\'chkgimg\',\'/start=-1h\');">1 hour</a></li> \
        <li><a href="javascript:void(0);" onclick="javascript:return showStatic(\'chkgimg\',\'/start=-8h\');">8 hours</a></li> \
        <li><a href="javascript:void(0);" onclick="javascript:return showStatic(\'chkgimg\',\'/start=-24h\');">24 hours</a></li> \
        <li><a href="javascript:void(0);" onclick="javascript:return showStatic(\'chkgimg\',\'/start=-1w\');">1 week</a></li> \
        <li><a href="javascript:void(0);" onclick="javascript:return showStatic(\'chkgimg\',\'/start=-4w\');">4 weeks</a></li> \
        <li><a href="javascript:void(0);" onclick="javascript:return showStatic(\'chkgimg\',\'/start=-52w\');">1 year</a></li> \
';

var gsfmenu_i = ' \
        <li id="intgmenu"><a href="javascript:void(0);" onclick="javascript:showInteractive();">Interactive</a> </li> \
        <li><a href="javascript:void(0);" onclick="javascript:fetch_all_series(\'start=-1h\');">1 hour</a></li> \
        <li><a href="javascript:void(0);" onclick="javascript:fetch_all_series(\'start=-8h\');">8 hours</a></li> \
        <li><a href="javascript:void(0);" onclick="javascript:fetch_all_series(\'start=-24h\');">24 hours</a></li> \
        <li><a href="javascript:void(0);" onclick="javascript:fetch_all_series(\'start=-1w\');">1 week</a></li> \
        <li><a href="javascript:void(0);" onclick="javascript:fetch_all_series(\'start=-4w\');">4 weeks</a></li> \
        <li><a href="javascript:void(0);" onclick="javascript:fetch_all_series(\'start=-52w\');">1 year</a></li> \
';

function gsel(imgid,attr) {
    $("#"+imgid).attr("src", ginfo[imgid]["base"]+attr);
    return false;
};


//[{ position: "left", min: ranges.yaxis.from, max: ranges.yaxis.to }, { position: "left", min: 0, max: 1 }]
var eg_options = {
    legend: { show: false},
    xaxis: { ticks: 5, mode: "time"},
    grid: { hoverable: true, clickable: true},
    selection: { mode: "x" }
};
var g_options = {
    legend: { show: false},
    lines: { show: true },
    points: { show: true },
    xaxis: { ticks: 5, mode: "time"},
    yaxes: [{},{min: 0,max: 1,show: false}],
    grid: { hoverable: true, clickable: true},
    selection: { mode: "x" }
};
//    yaxes: [{},{min: 0,max: 1,position: "right"}],
var go_options = {
    legend: { show: true, container: "#g1ol" },
    lines: { show: true },
    points: { show: false },
    xaxis: { ticks: 3, mode: "time"},
    yaxes: [{},{min: 0,max: 1,show: false}],
    grid: { hoverable: false, clickable: false},
    selection: { mode: "x" }
};

    //        xaxis: { ticks: 3, mode: "time", timeformat: "%H:%M"},
    //     $.plot(g, data, g_options);
    //     $.plot(g, data, g_options);

//$(function() {
function INIT(id_g,id_go,id_gol) {

    g = $("#"+id_g);
    go = $("#"+id_go);
    gol = $("#"+id_gol);

    function g_getseldata(x1, x2) {
        var sd = [];
        var d = [];
        var dl = [];
        var dc = [];

	var choiceContainer = $("#choices");
	if(!choiceContainer) return;

        choiceContainer.find("input:checked").each(function () {
	    var key = $(this).attr("name");
	    //console.log("key:"+key);
	    if(key && data[alreadyFetched[key] - 1]) {
		d = [];
		dl = [];
		dc = [];

		var idx = alreadyFetched[key] - 1;

		for (var i = 0; i < data[idx].data.length; i++) {
		    if((x2 > 0) && (data[idx].data[i][0] > x2)) {
			i = data[idx].data.length;
		    }
		    else if(data[idx].data[i][0] > x1) {
			d.push([data[idx].data[i][0],data[idx].data[i][1]]);
			if(data[idx].datalabel) dl.push(data[idx].datalabel[i]);
			if(data[idx].clickurl) dc.push(data[idx].clickurl[i]);
		    }
		}
		sd.push( { label: data[idx].label, color: data[idx].color,
			   yaxis: data[idx].yaxis, lines: data[idx].lines, points: data[idx].points,
			   data: d,
			   datalabel: dl,
			   clickurl: dc
			 } );

		//console.log("Idx: "+idx+" adding "+key+" w/ "+data[idx].data.length+" vals "+d.length+" matches");

	    }
	});

	return sd;
    }

    // now connect the two graphs together
    g.bind("plotselected", function (event, ranges) {
	//console.log('HHH21a:'+ranges.yaxis.from+' '+ranges.yaxis.to);
	//if (event.shiftKey) alert('HHHH shift');

	// clamp the zooming to prevent eternal zoom
	if(ranges.xaxis.to - ranges.xaxis.from < 0.00001) ranges.xaxis.to = ranges.xaxis.from + 0.00001;
	if(ranges.yaxis.to - ranges.yaxis.from < 0.00001) ranges.yaxis.to = ranges.yaxis.from + 0.00001;

	// do the zooming
	plot = $.plot(g, g_getseldata(ranges.xaxis.from, ranges.xaxis.to),
		      $.extend(true, {}, g_options, {
			  xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
			  yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
		      }));
	// Update the selection within go, but don't fire the event to prevent loops
	//$.plot(go, data, go_options).setSelection(ranges, true);
	$.plot(go, g_getseldata(0,0), go_options).setSelection(ranges, true);
    });
    g.bind("plotclick", function (event, pos, item) {
        if(item) {
	    // if(item.series.datalabel && item.series.datalabel[item.dataIndex]) {
	    // 	$("#clickdata").text("You clicked point " + item.dataIndex +
	    // 			     " in " + item.series.label + "."+
	    // 			     "<br>\n"+item.series.datalabel[item.dataIndex] + "."+
	    // 			     "<br>\n"+item.series.clickurl[item.dataIndex] + ".");
	    // 	if(item.series.clickurl[item.dataIndex]) {
	    // 	    alert(item.series.clickurl[item.dataIndex]);
	    // 	}
	    // 	// if (item.e.ctrlKey) alert('Ctrl down');
	    // 	// if (item.e.altKey) alert('Alt down');
	    // 	// if (item.e.shiftKey) alert('HHHH shift');

	    // 	// sh_obj(event);
	    // 	// if(event.handleObj) sh_obj(event.handleObj);
	    // }
	    // else {
	    // 	if(item.e && item.e.shiftKey) alert('HHHH shift');
	    // 	$("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
	    // }

	    if(item.series.clickurl && item.series.clickurl[item.dataIndex]) {
		window.open(item.series.clickurl[item.dataIndex]);
	    }
        }
    });
    // g.bind("plotunselected", function (event, ranges) {
    // 	plotAccordingToChoices();
    // });

    go.bind("plotselected", function (event, ranges) {
	plot = $.plot(g, g_getseldata(ranges.xaxis.from, ranges.xaxis.to),g_options, {
	    xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
	    yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
	});
    });
    go.bind("plotunselected", function (event, ranges) {
    	plotAccordingToChoices();
    	//$.plot(g, data, g_options);
    });

    go.bind("galert", function(e, n, v){alert("N:"+n+" V:"+v);});

    //var previousPoint = null;
    g.bind("plothover", function (event, pos, item) {
	var t;

        // if($("#x")) $("#x").text(pos.x.toFixed(2));
        // if($("#y")) $("#y").text(pos.y.toFixed(2));

        if ($("#enableTooltips:checked").length > 0) {
            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;
                    
                    $("#tooltip").remove();

		    var x = new Date(item.datapoint[0]).toString();
		    if(item.series.datalabel && (item.series.datalabel[item.dataIndex] != null)) {
			t = item.series.datalabel[item.dataIndex];
		    }
		    else {
			t = item.datapoint[1].toFixed(2);
                    }

		    t += "<br>"+x;

		    if(item.series.clickurl && item.series.clickurl[item.dataIndex]) {
			t += "<br>Click to view details";
		    }

                    showTooltip(item.pageX, item.pageY,t);
                }
            }
            else {
                $("#tooltip").remove();
                previousPoint = null;            
            }
        }
    });

//});
}


function onSeriesDataReceived(series) {
    for(var i = 0; i < series.length; i++) {
	// let's add it to our current data
	if(alreadyFetched[series[i].label]) {
	    delete data[alreadyFetched[series[i].label] - 1];
	}
	else {
	    alreadyFetched[series[i].label] = ++sercnt;
	}
	data[alreadyFetched[series[i].label] - 1] = series[i];
    }

    if(sercnt >= serreq) {
	// Plot all we got
	var i = 0;
	$.each(data, function(key, val) {
		val.color = ++i;
	    });
	$.plot(go, data, go_options);
	$.plot(g, data, g_options);
	if(series[0].ylabel != undefined) $('#g1yl').html(series[0].ylabel);
	else if(series[0].units != undefined) $('#g1yl').html(series[0].units);
	else $('#g1yl').html("units");
	if(series[0].xlabel != undefined) $('#g1xl').html(series[0].xlabel);
	else $('#g1xl').html("time (UTC)");
	updateCheckBoxes();
	$('#chkg_intmsg').hide();
    }

}

function fetch_all_series(opts) {
    serreq = 2;
    dataurl = ["/_monp/57/680?gtype="+ginfo["chkgimg"]["gtype"]+"&"+opts+"&chkid="+ginfo["chkgimg"]["chkid"],
    	       "/_monp/57/602?gtype="+ginfo["chkgimg"]["gtype"]+"&"+opts+"&chkid="+ginfo["chkgimg"]["chkid"]
    	      ];

    $('#chkg_intmsg').show();

    for(i in dataurl) {
	$.ajax({
	    url: dataurl[i],
	    method: 'GET',
	    dataType: 'json',
	    success: onSeriesDataReceived,
	    error:function (xhr, ajaxOptions, thrownError){alert(xhr.status+": "+xhr.statusText);}
	});
    }
};

function dset($t) {
    $.ajax({
        url: $t,
        method: 'GET',
        dataType: 'json',
        success: seriesHandler,
	error:function (xhr, ajaxOptions, thrownError){alert(xhr.status+": "+xhr.statusText);}
    });
    return false;
};

function seriesHandler(series) {
    //console.log('DBG: Got series: '+series.label);

    // let's add it to our current data
    if(alreadyFetched[series.label]) {
        delete data[alreadyFetched[series.label] - 1];
    }
    else {
        alreadyFetched[series.label] = ++sercnt;
    }

    data[alreadyFetched[series.label] - 1] = series;

    // Plot all we got
    $.plot(go, data, go_options);
    $.plot(g, data, g_options);
    updateCheckBoxes();
}



function updateCheckBoxes() {
    var i = 0;
    $.each(data, function(key, val) {
	val.color = ++i;
    });
    
    // insert checkboxes 
    var choiceContainer = $("#choices");
    if(!choiceContainer) return;

    choiceContainer.html('Show:');
    $.each(data, function(key, val) {
	choiceContainer.append('<br/><input type="checkbox" name="' + val.label +
			       '" checked="checked" id="id' + val.label + '">' +
			       '<label for="id' + val.label + '">'
			       + val.label + '</label>');
    });
    choiceContainer.find("input").click(plotAccordingToChoices);
}

function plotAccordingToChoices() {
    var d = [];
    var choiceContainer = $("#choices");
    if(!choiceContainer) return;

    choiceContainer.find("input:checked").each(function () {
        var key = $(this).attr("name");
	if(key && data[alreadyFetched[key] - 1]) {
	    d.push(data[alreadyFetched[key] - 1]);
	    //d.push([data[alreadyFetched[key] - 1], {radius: 5}]);
	}
    });

    if(d.length > 0) {
        $.plot(go, d, go_options);
	$.plot(g, d, g_options);
    }
}

function showTooltip(x, y, contents) {
    $('<div id="tooltip">' + contents + '</div>').css( {
        position: 'absolute',
        display: 'none',
        top: y + 35,
        left: x + 5,
        border: '1px solid #fdd',
        padding: '2px',
        'background-color': '#fee',
        opacity: 0.80
    }).appendTo("body").fadeIn(1000);
}

function igo_tooltips(e) {
    igo_tooltips_enabled = e;
    $('input.[name=enableTooltips]').attr('checked',e);
    if(e) {
	$('#enable_tooltips').hide();
	$('#disable_tooltips').show();
    }
    else {
	$('#enable_tooltips').show();
	$('#disable_tooltips').hide();
    }
    
}

function igo_events(e) {
    igo_events_enabled = e;
    $('input.[name=enableEvent]').attr('checked',e);
    if(e) {
	$('#enable_events').hide();
	$('#disable_events').show();
    }
    else {
	$('#enable_events').show();
	$('#disable_events').hide();
    }
    
}

function showInteractive() {
    if(!ginfo["chkgimg"]["inte_e"]) {
	alert('Sorry this type of graph does not currently support interactive mode.');
	return false;
    }

    $('#chkg_static').hide();$('#chkg_inte').show();
    $('#gsfmenudiv_i').show();$('#gsfmenudiv_s').hide();

    if(!igo_initialized) {
	INIT("g1c","g1oc","g1ol");
	$('#intgmenu').html("<a href=\"#\" onclick=\"javascript:showInteractive();\">Interactive</a>"+intgsfmenu);
	igo_events(true);
	igo_tooltips(true);
	igo_initialized = true;
	fetch_all_series("start=-24h");
    }
}

function showStatic(imgid,attr) {
    $('#chkg_static').show();$('#chkg_inte').hide();
    $('#gsfmenudiv_s').show();$('#gsfmenudiv_i').hide();
    gsel(imgid,attr);
}