﻿Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
                
                function BeginRequestHandler(sender, args)
                {

                    //From the postback element find in which div it is
                    var _updatePanel = args.get_postBackElement(); 
                    //&& (_updatePanel.id.slice(0,6)=='update')
                    while ( (_updatePanel.tagName != 'DIV') ){
                        _updatePanel=_updatePanel.parentNode;
                    }
                    
                   
                    //create a div element for UI
                    
                    var updateAnimationPanel;
                    updateAnimationPanel=document.getElementById('updateAnimationPanel');
                    
                    if (!updateAnimationPanel){
                        updateAnimationPanel=document.createElement('DIV');
                        updateAnimationPanel.id='updateAnimationPanel';
                        updateAnimationPanel.style.visibility='hidden';
                        updateAnimationPanel.style.position='absolute';
                        
                        updatingPanelImageDIV=document.createElement('DIV');
                        updatingPanelImageDIV.id='updatingPanelImageDIV';
                        updatingPanelImageDIV.style.visibility='hidden';
                        updatingPanelImageDIV.style.position='absolute';
                        updatingPanelImageDIV.style.width='78px';
                        updatingPanelImageDIV.style.height='78px';
                        
                        //updatingPanelImageDIV.innerHTML='<div id="bg" style="visibility:visible; background-image:url(images/updating_bg.png);">  <img src="images/updating.gif" /></div>';                     
                        updatingPanelImageDIV.innerHTML='<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="center" background="images/updating_bg.png"><img src="images/updating.gif" /></td></tr></table>';
                        document.getElementById('form1').appendChild(updateAnimationPanel);
                        document.getElementById('form1').appendChild(updatingPanelImageDIV);
                        }
                    
                    
                    
                    var b=Sys.UI.DomElement.getBounds( _updatePanel);
                    
                    
                   
                    
                    updateAnimationPanel.style.left=b.x + 'px';
                    updateAnimationPanel.style.top= b.y + 'px'; 
                    updateAnimationPanel.style.height= b.height + 'px';
                    updateAnimationPanel.style.width= b.width+ 'px';
                    updateAnimationPanel.className='updatingPanel';
                    
                    var bi=Sys.UI.DomElement.getBounds(updatingPanelImageDIV);
                    updatingPanelImageDIV.style.left= (b.x + (b.width - bi.width)/2)+'px';
                    updatingPanelImageDIV.style.top= (b.y + (b.height - bi.height)/2)+'px';
                    
                    
                    
                    
                    // sgow transparency and animation image                    
                    updateAnimationPanel.style.visibility='visible';
                    updatingPanelImageDIV.style.visibility='visible';
                    

                     
                }
                function EndRequestHandler(sender, args)
                {
                    Sys.UI.DomElement.getElementById('updateAnimationPanel').style.visibility = 'hidden';
                    Sys.UI.DomElement.getElementById('updatingPanelImageDIV').style.visibility = 'hidden'; 
                }