/**
* @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.
*/


/*

TWW: Added nonpopout and nonexportable so that it doesnt show up
*/


/**
* 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" class="nonexportable nonpopout"></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';
};