/*

 * Ext JS Library 2.1

 * Copyright(c) 2006-2008, Ext JS, LLC.

 * licensing@extjs.com

 * 

 * http://extjs.com/license

 */



Ext.onReady(function(){

    //==== Progress bar 1 ====

    var pbar1 = new Ext.ProgressBar({

       text:'Initializing...'

    });

    var btn1 = Ext.get('btn1');

    btn1.on('click', function(){

        Ext.fly('p1text').update('Working');

        if (!pbar1.rendered){

            pbar1.render('p1');

        }else{

            pbar1.text = 'Initializing...';

            pbar1.show();

        }

        Runner.run(pbar1, Ext.get('btn1'), 10, function(){

            pbar1.reset(true);

            Ext.fly('p1text').update('Done.').show();

        });

    });



    //==== Progress bar 2 ====

    var pbar2 = new Ext.ProgressBar({

        text:'Ready',

        id:'pbar2',

        cls:'left-align',

        renderTo:'p2'

    });

    var btn2 = Ext.get('btn2');

    btn2.on('click', function(){

        Runner.run(pbar2, btn2, 12, function(){

            pbar2.reset();

            pbar2.updateText('Done.');

        });

    });



    //==== Progress bar 3 ====

    var pbar3 = new Ext.ProgressBar({

        id:'pbar3',

        width:300,

        renderTo:'p3'

    });

    pbar3.on('update', function(val){

        //You can handle this event at each progress interval if

        //needed to perform some other action

        Ext.fly('p3text').dom.innerHTML += '.';

    });

    var btn3 = Ext.get('btn3');

    btn3.on('click', function(){

        Ext.fly('p3text').update('Working');

        btn3.dom.disabled = true;

        pbar3.wait({

            interval:200,

            duration:5000,

            increment:15,

            fn:function(){

                btn3.dom.disabled = false;

                Ext.fly('p3text').update('Done');

            }

        });

    });



    //==== Progress bar 4 ====

    var pbar4 = new Ext.ProgressBar({

        text:'Waiting on you...',

        id:'pbar4',

        textEl:'p4text',

        cls:'custom',

        renderTo:'p4'

    });

    var btn4 = Ext.get('btn4');

    btn4.on('click', function(){

        Runner.run(pbar4, btn4, 19, function(){

            pbar4.updateText('All finished!');

        });

    });

});



//Please do not use the following code as a best practice! :)

var Runner = function(){

    var f = function(v, pbar, btn, count, cb){

        return function(){

            if(v > count){

                btn.dom.disabled = false;

                cb();

            }else{

                if(pbar.id=='pbar4'){

                    //give this one a different count style for fun

                    var i = v/count;

                    pbar.updateProgress(i, Math.round(100*i)+'% completed...');

                }else{

                    pbar.updateProgress(v/count, 'Loading item ' + v + ' of '+count+'...');

                }

            }

       };

    };

    return {

        run : function(pbar, btn, count, cb){

            btn.dom.disabled = true;

            var ms = 5000/count;

            for(var i = 1; i < (count+2); i++){

               setTimeout(f(i, pbar, btn, count, cb), i*ms);

            }

        }

    }

}();