flot.js

function main() {	
    var DevicesConnector = function() {
        return new Common.Connector("Handlers/JSonHandler.ashx/Devices/");
    }
    var params = {
        chartType: $(document).getUrlParam("chartType"),
        baseCUID: $(document).getUrlParam("CUID"),
        CUID: $(document).getUrlParam("CUID"),
        hash: document.location.hash.replace("#", ""),
        url: $(document).getUrlParam("url"),
        startDate: Number($(document).getUrlParam("startTime")),
        isCompare: $(".compareMenu").size() != 0,
        compareData: [],
        activeLoad : [],
        sortedList:[],
        compareDevices:$("#compareTask").size() == 0
    };

    if (params.chartType == "ResponseTime"
        || params.chartType == "ResponseTime_ByLocation"
        || params.chartType == "ResponseTime_ByTask"
        || params.isCompare)
        $(".outlier").show();
    else $(".outlier").hide();

    function filterOutlier() {
        var useOutlier = $("#outlier").is(":checked");
        function removeElement(ar, index) {
            ar.splice(index, 1);
        }

        function isOutlier(val, avr, stdev) {
            return Math.abs(val[1] - avr) > 2*stdev;
        }
        
        var series = $.extend(true, [], params.plotData);

        if (useOutlier) {
            var max = 0;
            var min = null;
            var maxAvr = 0;
            var minAvr = null;
            var maxLim = null;
            var minLim = null;
            
            var mint = null;
            var maxt = null;
            for (var i = 0; i < series.length; i++) {
                var points = series[i].data;
                if (points.length && points[0].info) {
                    if(mint=-null)
                    {
                        maxt = series[i].Average + series[i].STDDev*2;
                        mint = series[i].Average - series[i].STDDev*2;
                    }
                    else
                    {
                        var tt = series[i].Average + series[i].STDDev*2;
                        if (tt>maxt) maxt = tt;
                        tt = series[i].Average - series[i].STDDev*2;
                        if (tt<mint) mint = tt;
                    }
                }
            }
            maxLim = maxt;
            minLim = mint;

            for (var i = 0; i < series.length; i++) {
                var points = series[i].data;
                if (points.length && points[0].info) {
                    var avr = series[i].Average;
                   
                    for (var j = 0; j < points.length; j++) {
                       
                        if (minLim > points[j][1] || maxLim < points[j][1]) {
                            removeElement(points, j--);
                        } else {
                            if (max < points[j][1]) max = points[j][1];
                            if (min === null) min = points[j][1];
                            else if (min > points[j][1]) min = points[j][1];
                        }
                        
                    }
                }
            }

            
            series.maxY = max;
            series.minY = min;
        } else {
            var max = 0;
            var min = null;
            for (var i = 0; i < series.length; i++) {
                var points = series[i].data;
                if (points.length && points[0].info) {
                    for (var j = 0; j < points.length; j++) {
                        //if (points && points[i] && points[i][j] && points[i][j]) {
                            if (max < points[j][1]) max = points[j][1];
                            if (min === null) min = points[j][1];
                            else if (min > points[j][1]) min = points[j][1];
                        //}
                    }
                }
            }
            
            series = params.plotData;
            series.maxY = max;
            series.minY = min;
        }

        
        
        new Plot(series, true);
    }

    (function outlier() {
        var el = $("#outlier");
        el.click(filterOutlier);
    })();

    function setStddev(av, st) {

        /*if (typeof (av) !== "undefined" && typeof (st) !== "undefined") {
            params.average = av;
            params.stddev = st;
            $("#outlier").removeAttr("disabled");
        } else {
            params.average = null;
            params.stddev = null;
            $("#outlier").attr("disabled", "disabled");
        }*/
    }

    function anyWait() {
        for (var i in params.activeLoad) {
            if (params.activeLoad[i])
                return true;
        }
        return false;
    }
    
    function waitOff() {
        for (var i in params.activeLoad) {
            delete params.activeLoad[i]
        }
        waiting(false);
    }

    if (params.isCompare) {
        
        params.tasks = {
            init: function() {
                $("#compareDevice").change(params.tasks.load);
                $("#compareTask").change(function() {
                    params.devices.isContains();
                })
                params.tasks.load();
            },
            load: function() {
                $("#compareTask").hide();
                $("#addChart").hide();
                var dev = $("#compareDevice").val();
                function on(data) {

                    if (!data || (typeof data.Error !== "undefined" && data.Error != "")) {
                        error(data);
                        return;
                    }
                    
                    
                    $("#compareTask").empty();
                    var html = "";
                    var newData = [];
                    for (var i in data) {

                        if (data[i].Task_ID != defTaskID)
                            newData.push(data[i]);
                    }
                    data = newData;

                    if (data.length == 0) {
                        $("#compareTask").html("<option>No tasks</option>");
                    } else {

                        for (var i in data) {
                           if (!data[i].Task_Name) data[i].Task_Name = "Task";                
                           html += "<option value=" + data[i].Task_ID + ">" + data[i].Task_Name + "</option>";
                        }
                        $("#compareTask").html(html);
                        $("#addChart").show();
                    }
                    $("#compareTask").show();
                    params.devices.isContains();
                }
                DevicesConnector().Post("TasksOf", { Site_Seq_ID: dev }, on);
            }


        }
        params.devices = {

            cache: new Array(),
            actionState: true,
            isContains: function() {

                params.devices.switchButton(!params.devices.isinchart());

            },
            switchButton: function(state) {
                if (params.devices.actionState == state) return;
                params.devices.actionState = state;

                $("#addChart").val(state ? "Add" : "Remove");
                $("#addChart").unbind("click");
                if (state) {
                    $("#addChart").click(params.devices.addAction);
                } else {
                    $("#addChart").click(params.devices.removeActive);
                }

            },
            isinchart: function() {
                var devId = Number(params.compareDevices ? $("#compareDevice").val() : $("#compareTask").val());
                return !!params.devices.cache[devId];
            },

            addDevice: function(deviceId, baseCUID) {
                params.activeLoad[deviceId] = true;
                waiting(true);
                params.devices.changeDevice(baseCUID, deviceId, function(cuid) {
                    cuid = cuid.CUID;
                    params.devices.getUID(cuid, function(processData) {
                        params.devices.wait(processData, function(chartParams) {
                            params.devices.getChartData(chartParams, function(chartData) {
                                var pts = [];
                                $.each(chartData.Series[0].Points, function(i, key) {
                                    var el = [key.X, key.Y];
                                    el.info = key;
                                    pts.push(el);
                                })
                                var newData = { Device: deviceId, label: chartData.Series[0].LegendName, data: pts, color: undefined, tooltip: params.plotData[0].tooltip, Average : chartData.Average, STDDev : chartData.STDDev };
                                if (!params.compareDevices) {
                                    newData.label = newData.label;
                                }
                                params.plotData.push(newData);
                                params.devices.sort();
                                new Plot(params.plotData);
                                filterOutlier();
                                params.devices.isContains();
                                params.activeLoad[deviceId] = false;
                                waiting(false);
                            })
                        })
                    })
                })
            },
            sort: function() {
                function _sort(a, b) {
                    if (!a.Device)
                        return -1;
                    if (!b.Device)
                        return 1;
                    var aInd = sortList[a.Device];
                    var bInd = sortList[b.Device];
                    if (aInd > bInd) return 1;
                    else if (aInd < bInd) return -1;
                    else return 0;
                }
                var sortList = [];
                var ind = 0;
                for (var i in params.sortedList) {
                    sortList[params.sortedList[i]] = i + 1;
                }

                params.plotData = params.plotData.sort(_sort);
            },
            removeActive: function() {
                var devId = Number(params.compareDevices ? $("#compareDevice").val() : $("#compareTask").val());
                params.devices.removeDevice(devId);
            },
            removeDevice: function(deviceId) {
                var newCache = [];
                var newPlotData = [];
                for (var i in params.devices.cache) {
                    if (i != deviceId)
                        newCache[i] = params.devices.cache[i];
                }
                for (var i in params.plotData) {
                    if ((!params.plotData[i].Device || params.plotData[i].Device != deviceId)) {
                        if (isNaN(Number(i)))
                            newPlotData[i] = params.plotData[i];
                        else
                            newPlotData.push(params.plotData[i]);
                    }
                }
                params.plotData = newPlotData;
                params.devices.cache = newCache;

                Plot(params.plotData);
                params.devices.isContains();
            },

            changeDevice: function(CUID, newDevice, callback) {
                if (params.devices.cache[newDevice] && params.devices.cache[newDevice].CUID) {
                    callback({ CUID: params.devices.cache[newDevice].CUID });
                }
                else {
                    if (params.compareDevices) {
                        if ( sitePlatform == "BrowserView" || sitePlatform == "UserView" || sitePlatform == "MetricsView") {
                            function __on(data) {
                                if (data && data.length > 0) {
                                    var tid = data[0].Task_ID;
                                    Connector().Post("ChangeTask", { CUID: unescape(CUID), newTask: tid }, _on);
                                } else { error(); }
                            }
                            DevicesConnector().Post("TasksOf", { Site_Seq_ID: $("#compareDevice").val() }, __on);
                        } else {
                            Connector().Post("ChangeDevice", { CUID: unescape(CUID), newDevice: newDevice }, _on);
                        }
                    }
                    else
                        Connector().Post("ChangeTask", { CUID: unescape(CUID), newTask: newDevice }, _on);
                }

                function _on(data) {
                    if (!data || (typeof data.Error !== "undefined" && data.Error != "")) {
                        error(data);
                        return;
                    }
                    params.sortedList.push(newDevice);
                    params.devices.cache[newDevice] = {};
                    params.devices.cache[newDevice].CUID = data.CUID;
                    callback(data);
                }
            },

            update: function() {
                for (var i in params.devices.cache) {
                    if (!isNaN(Number(i))) {
                        params.devices.addDevice(i);
                    }

                }

            },

            getChartData: function(_data, callback) {
                var basedata = {
                    chartType: params.chartType
                }
                var data = $.extend(data, _data);
                
                Connector().Post("GetChart", data, _on);

                function _on(data) {
                    if (!data || (typeof data.Error !== "undefined" && data.Error != "")) {
                        error(data);
                        return;
                    }
                    callback(data);
                }
            },

            getUID: function(CUID, callback) {

                var data = {
                    CUID: unescape(CUID),
                    UID: "",
                    ResponseFilterUri: null,
                    chartType: params.chartType
                };

                if (params.filter) {
                    data.Start = params.filter.Start;
                    data.End = params.filter.End;
                } else if (params.devices.cache[CUID]) {
                    callback({ CUID: CUID, UID: params.devices.cache[CUID] });
                    return;
                }
                Connector().Post("IsInProcess", data, _on);



                function _on(data) {
                    if (!data || (typeof data.Error !== "undefined" && data.Error != "")) {
                        error(data);
                        return;
                    }
                    params.devices.cache[data.CUID] = data.UID;
                    callback({ CUID: data.CUID, UID: data.UID });
                }
            },

            wait: function(_data, callback) {
                if (!_data || (typeof _data.Error !== "undefined" && _data.Error != "")) {
                    error(data);
                    return;
                }
                var basedata = {
                    chartType: params.chartType
                }
                var data = $.extend(data, _data);
                Connector().Post("IsInProcess", data, check);

                function check(data) {
                    if (!_data || (typeof data.Error !== "undefined" && data.Error != "")) {
                        error(data);
                        return;
                    }
                    if (data.IsDone) {
                        callback({ CUID: data.CUID, UID: data.UID });
                    } else if (data.IsInProcess) {
                        setTimeout(function() { Connector().Post("IsInProcess", data, check); }, 3000);
                    }
                }
            },
            addAction: function() {
                params.devices.addDevice(params.compareDevices ? Number($("#compareDevice").val()) : Number($("#compareTask").val()), params.CUID);
            },
            init: function() {
                $("#addChart").click(params.devices.addAction);
                if (params.compareDevices) $("#compareDevice").change(function() {
                    params.devices.isContains();
                })
            }

        };
        
        if (!params.compareDevices)
	        params.tasks.init();            
	    params.devices.init();
    }
    
    function error(msg) {
        $.colorbox({ html: $("<div>").css('padding', '10px').html(msg?(msg.Error? msg.Error : msg):"<center>Please, reload page and try again<br><input type='button' value='Reload Page' style='margin-top:20px;' onclick='javascript:location.reload(true);'/></center>"), title: "Server Error" });
    }
	

	var Connector = function() {
		var onStart = function() {
			if(this.data.CUID === undefined) this.data.CUID = params.CUID;
		};
		return new Common.Connector("Handlers/JSonHandler.ashx/ChartAdapter/", {onStart: onStart});
	}
	
	var filter = new Filter(),
	    wholeBtn = $("#whole");
    var data = {ResponseFilterUri: params.url};
    if(params.startDate !== undefined) {
        data.Start = params.startDate - 1000 * 60 * 60 * 24 * 7;
        data.End   = params.startDate ;

        $("#startDate").val($.formatDate(new Date(data.Start), "MM/dd/yyyy hh:mm:ss a"));
        $("#endDate").val($.formatDate(new Date(data.End), "MM/dd/yyyy hh:mm:ss a"));
    }

    new GetChart(data);
    
    var oldShowStripValue = true;
    function StripVisible() { 
        return $($.find("input:radio[name=getParams]:checked")).val() === "true";
    }
    function ActualUrl() {
        return unescape(StripVisible() ? params.url : params.url.split('%3F')[0] + '*')
    }

	function toUTCString(dateString) {
		var d = new Date(Number(dateString));
		return d.toUTCString().replace(" GMT", "");
	}

	function setRanges(filter) {
	    var data = {
	        Start: filter.from,
	        End: filter.to,
	        ResponseFilterUri: filter.url
	    };
	    params.filter = data;
	    new GetChart(data);
	    
	    whole();
	}

	function whole()
	{
	    wholeBtn.filter(":not(visible)")
			.data("hash", document.location.hash)
			.unbind("click")
			.click(function() {

	            document.location.hash = $(this).hide().data("hash");
			    params.CUID = params.baseCUID;
			    new GetChart();
			    delete params.filter;
			});
	}

	function ToolTip() {
	    var showTooltip = function(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 point = function(item) {
	        var getPoint = function(n) { return item.datapoint[n].toFixed(2); };
	        var x = toUTCString(getPoint(0));
	        var y = getPoint(1);
	        return { x: x, y: y };
	    };

	    this.Downtime = function(item) {
	        showTooltip(item.pageX, item.pageY, item.series.label);
	    };

	    this.ResponseTime = function(item) {

	        var p = point(item);
	        if (item.series.ttmessage)
	            showTooltip(item.pageX, item.pageY, item.series.ttmessage);
	        else
	            showTooltip(item.pageX, item.pageY, p.x + " = " + p.y);
	    };

	    this.ResponseTime_ByLocation = function(item) {
	        var p = point(item);
	        if (item.series.ttmessage)
	            showTooltip(item.pageX, item.pageY, item.series.ttmessage);
	        else
	            showTooltip(item.pageX, item.pageY, item.series.label + " of " + p.x + " = " + p.y);
	    };

	    this.ResponseTimeWithUri = function(item) {
	        var p = point(item);
	        if (item.series.ttmessage)
	            showTooltip(item.pageX, item.pageY, item.series.ttmessage);
	        else
	            showTooltip(item.pageX, item.pageY, item.series.label + " of " + p.x + " = " + p.y);
	    };


	    this.ResponseTime_ByTask = function(item) {
	        var p = point(item);
	        if (item.series.ttmessage)
	            showTooltip(item.pageX, item.pageY, item.series.ttmessage);
	        else
	            showTooltip(item.pageX, item.pageY, item.series.label + " of " + p.x + " = " + p.y);
	    };

	    this.Week = function(item) {
	        var p = point(item);
	        if (item.series.ttmessage)
	            showTooltip(item.pageX, item.pageY, item.series.ttmessage);
	        else
	            showTooltip(item.pageX, item.pageY, p.y);
	    };

	    this.Day = function(item) {
	        var p = point(item);
	        if (item.series.ttmessage)
	            showTooltip(item.pageX, item.pageY, item.series.ttmessage);
	        else
	            showTooltip(item.pageX, item.pageY, p.y);
	    };

	    this.History = function(item) {
	        var info = item.series.info;
	        var from = toUTCString(info.StartTime);
	        var to = toUTCString(info.EndTime);
	        var type = info.BaseType;

	        showTooltip(item.pageX, item.pageY, type + "<br/>from " + from + "<br/>to " + to);
	    };
	}

	function Plot(data, notsave) {
	    if (!notsave) { params.plotData = data;  }
	    if (params.isCompare) {
	        data.options.legend.show = true;
	        
	        data.options.legend.container = $("#legend_container");
	        $("#legend_container").show();
	        
	    }
	    var plot = $("#TimeWork").empty();
	    if (!data.options.yaxis) data.options.yaxis = {};
	    data.options.yaxis.autoscaleMargin = null;
	    
	    if (params.chartType.toLowerCase() === "downtime") {
	        if (!data.options.series) data.options.series = {};
	        data.options.series.pie = { show: true, label: { show:false } };
	    }
	    

	    if (data.maxY && data.options.yaxis) data.options.yaxis.max = data.maxY;
	    if (data.minY && data.options.yaxis) data.options.yaxis.min = data.minY;
		$.plot(plot, data, data.options);
		
		plot.unbind("plotclick");
		if (params.chartType.toLowerCase() !== "downtime") {
		   plot.bind("plotclick", plotclick);
		}
		
		if(Plot.IsSetEvents != true) {
			Plot.IsSetEvents = true;
			plot.bind("plothover", plothover);
			plot.bind("plotselected", plotselected);
		}
		
		function plotclick(event, pos, item) {
		    if (item && item.series.data[item.dataIndex].info) {
				var info = item.series.data[item.dataIndex].info;
				if (info.CanShowWaterfall) {
				    function on(r) {
				        if (r.CanShowDetailView) {
				            window.open('DetailView.aspx?id=' + info.ID + '&CUID=' + params.CUID);
				        }
				    }
				    Connector().Post("CanShowDetailView", { ID: info.ID }, on);
				}
				if(info.CanDrillDown) {
					var data = { 
						Start: info.Start,
						End: info.End,
						ResponseFilterUri: ActualUrl()
					};
					new GetChart(data);
					whole();
					wholeBtn.show();
				}
			}
		}

		function plotselected(event, ranges) {
		    wholeBtn.show();
		    setRanges({ from: ranges.xaxis.from, to: ranges.xaxis.to, url: params.url });
		}
		
		function plothover(event, pos, item) {
			function select(on) {
				if (on) {
					this.currentSelected = item;
					plot.highlight(item.series, item.datapoint, false);
				} else {
					if (this.currentSelected !== undefined) {
						plot.unhighlight(this.currentSelected.series, this.currentSelected.datapoint);
						this.currentSelected = undefined;
					}
				}
			}
			function tooltip(on) {
			    
				var elm = $("#tooltip");
				elm.remove();
				
                

				if (on) {
				    if (item.series.tooltip)
				        item.series.tooltip(item);
				    else if (params.chartType.toLowerCase() === "downtime") {
				        $('<div id="tooltip">' + item.series.label + '</div>').css({
				            position: 'absolute',
				            display: 'none',
				            top: pos.pageY - 15,
				            left: pos.pageX + 5,
				            border: '1px solid #fdd',
				            padding: '2px',
				            'background-color': '#fee',
				            opacity: 0.80
				        }).appendTo("body").fadeIn(200);
				    }
				}
			}

			if (item) {
			    if (typeof (this.previousPoint) == 'undefined') {
			        this.previousPoint = item.datapoint;
			        tooltip(true);
			    }
				if (this.previousPoint != item.datapoint) {
					this.previousPoint = item.datapoint;
					tooltip(true);
				}
			}
			else {
				tooltip(false);
				this.previousPoint = undefined;
			}
		}	
	}

	function Chart(data, reLegend) {

	    //setStddev(data.Average, data.STDDev);

	    var tooltip = (new ToolTip())[params.chartType];
	    
	    if (reLegend != false) Chart.legend = new Legend($("#legend_container"), params.chartType, data.Series);

	    var legend = Chart.legend;
	    
		legend.click(function() { new Chart(data, false); });

		
		if ($(".charttitle").text() === "")
		   $(".charttitle").html(data.Header);
		$("#footer").text(data.Footer);
		new Plot(new Types(params.chartType));

		function Types(type) {
		    
            var dest = [];
			
			function line() {
				dest.zoom = true;
				dest.options = {
					xaxis: { mode: "time" },
					selection: { mode: "x" },
					legend: { show: false },
					grid: { hoverable: true, clickable: true, color: "#a1a1a1", borderWidth: 0.5 }
				};
				dest.maxY = 0;
				dest.minY = null;
				$(data.Series).each(function(index, line) {
					var filter = legend.filter(index + "" + line.LegendName);
					if (filter.val) {
					    var l = { label: line.LegendName, data: [], tooltip: tooltip, color: filter.color, Average: typeof (data.Average) !== "undefined" ? data.Average : line.Average, STDDev: typeof (data.STDDev) !== "undefined" ? data.STDDev : line.STDDev };
						$(line.Points).each(function(index, p) {
							var v = [p.X, p.Y];
							v.info= {ID: p.ID, Start: p.Start, End: p.End, CanShowWaterfall: p.CanShowWaterfall, CanDrillDown: p.CanDrillDown, y: p.Y};
							l.data.push(v);
							if (p.Y > dest.maxY) { dest.maxY = p.Y; }
							if (dest.minY === null) dest.minY = p.Y;
							else if (dest.minY > p.Y) dest.minY = p.Y;
						});
						dest.push(l);
					}
	            });
                if (data.Background)
	            $(data.Background).each(function(index, line) {
	                var max = dest.maxY == 0 ? 100 : dest.maxY;
	                var l = { data: [[line.Start, max]], ttmessage: "<span style='font-weight:bold;'>" + line.Type + "</span><br>HitCount: " + line.HitCount+"<br/>From: "+new Date(line.Start) + "<br/>To:"+new Date(line.End), tooltip: tooltip, color: line.color, bars: { lineWidth: 0, barWidth: (line.End - line.Start), show: true} };
	                dest.push(l);
	            });
	                
				if (dest.maxY === 0) { dest.maxY = 0.001; }
			}
			
			this.Downtime = function() {
				dest.zoom = false;
				var tickFormatter = function(v, axis, a) {
					return "";
				};
				dest.options = {
					xaxis: { tickSize: 1, tickFormatter: tickFormatter },
					yaxis: { max: 100 },
					legend: { show: false },
					grid: { hoverable: true, clickable: true, color: "#a1a1a1", borderWidth: 0.5 }
				};
				var x = 0;
				$(data.Series).each(function(index, line) {
				    var filter = legend.filter(index + "" + line.LegendName);
					var l = { label: line.LegendName, data: [], bars: { show: true }, tooltip: tooltip, color: filter.color };
					$(line.Points).each(function(index, point) {
						l.data.push([x++, point.Y]);
					});
					dest.push(l);
				});
			}
			
            this.ResponseTime = function() { line(); };
            this.ResponseTime_ByLocation = function() { line(); };
            this.ResponseTimeWithUri = function() { line(); };
            this.ResponseTime_ByTask = function() { line(); };
            this.Week = function() {
                dest.zoom = false;
                var tickFormatter = function(v, axis) {
                    return ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", ""][v];
                };
                dest.options = {
                    xaxis: { tickFormatter: tickFormatter },
                    legend: { show: false },
                    grid: { hoverable: true, clickable: true, color: "#a1a1a1", borderWidth: 0.5 }
                };
                var x = 0;
                $(data.Series).each(function(index, line) {
                    var l = { label: line.LegendName, data: [], bars: { show: true, align: "center" }, tooltip: tooltip };
                    $(line.Points).each(function(index, point) {
                        l.data.push([x++, point.Y]);
                    });
                    dest.push(l);
                });
            };

            this.Day = function() {
                dest.zoom = false;
                var tickFormatter = function(v, axis) { return v; };
                dest.options = {
                    xaxis: { tickSize: 1, tickFormatter: tickFormatter },
                    legend: { show: false },
                    grid: { hoverable: true, clickable: true, color: "#a1a1a1", borderWidth: 0.5 }
                };
                var x = 0;
                $(data.Series).each(function(index, line) {
                    var l = { label: line.LegendName, data: [], bars: { show: true, align: "center" }, tooltip: tooltip };
                    $(line.Points).each(function(index, point) {
                        l.data.push([x++, point.Y]);
                    });

                    dest.push(l);
                });
            };

			this[type]();
			return dest;
		}		
	}

	    function waiting(on, proc) {
	    if (!on && anyWait()) return;
			var waiting = $("#waiting");
			if (on) {
			    var dialogWidth;
			    var dialogHeight = 150;
				waiting.dialog({
					modal: true,
					width: 600,
					position: (isMobile.any()) ? [0, 0] : { my: "center", at: "center", of: window },
					closeOnEscape: false,
					open: function () {
					    if (isMobile.any()) {
					        $(this).dialog("option", "width", (window.innerWidth > 600) ? 600 : (window.innerWidth - 10));
					        dialogWidth = $(this).dialog("option", "width");
					        var left = (window.innerWidth / 2) - (dialogWidth / 2);
					        var top = (window.innerHeight / 2) - (dialogHeight / 2);
					        $(this).dialog("option", "position", [left, top]);
					    }
					},
				});
				
				waiting.dialog("open");
				waiting.prev(".ui-dialog-titlebar").hide();
			}else{
				waiting.dialog("close");
			}

        }
        
		function GetChart(extra_params) {
		    var CUID;
		    params.activeLoad["main"] = true;
		waiting(true);
		if(extra_params !== undefined || params.hash == "") {		
			wait({UID: ""});
		}else{
			get({UID: params.hash});

        }       


		function get(r) {
		    var UID = r.UID;
		    function on(r) {
		        
		        new Chart(r);
		        filterOutlier();
				filter.set(r.Range);
				if (params.isCompare) { params.devices.update(); }
				params.activeLoad["main"] = false;
				waiting(false);
				
		    }
            Connector().Post("GetChart", { chartType: params.chartType, CUID: unescape(params.CUID), UID: UID, ResponseFilterUri: ActualUrl() }, on);
		}

		
	    
		function wait(r) {
		    function check(r) {
				CUID = r.CUID;
				if (r.Error != "") {
				    params.activeLoad["main"] = false;
				    waiting(false);
				    if (isMobile.any()) {
				        $.colorbox.settings.width = "70%";
				        $.colorbox.settings.height = "260px";
				        $.colorbox.settings.reposition = false;
				    }
				    $.colorbox({ html: $("<div>").css('padding', '10px').html(r.Error), title: 'Server error' });
				    $(document).bind('cbox_complete', function () {
				        if (isMobile.any()) {
				            $("#colorbox").css({
				                left: window.pageXOffset + ((window.innerWidth / 2) - ($("#colorbox").width() / 2))
				            });
				            $("#colorbox").css('font-size', '3vw');
				            $("#colorbox").css('text-align', 'center');
				            $("#cboxTitle").css('font-size', '3vw');
				        }
				    });
				    
				} else if (r.IsDone) {
				    document.location.hash = "#" + escape(r.UID);
				    if (params.hash === '') params.hash = document.location.hash.replace("#", "");
					get(r);
				} else {
					setTimeout(function() { wait(r); }, 3000);
				}
}

			var data = $.extend({ chartType: params.chartType, CUID: unescape(params.CUID), UID: r.UID }, extra_params);
			extra_params = {};

			if (data.Start <= 0 || data.End <= 0) {
			    delete data.Start;
			    delete data.End;
			}
			
			if (data.ResponseFilterUri)
			    data.ResponseFilterUri = unescape(data.ResponseFilterUri);
			Connector().Post("IsInProcess", data, check);
		}
	}

	function Legend(container, type, lines) {
	    
        var click;
        var filter = {};
        var color = ["#a7cd5e", "#ae59b3", "#757fce", "#7d7d41", "#e15f00", "#3896c6", "#2c9f36", "#a02f09", "#eab80b", "#a7a7a7", "#6a3604", "#afcffd", "#c2c655", "#71d3d4", "#b07061", "#dc143c", "#483d8b", "#ff1493", "#696969", "#ffb6c1", "#ffa500", "#ff0000", "#000080", "#00ff00", "#ffa07a", "#8b0000"];
        
        color.current = 0;
        this.container = container;
        tr();
		draw();

		function tr() {
			var elm = container.find("tr").hide();
			if (elm.size() == 1) {
			    var maxRows = Math.ceil(lines.length / container.find("tr:first td").size());
				for(var i = 0; i < maxRows; i++) {
					elm.after(elm.clone());
				}
			}
		}

        function Types() {
            function draw() {
                function widthTd() {
                    var count = container.find("tr:first td").size();
                    return $(document).width() / count;
                }
                refresh();
                var tds = container.find("td");
                var i = 0;
                var widthTd = widthTd();

                jQuery.each(filter, function(key, val) {
                    var enabled = lines[i].Points.length != 0;
                    var elm = new Checkbox(lines[i].LegendName, key, filter[key].color, check, enabled);
                    if (enabled) elm.on(); else elm.off();
                    $(tds[i++]).empty().append(elm.elm).closest("tr").show();
                });

                //extending to a full list of monitors
                if (params.chartType == "ResponseTime_ByLocation" || params.chartType == "ResponseTimeWithUri")
                if (existingMonitors !== undefined) {
                    jQuery.each(existingMonitors, function(index, mName) {
                    if (filter === undefined || filter[mName] == null) { 
                            var elm = new Checkbox(mName, mName, "lightgray", function(){}, false);
                            elm.off();
                            $(tds[i++]).empty().append(elm.elm).closest("tr").show();
                        }
                    });
                }
            }
            function downtime() {
                refresh();
                var tds = container.find("td");
                var i = 0;
                jQuery.each(filter, function(key, val) {
                    var elm = new Checkbox(lines[i].LegendName, key, filter[key].color);
                    elm.off();
                    $(tds[i++]).empty().append(elm.elm).closest("tr").show();
                });
            }

            this.Downtime = function() { downtime(); };
            this.ResponseTime = function() { };
            this.ResponseTime_ByTask = function() { draw(); };
            this.ResponseTime_ByLocation = function() { draw(); };
            this.ResponseTimeWithUri = function() { draw(); };
            this.Week = function() { };
            this.Day = function() { };
        }

        function draw() {
            (new Types())[type]();
        }

        this.filter = function(name) {
            var f = filter[name];
            if (f === undefined) {
                return { val: true };
            } else {
                return { val: f.val, color: f.color };
            }
        };

        this.click = function(callback) {
            click = callback;
        };

        function refresh() {
            var empty = true;
            $(lines).each(function(index, line) {
                var f = filter[index+line.LegendName] = {};
                f.val = true;
                f.color = color[color.current++];
                empty = false;
            });
            if (!empty) { container.show(); }
        }

        function check(data, val) {
            filter[data].val = val;
            click();
        }
    }

    function Checkbox(text, data, color, click, width) {
		if(Checkbox.checkbox === undefined) Checkbox.checkbox = $(".legendcheckboxlist").clone(true).show();
        var obj = this;
        var img = { on: "images/ccheckbox-on.gif", off: "images/ccheckbox-off.gif" };
        var elms = {
            elm: Checkbox.checkbox.clone(true)
        };
        elms.div = elms.elm.find(".legendcheckbox").css("background-color", color);
        elms.img = elms.elm.find("img")[0];
        this.elm = elms.elm;
        if (width != false) elms.elm.click(onclick);
        var div = $('<div style="overflow:hidden"><div>').text(text);
        if (width == false) $(div).css("color", "lightgray");
        div.width(width);
        elms.elm.find(".legendcheckboxlabel").html(div);

        var val = false;

        function onclick() {
            if (click !== undefined) {
                if (val) {
                    obj.off();
                } else {
                    obj.on();
                }
                click(data, val);
            }
        }

        this.off = function() {
            elms.img.src = img.off;
            val = false;
        };

        this.on = function() {
            elms.img.src = img.on;
            val = true;
        };

        this.val = function() { return data; };
    }

    function Filter() {
        var testDate = new RegExp(/\d{1,2}\/\d{1,2}\/\d{2,4}/);
        
		var elms = {
			startDate: $("#startDate"),
			endDate: $("#endDate")
		}
		$("#startDate, #endDate")
		.focus(function() {
		    $(this).attr("prevValue", $(this).val());
		})
		.blur(function() {
		    var val = $(this).val();

		    var dStart = new Date(elms.startDate.val());
		    var dEnd = new Date(elms.endDate.val());
		    var d = new Date(val);
		    var test = new RegExp(/(\d{1,2})\/(\d{1,2})\/(\d{4,4})\D((\d{1,2}):(\d{1,2}):(\d{1,2})\s(PM|AM))?/);
		    var ex = test.exec(val);
		    if ($(this).attr("prevValue")) {
		        var dt = Date.parse(val);
		        if (!test.test(val) || isNaN(dt) || (dStart.getTime() == dEnd.getTime()) || Number(ex[1]) <= 0 || Number(ex[2]) <= 0 || Number(ex[3]) <= 0 || Number(ex[1]) > 12 || Number(ex[2]) > 31)
		            $(this).val($(this).attr("prevValue"))
            }
		    $(this).removeAttr("prevValue");
		});
		this.set = function(range) {
			
			//set(elms.startDate, range.from);
			//set(elms.endDate, range.to);

			function set(elm, val) {
				var v = $.formatDate(new Date(val), "MM/dd/yyyy hh:mm:ss a");
				elm.val(v);
			}
		};
					
		if(params.url!==null) {
			$("#filter").show();
			$("#back").show();
		}
		$("#load").click(function() {
		    if (Date.parse(elms.startDate.val()) && Date.parse(elms.endDate.val()))
			var filter = {
				from: m(elms.startDate.val()),
				to: m(elms.endDate.val()),
				url: ActualUrl()
			};
			setRanges(filter);
			function m(s) { return new Date(s).getUTCTotalMilliseconds(); }
        });

        $("#back").click(function() {
            if (document.referrer != '') window.location = document.referrer;
            else window.history.go(-1 * (window.history.length - 1));
        });

        $("input:radio[name=getParams]").change(function() {
        if (StripVisible() == oldShowStripValue) return;
        oldShowStripValue = StripVisible();
            var filter = {
                from: m(elms.startDate.val()),
                to: m(elms.endDate.val()),
                url: ActualUrl()
            };
            setRanges(filter);
            function m(s) { return new Date(s).getUTCTotalMilliseconds(); }
        });
    }
}