stop using global variables everwhere to display the map

poc/safeimage/js/form.js

@@ -33,9 +33,7 @@
     },
 
     displayData: function(id){
-      if (map !== undefined){
-        map.destroy();
-      }
+      var zoomify_url, zoomify_width, zoomify_height;
       zoomify_url = "image/" + id + "/";
       //XXX look at the xml definition inside image folder
       if (id == 'openphotonet_imgp0034-1') {
@@ -46,7 +44,10 @@
         zoomify_height = 1944;
       }
       $(this).form('render', 'image', {'image_id': id});
-      $(loadOpenLayerZoomedImage);
+      $(function() {
+          SafeImage.loadOpenLayerZoomedImage(zoomify_width,
+            zoomify_height, zoomify_url);
+      })
     },
 
     render: function(template, data){

poc/safeimage/js/safeimage.js

-var zoomify_width = 29566;
-var zoomify_height = 14321;
-var zoomify_url = "image/hs-2007-16-a-full_jpg/";
+var SafeImage = (function() {
 
-var map, zoomify;
+  var that = {};
 
-function loadOpenLayerZoomedImage(){
+  that.loadOpenLayerZoomedImage= function(zoomify_width,
+                                    zoomify_height, zoomify_url){
+    if (that.map !== undefined){
+        that.map.destroy();
+    }
     /* First we initialize the zoomify pyramid (to get number of tiers) */
-  var zoomify = new OpenLayers.Layer.Zoomify( "Zoomify", zoomify_url, 
+    that.zoomify = new OpenLayers.Layer.Zoomify( "Zoomify", zoomify_url,
       new OpenLayers.Size( zoomify_width, zoomify_height ) );
 
     /* Map with raster coordinates (pixels) from Zoomify image */
     var options = {
         maxExtent: new OpenLayers.Bounds(0, 0, zoomify_width, zoomify_height),
-      maxResolution: Math.pow(2, zoomify.numberOfTiers-1 ),
-      numZoomLevels: zoomify.numberOfTiers,
+        maxResolution: Math.pow(2, that.zoomify.numberOfTiers-1 ),
+        numZoomLevels: that.zoomify.numberOfTiers,
         units: 'pixels'
     };
 
-  map = new OpenLayers.Map("map", options);
-  map.addLayer(zoomify);
+    that.map = new OpenLayers.Map("map", options);
+    that.map.addLayer(that.zoomify);
 
-    map.setBaseLayer(zoomify);
-  map.zoomToMaxExtent();
-};
\ No newline at end of file
+      that.map.setBaseLayer(that.zoomify);
+    that.map.zoomToMaxExtent();
+  };
+  return that
+}());