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

myapp.ChartGettingStarted.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.ChartGettingStarted.ChartType_render = function (element, contentItem) {
    $("<select><option>Column</option><option>Bar</option><option>Scatter</option><option>Line</option><option>LineSymbols</option><option>Area</option><option>Spline</option><option>SplineSymbols</option><option>SplineArea</option></select>")
    .appendTo($(element))
    .change(function () {
        myapp.chart.chartType = $(this).val();
    });
};

myapp.ChartGettingStarted.Stacking_render = function (element, contentItem) {
    $("<select><option>None</option><option>Stacked</option><option value='Stacked100pc'>Stacked 100%</option></select>")
    .appendTo($(element))
    .change(function () {
        myapp.chart.stacking = $(this).val();
    });
};

myapp.ChartGettingStarted.Rotated_render = function (element, contentItem) {
    $("<select><option>False</option><option>True</option></select>")
    .appendTo($(element))
    .change(function () {
        myapp.chart.rotated = $(this).val() === "True";
    });
};

myapp.ChartGettingStarted.Palette_render = function (element, contentItem) {
    $("<select><option>standard</option><option>cocoa</option><option>coral</option><option>dark</option><option>highcontrast</option><option>light</option><option>midnight</option><option>minimal</option><option>modern</option><option>organic</option><option>slate</option></select>")
    .appendTo($(element))
    .change(function () {
        myapp.chart.palette = wijmo.chart.Palettes[$(this).val()];
    });
};

myapp.ChartGettingStarted.GroupWidth_render = function (element, contentItem) {
    $("<select><option>25%</option><option selected>70%</option><option>100%</option><option value='50'>50 pixels</option></select>")
    .appendTo($(element))
    .change(function () {
        if (myapp.chart.options) {
            myapp.chart.options.groupWidth = $(this).val();
        }
        else {
            myapp.chart.options = { "groupWidth": $(this).val() };
        }
        myapp.chart.refresh();
    });
};