Ext.onReady(function(){
    // turn on validation errors beside the field globally
});

ChangeDialog = function(){
    //private variables
    var _dialog, _OpenFromObj, _fs, _Loop;
    _fs = null;
    _dialog=null;
     
    return {
        init : function(){
			_OpenFromObj = Ext.get('ActionButtonBar');
			_Loop = true;
        },        
        showDialog : function(){
            Ext.form.Field.prototype.msgTarget = 'side';
              
            var Retry = new Ext.util.DelayedTask;
            
            function loopNext(){
                if(_Loop){
                    Retry.delay(3000, cardNav.createDelegate(Ext.getCmp('card-wizard-panel'), [1]));
                }
            }                          
                            
		    var cardNav = function(incr){     
		        try{
		             var l = Ext.getCmp('card-wizard-panel').getLayout();
                     var i = l.activeItem.id.split('card-')[1];
                     var next = parseInt(i) + incr;                 
                     if(next==3)next=0;              
                     l.setActiveItem(next);                 
                     Ext.getCmp('card-prev').setDisabled(next==0);
                    // Ext.getCmp('card-next').setDisabled(next==2); 
                     loopNext();
                 }catch(e){} 
            };            
               
	        _fs = new Ext.form.FormPanel({
                id:'card-wizard-panel',
			     region: 'center'
                ,bodyStyle: 'padding:5px;'
			    ,layout:'card'
                ,activeItem: 0 // index or id
                ,bbar: ['->', 
                        {
                            id: 'card-prev',
                            text: '« Previous',
                            disabled: true,
                            listeners:{
					            'click':function(r,c){
                                     _Loop = false;
					            }
				            },
				            handler: cardNav.createDelegate(this, [-1])
                        },{
                            id: 'card-next',
                            text: 'Next »',
                            listeners:{
					            'click':function(r,c){
                                     _Loop = false;
					            }
				            },	
				            handler: cardNav.createDelegate(this, [1])					            
                        }]
	            ,items: [{
                            id: 'card-0',
                            html: '<img src="images/TMGslide1.gif" alt="TM Group"/>'
                        },{
                            id: 'card-1',
                            html: '<img src="images/TMGslide2.gif" alt="TM Group"/>'
                        },{
                            id: 'card-2',
                            html: '<img src="images/TMGslide3.gif" alt="TM Group"/>'
                        }]
			    });
   			
                var Content = new Ext.Panel({
                    title: '',
                    header: false,
                    region: 'center',
                    border: false,
                    collapsible: false,
                    margins: '13 20 13 10',
                    cmargins: '3 3 3 3',
                    items: [_fs]
                });
               
                _dialog = new Ext.Window({
                    title: '<b>TM Group</b>',
                    layout: 'border',
                    closable: true,
                    width: 720,
                    height: 400,
                    border: false,
                    plain: true,
                    modal: true,
                    resizable: false,
                    items: [_fs]
                });
            
            _dialog.show(_OpenFromObj.dom);
                                        
            _dialog.on("show", function(s,r,o){
                //Retry.delay(1000, cardNav.createDelegate(o, [1]));
                loopNext();
	        });  
	        
	        _dialog.on("close", function(){
	            _Loop = true;
	        });         
           
        },
		SetOpenFromObj: function(objId){
			_OpenFromObj = Ext.get(objId);
		}
    };
}();


// using onDocumentReady instead of window.onload initializes the application
// when the DOM is ready, without waiting for images and other resources to load
Ext.EventManager.onDocumentReady(ChangeDialog.init, ChangeDialog, true);