window.onload = init;



// constants

            var viewportWidth = 760;

            var viewportHeight = 400;

            var tileSize = 200;

            // START:globalstate

            var zoom = 0;

            var zoomSizes = [ [ "800px", "518px" ], [ "3000px", "1941px" ] ];

            // END:globalstate



            // used to control moving the map div

            var dragging = false;

            var top;

            var left;

            var dragStartTop;

            var dragStartLeft;



            function init() {

                // make inner div big enough to display the map

                // START:innerDivSize

                setInnerDivSize(zoomSizes[zoom][0], zoomSizes[zoom][1]);

                // END:innerDivSize



                // wire up the mouse listeners to do dragging

                var outerDiv = document.getElementById("outerDiv");

                outerDiv.onmousedown = startMove;

                outerDiv.onmousemove = processMove;

                outerDiv.onmouseup = stopMove;



                // necessary to enable dragging on IE

                outerDiv.ondragstart = function() { return false; }



                checkTiles();

            }



            function startMove(event) {

                // necessary for IE

                if (!event) event = window.event;



                dragStartLeft = event.clientX;

                dragStartTop = event.clientY;

                var innerDiv = document.getElementById("innerDiv");

                innerDiv.style.cursor = "-moz-grab";



                top = stripPx(innerDiv.style.top);

                left = stripPx(innerDiv.style.left);



                dragging = true;

                return false;

            }



            function processMove(event) {

                if (!event) event = window.event;  // for IE

                var innerDiv = document.getElementById("innerDiv");

                if (dragging) {

                    innerDiv.style.top = top + (event.clientY - dragStartTop);

                    innerDiv.style.left = left + (event.clientX - dragStartLeft);

                }



                checkTiles();

            }

            // START:checktiles

            function checkTiles() {

                // check which tiles should be visible in the inner div

                var visibleTiles = getVisibleTiles();



                // add each tile to the inner div, checking first to see

                // if it has already been added

                var innerDiv = document.getElementById("innerDiv");

                var visibleTilesMap = {};      

                for (i = 0; i < visibleTiles.length; i++) {

                    var tileArray = visibleTiles[i];

                    // START:imgZoomLevel

                    var tileName = "east" + (zoom + 1) + "_r" + (tileArray[1] + 1) + "_c" + (tileArray[0] + 1);

                    // END:imgZoomLevel

                    visibleTilesMap[tileName] = true;

                    var img = document.getElementById(tileName);

                    if (!img) {

                        img = document.createElement("img");

                        img.src = "images/parking/" + tileName + ".jpg";

                        img.style.position = "absolute";

                        img.style.left = (tileArray[0] * tileSize) + "px";

                        img.style.top = (tileArray[1] * tileSize) + "px";

                        img.style.zIndex = 0;

                        img.setAttribute("id", tileName);

                        innerDiv.appendChild(img);

                    }

                }



                var imgs = innerDiv.getElementsByTagName("img");

                for (i = 0; i < imgs.length; i++) {

                    var id = imgs[i].getAttribute("id");

                    if (!visibleTilesMap[id]) {

                        innerDiv.removeChild(imgs[i]);

                        i--;  // compensate for live nodelist

                    }

                }

            }

            // END:checktiles



            function getVisibleTiles() {

                var innerDiv = document.getElementById("innerDiv");



                var mapX = stripPx(innerDiv.style.left);

                var mapY = stripPx(innerDiv.style.top);



                var startX = Math.abs(Math.floor(mapX / tileSize)) - 1;

                var startY = Math.abs(Math.floor(mapY / tileSize)) - 1;



                var tilesX = Math.ceil(viewportWidth / tileSize) + 1;

                var tilesY = Math.ceil(viewportHeight / tileSize) + 1;



                var visibleTileArray = [];

                var counter = 0;

                for (x = startX; x < (tilesX + startX); x++) {

                    for (y = startY; y < (tilesY + startY); y++) {

                        visibleTileArray[counter++] = [x, y];

                    }

                }

                return visibleTileArray;

            }





            function stopMove() {

                var innerDiv = document.getElementById("innerDiv");

                innerDiv.style.cursor = "";

                dragging = false;

            }



            function stripPx(value) {

                if (value == "") return 0;

                return parseFloat(value.substring(0, value.length - 2));

            }



            function setInnerDivSize(width, height) {

                var innerDiv = document.getElementById("innerDiv");

                innerDiv.style.width = width;

                innerDiv.style.height = height;

            }



            // START:toggleZoom

            function toggleZoom() {

                zoom = (zoom == 0) ? 1 : 0;



                var innerDiv = document.getElementById("innerDiv");

                var imgs = innerDiv.getElementsByTagName("img");

                while (imgs.length > 0) innerDiv.removeChild(imgs[0]);



                setInnerDivSize(zoomSizes[zoom][0], zoomSizes[zoom][1]);



                checkTiles();

            }

            // END:toggleZoom