1 /*

     2  The Slider Widget fits right under the video

     3  */

     4 

     5 IriSP.SliderWidget = function(player, config) {

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

     7     this.bindPopcorn("timeupdate","onTimeupdate");

     8     this.bindPopcorn("IriSP.PlayerWidget.MouseOver","onMouseover");

     9     this.bindPopcorn("IriSP.PlayerWidget.MouseOut","onMouseout");

    10 };

    11 

    12 IriSP.SliderWidget.prototype = new IriSP.Widget();

    13 

    14 IriSP.SliderWidget.prototype.draw = function() {

    15     

    16     this.$slider = IriSP.jQuery('<div>')

    17         .addClass("Ldt-Slider")

    18         .css(this.calculateSliderCss(this.minimized_height));

    19     

    20     this.$.append(this.$slider);

    21     

    22     var _this = this;

    23     

    24     this.$slider.slider({

    25         range: "min",

    26         value: 0,

    27         min: 0,

    28         max: this.source.getDuration().getSeconds(),

    29         slide: function(event, ui) {

    30             _this.player.popcorn.currentTime(ui.value);

    31         }

    32     });

    33     

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

    35     

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

    37     

    38     this.$

    39         .mouseover(this.functionWrapper("onMouseover"))

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

    41     

    42     this.maximized = false;

    43     this.timeoutId = false;

    44 };

    45 

    46 IriSP.SliderWidget.prototype.onTimeupdate = function() {

    47     this.$slider.slider("value",this.player.popcorn.currentTime());

    48 }

    49 

    50 IriSP.SliderWidget.prototype.onMouseover = function() {

    51     if (this.timeoutId) {

    52         window.clearTimeout(this.timeoutId);

    53         this.timeoutId = false;

    54     }

    55     if (!this.maximized) {

    56        this.animateToHeight(this.maximized_height);

    57        this.maximized = true;

    58     }

    59 }

    60 

    61 IriSP.SliderWidget.prototype.onMouseout = function() {

    62     if (this.timeoutId) {

    63         window.clearTimeout(this.timeoutId);

    64         this.timeoutId = false;

    65     }

    66     var _this = this;

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

    68         if (_this.maximized) {

    69             _this.animateToHeight(_this.minimized_height);

    70             _this.maximized = false;

    71         }

    72         _this.timeoutId = false;

    73     }, this.minimize_timeout);

    74     

    75 }

    76 

    77 IriSP.SliderWidget.prototype.animateToHeight = function(_height) {

    78     this.$slider.stop().animate(

    79         this.calculateSliderCss(_height),

    80         500,

    81         function() {

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

    83         });

    84     this.$handle.stop().animate(

    85         this.calculateHandleCss(_height),

    86         500,

    87         function() {

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

    89         });

    90 }

    91 

    92 IriSP.SliderWidget.prototype.calculateSliderCss = function(_size) {

    93     return {

    94         height: _size + "px",

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

    96     };

    97 }

    98 

    99 IriSP.SliderWidget.prototype.calculateHandleCss = function(_size) {

   100     return {

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

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

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

   104     }

   105 }