'use strict';

var FatChartCtrl = angular.module('polls.controllers.google-chart-sample', [
    'system'
])
    .controller('FatChartCtrl', [
        '$scope',
        '$location',
        '$route',
        '$window',
        'System',
        'PollService',
        function ($scope, $location, $route, $window, System, PollService) {
            var id = $route.current.params["QuestionID"];
            $scope.query = $route.current.params || {};
      

            $scope.refresh = function () {

                PollService.questionForEdit(id).then(function (data) {
                    $scope.question = data;
                });

                PollService.answerByQuestionId(id).then(function (data) {
                    $scope.answers = data.answers;

               var chart1 = {};
                    chart1.data = {
                            "cols": [
            { id: "ID", label: "Pitanja", type: "string" },
            { id: "IDVotePercentage", label: "VoteCount", type: "number" },
            { id: "IDVote", label: "VotePercentage", type: "number" }
            
                            ], "rows": []
                        };
               for (var i = 0; i < $scope.answers.length; i++) {
                   chart1.data.rows.push({ c: [{ v: $scope.answers[i].Title }, { v: $scope.answers[i].VoteCount }, { v: $scope.answers[i].VotePercentage }] });

                   var formatCollection = [
                            {
                                name: "color",
                                format: [
                                    {
                                        columnNum: [i],
                                        formats: [
                                            {
                                                from: 0,
                                                to: 3,
                                                color: $scope.answers[i].Color,
                                                bgcolor: "red"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                     
                   
                chart1.type = "AreaChart";
                chart1.displayed = false;
                    chart1.options = {
                        "title": $scope.question.Title,
                        "isStacked": "true",
                        "fill": 20,
                        "displayExactValues": true,
                        "vAxis": {
                            "title": $scope.question.Title, "gridlines": { "count": $scope.question.VoteCount }
                        },
                        "hAxis": {
                            "title": $scope.question.PublishedOn
                        }
                    };
                    $scope.formatCollection = formatCollection;
                    chart1.formatters = {};

                    $scope.chart = chart1;
                    $scope.cssStyle = "height:600px; width:100%;";


                });
            };

            $scope.chartSelectionChange = function () {

                if (($scope.chart.type === 'Table' && $scope.chart.data.cols.length === 6 && $scope.chart.options.tooltip.isHtml === true) ||
                    ($scope.chart.type != 'Table' && $scope.chart.data.cols.length === 6 && $scope.chart.options.tooltip.isHtml === false)) {
                    $scope.chart.data.cols.pop();
                    delete $scope.chart.data.rows[0].c[5];
                    delete $scope.chart.data.rows[1].c[5];
                    delete $scope.chart.data.rows[2].c[5];
                }


                if ($scope.chart.type === 'Table') {

                    $scope.chart.options.tooltip.isHtml = false;

                    $scope.chart.data.cols.push({ id: "data-id", label: "Date", type: "date" });
                    $scope.chart.data.rows[0].c[5] = { v: "Date(2013,01,05)" };
                    $scope.chart.data.rows[1].c[5] = { v: "Date(2013,02,05)" };
                    $scope.chart.data.rows[2].c[5] = { v: "Date(2013,03,05)" };
                }

            }

            $scope.chartReady = function () {
                fixGoogleChartsBarsBootstrap();
            }

            function fixGoogleChartsBarsBootstrap() {
                // Google charts uses <img height="12px">, which is incompatible with Twitter
                // * bootstrap in responsive mode, which inserts a css rule for: img { height: auto; }.
                // *
                // * The fix is to use inline style width attributes, ie <img style="height: 12px;">.
                // * BUT we can't change the way Google Charts renders its bars. Nor can we change
                // * the Twitter bootstrap CSS and remain future proof.
                // *
                // * Instead, this function can be called after a Google charts render to "fix" the
                // * issue by setting the style attributes dynamically.

                $(".google-visualization-table-table img[width]").each(function (index, img) {
                    $(img).css("width", $(img).attr("width")).css("height", $(img).attr("height"));
                });
            };

            $scope.refresh();
        }
    ]);



