/* esempio di HTML da aggiungere alla pagina che deve contenere la progressbar
   <div id="div_progressBar_container" style="float:left; position:absolute; left:450px; top: 230px;">
    <div id="div_progressBar"></div>  
    <div id="div_progressBar_label" style="float:left">LOADING...</div>
    <div id="div_progressBar_counter" style="float:right"></div>
  </div>  

esempio di codice per creare una progressbar
window.addEvent('domready', function(){
  images = ['images/speed-suite.jpg', 
  'images/olympic-p.jpg', 
  'images/shock-j.jpg', 
  'images/min/speed-suite.jpg', 
  'images/min/olympic-p.jpg', 
  'images/min/shok-j.jpg'];
  // inizializzazione dell'effetto progressbar
  var pb = new progressbar({images: images, color:'#DED2C5', colorBorder:'#837D5A'});
});
*/
var progressbar = new Class({
  initialize: function(options){
    this.options = Object.extend({
      images: [],
      id: 'div_progressBar',
      idContainer: 'div_progressBar_container',
      idCounter: 'div_progressBar_counter',
      idLabel: 'div_progressBar_label',
      width: 200,
      height: 20,
      color: '#0000FF',
      colorBorder: '#FFFFFF',
      thicknessBorder: 1,
      styleBorder: 'solid',
      image: ''
    }, options ||  {});
    if (!$defined(this.options.colorText)) this.options.colorText = this.options.colorBorder;
    progress = $(this.options.id);
    container = $(this.options.idContainer);
    counter = $(this.options.idCounter);
    label = $(this.options.idLabel);
    if ((!window.ie && !window.ie6 && !window.ie7)) {
      progress.setStyle('background', this.options.color);
      progress.setStyle('width', 0);
      progress.setStyle('height', this.options.height);
      container.setStyle('width', this.options.width);
      container.setStyle('height', this.options.height);
      container.setStyle('z-order', 10000);
      container.setStyle('color', this.options.colorText);
      container.setStyle('border', this.options.thicknessBorder+'px '+this.options.styleBorder+' '+this.options.colorBorder);
      label.setStyle('float', "left");
      label.setStyle('color', this.options.colorText);
      counter.setStyle('float', "right");
      counter.setStyle('color', this.options.colorText);
      counter.setHTML("0/"+this.options.images.length);
    }
    else {
      progress.remove();
      label.remove();
      counter.setStyle('float', "");
      counter.setHTML('<img src="'+this.options.image+'">');
    }
    
    
    var loadedImages = [];
    var images = this.options.images;
    var width = this.options.width;
    var progress = $('div_progressBar');
    var counter = $('div_progressBar_counter');
    var container = $('div_progressBar_container');
    if ((!window.ie && !window.ie6 && !window.ie7)) {
      new Asset.images(images, {
        onProgress: function(i) {
          //alert(this.src);
          loadedImages[i] = this;
          //alert(this.src);
          percent = (i + 1) * (width / images.length);
          progress.setStyle('width', percent);
          counter.setHTML((i+1)+"/"+images.length);
        },
        onComplete: function() {
          container.remove();
        }
      });
    } 
    else {
      window.addEvent('domready', function(){
        if (document.readyState=="complete") if (container) container.remove();
      });
      window.addEvent('load', function(){
        if (container) container.remove();
      });
    }
  }
});