var Preloader = new Class({
    //Extends: Roar,
    Implements: Options,
    options: {
        cntnr: 'preloadCntnr',
        delay: 2000,
        position: 'upperLeft',
        visible: false
    },
    
    initialize: function(options) {
        this.setOptions(options);
        this.images = [];
        
    },
    
    addImages: function(imgs){
        //alert(imgs);
        this.images.extend(imgs);
    },
    
    go: function(){
        // Roar Notification
        if(this.options.visible){
            this.roar = new Roar({position: this.options.position, duration:9999999, onShow:this.startPreloading.bind(this)});
            this.roar.inject([new Element('h3', {'html': 'Preloading images'}), new Element('div', {'id': this.options.cntnr})]);
        }
    },
    
    startPreloading: function(item, total){
        //debug('Preloader Started');
        this.item = item;
        
        if(this.options.visible){
        // progress bar
            this.progressBar = new dwProgressBar({  
                container: $(this.options.cntnr),
                startPercentage: 0,
                speed:750,
                boxID: 'box',
                percentageID: 'perc',
                displayID: 'text',
                displayText: true
            });
        }
        
        this.loader = new Asset.images(this.images, {  
            onProgress: this.updateProgress.bind(this),
            onComplete: this.preloaded.bind(this)
        });
    },
    
    updateProgress: function(counter, index){
        if(this.options.visible) this.progressBar.set((counter + 1) * (100 / this.images.length));  
    },
    
    done: function(){
        if(this.options.visible) this.roar.remove(this.item);
    },
    preloaded: function(){
        this.done.delay(this.options.delay ,this);
    }
});