angular.module('whiteboardPlayer', []).directive('whiteboardplayer', function () {
    return {
        restrict: 'E',
        scope: { time: '=', state: '=', events: '@', recordedRanges: '@', audioUrl: '@', ratio: '@' },
        templateUrl: 'src/components/whiteboard/whiteboard-player.html',
        link: function (scope, element, attributes) {
            var whiteboard;

            whiteboard = new WhiteboardPlayerUi($(".whiteboard-player:first"));

            whiteboard.setPlaybackStateChangeCallback(function (whiteboard, state) {
                scope.time = whiteboard.getPlaybackTime() / 1000;
                scope.state = state;
            });

            scope.$watch(attributes.events, function (value) {
                value = scope.$eval(value);

                whiteboard.setEvents(scope.events);
            });

            scope.$watch(attributes.recordedRanges, function (value) {
                value = scope.$eval(value);

                whiteboard.setRecordedRanges(value);
            });

            scope.$watch(attributes.audioUrl, function (value) {
                value = scope.$eval(value);

                whiteboard.setAudioURL(value);
            });

            scope.$watch(attributes.ratio, function (value) {
                value = scope.$eval(value);

                whiteboard.setAspectRatio(value);
            });
        }
    };
});