/**
 * @name ProgressbarControl
 * @version 1.0
 * @author Bjorn BRala
 * @copyright (c) 2008 SWIS BV - www.geostart.nl
 * @fileoverview Creates a progress bar control for usage in google maps. 
 *   It can be used to show the progress of loading markers, for example.
 */

/**
 * @name ProgressbarOptions
 * @class This class represents optional arguments to 
 *   {@link ProgressbarControl}, 
 * @property {Number} [width=176] Specifies, in pixels, the width of the bar.
 * @property {String} [loadstring=Loading...] Specifies the string displayed 
 *  when first starting the control, before any update.
 */


/**
 * Custom progress bar control, for placement on map.
 * 
 * @private
 * @return {GControl}
 */    
function ProgressbarMapControl(map, width) { 
  this.map_ = map; 
  this.width_ = width; 
}


/**
 * @private
 */
ProgressbarMapControl.prototype = new GControl(true, false);


/**
 * @private
 * @desc Initializes the GControl. Creates the HTML and styles.
 * @return {Element}
 */
ProgressbarMapControl.prototype.initialize = function () {
  var container_ = document.createElement('div');
  container_.innerHTML = '<div style="position:absolute;width:100%;border:5px;'
    + 'text-align:center;vertical-align:bottom;" id="geo_progress_text"></div>'
    + '<div style="background-color:green;height:100%;" id="geo_progress"></div>';
  container_.id = "geo_progress_container";
  container_.style.display = "none";
  container_.style.width = this.width_ + "px";
  container_.style.fontSize = "0.8em";
  container_.style.height = "1.3em";
  container_.style.border = "1px solid #555";
  container_.style.backgroundColor = "white";
  container_.style.textAlign = "left";
  this.map_.getContainer().appendChild(container_);
  return container_;
};


/**
 * @private 
 * @desc Return the default position for the control
 * @return {GControlPosition}
 */
ProgressbarMapControl.prototype.getDefaultPosition = function () {
  return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(30, 56));
};


/**
 * Creates a progress bar control on the given map, with the given options.
 *
 * @constructor
 * @param {GMap2} Map object
 * @param  {ProgressbarOptions} opt_opts
 */
function ProgressbarControl(map, opt_opts) {
  this.options_ = opt_opts || {};

  this.width_ = this.options_.width || 176;
  this.loadstring_ = this.options_.loadstring || 'Loading...';

  this.control_ = new ProgressbarMapControl(map, this.width_);
  this.map_ = map;
  this.map_.addControl(this.control_);
  this.div_ = document.getElementById('geo_progress');
  this.text_ = document.getElementById('geo_progress_text');
  this.container_ = document.getElementById('geo_progress_container');

  this.operations_ = 0;
  this.current_ = 0;
}


/**
 * @desc Start the progress bar. 
 * @param {Number} operations Total amount of operations that will be executed.
 */
ProgressbarControl.prototype.start = function (operations) {
  this.div_.style.width = '0%'; 
  this.operations_ = operations || 0;
  this.current_ = 0;
  this.text_.style.color = "#111";
  this.text_.innerHTML = this.loadstring_;
  this.container_.style.display = "block";
};


/**
 * @desc  Update the progress with specified number of operations.
 * @param {Number} step Number of operations to add to bar.
 */
ProgressbarControl.prototype.updateLoader = function (step) {
  this.current_ += step;
  if (this.current_ > 0) {
    var percentage_ = Math.ceil((this.current_ / this.operations_) * 100);
    if (percentage_ > 100) { 
      percentage_ = 100; 
    }
    this.div_.style.width = percentage_ + '%'; 
    this.text_.innerHTML = this.current_ + ' / ' + this.operations_;
  }
};


/**
 * @desc Remove control.
 */
ProgressbarControl.prototype.remove = function () {
  this.container_.style.display = 'none';
};