terom@30: // A source of tile images of a specific width/height, zoom level range, and some other attributes
terom@45: 
terom@45: /**
terom@45:  * A source of image tiles.
terom@45:  *
terom@45:  * The image source is expected to serve fixed-size tiles (tile_width × tile_height) of image data based on the 
terom@45:  * x, y, zl URL query parameters. 
terom@45:  *
terom@45:  *  x, y        - the pixel coordinates of the top-left corner
terom@45:  *                XXX: these are scaled from the image coordinates by the zoom level
terom@45:  *
terom@127:  *  zl          - the zoom level used, in < zl < out.
terom@127:  *                The image pixels are scaled by powers-of-two, so a 256x256 tile at zl=1 shows a 512x512 area of the
terom@45:  *                1:1 image.
terom@45:  */
terom@30: var Source = Class.create({
terom@43:     initialize: function (path, tile_width, tile_height, zoom_min, zoom_max, img_width, img_height) {
terom@30:         this.path = path;
terom@30:         this.tile_width = tile_width;
terom@30:         this.tile_height = tile_height;
terom@30:         this.zoom_min = zoom_min;
terom@30:         this.zoom_max = zoom_max;
terom@43:         this.img_width = img_width;
terom@43:         this.img_height = img_height;
terom@30: 
terom@30:         this.refresh = false;
terom@30:         this.opt_key = this.opt_value = null;
terom@30:     },
terom@30:     
terom@45:     /**
terom@45:      * Return an URL representing the tile at the given viewport (row, col) at the given zl.
terom@45:      *
terom@45:      * XXX: sw/sh = screen-width/height, used to choose an appropriate output size for dynamic image sources...
terom@45:      */
terom@45:     build_url: function (col, row, zl /*, sw, sh */) {
terom@45:         // XXX: distribute tile requests across tile*.foo.bar
terom@45:         if (0) {
terom@45:             // two-bit hash (0-4) based on the (col, row)
terom@45:             var hash = ( (col % 2) << 1 | (row % 2) ) + 1;
terom@45:             
terom@45:             // the subdomain to use
terom@45:             var subdomain = "";
terom@45:             
terom@30:             subdomain = "tile" + hash + ".";
terom@45:         }
terom@30: 
terom@30:         // the (x, y) co-ordinates
terom@128:         var x = scaleByZoomDelta(col * this.tile_width, zl);
terom@128:         var y = scaleByZoomDelta(row * this.tile_height, zl);
terom@30: 
terom@40:         var url = this.path + "?x=" + x + "&y=" + y + "&zl=" + zl; // + "&sw=" + sw + "&sh=" + sh;
terom@45:         
terom@45:         // refresh the tile each time it is loaded?
terom@30:         if (this.refresh)
terom@30:             url += "&ts=" + new Date().getTime();
terom@45:         
terom@45:         // XXX: additional parameters, not used
terom@30:         if (this.opt_key && this.opt_value)
terom@30:             url += "&" + this.opt_key + "=" + this.opt_value;
terom@30: 
terom@30:         return url;
terom@30:     },
terom@40: 
terom@40:     // build an URL for a full image
terom@40:     build_image_url: function (cx, cy, w, h, zl) {
terom@128:         return (this.path + "?cx=" + scaleByZoomDelta(cx, zl) + "&cy=" + scaleByZoomDelta(cy, zl) + "&w=" + w + "&h=" + h + "&zl=" + zl);
terom@40:     }
terom@30: });
terom@30: 
terom@45: /**
terom@45:  * Viewport implements the tiles-UI. It consists of a draggable substrate, which in turn consists of several
terom@45:  * ZoomLayers, which then contain the actual tile images.
terom@45:  *
terom@45:  * Vars:
terom@45:  *      scroll_x/y      - the visible pixel offset of the top-left corner
terom@45:  */
terom@30: var Viewport = Class.create({
terom@30:     initialize: function (source, viewport_id) {
terom@30:         this.source = source;
terom@45:         
terom@45:         // get a handle on the UI elements
terom@30:         this.id = viewport_id;
terom@30:         this.div = $(viewport_id);
terom@30:         this.substrate = this.div.down("div.substrate");
terom@30: 
terom@30:         // make the substrate draggable
terom@30:         this.draggable = new Draggable(this.substrate, {
terom@30:             onStart: this.on_scroll_start.bind(this),
terom@30:             onDrag: this.on_scroll_move.bind(this),
terom@49:             onEnd: this.on_scroll_end.bind(this),
terom@49: 
terom@49:             zindex: false
terom@30:         });
terom@30: 
terom@45:         // register event handlers for other UI functions
terom@30:         Event.observe(this.substrate, "dblclick", this.on_dblclick.bindAsEventListener(this));
terom@30:         Event.observe(this.substrate, "mousewheel", this.on_mousewheel.bindAsEventListener(this));
terom@30:         Event.observe(this.substrate, "DOMMouseScroll", this.on_mousewheel.bindAsEventListener(this));     // mozilla
terom@30:         Event.observe(document, "resize", this.on_resize.bindAsEventListener(this));
terom@39:         
terom@45:         // init zoom UI buttons
terom@39:         this.btn_zoom_in = $("btn-zoom-in");
terom@39:         this.btn_zoom_out = $("btn-zoom-out");
terom@39: 
terom@39:         if (this.btn_zoom_in)
terom@39:             Event.observe(this.btn_zoom_in, "click", this.zoom_in.bindAsEventListener(this));
terom@39:         
terom@39:         if (this.btn_zoom_out)
terom@39:             Event.observe(this.btn_zoom_out, "click", this.zoom_out.bindAsEventListener(this));
terom@45:            
terom@45:         // initial view location (centered)
terom@50:         var cx = this.source.img_width / 2;
terom@50:         var cy = this.source.img_height / 2;
terom@50:         var zl = 0; // XXX: would need to scale x/y for this: (this.source.zoom_min + this.source.zoom_max) / 2;
terom@32:         
terom@45:         // from link?
terom@32:         if (document.location.hash) {
terom@45:             // parse x:y:z tuple
terom@32:             var pt = document.location.hash.substr(1).split(":");
terom@32:             
terom@43:             // unpack    
terom@50:             if (pt.length) cx = parseInt(pt.shift()) || cx;
terom@50:             if (pt.length) cy = parseInt(pt.shift()) || cy;
terom@50:             if (pt.length) zl = parseInt(pt.shift()) || zl;
terom@43:         }
terom@32: 
terom@45:         // initialize zoom state to given zl
terom@45:         this._init_zoom(zl);
terom@45:         
terom@45:         // initialize viewport size
terom@45:         this.update_size();
terom@45:         
terom@45:         // initialize scroll offset
terom@45:         this._init_scroll(cx, cy);
terom@45:         
terom@45:         // this comes after update_size, so that the initial update_size doesn't try and update the image_link,
terom@45:         // since this only works once we have the zoom layers set up...
terom@45:         this.image_link = $("lnk-image");
terom@45:         this.update_image_link();
terom@45: 
terom@45:         // display tiles!
terom@45:         this.update_tiles();
terom@30:     },
terom@45: 
terom@45: /*
terom@45:  * Initializers - only run once
terom@45:  */
terom@45:                     
terom@45:     /** Initialize the zoom state to show the given zoom level */
terom@45:     _init_zoom: function (zl) {
terom@45:         // the stack of zoom levels
terom@45:         this.zoom_layers = [];
terom@45:         
terom@45:         // populate the zoom-layers stack based on the number of zoom levels defined for the source
terom@45:         for (var zoom_level = this.source.zoom_min; zoom_level <= this.source.zoom_max; zoom_level++) {
terom@45:             var zoom_layer = new ZoomLayer(this.source, zoom_level);
terom@45: 
terom@45:             this.substrate.appendChild(zoom_layer.div);
terom@45:             this.zoom_layers[zoom_level] = zoom_layer;
terom@45:         }
terom@45: 
terom@45:         // is the new zoom level valid?
terom@45:         if (!this.zoom_layers[zl])
terom@45:             // XXX: nasty, revert to something else?
terom@45:             return false;
terom@45:         
terom@45:         // set the zoom layyer
terom@45:         this.zoom_layer = this.zoom_layers[zl];
terom@45:         
terom@45:         // enable it with initial z-index
terom@45:         this.zoom_layer.enable(11);
terom@45:         
terom@45:         // init the UI accordingly
terom@45:         this.update_zoom_ui();
terom@45:     },
terom@45: 
terom@45:     /** Initialize the scroll state to show the given (scaled) centered coordinates */
terom@45:     _init_scroll: function (cx, cy) {
terom@45:         // scroll center
terom@45:         this.scroll_center_to(cx, cy);
terom@45:     },
terom@45: 
terom@30:     
terom@45: /*
terom@45:  * Handle input events
terom@45:  */    
terom@30: 
terom@45:     /** Viewport resized */
terom@30:     on_resize: function (ev) {
terom@30:         this.update_size();
terom@30:         this.update_tiles();
terom@30:     },
terom@30:     
terom@45:     /** Double-click to zoom and center */
terom@30:     on_dblclick: function (ev) {
terom@30:         var offset = this.event_offset(ev);
terom@30:         
terom@45:         // center view and zoom in
terom@45:         this.center_and_zoom_in(
terom@30:             this.scroll_x + offset.x,
terom@45:             this.scroll_y + offset.y
terom@30:         );
terom@30:     },
terom@30: 
terom@30:     // mousewheel handler
terom@30:     on_mousewheel: function (ev) {
terom@30:         // this works in very weird ways, so it's based on code from http://adomas.org/javascript-mouse-wheel/
terom@30:         // (it didn't include any license, so this is written out manually)
terom@30:         var delta;
terom@30:         
terom@30:         // this is browser-dependant...
terom@30:         if (ev.wheelDelta) {
terom@30:             // IE + Opera
terom@30:             delta = ev.wheelDelta;
terom@30: 
terom@30:             if (window.opera) {  
terom@30:                 // Opera, but apparently not newer versions?
terom@30:                 //delta = -delta;
terom@30:             }
terom@30: 
terom@30:         } else if (ev.detail) {
terom@30:             // Mozilla
terom@30:             delta = -ev.detail;
terom@30: 
terom@30:         } else {
terom@30:             // mousewheel not supported...
terom@30:             return;
terom@30: 
terom@30:         }
terom@30:         
terom@30:         // don't scroll the page
terom@30:         if (ev.preventDefault)
terom@30:             ev.preventDefault();
terom@30:         
terom@30:         // delta > 0 : scroll up, zoom in
terom@30:         // delta < 0 : scroll down, zoom out
terom@127:         delta = delta < 0 ? 1 : -1;
terom@30: 
terom@30:         // Firefox's DOMMouseEvent's pageX/Y attributes are broken. layerN is for mozilla, offsetN for IE, seems to work
terom@30: 
terom@30:         // absolute location of the cursor
terom@30:         var x = parseInt(ev.target.style.left) + (ev.layerX ? ev.layerX : ev.offsetX);
terom@30:         var y = parseInt(ev.target.style.top) + (ev.layerY ? ev.layerY : ev.offsetY);
terom@30:         
terom@30:         // zoom \o/
terom@30:         this.zoom_center_to(x, y, delta);
terom@30:     },
terom@30:     
terom@45:     /** Substrate scroll was started */
terom@30:     on_scroll_start: function (ev) {
terom@30: 
terom@30:     },
terom@30:     
terom@45:     /** Substrate was scrolled, update scroll_{x,y}, and then update tiles after 100ms */
terom@30:     on_scroll_move: function (ev) {
terom@30:         this.update_scroll();
terom@51: 
terom@51:         // fast-update at 100ms intervals
terom@51:         this.update_after_timeout(true);
terom@30:     },
terom@30:     
terom@45:     /** Substrate scroll was ended, update tiles now */
terom@30:     on_scroll_end: function (ev) {
terom@30:         this.update_now();
terom@30:     },
terom@30: 
terom@45:     /** Calculate the absolute (x, y) coords of the given event inside the viewport */
terom@30:     event_offset: function (ev) {
terom@30:         var offset = this.div.cumulativeOffset();
terom@30: 
terom@30:         return {
terom@30:             x: ev.pointerX() - offset.left, 
terom@30:             y: ev.pointerY() - offset.top
terom@30:         };
terom@30:     },
terom@30: 
terom@45: /*
terom@45:  * Change view - scroll/zoom
terom@45:  */                  
terom@30: 
terom@45:     /** Scroll the view to place the given absolute (x, y) co-ordinate at the top left */
terom@30:     scroll_to: function (x, y) {
terom@30:         // update it via the style
terom@30:         this.substrate.style.top = "-" + y + "px";
terom@30:         this.substrate.style.left = "-" + x + "px";
terom@30:         
terom@30:         // update these as well
terom@30:         this.scroll_x = x;
terom@30:         this.scroll_y = y;
terom@30:     },
terom@30: 
terom@45:     /** Scroll the view to place the given absolute (x, y) co-ordinate at the center */
terom@30:     scroll_center_to: function (x, y) {
terom@30:         return this.scroll_to(
terom@30:             x - this.center_offset_x,
terom@30:             y - this.center_offset_y
terom@30:         );
terom@30:     },
terom@30:  
terom@45:     /** Zoom à la delta such that the given (zoomed) absolute (x, y) co-ordinates will be at the top left */
terom@30:     zoom_scaled: function (x, y, delta) {
terom@30:         if (!this.update_zoom(delta))
terom@45:             // couldn't zoom, scaled coords are wrong
terom@30:             return false;
terom@30: 
terom@30:         // scroll to the new position
terom@30:         this.scroll_to(x, y);
terom@30:         
terom@45:         // update view after 100ms - in case we zoom again?
terom@30:         this.update_after_timeout();
terom@30:         
terom@30:         return true;
terom@30:     },
terom@30:    
terom@45:     /** Zoom à la delta such that the given (current) absolute (x, y) co-ordinates will be at the top left */
terom@30:     zoom_to: function (x, y, delta) {
terom@30:         return this.zoom_scaled(
terom@127:             scaleByZoomDelta(x, -delta),
terom@127:             scaleByZoomDelta(y, -delta),
terom@30:             delta
terom@30:         );
terom@30:     },
terom@30:     
terom@45:     /** Zoom à la delta such that the given (current) absolute (x, y) co-ordinates will be at the center */
terom@30:     zoom_center_to: function (x, y, delta) {
terom@30:         return this.zoom_scaled(
terom@127:             scaleByZoomDelta(x, -delta) - this.center_offset_x,
terom@127:             scaleByZoomDelta(y, -delta) - this.center_offset_y,
terom@30:             delta
terom@30:         );
terom@30:     },
terom@30: 
terom@45:     /** Zoom à la delta, keeping the view centered */
terom@39:     zoom_centered: function (delta) {
terom@39:         return this.zoom_center_to(
terom@39:             this.scroll_x + this.center_offset_x,
terom@39:             this.scroll_y + this.center_offset_y,
terom@39:             delta
terom@39:         );
terom@39:     },
terom@39: 
terom@45:     /** Zoom in one level, keeping the view centered */
terom@39:     zoom_in: function () {
terom@127:         return this.zoom_centered(-1);
terom@39:     },
terom@39:     
terom@45:     /** Zoom out one level, keeping the view centered */
terom@39:     zoom_out: function () {
terom@127:         return this.zoom_centered(+1);
terom@39:     },
terom@30: 
terom@45:     /** Center the view on the given coords, and zoom in, if possible */
terom@45:     center_and_zoom_in: function (cx, cy) {
terom@45:         // try and zoom in
terom@127:         if (this.update_zoom(-1)) {
terom@45:             // scaled coords
terom@45:             cx = scaleByZoomDelta(cx, 1);
terom@45:             cy = scaleByZoomDelta(cy, 1);
terom@45:         }
terom@30: 
terom@45:         // re-center
terom@45:         this.scroll_center_to(cx, cy);
terom@45:         
terom@45:         // update view after 100ms - in case we zoom again?
terom@45:         this.update_after_timeout();
terom@45:     },
terom@45: 
terom@45: /*
terom@45:  * Update view state
terom@45:  */              
terom@45:  
terom@45:     /** Update the view_* / center_offset_* vars, and any dependent items */
terom@30:     update_size: function () {
terom@30:         this.view_width = this.div.getWidth();
terom@30:         this.view_height = this.div.getHeight();
terom@30: 
terom@30:         this.center_offset_x = Math.floor(this.view_width / 2);
terom@30:         this.center_offset_y = Math.floor(this.view_height / 2);
terom@45:         
terom@45:         // the link-to-image uses the current view size
terom@40:         this.update_image_link();
terom@30:     },
terom@45:    
terom@45:     /**
terom@45:      * Update the scroll_x/y state
terom@45:      */    
terom@30:     update_scroll: function() {
terom@30:         this.scroll_x = -parseInt(this.substrate.style.left);
terom@30:         this.scroll_y = -parseInt(this.substrate.style.top);
terom@30:     },
terom@45:     
terom@45:     /**
terom@45:      * Switch zoom layers
terom@45:      */
terom@45:     update_zoom: function (delta) {
terom@45:         // is the new zoom level valid?
terom@45:         if (!this.zoom_layers[this.zoom_layer.level + delta])
terom@45:             return false;
terom@30: 
terom@45:         var zoom_old = this.zoom_layer;
terom@45:         var zoom_new = this.zoom_layers[this.zoom_layer.level + delta];
terom@45:         
terom@45:         // XXX: clear hide-zoom-after-timeout
terom@45:         if (this.zoom_timer) {
terom@45:             clearTimeout(this.zoom_timer);
terom@45:             this.zoom_timer = null;
terom@30:         }
terom@45:         
terom@45:         // get other zoom layers out of the way
terom@45:         // XXX: u
terom@45:         this.zoom_layers.each(function (zl) {
terom@45:             zl.disable();
terom@45:         });
terom@45:         
terom@45:         // update the current zoom layer
terom@45:         this.zoom_layer = zoom_new;
terom@45:         
terom@45:         // layer them such that the old on remains visible underneath the new one
terom@45:         zoom_new.enable(11);
terom@45:         zoom_old.enable(10);
terom@45:         
terom@45:         // resize the tiles in the two zoom layers
terom@45:         zoom_new.update_tiles(zoom_new.level);
terom@45:         zoom_old.update_tiles(zoom_new.level);
terom@45:         
terom@45:         // disable the old zoom layer after 1000ms - after the new zoom layer has loaded - not an optimal solution
terom@45:         this.zoom_timer = setTimeout(function () { zoom_old.disable()}, 1000);
terom@30: 
terom@45:         // update UI state
terom@39:         this.update_zoom_ui();
terom@39: 
terom@30:         return true;
terom@30:     },
terom@39: 
terom@51:     /** Run update_tiles() at 500ms intervals */
terom@51:     update_after_timeout: function (fast) {
terom@45:         // have not called update_tiles() yet
terom@45:         this._update_idle = false;
terom@39:         
terom@45:         // cancel old timeout
terom@51:         if (!fast && this._update_timeout) {
terom@45:             clearTimeout(this._update_timeout);
terom@51:             this._update_timeout = null;
terom@51:         }
terom@51: 
terom@51:         if (!this._update_timeout)
terom@51:             // trigger after delay
terom@51:             this._update_timeout = setTimeout(this._update_timeout_trigger.bind(this), fast ? 500 : 100);
terom@39:     },
terom@30:     
terom@45:     _update_timeout_trigger: function () {
terom@51:         this._update_timeout = null;
terom@51: 
terom@45:         // have called update_tiles()
terom@45:         this._update_idle = true;
terom@45:         
terom@45:         this.update_tiles();
terom@45:     },
terom@45: 
terom@45:     /** 
terom@45:      * Unschedule the call to update_tiles() and call it now, unless it's already been triggered by the previous call to
terom@45:      * update_after_timeout
terom@45:      */
terom@45:     update_now: function () {
terom@45:         // abort trigger if active
terom@51:         if (this._update_timeout) {
terom@45:             clearTimeout(this._update_timeout);
terom@51:             this._update_timeout = null;
terom@51:         }
terom@51: 
terom@45:         // update now unless already done
terom@45:         if (!this._update_idle)
terom@45:             this.update_tiles();
terom@45:     },
terom@45: 
terom@45:     /**
terom@45:      * Determine the set of visible tiles, and ensure they are loaded
terom@45:      */
terom@45:     update_tiles: function () {
terom@30:         // short names for some vars...
terom@30:         var x = this.scroll_x;
terom@30:         var y = this.scroll_y;
terom@30:         var sw = this.view_width;
terom@30:         var sh = this.view_height;
terom@30:         var tw = this.source.tile_width;
terom@30:         var th = this.source.tile_height;
terom@30:         var zl = this.zoom_layer.level;
terom@30:         
terom@45:         // figure out which set of cols/rows are visible 
terom@30:         var start_col = Math.max(0, Math.floor(x / tw));
terom@30:         var start_row = Math.max(0, Math.floor(y / th));
terom@30:         var end_col = Math.floor((x + sw) / tw);
terom@30:         var end_row = Math.floor((y + sh) / th);
terom@30: 
terom@45:         // loop through all visible tiles
terom@30:         for (var col = start_col; col <= end_col; col++) {
terom@30:             for (var row = start_row; row <= end_row; row++) {
terom@30:                 // the tile's id
terom@45:                 var id = "tile_" + zl + "_" + col + "_" + row;
terom@30:                 
terom@30:                 // does the element exist already?
terom@45:                 // XXX: use basic document.getElementById for perf?
terom@30:                 var t = $(id);
terom@30: 
terom@30:                 if (!t) {
terom@30:                     // build a new tile
terom@30:                     t = Builder.node("img", {
terom@45:                             src:    this.source.build_url(col, row, zl /* , sw, sh */),
terom@46:                             id:     id //,
terom@45:                             // title:  "(" + col + ", " + row + ")",
terom@30:                             // style set later
terom@30:                         }
terom@30:                     );
terom@30:                     
terom@45:                     // position
terom@30:                     t.style.top = th * row;
terom@30:                     t.style.left = tw * col;
terom@30:                     t.style.display = "none";
terom@30:                     
terom@45:                     // display once loaded
terom@30:                     Event.observe(t, "load", _tile_loaded.bindAsEventListener(t));
terom@30: 
terom@45:                     // remember the col/row
terom@30:                     t.__col = col;
terom@30:                     t.__row = row;
terom@30:                     
terom@30:                     // add it to the zoom layer
terom@30:                     this.zoom_layer.add_tile(t);
terom@30: 
terom@30:                 } else if (this.source.reload) {
terom@30:                     // force the tile to reload
terom@30:                     touch_tile(t, col, row);
terom@30: 
terom@30:                 }
terom@30:             }
terom@30:         }
terom@40:         
terom@40:         this.update_scroll_ui();
terom@40:     }, 
terom@45: 
terom@45: /*
terom@45:  * UI state
terom@45:  */                  
terom@45: 
terom@45:     /**
terom@45:      * Update any zl-dependant UI elements
terom@45:      */
terom@45:     update_zoom_ui: function () {
terom@45:         // deactivate zoom-in button if zoomed in
terom@45:         if (this.btn_zoom_in)
terom@127:             (this.zoom_layer.level <= this.source.zoom_min) ? this.btn_zoom_in.disable() : this.btn_zoom_in.enable();
terom@45:         
terom@45:         // deactivate zoom-out button if zoomed out
terom@45:         if (this.btn_zoom_out)
terom@127:             (this.zoom_layer.level >= this.source.zoom_max) ? this.btn_zoom_out.disable() : this.btn_zoom_out.enable();
terom@45:         
terom@45:         // link-to-image
terom@45:         this.update_image_link();
terom@45:     },
terom@45:  
terom@45:     /**
terom@45:      * Update any position-dependant UI elements
terom@45:      */ 
terom@40:     update_scroll_ui: function () {
terom@128:         var zl = this.zoom_layer.level;
terom@128: 
terom@45:         // update the link-to-this-page thing
terom@128:         document.location.hash = (
terom@128:                 scaleByZoomDelta(this.scroll_x + this.center_offset_x, zl) 
terom@128:             +   ":" 
terom@128:             +   scaleByZoomDelta(this.scroll_y + this.center_offset_y, zl) 
terom@128:             +   ":" 
terom@128:             +   zl
terom@128:         );
terom@45:         
terom@40:         // update link-to-image
terom@40:         this.update_image_link();
terom@40:     },
terom@40:     
terom@45:     /**
terom@45:      * Update the link-to-image-of-this-view link with dimensions, zoom, position
terom@45:      */
terom@40:     update_image_link: function () {
terom@40:         if (!this.image_link)
terom@40:             return;
terom@40: 
terom@40:         this.image_link.href = this.source.build_image_url(
terom@40:             this.scroll_x + this.center_offset_x,
terom@40:             this.scroll_y + this.center_offset_y,
terom@40:             this.view_width, this.view_height,
terom@40:             this.zoom_layer.level
terom@40:         );
terom@40: 
terom@40:         this.image_link.innerHTML = this.view_width + "x" + this.view_height + "@" + this.zoom_layer.level;
terom@45:     }
terom@30: });
terom@30: 
terom@45: /** Used by Viewport.update_tiles to make a tile visible after it has loaded */
terom@30: function _tile_loaded (ev) {
terom@30:     this.style.display = "block";
terom@30: }
terom@30: 
terom@45: /**
terom@45:  * A zoom layer contains a (col, row) grid of tiles at a specific zoom level. 
terom@45:  */
terom@30: var ZoomLayer = Class.create({
terom@30:     initialize: function (source, zoom_level) {
terom@30:         this.source = source;
terom@30:         this.level = zoom_level;
terom@30:         this.div = Builder.node("div", { id: "zl_" + this.level, style: "position: relative; display: none;"});
terom@30: 
terom@30:         // our tiles
terom@30:         this.tiles = [];
terom@30:     },
terom@30:     
terom@45:     /** Add a tile to this zoom layer's grid */
terom@30:     add_tile: function (tile) {
terom@30:         this.div.appendChild(tile);
terom@30:         this.tiles.push(tile);
terom@30:     },
terom@30:     
terom@45:     /** Make this zoom layer visible with the given z-index */
terom@30:     enable: function (z_index) {
terom@30:         this.div.style.zIndex = z_index;
terom@46: 
terom@46:         // XXX: IE8 needs this for some reason
terom@46:         $(this.div).show();
terom@30:     },
terom@30:    
terom@45:     /** Hide this zoom layer */
terom@45:     disable: function () {
terom@46:         // XXX: IE8
terom@46:         $(this.div).hide();
terom@30:     },
terom@30:     
terom@45:     /** 
terom@45:      * Update the tile grid in this zoom layer such the tiles are in the correct position and of the correct size
terom@45:      * when viewed with the given zoom level.
terom@45:      *
terom@45:      * For zoom levels different than this layer's level, this will resize the tiles!
terom@45:      */
terom@30:     update_tiles: function (zoom_level) {
terom@127:         var zd = this.level - zoom_level;
terom@45:         
terom@45:         // desired tile size
terom@30:         var tw = scaleByZoomDelta(this.source.tile_width, zd);
terom@30:         var th = scaleByZoomDelta(this.source.tile_height, zd);
terom@30: 
terom@30:         var tiles = this.tiles;
terom@30:         var tiles_len = tiles.length;
terom@30:         var t, ts;
terom@30:         
terom@45:         // XXX: *all* tiles? :/
terom@30:         for (var i = 0; i < tiles_len; i++) {
terom@30:             t = tiles[i];
terom@30:             ts = t.style;
terom@45:             
terom@45:             // reposition
terom@30:             ts.width = tw;
terom@30:             ts.height = th;
terom@45:             ts.top = th * t.__row;
terom@45:             ts.left = tw * t.__col;
terom@30:         }
terom@45:     }
terom@30: });
terom@30: 
terom@127: // scale the given co-ordinate by a zoom delta. If we zoom out (dz > 0), n will become larger, and if we zoom 
terom@127: // in (dz < 0), n will become smaller.
terom@30: function scaleByZoomDelta (n, dz) {
terom@30:     if (dz > 0)
terom@30:         return n << dz;
terom@30:     else
terom@30:         return n >> -dz;
terom@30: }
terom@30: