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

function lineMarkerContent(hitInfo, pt) {
    var html = '', chart = hitInfo.series ? hitInfo.series.chart : undefined;
    if (!chart || !chart.series) {
        return html;
    }
    chart.series.forEach(function (s, i) {
        var ht = s.hitTest(new wijmo.Point(pt.x, NaN)), hostEle = s.hostElement, polyline;

        polyline = s.hostElement ? s.hostElement.getElementsByTagName("polyline")[0] : undefined;

        if (polyline && ht.x && ht.y !== null) {
            if (i == 0) {
                html += wijmo.Globalize.formatDate(ht.x, 'dd-MMM');
            }
            html += '<div style="color:' + polyline.getAttribute('stroke') + '">' + ht.name + ' = ' + ht.y.toFixed(2) + '</div>';
        }
    });
    return html;
}

myapp.ChartLineMarker.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;
};

myapp.ChartLineMarker.Lines_render = function (element, contentItem) {
    $("<select><option>None</option><option selected>Vertical</option><option>Horizontal</option><option>Both</option></select>")
    .appendTo($(element))
    .change(function () {
        if (myapp.chart.extenders && myapp.chart.extenders.length > 0) {
            myapp.chart.extenders[0].lines = $(this).val();
        }
    });
};

myapp.ChartLineMarker.Alignment_render = function (element, contentItem) {
    $("<select><option>Auto</option><option>Right</option><option>Left</option><option>Bottom</option><option>Top</option><option>Left &amp; Bottom</option><option>Left &amp; Top</option></select>")
    .appendTo($(element))
    .change(function () {
        if (myapp.chart.extenders && myapp.chart.extenders.length > 0) {
            var value = $(this).val(), lineMarker = myapp.chart.extenders[0];
            if (value === "Left & Bottom") {
                lineMarker.alignment = 5;
            } else if (value === "Left & Top") {
                lineMarker.alignment = 7;
            } else if (value === "Left") {
                lineMarker.alignment = 1;
            } else if (value === "Top") {
                lineMarker.alignment = 6;
            } else if (value === "Right") {
                lineMarker.alignment = 0;
            } else if (value === "Bottom") {
                lineMarker.alignment = 4;
            } else {
                lineMarker.alignment = 2;
            }
        }
    });
};

myapp.ChartLineMarker.Interaction_render = function (element, contentItem) {
    $("<select><option>None</option><option selected>Move</option><option>Drag</option></select>")
    .appendTo($(element))
    .change(function () {
        if (myapp.chart.extenders && myapp.chart.extenders.length > 0) {
            myapp.chart.extenders[0].interaction = $(this).val();
        }
    });
};