@* ROW 1 COL 1 - CARD: DONUT CHART ------------------------------------- *@

<table class="pv-abs pv-transparent" id="donut-total">
    <tr>
        <td align="center">
            <div>Total&nbsp;&nbsp;</div>
            <div style="font-weight:bold" id="donut-total-value"></div>
        </td>
    </tr>
</table>

<div class="pv-menu k-content">
    <div class="btn-group pull-right">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-ellipsis-h"></i>
        </button>
        <ul class="dropdown-menu">
            <li>
                <input type="checkbox" data-key="pieType" name="pieType" id="pieModeType" class="switcher px" />
            </li>
            <li>
                <input type="checkbox" data-key="pieMode" name="pieMode" id="pieModeForecast" class="switcher px" />
            </li>
            <li>
                <input type="checkbox" data-key="expendituresMode" name="expendituresMode" id="expendituresMode" class="switcher px" checked="checked" />
            </li>
        </ul>
    </div>
</div>
<div class="pv-chart" id="chartDonut1" style="height: 300px; z-index: 1;"></div>
<div id="legenddiv"></div>

<script>
    var donutData = null;
    var otherDonutData = null;
    var projectsFilterArray = [];
    var goalsFilterArray = [];
    var donutRender = false;

    init.push(function () {
        @if (Request.Browser.Browser == "IE" && Request.Browser.MajorVersion < 11)
        {
        <text>AmCharts.ready(function (a) { loadDonutData(); });</text>
        }
        else
        {
        <text>loadDonutData();</text>
        }
        initDonutMenu();
        totalPosition();
    });

    function totalPosition() {
        if ($('#pieModeForecast').prop('checked')) {
            if ($(window).width() > 1610) {
                $("#donut-total").css('margin-left', '39%');
            } else {
                $("#donut-total").css('margin-left', '34%');
            }
        } else {
            filterDonutChange("s2id_StrategicGoals");
            if ($(window).width() > 1610) {
                $("#donut-total").css('margin-left', '41%');
            } else {
                $("#donut-total").css('margin-left', '36%');
            }
        }
    }

    function initDonutMenu() {
        $('#pieModeType').switcher({
            on_state_content: 'Type',
            off_state_content: 'Goal'
        });
        $('#pieModeForecast').switcher({
            on_state_content: 'Cost',
            off_state_content: 'Time'
        });
        $('#expendituresMode').switcher({
            on_state_content: 'Labor',
            off_state_content: 'Non-labor'
        });
        $('#pieModeForecast').click(function () {
            saveForecastDashboardPreferences();
            loadDonutData();
            totalPosition();
        });
        $('#expendituresMode').click(function () {
            saveForecastDashboardPreferences();
            loadDonutData();
        });
        $('#pieModeType').click(function () {
            saveForecastDashboardPreferences();
            loadDonutData();
        });
    }

    function addArrayToFilter(filterId, item) {
        var filterArray = $("#" + filterId).select2('val');
        filterArray.push(item);
        $('#' + filterId).select2('val', filterArray);
    }

    function removeArrayFromFilter(filterId, item) {
        var filterArray = $("#" + filterId).select2('val');
        var index = filterArray.indexOf(item);
        if (index > -1) {
            filterArray.splice(index, 1);
        }
        $('#' + filterId).select2('val', filterArray);
    }

    function itemClick(event) {
        if (event.dataItem.dataContext.TypeId.length > 0 && event.dataItem.dataContext.TypeId[0] == '00000000-0000-0000-0000-000000000000') {
            return null;
        } else {
            if ($('#pieModeType').prop('checked')) {
                for (var i = 0; i < event.dataItem.dataContext.TypeId.length; i++) {
                    if (projectsFilterArray.includes(event.dataItem.dataContext.TypeId[i])) {
                        if (!donutRender) {
                            removeArrayFromFilter('s2id_ProjectTypes', event.dataItem.dataContext.TypeId[i]);
                        }

                        var index = projectsFilterArray.indexOf(event.dataItem.dataContext.TypeId[i]);
                        if (index > -1) {
                            projectsFilterArray.splice(index, 1);
                        }
                    } else {
                        if (!donutRender) {
                            addArrayToFilter('s2id_ProjectTypes', event.dataItem.dataContext.TypeId[i]);
                        }

                        projectsFilterArray.push(event.dataItem.dataContext.TypeId[i]);
                    }
                }
            }
            else {
                for (var i = 0; i < event.dataItem.dataContext.TypeId.length; i++) {
                    if (goalsFilterArray.includes(event.dataItem.dataContext.TypeId[i])) {
                        if (!donutRender) {
                            removeArrayFromFilter('s2id_StrategicGoals', event.dataItem.dataContext.TypeId[i]);
                        }

                        var index = goalsFilterArray.indexOf(event.dataItem.dataContext.TypeId[i]);
                        if (index > -1) {
                            goalsFilterArray.splice(index, 1);
                        }
                    } else {
                        if (!donutRender) {
                            addArrayToFilter('s2id_StrategicGoals', event.dataItem.dataContext.TypeId[i]);
                        }

                        goalsFilterArray.push(event.dataItem.dataContext.TypeId[i]);
                    }
                }
            }
        }

        if (!donutRender) {
            var item = event.dataItem.dataContext;
            if (item.PieDatas != null && donutData != null) {
                var data = donutData.slice();
                data.splice(donutData.length - 1, 1);
                data = data.concat(item.PieDatas);
                renderDonut(data);
            }
            applyForecastDashboardFilter();
        }
        return null;
    }

    function renderDonut(data) {
        var sum = 0;
        var chartColors = [];
        for (i = 0; i < data.length; i++) {
            if (data[i].PresetColor) {
                chartColors.push(data[i].PresetColor);
            }
            else {
                var c = getColorFromPalette(i);
                chartColors.push(c);
            }
            sum += data[i].Value;
        }
        var total = $('#pieModeForecast').prop('checked') ? title = '$' + sum.formatNumber() : title = sum + ' weeks';
        $("#donut-total-value").html(total);
        chart = findChart("chartDonut1");
        var legend = new AmCharts.AmLegend();
        legend.marginLeft = 5;
        legend.markerLabelGap = 3;
        legend.valueWidth = 30;
        legend.align = "center";
        legend.markerType = "square";
        legend.markerSize = 11;
        legend.position = "right";
        legend.marginRight = 16;
        legend.autoMargins = false;
        legend.valueText = $('#pieModeForecast').prop('checked') ? "$[[value]]" : "[[value]]";
        chart.addLegend(legend, "legenddiv");

        chart.addListener("clickSlice", itemClick);

        chart.validateNow();

        updateChart("chartDonut1", data, chartColors);

        $(".chartwrapper").toggleClass("loading");

        //var index = data.length - donutData.length;
        //if (index > 0) {
        //    donutRender = true;
        //    for (var i = (data.length - index - 1) ; i < data.length - 1; i++) {
        //        chart.clickSlice(i);
        //    }
        //    donutRender = false;
        //}

        ////filterDonutChange("s2id_ProjectTypes");
        ////filterDonutChange("s2id_StrategicGoals");
    }

    function loadDonutData() {
        //TODO: loading indicator
        var filterDataDonut = {};

        filterDataDonut["IsTypeMode"] = $('#pieModeType').prop('checked');
        filterDataDonut["IsLaborMode"] = $('#expendituresMode').prop('checked');
        filterDataDonut["PieForecastCost"] = $('#pieModeForecast').prop('checked');

        //$(".chartwrapper").toggleClass("loading");
        $.post("@Url.Action("GetClassPieDataForNewDashboard", "ForecastDashboard")", filterDataDonut)
            .done(function (response) {
                donutData = response.data;
                otherDonutData = donutData[donutData.length - 1].PieDatas;
                renderDonut(response.data);
            });
    }

    function filterDonutChange(filterId) {
        var filterArray = $("#" + filterId).select2('val');
        var diff = [];
        if (filterId == "s2id_ProjectTypes") {
            diff = arrayDiff(filterArray, projectsFilterArray);
        }
        if (filterId == "s2id_StrategicGoals") {
            diff = arrayDiff(filterArray, goalsFilterArray);
        }

        var chart = findChart("chartDonut1");
        var chartData = chart.chartData;
        donutRender = true;
        for (var i = 0; i < chartData.length; i++) {
            if (diff.includes(chartData[i].dataContext.TypeId[0])) {
                chart.clickSlice(i);
            } else {
                var otherData = chartData[i].dataContext.PieDatas;
                if (otherData != null) {
                    for (var j = 0; j < otherData.length; j++) {
                        if (diff.includes(otherData[j].TypeId[0])) {
                            var data = donutData.slice();
                            data.splice(donutData.length - 1, 0, otherData[j]);
                            otherData.splice(j, 1);
                            renderDonut(data);
                        }
                    }
                }
            }

        }
        donutRender = false;
    }

    function arrayDiff(a1, a2) {

        var a = [], diff = [];

        for (var i = 0; i < a1.length; i++) {
            a[a1[i]] = true;
        }

        for (var i = 0; i < a2.length; i++) {
            if (a[a2[i]]) {
                delete a[a2[i]];
            } else {
                a[a2[i]] = true;
            }
        }

        for (var k in a) {
            diff.push(k);
        }

        return diff;
    };

</script>