/*

 The Slider Widget fits right under the video

 */

IriSP.Widgets.Slider = function(player, config) {

    IriSP.Widgets.Widget.call(this, player, config);

};

IriSP.Widgets.Slider.prototype = new IriSP.Widgets.Widget();

IriSP.Widgets.Slider.prototype.defaults = {

    minimized_height : 4,

    maximized_height : 4,

    minimize_timeout : 1500 /*  time before minimizing slider after mouseout,

                                set to zero for fixed slider */

};

IriSP.Widgets.Slider.prototype.template =

    '<div class="Ldt-Slider"></div><div class="Ldt-Slider-Time">00:00</div>';

IriSP.Widgets.Slider.prototype.draw = function() {

    this.renderTemplate();

    this.$time = this.$.find(".Ldt-Slider-Time");

    this.$slider = this.$.find(".Ldt-Slider");

    var _this = this;

    this.$slider.slider({

        range: "min",

        value: 0,

        min: 0,

        max: this.source.getDuration().milliseconds,

        slide: function(event, ui) {

            _this.media.setCurrentTime(ui.value);

            _this.player.trigger("Mediafragment.setHashToTime");

        }

    });

    this.$handle = this.$slider.find('.ui-slider-handle');

    this.onMediaEvent("timeupdate","onTimeupdate");

    this.onMdpEvent("Player.MouseOver","onMouseover");

    this.onMdpEvent("Player.MouseOut","onMouseout");

    if (this.minimize_timeout) {

        this.$slider.css(this.calculateSliderCss(this.minimized_height));

        this.$handle.css(this.calculateHandleCss(this.minimized_height));

        this.maximized = false;

        this.timeoutId = false;

    }

    this.$

        .mouseover(function() {

            _this.$time.show();

            _this.onMouseover();

        })

        .mouseout(this.functionWrapper("onMouseout"))

        .mousemove(function(_e) {

            var _x = _e.pageX - _this.$.offset().left,

                _t = new IriSP.Model.Time(_this.media.duration * _x / _this.width);

            _this.$time.text(_t.toString()).css("left",_x);

        });

};

IriSP.Widgets.Slider.prototype.onTimeupdate = function(_time) {

    this.$slider.slider("value",_time);

    this.player.trigger("Arrow.updatePosition",{widget: this.type, time: _time});

};

IriSP.Widgets.Slider.prototype.onMouseover = function() {

    if (this.minimize_timeout) {

        if (this.timeoutId) {

            window.clearTimeout(this.timeoutId);

            this.timeoutId = false;

        }

        if (!this.maximized) {

           this.animateToHeight(this.maximized_height);

           this.maximized = true;

        }

    }

};

IriSP.Widgets.Slider.prototype.onMouseout = function() {

    this.$time.hide();

    if (this.minimize_timeout) {

        if (this.timeoutId) {

            window.clearTimeout(this.timeoutId);

            this.timeoutId = false;

        }

        var _this = this;

        this.timeoutId = window.setTimeout(function() {

            if (_this.maximized) {

                _this.animateToHeight(_this.minimized_height);

                _this.maximized = false;

            }

            _this.timeoutId = false;

        }, this.minimize_timeout);

    }

};

IriSP.Widgets.Slider.prototype.animateToHeight = function(_height) {

    this.$slider.stop().animate(

        this.calculateSliderCss(_height),

        500,

        function() {

            IriSP.jQuery(this).css("overflow","visible");

        });

    this.$handle.stop().animate(

        this.calculateHandleCss(_height),

        500,

        function() {

            IriSP.jQuery(this).css("overflow","visible");

        });

};

IriSP.Widgets.Slider.prototype.calculateSliderCss = function(_size) {

    return {

        height: _size + "px",

        "margin-top": (this.minimized_height - _size) + "px"

    };

};

IriSP.Widgets.Slider.prototype.calculateHandleCss = function(_size) {

    return {

        height: (2 + _size) + "px",

        width: (2 + _size) + "px",

        "margin-left": -Math.ceil(2 + _size / 2) + "px" 

    };

};