var viewportWidth = 430;
var viewportHeight = 430;
var tileSize = 100;
var zoom = 0;
//width, height, scale, scale
var zoomSizes = [["1800","1300", 0.5, -4.0, 1.0, 0, 0], 
                 ["3600","2600", 2.0, 2.0, 2.0, 32, 11]];

var dragging = false;
var top;
var left;
var dragStartTop;
var dragStartLeft;
var pins = new Array();
var carparks = null;

function init_map() 
{
    $('#toggleZoomDiv').click(toggleZoom);
    //$('#togglePushPinDiv').click(togglePushPin);
    
    // make inner div big enough to display the map
    $("#innerDiv").css(
        {"width": zoomSizes[zoom][0], "height":zoomSizes[zoom][1]});

    // wire up the mouse listeners to do dragging
    $("#outerDiv").mousedown(startMove);
    $("#outerDiv").mousemove(processMove);
    $("#outerDiv").mouseup(stopMove);

    // necessary to enable dragging on IE
    $("#outerDiv").ondragstart = function() { return false; }

    // fix the toggle divs to be transparent in IE
    new OpacityObject('toggleZoomDiv','/static/trafficmap/images/zoom').setBackground();
    //new OpacityObject(
    //    'togglePushPinDiv','resources/images/pushpin').setBackground();

    checkTiles();
    loadCarParks();
    loadPins();
    checkPins();
}

function loadCarParks()
{
    carparks = $.evalJSON($("#carparksjson")[0].value);
}

function loadPins()
{
    $(".mapdata").each(function(index){
        pin = $.evalJSON(this.value);
        pins[pins.length] = pin;
    });
}

function startMove(event) 
{
    dragStartLeft = event.pageX;
    dragStartTop = event.pageY;
    $("#innerDiv").css("cursor", "-moz-grab");

    top = stripPx($("#innerDiv").css("top"));
    left = stripPx($("#innerDiv").css("left"));
                
    dragging = true;
    return false;
}

function processMove(event) 
{
    if (dragging) 
    {
        $("#innerDiv").css(
            {"top":calculate_top(event),
             "left":calculate_left(event)}
        );
    }
    checkTiles();
}

function calculate_top(event)
{
    t = parseFloat(top) + (event.pageY - dragStartTop);
    t = Math.min(0, t);
    t = Math.max(t, -zoomSizes[zoom][1] + viewportHeight);
    return t;
}

function calculate_left(event)
{
    l = parseFloat(left) + (event.clientX - dragStartLeft);
    l = Math.min(0, l);
    l = Math.max(l, -zoomSizes[zoom][0] + viewportWidth);
    return l;
}

function checkPins()
{
    $(".mappin").remove();
    var visiblePins = getVisiblePins();
    $(visiblePins).each(
    function()
    {
                createPin(this, true);
    }
    )
    if(typeof admin_configure_pins == "function")
    {
        admin_configure_pins();
    }
}

function refresh_pin(index)
{
        handleZoom = true;
        pindata = pins[index]
        zoomfactor = zoomSizes[zoom][4];
        topadd = zoomSizes[zoom][5];
        leftadd = zoomSizes[zoom][6];
        pinleft = (pindata.left * zoomfactor);
        if(handleZoom)
        {
            pinleft += leftadd;
        }
        pinleft += "px" 
        pintop = (pindata.top * zoomfactor);
        if(handleZoom)
        {
            pintop += topadd;
        }
        pintop += "px";
        pin = $('#pushPin' + pindata.pinname); 
        pin.css({"left": pinleft,
                    "top": pintop}); 
}

function createPin(pindata, handleZoom)
{
        zoomfactor = zoomSizes[zoom][4];
        topadd = zoomSizes[zoom][5];
        leftadd = zoomSizes[zoom][6];
        pinImage = $(document.createElement("div"));
        pinleft = (pindata.left * zoomfactor);
        if(handleZoom)
        {
            pinleft += leftadd;
        }
        pinleft += "px" 
        pintop = (pindata.top * zoomfactor);
        if(handleZoom)
        {
            pintop += topadd;
        }
        pintop += "px" 
        
        pinImage.css({"position":"absolute","left": pinleft,
                    "top": pintop,"width":"37px",
                    "height":"34px", "zIndex":1 }); 
        pinImage.attr("id", "pushPin" + pindata.pinname);
        pinImage.attr("class", "mappin");
        $(pinImage).click(handle_pin_click);
        $("#innerDiv").append(pinImage);
        new OpacityObject('pushPin' + pindata.pinname,'/static/trafficmap/images/pin').setBackground();

}

function handle_pin_click()
{
    pin_id = parseInt(this.id.slice(10));
    pin_name = this.id.slice(7);
    $('#pinDialog').remove();
    var dialog = $(document.createElement("div"));
    dialog.css({"position":"absolute", 
            "left": (stripPx($(this).css("left")) - 90),
            "top": (stripPx($(this).css("top")) - 258),
            "width":"200px", "height":"275px", "zIndex":2,
            "background-image":"url(/static/trafficmap/images/squaresm.png)"});
    dialog.attr("id", "pinDialog");
    html = '<img id="dialogclose" src="/static/trafficmap/images/close.png" alt="close" /><div id="pininner"><div id="pindata">';
    html += populate_pin(pin_id);
    html += "</div>";
    if (typeof admin_populate_dialog == "function")
    {
        html+= admin_populate_dialog(pin_id, pin_name);
    }
    html += '</div>';
    dialog.html(html);
    $("#innerDiv").append(dialog);
    if( typeof admin_configure_dialog == "function")
    {
        admin_configure_dialog(pin_id);
    }
    $('#dialogclose').click(function(){$('#pinDialog').remove();})
}

function populate_pin(pinid)
{
    pin = fetch_pin(pinid);
    carpark = carparks[pin.carpark];
    html = "";
    if(carpark != null)
    {
        html += '<b>' + carpark.name + '</b>';
        if(carpark.space != "" && carpark.space !=null)
        {
            html += '<p>' + carpark.space + ' spaces</p>';
            if(carpark.spacefree != "" && carpark.spacefree!=null)
            {
                cssclass = "spacesavailable";
                if(carpark.spacefree == "FULL" || carpark.spacefree == "0" || carpark.spacefree == "No")
                {
                    cssclass = "nospacesavailable";
                    carpark.spacefree = "No";
                }
            html += '<p class="' + cssclass + '" >' + carpark.spacefree + ' spaces available right now.</p>';
            }
        }
        html += '<p>' + carpark.address + '</b>';
        html += '<p>' + carpark.phone + '</b>';
        html += '<p>' + carpark.opening + '</b>';
        if(carpark.rate != "" && carpark.rate !=null)
        {
            html += '<p>' + carpark.rate + '</b>';
        }
        if(carpark.more != "" && carpark.more !=null)
        {
            html += '<p><a href="' + carpark.more + '" target="_blank">More info</a></b>';
        }
    }
    else
    {
        html = "<p>No Carpark Set</p>";
    }
    return html;

}

function fetch_pin_index(pinid)
{
    for(var i=0; i< pins.length; i++)
    {
        if(pins[i].pinname == "pin" + pinid)
        {
            return i;
        }
    }
    return null;

}

function fetch_pin(pinid)
{
    for(var i=0; i< pins.length; i++)
    {
        if(pins[i].pinname == "pin" + pinid)
        {
            return pins[i];
        }
    }
    return null;
}


function checkTiles() 
{
    var visibleTiles = getVisibleTiles();

    var innerDiv = document.getElementById("innerDiv");
    var visibleTilesMap = {};      
    $(visibleTiles).each(
        function(index, tile)
        {
            // START:imgZoomLevel
            var tile_name = "x" + tile[0] + "y" + tile[1] + "z" + zoom;
            // END:imgZoomLevel
            visibleTilesMap[tile_name] = true;
            if (!$("#" + tile_name).length > 0) 
            {
                img = $(document.createElement('img'));
                img.attr("src","/static/trafficmap/images/tiles/" + tile_name + ".png");
                img.css({"position":"absolute", "zIndex":0,
                            "left":(tile[0]),
                            "top":(tile[1])});
                img.attr("id", tile_name);
                img.attr("class", "maptile");
                img.appendTo($("#innerDiv"));     
             }
        }
    );
    
    $("#innerDiv img.maptile").each(
        function(index, tile)
        {
            if(!visibleTilesMap[$(tile).attr("id")])
            {
                $(tile).remove();
            }
        }
    );
 
}

function getVisiblePins()
{
    return pins;
}

function getVisibleTiles() 
{
    var mapX = stripPx($("#innerDiv").css("left"));
    var mapY = stripPx($("#innerDiv").css("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++) 
        {
          //  if (checkTileOnMap(x, y))
          // {
                visibleTileArray[counter++] = [x * 100, y * 100];
          //  }
        }
    }
    return visibleTileArray;
}

function checkTileOnMap(x, y)
{
    return (((x * 100) < zoomSizes[zoom][0]) && x>=0) && (((y * 100) < zoomSizes[zoom][1]) && y>=0)
}

function stopMove() 
{
    $("#innerDiv").css("cursor","");
    dragging = false;
}

function stripPx(value) 
{
    if (value == "")
    {
        return 0;
    }
    return parseFloat(value.substring(0, value.length - 2));
}

function toggleZoom() 
{
    $('#pinDialog').remove();
    zoom = (zoom == 0) ? 1 : 0;
    $("#innerDiv img").remove();
    $("#innerDiv").css(
        {"width": zoomSizes[zoom][0], "height":zoomSizes[zoom][1]});
    $("#innerDiv").css(
            {"top":stripPx($("#innerDiv").css("top")) * zoomSizes[zoom][2],
             "left":stripPx($("#innerDiv").css("left")) * zoomSizes[zoom][2]}
        );

    //adjust zoom position to compensate for the changing relative size of the viewport

    $("#innerDiv").css(
            {"top":stripPx($("#innerDiv").css("top")) - viewportHeight / zoomSizes[zoom][3],
             "left":stripPx($("#innerDiv").css("left")) - viewportWidth / zoomSizes[zoom][3]});

    /*if ($("#pushPin").length > 0) 
    {
        togglePushPin();
    }*/

    checkTiles();
    checkPins();
}
                     

function togglePushPin() 
{
    if($("#pushPin").length > 0)
    {
        $("#pushPin").remove();
        $("#pinDialog").remove();
        return
    }

    pinImage = $(document.createElement("div"));
    pinImage.css({"position":"absolute","left":(zoom == 0) ? "850px" : "630px",
                    "top":(zoom == 0) ? "570px" : "420px","width":"37px",
                    "height":"34px", "zIndex":1}); 
    pinImage.attr("id", "pushPin");
    $("#innerDiv").append(pinImage);
    new OpacityObject('pushPin','/static/trafficmap/images/pin').setBackground();

    var dialog = $(document.createElement("div"));
    dialog.css({"position":"absolute", 
            "left": (stripPx($(pinImage).css("left")) - 90),
            "top": (stripPx($(pinImage).css("top")) - 210),
            "width":"309px", "height":"229px", "zIndex":2});
    dialog.attr("id", "pinDialog");
    dialog.html("<table height='80%' width='100%'><tr>" +
        "<td align='center'>The capital of Spain</td></tr></table>");
    $("#innerDiv").append(dialog);
    new OpacityObject('pinDialog','/static/trafficmap/images/dialog').setBackground();
}

$(document).ready(init_map);