// ========================================================================
// SproutCore
// copyright 2006-2007 Sprout Systems, Inc.
// ========================================================================

require('views/view') ;

// ProgressView displays a progress bar.  It does this mostly through CSS classes
// so that you can style them however you want.  A progress bar must have the
// following structure:
//
// <div class="outer progress"><div class="inner"></div></div>
//
// The outer can form the boundary of the bar while the inner will be adjusted 
// to fit the percentage of the progress.
//
// Style the progress bar with the following CSS classes:
//
// .progress.indeterminate = to show an indeterminate progress. inner will hide.
// .progress.disabled = show as disabled.

SC.ProgressView = SC.View.extend({
  
  // ........................................
  // PROPERTIES
  //
  
  minimum: 0, // the minimum value of the progress 
  maximum: 1.0, // the maximum value of the progress bar.

  // Bind this to the current value of the progress bar.  Note that by default an
  // empty value will disable the progress bar and a multiple value too make it
  // indeterminate.
  value: 0.50,
  valueBindingDefault: SC.Binding.SingleNotEmpty,
  
  // set to true if the item in progress is indeterminate.  This may be overridden
  // by the actual value.
  isIndeterminate: function(key,value) {
    if (value !== undefined) {
      this._isIndeterminate = value ;
    }
    return this._isIndeterminate && (this.value != SC.Binding.EMPTY_PLACEHOLDER) ;
  }.property(),
  
  // set to false to disable the progress bar
  isEnabled: function(key, value) {
    if (value !== undefined) {
      this._isEnabled = value ;
    }
    return this._isEnabled && (this.value != SC.Binding.MULTIPLE_PLACEHOLDER) ;
  }.property(),
  
  _isIndeterminate: false, _isEnabled: true,
  
  // ........................................
  // STRUCTURE
  //
  
  emptyElement: '<div class="progress outer"><div class="outer-head"></div><div class="inner"><div class="inner-head"></div><div class="inner-tail"></div></div><div class="outer-tail"></div></div>',
  
  outlets: ['innerView'],
  innerView: SC.View.outletFor('.inner?'),
  
  // ........................................
  // INTERNAL SUPPORT
  //
  
  propertyObserver: function(observing,target,key,value) {    
    // collect new settings.
    if (['value','minimum','maximum','isIndeterminate','isEnabled'].include(key)) {
      var isIndeterminate = this.get('isIndeterminate') ;
      var isEnabled = this.get('isEnabled') ;
      
      Element.setClassName(this,'indeterminate',isIndeterminate) ;
      Element.setClassName(this,'disabled',!isEnabled) ;
      
      // compute value
      var value ;
      if (isIndeterminate || !isEnabled) {
        value = 0.0 ;
      } else {
        var minimum = this.get('minimum') || 0.0 ;
        var maximum = this.get('maximum') || 1.0 ;
        value = this.get('value') || 0.0 ;
        value = (value - minimum) / (maximum - minimum) ; 
        if (value > 1.0) value = 1.0 ;
      }
      value = value * 100 ;
      if (this.innerView) this.innerView.setStyle({ width: (value + '%') }) ;
    }
  }
}) ;