// 498px since the viewable area is 500px minus the 1px border on each side
var viewportWidth = 498;
var viewportHeight = 498;
var tileSize = 250; // The size in pixels of each image tile used in the map
var zoom = 0; // Set the default zoom level to 0 when the page loads
var maxZoomLevel = 2; // Zoom levels are 0, 1, 2
var constraint = 0; // keep the user from dragging the map outside of the viewable area
var topPos; // for the drag and drop movement of the map layer
var leftPos; // for the drag and drop movement of the map layer

// Contains the size of the map at the various zoom levels
var zoomSizes = [["500px","500px"],
        ["1000px","1000px"],
        ["2000px","2000px"]];

// used to control the zoom slider
var slider = false;
var sliderLeft;
var sliderStartLeft;

// used for optional information layers
var accessibility = false;
var busstops = false;
var buildings = false;
var cameras = false;
var complabs = false;
var interest = false;
var phones = false;
var hydrants = false;
var foodgas = false;
var nonsmoking = false;

function init() {
    // make inner div big enough to display the map
    setInnerDivSize(zoomSizes[zoom][0], zoomSizes[zoom][1]);
    var outerDiv = document.getElementById("outerDiv");
    var innerDiv = document.getElementById("innerDiv");
    var sliderHandle = document.getElementById("sliderHandle");
    innerDiv.onmousedown = startMove;
    outerDiv.onmousemove = processMove;
    document.onmouseup = stopMove;
    outerDiv.ondragstart = function() { return false; }; // for IE
    sliderHandle.onmousedown = startSlider;
    document.onmousemove = processSlider;
    sliderHandle.ondragstart = function() { return false; }; // for IE
    checkTiles();
}

///////////////////////////////////////////////////////////////////////////////
//
// startSlider(), processSlider(), moveHandle() are for moving the
// slider that controls the zoom level
//
//////////////////////////////////////////////////////////////////////////////
function startSlider(event) {
    if (!event) event = window.event; // for IE
    sliderStartLeft = event.clientX;
    var sliderHandle = document.getElementById("sliderHandle");
    left = stripPx(sliderHandle.style.left);
    slider = true;
    return false;
}

function processSlider(event) {
    if (!event) event = window.event;  // for IE
    var sliderHandle = document.getElementById("sliderHandle");
    var sliderHandleLight = document.getElementById("sliderHandleLight");
    if (slider) {
        sliderHandle.style.left = parseFloat(left) + (event.clientX - sliderStartLeft) + "px";

        if (stripPx(sliderHandle.style.left) < 0)
            sliderHandle.style.left = "0px"; // To constrain the draggable area

        if (stripPx(sliderHandle.style.left) > 60)
            sliderHandle.style.left = "60px"; // To constrain the draggable area 

        if (stripPx(sliderHandle.style.left) <= 15) {
            sliderHandleLight.style.left = "0px";
            sliderHandleLight.style.visibility = "visible";
        }

        if (stripPx(sliderHandle.style.left) > 15 && stripPx(sliderHandle.style.left) < 45) {
            sliderHandleLight.style.left = "30px";
            sliderHandleLight.style.visibility = "visible";
        }

        if (stripPx(sliderHandle.style.left) >= 45) {
            sliderHandleLight.style.left = "60px";
            sliderHandleLight.style.visibility = "visible";
        }
    }
}

function moveHandle(option) {
    var sliderHandle = document.getElementById("sliderHandle");
    if (option == -1) {
        if (sliderHandle.style.left == "0px") {sliderHandle.style.left = "30px"; toggleZoom(1);}
        else if (sliderHandle.style.left == "30px") {sliderHandle.style.left = "0px"; toggleZoom(-1);}
        else if (sliderHandle.style.left == "60px") {sliderHandle.style.left = "30px"; toggleZoom(-1);}
    }
    if (option == 1) {
        if (sliderHandle.style.left == "0px") {sliderHandle.style.left = "30px"; toggleZoom(1);}
        else if (sliderHandle.style.left == "30px") {sliderHandle.style.left = "60px"; toggleZoom(1);}
        else if (sliderHandle.style.left == "60px") {sliderHandle.style.left = "30px"; toggleZoom(-1);}
    }
}
///////////////////////////////////////////////////////////////////////////////
//
// End of the zoom level slider functions
//
//////////////////////////////////////////////////////////////////////////////



///////////////////////////////////////////////////////////////////////////////
//
// startMove(), processMove(), stopMove() are for the drag and drop
// functionality of the map layer
//
//////////////////////////////////////////////////////////////////////////////
function startMove(event) {
    if (!event) event = window.event; // for IE
    dragStartLeft = event.clientX;
    dragStartTop = event.clientY;
    var innerDiv = document.getElementById("innerDiv");
    topPos = stripPx(innerDiv.style.top);
    leftPos = 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 = parseFloat(topPos) + (event.clientY - dragStartTop) + "px";
        if (stripPx(innerDiv.style.top) < constraint) innerDiv.style.top = constraint + "px"; // To constrain the draggable area
        if (stripPx(innerDiv.style.top) > 0) innerDiv.style.top = "0px"; // To constrain the draggable area
        innerDiv.style.left = parseFloat(leftPos) + (event.clientX - dragStartLeft) + "px";
        if (stripPx(innerDiv.style.left) < constraint) innerDiv.style.left = constraint + "px"; // To constrain the draggable area
        if (stripPx(innerDiv.style.left) > 0) innerDiv.style.left = "0px"; // To constrain the draggable area
    }
    checkTiles();
}

function stopMove() {
    var innerDiv = document.getElementById("innerDiv");
    var imgs = innerDiv.getElementsByTagName("img");
    var sliderHandle = document.getElementById("sliderHandle");
    var sliderHandleLight = document.getElementById("sliderHandleLight");
    var level;
    dragging = false;
    slider = false;
    sliderHandleLight.style.visibility = "hidden";
    // need to make sure the slide handle snaps to the correct position on the slider
    // and make the map zoom to the correct level.
    if (stripPx(sliderHandle.style.left) <= 15) {
        sliderHandle.style.left = "0px";
        if (zoom == 1) toggleZoom(-1);
        if (zoom == 2) { toggleZoom(-1); toggleZoom(-1); }
    }
    if (stripPx(sliderHandle.style.left) > 15 && stripPx(sliderHandle.style.left) < 45) {
        sliderHandle.style.left = "30px";
        if (zoom == 0) toggleZoom(1);
        if (zoom == 2) toggleZoom(-1);
    }
    if (stripPx(sliderHandle.style.left) >= 45) {
        sliderHandle.style.left = "60px";
        if (zoom == 0) { toggleZoom(1); toggleZoom(1); }
        if (zoom == 1) toggleZoom(1);
    }
}

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 = "x" + tileArray[0] + "y" + tileArray[1] + "z" + zoom;
        // END:imgZoomLevel
        visibleTilesMap[tileName] = true;
        var img = document.getElementById(tileName);
        if (!img) {
            img = document.createElement("img");
            img.src = "images/tiles/" + tileName + ".png";
            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);
            img.setAttribute("class", "mapTile");
            innerDiv.appendChild(img);
        }
    }
}

function getVisibleTiles() {
    var innerDiv = document.getElementById("innerDiv");

    // Get the current top left corner position of the map
    var mapX = stripPx(innerDiv.style.left);
    var mapY = stripPx(innerDiv.style.top);

    // Divide the position by the size of the tiles to find starting row and
    // column. Subtract 1 to make the tiles load when only part of the tile
    // is visible.
    var startX = Math.abs(Math.floor(mapX / tileSize)) - 1;
    var startY = Math.abs(Math.floor(mapY / tileSize)) - 1;
    
    // Make sure startX and startY do not have negative values so that the map
    // does not try to grab image tiles that do not exist.
    if (startX < 0) startX = 0;
    if (startY < 0) startY = 0;

    // Find the number of rows and columns that are currently visible
    if (zoom == 0) {
        tilesX = Math.ceil(viewportWidth / tileSize);
        tilesY = Math.ceil(viewportHeight / tileSize);
    } else {
        // If zoom level is not 0, grab extra tiles on the right and
        // bottom edges if any part of the tile is showing.
        tilesX = Math.ceil(viewportWidth / tileSize) + 1;
        tilesY = Math.ceil(viewportHeight / tileSize) + 1;
    }

    // build up a 2-D array with the x and y for each visible tile
    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 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;
}
function toggleZoom(level) {
    var sliderHandle = document.getElementById("sliderHandle");
    var innerDiv = document.getElementById("innerDiv");
    zoom += level;
    if (zoom > maxZoomLevel) zoom = maxZoomLevel;
    else if (zoom < 0) zoom = 0;
    else {
        if (zoom == 0) { constraint = 0; sliderHandle.style.left = "0px"; innerDiv.style.cursor = ""; }
        if (zoom == 1) { constraint = -500; sliderHandle.style.left = "30px"; innerDiv.style.cursor = "move"; }
        if (zoom == 2) { constraint = -1500; sliderHandle.style.left = "60px"; innerDiv.style.cursor = "move"; }
        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]);
        resetPosition(level);
        checkTiles();
        checkOptionLayers();
        resizeBuildings(level);
    }
}
function resetPosition(level) {
    var innerDiv = document.getElementById("innerDiv");
    if (zoom == 0) {
        innerDiv.style.top = "0px";
        innerDiv.style.left = "0px";
    }
    else if (level == 1) {
        innerDiv.style.top = ((stripPx(innerDiv.style.top) * 2) - 250) + "px";
        innerDiv.style.left = ((stripPx(innerDiv.style.left) * 2) - 250) + "px";
    }
    else if (level == -1) {
        innerDiv.style.top = ((stripPx(innerDiv.style.top)/2) + 125) + "px";
        innerDiv.style.left = ((stripPx(innerDiv.style.left)/2) + 125) + "px";
    }
    if (zoom == 1 && level == -1) {
        if (stripPx(innerDiv.style.top) > 0) innerDiv.style.top = "0px";
        if (stripPx(innerDiv.style.left) > 0) innerDiv.style.left = "0px";
        if (stripPx(innerDiv.style.top) < -500) innerDiv.style.top = "-500px";
        if (stripPx(innerDiv.style.left) < -500) innerDiv.style.left = "-500px";
    }
}