/// <reference path="~/GeneratedArtifacts/viewModel.js" />
/// <reference path="../Scripts/wijmo.cba.js" />

var ptsCount = 160;

var down = false;
var isZoomed = false;
var start = null;
var end = null;
var hostEl = null;
var hostElRect = {};
var chart = null;
var offset = null;
var selection = null;
var resetZoom = null;

function mouseDown(e) {
    if (!isZoomed) {
        down = true;
        hostElRect = {
            left: hostEl.offsetLeft,
            top: hostEl.offsetTop,
            bottom: hostEl.clientHeight + hostEl.offsetTop,
            right: hostEl.clientWidth + hostEl.offsetLeft
        };
        e.preventDefault();
    }
}

function mouseMove(e, pt) {
    if (down) {
        if (isZoomed) {
            end = {
                x: Math.max(hostElRect.left, Math.min(hostElRect.right, pt.x)),
                y: Math.max(hostElRect.top, Math.min(hostElRect.bottom, pt.y))
            }

            // update selection rectangle
            var w = end.x - start.x;
            var h = end.y - start.y;

            if (w >= 0) {
                selection.style["left"] = (start.x - offset.left) + "px";
                selection.style["width"] = w + "px";
            } else {
                selection.style["left"] = (end.x - offset.left) + "px";
                selection.style["width"] = (-w) + "px";
            }
            if (h >= 0) {
                selection.style["top"] = (start.y - offset.top) + "px";
                selection.style["height"] = h + "px";
            } else {
                selection.style["top"] = (end.y - offset.top) + "px";
                selection.style["height"] = (-h) + "px";
            }
        } else {
            selection.style["visibility"] = "visible";
            offset = {
                left: selection.offsetParent.offsetLeft,
                top: selection.offsetParent.offsetTop
            }

            start = pt;

            isZoomed = true;
        }
        e.preventDefault();
    }
}

function mouseUp(e) {
    hostEl = chart.hostElement;
    down = false;

    if (end) {
        // convert screen to data coordinates
        var min = new wijmo.Point($(selection).position().left - $(hostEl).position().left, $(selection).position().top - $(hostEl).position().top);
        var max = new wijmo.Point($(selection).position().left + $(selection).width() - $(hostEl).position().left, $(selection).position().top + $(selection).height() - $(hostEl).position().top);
        var p1 = chart.pointToData(min);
        var p2 = chart.pointToData(max);

        selection.style["visibility"] = "hidden";
        selection.style["width"] = "0px";
        selection.style["height"] = "0px";
        selection.style["left"] = "0px";
        selection.style["top"] = "0px";

        // update axes
        chart.beginUpdate();
        chart.axisX.min = Math.max(-2, Math.min(p1.x, p2.x));
        chart.axisY.min = Math.max(-2, Math.min(p1.y, p2.y));
        chart.axisX.max = Math.min(2, Math.max(p1.x, p2.x));
        chart.axisY.max = Math.min(2, Math.max(p1.y, p2.y));
        chart.endUpdate();

        end = start = null;

        e.preventDefault();
    }
}

myapp.ChartZoom.FlexChart_render = function (element, contentItem) {
    var chart = new c1.cba.FlexChart($(element), contentItem);
    var collectionView = new c1.cba.LightSwitchCollectionView(contentItem);
    chart.wjControl.itemsSource = collectionView;
    myapp.chart = chart.wjControl;
    selection = $("<div id=\"plotSelection\" style=\"background-color:rgba(85, 85, 85, 0.05); border:2px dashed #808080;position:absolute;display:block;left:0;top:0;pointer-events:none;visibility:hidden\"></div>").insertAfter($(element))[0];
};

myapp.ChartZoom.ResetZoom_render = function (element, contentItem) {
    chart = myapp.chart;
    hostEl = chart.hostElement;

    hostEl.onmousedown = function (e) {
        mouseDown(e);
    };

    document.onmousemove = function (e) {
        mouseMove(e, new wijmo.Point(e.pageX, e.pageY));
    };

    document.onmouseup = function (e) {
        mouseUp(e);
    };

    $("<button>Reset zoom</button>")
    .appendTo($(element))
    .click(function () {
        // set min and max to null/undefined to enable the default scaling
        chart.beginUpdate();
        chart.axisX.min = -2;
        chart.axisY.min = null;
        chart.axisX.max = 2;
        chart.axisY.max = null;
        chart.endUpdate();
        isZoomed = false;
    });
};

myapp.ChartZoom.Settings_render = function (element, contentItem) {
    $("<span>This view shows how to implement a custom zoom for the <b>FlexChart</b> control. Use the mouse to select a rectangular area on the plot area. The chart will zoom in on the selected area. When you are done, click the \"Reset Zoom\" button below the chart to return to the original view. </spam>").appendTo($(element));
};
