(function() {
    "use strict";

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

            var ctrl = this;

            ctrl.$onInit = function() {
                ctrl.grades = [{'id' : 'K', 'name' : 'Kindergarten'},
                               {'id' : 1, 'name' : 'Grade 1'},
                               {'id' : 2, 'name' : 'Grade 2'},
                               {'id' : 3, 'name' : 'Grade 3'},
                               {'id' : 4, 'name' : 'Grade 4'},
                               {'id' : 5, 'name' : 'Grade 5'}];
                resourceCollectionService.setInitPopularBook('K', popularBooksInfo);
                ctrl.popularBooksInfo = popularBooksInfo;
            };

            $scope.$watch(function() { return resourceCollectionService.getCurPopularBookInfo(); },
                function(newVal, oldVal, scope) {
                    if (newVal !== oldVal) {
                        ctrl.popularBooksInfo = newVal;
                    }
            }, true);

        }]);
})();