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';
};