// ========================================================================== // Project: SproutCore - JavaScript Application Framework // Copyright: ©2006-2011 Strobe Inc. and contributors. // Portions ©2008-2011 Apple Inc. All rights reserved. // License: Licensed under MIT license (see license.js) // ========================================================================== /*globals SC */

/**

* @class
* 
* The MediaSlider element takes the original SC.SliderView and adds an
* indicator of which ranges of the media have been loaded.
* 
* @extends SC.SliderView
*/

SC.MediaSlider = SC.SliderView.extend( /** @scope SC.MediaSlider.prototype */ {

/**
 * The media view which this slider should attach itself to.
 */
// TODO: Deprecate, bind to loadedTimeRanges instead.
mediaView: null,

/**
 * The name of our render delegate
 */
renderDelegateName: 'mediaSliderRenderDelegate',

/**
 * @private
 * 
 * Appends a loaded ranges span to the div element.
 * 
 * @param context
 * @param firstTime
 */
render: function(context, firstTime) {
  sc_super();

  // Render the loaded time ranges.
  this.renderLoadedTimeRanges();
},

renderLoadedTimeRanges: function() {
  var ranges = this.getPath('mediaView.loadedTimeRanges');
  var rangesElement = this.$('.sc-loaded-ranges');
  var max = this.get('maximum');
  // TODO: Remove support for mediaView, simply bind to loadedTimeRanges.

  // Read the ranges element, kick out if it doesn't exist yet.
  if(SC.empty(rangesElement)) {
    return;
  }
  // Scrub all children.
  rangesElement.empty(".sc-loaded-range");

  // If there are no ranges, exit.
  if(SC.empty(ranges)) {
    return;
  }

  var width = rangesElement.width();
  for( var i = 0; i < ranges.length; i += 2) {
    try {
      // Ranges are reported as an array of numbers. Odds are start indexes,
      // evens are end indexes of the previous start index.
      var startRange = ranges[i];
      var endRange = ranges[i + 1];

      var pixelLeft = width * (startRange / max);
      var pixelWidth = width * ((endRange - startRange) / max);

      var tag = $('<span class="sc-loaded-range" />');
      tag.css('left', pixelLeft);
      tag.css('width', pixelWidth);

      rangesElement.append(tag);

    } catch(e) {
    }
  }
}.observes('*mediaView.loadedTimeRanges'),

});