/// This registers our ajax handlers
Ajax.Responders.register(
    {
        onCreate: function()
        {
            if(Ajax.activeRequestCount>0)
            {
                /// check if the loading div exists..if it doesnt create it
                if(!$('loading')){
                    //div doesnt exist.. proceed to create it
                    var theBody = $$('body')[0]; 
                    var attrs = { id : 'loading',style:""};
                     var loadingDiv = new Element('div', attrs);
                     theBody.insert(loadingDiv);
                      // our loading div now exists
                       $('loading').setStyle({position:'absolute',top:'50%',left:'50%',width:'8em',height:'2em',marginTop:'-1em',marginLeft:'-4em',border: '1px solid #ccc',backgroundColor:'#f3f3f3',fontWeight: 'bold',padding:'3px',paddingRight:'4px' });
                      // set the contents
                      $('loading').innerHTML = "<img src='/images/loading.gif' align='left'/>&nbsp; Please wait";

                }
                Effect.Appear('loading',{duration: .2});
            }
        },
 
        onComplete: function()
        {
            if($('loading') && Ajax.activeRequestCount==0)
            {
                Effect.Fade('loading',{duration: .2});
            }
        },
        onFailure: function(){
        
        
        }

    }
);