if (window.devnet === undefined) {
    window.devnet = {};
}

if (window.devnet.util === undefined) {
    window.devnet.util = {};
}

(function () {

    devnet.util.ProgressBar = function (settings) {
        settings = settings || {};
        this.width = settings.width || 300;
        this.backgroundImage = settings.backgroundImage || 'pb_background.png';
        this.progressImage = settings.progressImage || 'pb_progress.png';
    };
    devnet.util.ProgressBar.prototype = {
    
        progress_: null,
        
        percentage_: null,
    
        render: function (el) {
            var container = document.getElementById(el);
            container.appendChild(this.createProgress_());
        },
        
        setProgress: function (percentage) {
            this.percentage_.innerHTML = Math.ceil(percentage * 100) + '%';
            
            if (percentage > 0.5) {
                this.percentage_.style.color = '#ffffff';
            }
            else {
                this.percentage_.style.color = '#333333';
            }
            
            var width = Math.ceil(this.width * percentage);
            this.progress_.style.width = width + 'px';
        },
        
        createProgress_: function () {
            var border = document.createElement('div'),
                progress = document.createElement('div'),
                percentage = document.createElement('div');
                
            border.appendChild(progress);
            border.appendChild(percentage);
            
            border.style.border = 'solid 1px #666666';    
            border.style.width = this.width + 'px';
            border.style.backgroundColor = '#e3e3e3';
            border.style.backgroundImage = 'url(' + this.backgroundImage + ')';
            
            progress.style.width = '0px';
            progress.style.height = '30px';
            progress.style.backgroundColor = '#0080c6';
            progress.style.backgroundImage = 'url(' + this.progressImage + ')';
            progress.style.position = 'absolute';
            this.progress_ = progress;
            
            percentage.style.lineHeight = '30px';
            percentage.style.fontFamily = 'Arial, serif';
            percentage.style.textAlign = 'center';
            percentage.style.fontSize = '12px';
            percentage.style.color = '#333333';
            percentage.style.fontWeight = 'bold';
            percentage.style.width = this.width + 'px';
            percentage.style.position = 'relative';
            this.percentage_ = percentage;
            
            this.setProgress(0);
            
            return border;
        }
    
    };

}());