Index: examples/loadingPanel.html
===================================================================
--- examples/loadingPanel.html	(revision 0)
+++ examples/loadingPanel.html	(revision 0)
@@ -0,0 +1,149 @@
+<html>
+<head>
+<script src="../lib/OpenLayers.js"></script>
+<style type="text/css">
+ul, li { padding-left: 0px; margin-left: 0px; }
+</style>
+<title>World Map Query</title> 
+</head>
+<body>
+  <a id='permalink' href="">Permalink</a><br />
+  <div style="float:right;width:28%">
+    <h1 style="font-size:1.3em;">CIA Factbook</h1>
+    <p style='font-size:.8em;'>Click a country to see statistics about the country below.</p>
+    <div id="nodeList">
+    </div>
+  </div>
+  <div id="map" style="width:70%; height:90%"></div>
+  <script defer="defer" type="text/javascript">
+    OpenLayers.ProxyHost = "/dev/examples/proxy.cgi?url=";
+		//OpenLayers.Event.observe(window, 'load', loadingDone, false);
+
+    var map = new OpenLayers.Map('map', {'maxResolution':'auto'});
+    
+                  
+            // Loading DIV
+           var  control = new OpenLayers.Control();
+            OpenLayers.Util.extend(control, {
+                draw: function () {
+                   if (this.div == null) {
+                        var viewSize = this.map.getSize();
+        
+                        msgW = Math.max(viewSize.w, 300);
+                        msgH = Math.max(viewSize.h, 200);
+                        var size = new OpenLayers.Size(msgW, msgH);
+                
+                        var centerPx = new OpenLayers.Pixel(viewSize.w/2, viewSize.h/2);
+                
+                        var topLeft = centerPx.add(-size.w/2, -size.h/2);            
+                
+                        this.div = OpenLayers.Util.createDiv(this.name + "_warning1", 
+                                                            topLeft, 
+                                                            size,
+                                                            null,
+                                                            null,
+                                                            null,
+                                                            "auto");
+                
+                        this.div.style.backgroundColor = "transparent";
+
+                        //msgW = Math.min(viewSize.w, 300);
+                        //msgH = Math.min(viewSize.h, 200);
+                         var size2 = new OpenLayers.Size(msgW, msgH);
+                         var centerPx2 = centerPx.add(-msgW/2, -msgH/2);            
+                         var div2 = OpenLayers.Util.createDiv(this.name + "_warning2", 
+                                                                    centerPx2, 
+                                                                    size2,
+                                                                    null,
+                                                                    null,
+                                                                    null,
+                                                                    "auto",
+                                                                    .75);
+                        
+                                //div2.style.padding = "7px";
+                                div2.style.backgroundColor = "white";
+                        
+                            
+                                //div2.style.opacity = "0.75";
+                                //div2.style.filter = "alpha(opacity=75)";
+                                div2.innerHTML = "<img src='../img/loading.gif' width='"+msgW+"' height='"+msgH+"'/>";
+
+                          
+                        //OpenLayers.Rico.Corner.changeOpacity(div2, 0.75);
+
+                                this.div.appendChild(div2);
+        
+                    }
+
+                  return this.div;
+                },
+                
+                minimizeControl: function(e) {
+            
+                    this.div.style.width = "0px";
+                    this.div.style.height = "0px";
+            
+                    if (e != null) {
+                        OpenLayers.Event.stop(e);                                            
+                    }
+                },
+                
+                maximizeControl: function(e) {
+                    var viewSize = this.map.getSize();
+    
+                    msgW = Math.max(viewSize.w, 300);
+                    msgH = Math.max(viewSize.h, 200);
+            
+                    this.div.style.width = msgW;
+                    this.div.style.height = msgH;
+            
+                    if (e != null) {
+                        OpenLayers.Event.stop(e);                                            
+                    }
+                }
+
+            });
+    
+    map.addControl(control);
+
+    
+    var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
+        "http://world.freemap.in/cgi-bin/mapserv?map=/www/freemap.in/world/map/factbook.map", {'layers': 'factbook'} );
+
+    wms.events.register('loadstart', null, function (e) {
+      //alert("Start loading ...");
+      control.maximizeControl(e);
+    });
+
+    wms.events.register('loadend', null, function (e) {
+      //alert("... Done!!!");
+      control.minimizeControl(e);
+    }); 
+
+    map.addLayer(wms);
+    
+    map.addControl(new OpenLayers.Control.Permalink('permalink'));
+    map.zoomToMaxExtent();
+    /* map.events.register('click', map, function (e) {
+            OpenLayers.Util.getElement('nodeList').innerHTML = "Loading... please wait...";
+            var url =  wms.getFullRequestString({
+                            REQUEST: "GetFeatureInfo",
+                            EXCEPTIONS: "application/vnd.ogc.se_xml",
+                            BBOX: wms.map.getExtent().toBBOX(),
+                            X: e.xy.x,
+                            Y: e.xy.y,
+                            INFO_FORMAT: 'text/html',
+                            QUERY_LAYERS: wms.params.LAYERS,
+                            WIDTH: wms.map.size.w,
+                            HEIGHT: wms.map.size.h});
+            OpenLayers.loadURL(url, '', this, setHTML);
+            Event.stop(e);
+      });
+      */
+    function setHTML(response) { 
+        OpenLayers.Util.getElement('nodeList').innerHTML = response.responseText;
+    }
+
+  </script>
+</body>
+</html>

Property changes on: examples\loadingPanel.html
___________________________________________________________________
Name: svn:mime-type
   + text/html
Name: svn:keywords
   + Id URL
Name: svn:eol-style
   + native

Index: img/loading.gif
===================================================================
Cannot display: file marked as a binary type.
svn:mime-type = image/gif

Property changes on: img\loading.gif
___________________________________________________________________
Name: svn:mime-type
   + image/gif

Index: lib/OpenLayers/Layer/Grid.js
===================================================================
--- lib/OpenLayers/Layer/Grid.js	(revision 3370)
+++ lib/OpenLayers/Layer/Grid.js	(working copy)
@@ -23,6 +23,9 @@
     /** @type Integer */
     buffer: 2,
 
+    /** @type Integer */
+    tilesLoaded: 0,
+
     /**
      * @constructor
      * 
@@ -345,15 +348,47 @@
             }
         } 
         
+        
+        //alert("Rising Load-Start Event!!!");
+        this.events.triggerEvent("loadstart");
+
         // now we go through and draw the tiles in forward order
+				
+				this.tilesLoaded = tileQueue.length;
+				//alert(this.tilesLoaded);
+				
+        // now we go through and draw the tiles in forward order
         for(var i=0; i < tileQueue.length; i++) {
             var tile = tileQueue[i]
             tile.draw();
+            
+ 						if (tile.imgDiv != null) {
+		        	 OpenLayers.Event.observe(tile.imgDiv, "load",
+                        this.setLoaded.bindAsEventListener(this), false ); 
+               OpenLayers.Event.observe(tile.imgDiv, "error",
+                        this.setLoaded.bindAsEventListener(this), false );
+               OpenLayers.Event.observe(tile.imgDiv, "abort",
+                        this.setLoaded.bindAsEventListener(this), false );
+            } else {
+            	this.tilesLoaded --;
+            }
+
             //mark tile as unqueued for the next time (since tiles are reused)
             tile.queued = false;       
         }
     },
 
+    setLoaded:function() {
+    	 this.tilesLoaded = this.tilesLoaded - 1;
+       
+       //alert(this.tilesLoaded);
+    	 if (this.tilesLoaded == 0) {
+    	 		//alert("...Done!!!");
+    	 		this.events.triggerEvent("loadend");
+    	 }
+
+    },
+
     /**
      * addTile gives subclasses of Grid the opportunity to create an 
      * OpenLayer.Tile of their choosing. The implementer should initialize 
