(function() {
    "use strict";

    angular.module("raz")
        .component('resourceCollectionGrade', {
            templateUrl: '/js/angular/resource-slider/resource-collection-grade.html',
            controller: 'resourceCollectionGrade'
        })
        .controller('resourceCollectionGrade', ['popularBooksInfo', 'deliverableService', 'constantValues',
                function (popularBooksInfo, deliverableService, constantValues) {

            var ctrl = this;

            ctrl.$onInit = function () {
                ctrl.curGradeId = 'K';
                deliverableService.setInitPopularBook(ctrl.curGradeId, popularBooksInfo);

                ctrl.grades = ['K', 1, 2, 3, 4, 5];
                ctrl.resourceType = constantValues.TYPE_LEVELED_BOOKS;
                ctrl.popularBooksInfo = popularBooksInfo;
            };

            ctrl.openMenu = function () {
                angular.element("#grade-select-nav").toggle();
                angular.element("#changeGrade-" + ctrl.curLanguageId).focus();
            };

            ctrl.getGradeDisplay = function (gradeId) {
                if (gradeId == 'K') {
                    return 'Kindergarten';
                } else {
                    return 'Grade ' + gradeId;
                }
            };

            ctrl.isGradeActive = function (gradeId) {
                if (ctrl.curGradeId == gradeId) {
                    return ' active';
                } else {
                    return '';
                }
            };

            ctrl.changeGrade = function (gradeId) {
                deliverableService.getPopularBookInfo(gradeId)
                    .then(function (data) {
                        ctrl.curGradeId = gradeId;
                        ctrl.popularBooksInfo = data;
                    });
                angular.element(".menu-dropdown-option").removeClass('active');
                angular.element('changeGrade-' + gradeId).addClass('active');
                angular.element('#grade-select-nav').hide();
                angular.element("#current_grade").focus();
            };

        }]);
})();