(function () {
    'use strict';

    function Timeline($elem, options) {
        var that = this;

        this.$elem = $elem;

        this.$widget = null;
        this.$points = null;
        this.points = {};

        this.valueRange = [0, 0];

        options = $.extend({
            min: 10,
            max: 19,
            min_step: 3,
            default: 12,
            default_count: 3
        }, options);

        this.renderHtml = function () {
            this.$widget = $('<ul class="js-timeline"/>');
            for (var i = options.min; i <= options.max; i++) {
                this.points[i] = $('<li><a data-hour="' + i + '" href="#">' + i + '</a></li>').appendTo(this.$widget);
            }
            this.$widget.insertAfter(this.$elem);
            this.$points = this.$widget.find('li');
        };

        this.getPoint = function (hour) {
            var index = hour;
            return index in this.points ? this.points[index] : null;
        };

        this.setValue = function (start, count) {
            if (count < options.min_step) {
                count = options.min_step;
            }

            this.$points.removeClass('active-center').removeClass('active-left').removeClass('active-right');

            for (var i = 0; i < count; i++) {
                var cssClass = 'active-center';
                if (i === 0) {
                    cssClass = 'active-left';
                }
                else if (i === count - 1) {
                    cssClass = 'active-right';
                }

                var $point = this.getPoint(start + i);
                if ($point) {
                    $point.addClass(cssClass);
                }
            }

            this.valueRange = [start, start + count];
        };

        this.onSelect = function (hour) {
            if (hour > this.valueRange[1]) {
                this.setValue(this.valueRange[0], hour - this.valueRange[0] + 1);
            }
            else if (hour < this.valueRange[0]) {
                this.setValue(hour, this.valueRange[1] - hour);
            }
            else if (hour == this.valueRange[0] || hour == this.valueRange[1]) {
                return;
            }

            var diff = Math.round(this.valueRange[1] - this.valueRange[0] / 2);
            var delta = hour - this.valueRange[0];
            if (delta < diff) {
                this.setValue(this.valueRange[0], delta + 1);
            }
            else {
                this.setValue(this.valueRange[0] + delta, hour - this.valueRange[1]);
            }
        };

        this.renderHtml();

        this.setValue(options.default, options.default_count);

        this.$points.find('a').on('click', function () {
            that.onSelect($(this).data('hour'));
            return false;
        });
    }

    $.fn.timeline = function (options) {
        $(this).each(function () {
            return new Timeline($(this), options);
        });
    }
})();