1 /*

     2  The Slider Widget fits right under the video

     3  */

     4 

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

     6     IriSP.Widgets.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.Widgets.Slider.prototype = new IriSP.Widgets.Widget();

    13 

    14 IriSP.Widgets.Slider.prototype.defaults = {

    15     minimized_height : 4,

    16     maximized_height : 10,

    17     minimize_timeout : 1500 // time before minimizing slider after mouseout

    18 };

    19 

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

    21     

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

    23         .addClass("Ldt-Slider")

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

    25     

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

    27     

    28     var _this = this;

    29     

    30     this.$slider.slider({

    31         range: "min",

    32         value: 0,

    33         min: 0,

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

    35         slide: function(event, ui) {

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

    37         }

    38     });

    39     

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

    41     

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

    43     

    44     this.$

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

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

    47     

    48     this.maximized = false;

    49     this.timeoutId = false;

    50 };

    51 

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

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

    54 }

    55 

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

    57     if (this.timeoutId) {

    58         window.clearTimeout(this.timeoutId);

    59         this.timeoutId = false;

    60     }

    61     if (!this.maximized) {

    62        this.animateToHeight(this.maximized_height);

    63        this.maximized = true;

    64     }

    65 }

    66 

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

    68     if (this.timeoutId) {

    69         window.clearTimeout(this.timeoutId);

    70         this.timeoutId = false;

    71     }

    72     var _this = this;

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

    74         if (_this.maximized) {

    75             _this.animateToHeight(_this.minimized_height);

    76             _this.maximized = false;

    77         }

    78         _this.timeoutId = false;

    79     }, this.minimize_timeout);

    80     

    81 }

    82 

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

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

    85         this.calculateSliderCss(_height),

    86         500,

    87         function() {

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

    89         });

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

    91         this.calculateHandleCss(_height),

    92         500,

    93         function() {

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

    95         });

    96 }

    97 

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

    99     return {

   100         height: _size + "px",

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

   102     };

   103 }

   104 

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

   106     return {

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

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

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

   110     }

   111 }