; (function ($) {

    "use strict";

    var MSInfoSlide = function (options) {
        BaseControl.call(this);
        $.extend(this.options, options);
    };

    MSInfoSlide.extend(BaseControl);

    var p = MSInfoSlide.prototype;
    var _super = BaseControl.prototype;
    var loaded = false;

    /* -------------------------------- */

    p.setup = function () {
        _super.setup.call(this);

        this.$nav = $('<div class="msInfoSlideControl"><div class="scrollbar"><div class="handle"></div></div><div class="items"></div></div>');

        this.cont.append(this.$nav);

        this.checkHideUnder(); // super method
    };

    p.create = function () {
        _super.create.call(this);
        var that = this;
        this.count = this.slider.slides.length;

        if (this.count <= 1) {
            return;
        }

        //Scrollbar        
        var w = (100 / this.count).toFixed(3) + "%";
        this.$nav.find(".item, .handle").css("width", w);

        //Click events
        this.$nav.on("click", "button", function () {
            that.slider.api.gotoSlide($(this).index());
        });

        //this.animateCircle(0, this.slider.slides[0].delay);

        this.slider.api.addEventListener(MSSliderEvent.WAITING, this.timer, this);
        this.slider.api.addEventListener(MSSliderEvent.CHANGE_START, this.update, this);
        this.cindex = this.slider.api.index();
    };

    p.timer = function (e) {
        var index = e.target.currentSlide.index;
        var s = 82 - (82 * (this.slider.api._delayProgress / 100));
        var circle = this.$nav.find(".item:eq(" + index + ") .circle");
        circle.css("stroke-dashoffset", s);
    };

    p.update = function (e) {
        var index = e.target.currentSlide.index;
        var width = this.$nav.find(".scrollbar").width();
        var x = (width / this.count * index).toFixed(0);
        this.$nav.find(".handle").css({ "transform": "translate3d(" + x + "px, 0px, 0px)" });
        //this.animateCircle(index, e.target.currentSlide.delay);
    };

    p.slideAction = function (slide) {
        var heading = slide.$element.find(".sliderHeading").text();
        var $items = this.$nav.find(".items");
        $items.append('<button type="button" class="item"><div><span>' + (slide.index + 1) + '</span><svg height="30" width="30"><circle class="circle-bg" cx="15" cy="15" r="13" stroke="#fff" stroke-width="1" fill-opacity="0" /><circle class="circle" cx="15" cy="15" r="13" stroke="#fff" stroke-width="2" fill-opacity="0" /></svg></div><span>' + heading + '</span></button>');
    };

    p.destroy = function () {
        _super.destroy();
        this.slider.api.removeEventListener(MSSliderEvent.WAITING, this.timer, this);
        this.slider.api.removeEventListener(MSSliderEvent.CHANGE_START, this.update, this);
        this.$nav.remove();
    };

    /*p.animateCircle = function(index, seconds) {
        var circle = this.$nav.find(".item:eq(" + index + ") .circle");
        circle.css("stroke-dashoffset", 82);
        circle.css("animation", "stroke " + seconds + "s ease-out forwards");

        circle.one('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function () {
            $(this).css("stroke-dashoffset", 0).css('animation', '');
        });
    }*/

    window.MSInfoSlide = MSInfoSlide;
    MSSlideController.registerControl('infoslide', MSInfoSlide);
})(jQuery);