//SkyMapOnline 1.0, by Ciprian Boboc (www.ciprianboboc.com)

var oSlider = { 'zoomLevels': 10, 'minValue': 82, 'maxValue': 208, 'zoomLevel': 1 }
var oCompass = { 'up': { 'top': 5, 'left': 15 }, 'down': { 'top': 25, 'left': 15 }, 'left': { 'top': 15, 'left': 5 }, 'right': { 'top': 15, 'left': 25} }
var tooltipText = ''


//Behaviour.register({
//    '.displayMap': function() {
//        initDisplay(400);
//    }
//});

if (window.addEventListener)
/** DOMMouseScroll is for mozilla. */
    window.addEventListener('DOMMouseScroll', wheel, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel;

function wheel(event) {
    var delta = 0;
    if (!event) // For IE
        event = window.event;
    if (event.wheelDelta) { // IE/Opera
        delta = event.wheelDelta / 120;
        if (window.opera)
            delta = -delta;
    } else if (event.detail) { // Mozilla
        delta = -event.detail / 3;
    } 
    if (delta) {
        var ev = getEvent(event)
        var displayMap = getDisplayMap()
        var mouse = localizeCoordinates(displayMap, { 'x': ev.clientX, 'y': ev.clientY });
        var dim = displayMap.dimensions;

        if (mouse.x >= 0 && mouse.x <= displayMap.clientWidth && mouse.y >= 0 && mouse.y <= displayMap.clientHeight) {
            if (delta < 0) zoomImage(displayMap, -1, true, true)
            if (delta > 0) zoomImage(displayMap, 1, true, true)

            if (event.preventDefault)
                event.preventDefault();
            event.returnValue = false;
        }
    }
}

function sliderClick(e) {
    hideTooltip()
    var ev = getEvent(e)    

    var displayMap = getDisplayMap()
    var mouse = localizeCoordinates(displayMap, { 'x': ev.clientX, 'y': ev.clientY });
    var slider = document.getElementById('sliderKnob')
    displayStatus("screen: " + ev.screenX + " client: " + ev.screenY + ' scrollTop: ' + document.documentElement.scrollTop + ' clientTop: ' + document.body.clientTop)

    var posy = mouse.y - 5

    //used to not move slider knob if pressed + or - and zoomLevel didn't change
    var check = false
    //if click on +
    if (mouse.y <= oSlider.minValue) {
        posy = slider.offsetTop - stepSlider();
        check = true
    }
    //if click on -
    else if (mouse.y >= oSlider.maxValue + 8) {
        posy = slider.offsetTop + stepSlider();
        check = true;
    }

    posy = validSliderKnobLocation(posy)
    //if used + or - and zoomLevel didn't change
    if (check && getZoomLevelFromSlider() == getZoomLevel(posy)) {
        return
    }

    //displayStatus(posy)
    document.getElementById('sliderKnob').style.top = posy + 'px';
    //document.getElementById('HiddenFieldPosition').value = posy + 'px'
    UpdateZoomLevel()
}

function pressSliderKnob(e) {
    var sliderKnob = document.getElementById('sliderKnob')
    sliderKnob.pressed = true
    pressDisplayMap()
    displayStatus('knob pressed')    
}

function releaseSliderKnob() {
    var sliderKnob = document.getElementById('sliderKnob')    
    if (sliderKnob != null && sliderKnob.pressed) {
        sliderKnob.pressed = false
        UpdateZoomLevel()
    }
}

function getZoomLevelFromSlider() {
    var sliderKnob = document.getElementById("sliderKnob")
    return getZoomLevel(sliderKnob.offsetTop)
}

function updateSlider(zoomLevel) {
    var sliderKnob = document.getElementById("sliderKnob")
    var position = oSlider.maxValue - zoomLevel * stepSlider()
    sliderKnob.style.top = position + 'px'
}
    

function getZoomLevel(offset) {
    var position = offset - oSlider.minValue
    var sliderLength = oSlider.maxValue - oSlider.minValue
    var interval = sliderLength / oSlider.zoomLevels
    return Math.round((sliderLength - position) / interval)
}


function validSliderKnobLocation(location) {
    if (location < oSlider.minValue) {
        location = oSlider.minValue;
    }
    if (location >= oSlider.maxValue) {
        location = oSlider.maxValue;
    }
    return location
}

function stepSlider() {
    var sliderLength = oSlider.maxValue - oSlider.minValue
    return (sliderLength / oSlider.zoomLevels)
}

function moveSliderKnob(e) {
    var ev = getEvent(e)
    var sliderKnob = document.getElementById('sliderKnob')
    if (sliderKnob && sliderKnob.pressed) {

        var displayMap = getDisplayMap()
        //disableSelection(displayMap)
        var mouse = localizeCoordinates(displayMap, { 'x': ev.clientX, 'y': ev.clientY });
        var location = validSliderKnobLocation(mouse.y - 5)
        //displayStatus(mouse.y + ' ' + sliderPosition.y)

        sliderKnob.style.top = location + 'px'
        //document.getElementById('HiddenFieldPosition').value = location + 'px'

        // cancel out any text selections
        document.body.focus();

        // prevent text selection in IE
        document.onselectstart = function() { return false; };

        return false;
    }
}

function UpdateZoomLevel() {
    var newZoomLevel = getZoomLevelFromSlider()

    var displayMap = getDisplayMap()
    var dim = displayMap.dimensions;

    zoomImage(displayMap, newZoomLevel - dim.zoomLevel, true, false)
    
    //var dropDownZoolLevel = document.getElementById('DropDownListZoomLevel')
    //dropDownZoolLevel.selectedIndex = newZoomLevel
    //__doPostBack('DropDownListZoomLevel', '')

}

// ***************************************
//
// navigation and compass
//
// ***************************************

function shiftMap(displayMap, offset) {
    if (!centerOutsideMap(displayMap, offset)) {
        positionTiles(displayMap, offset);
        displayMap.dimensions.x += offset.x
        displayMap.dimensions.y += offset.y
    }
}

function pressNavigation(e) {
    var ev = getEvent(e)
    var displayMap = getDisplayMap()
    var mouse = localizeCoordinates(displayMap, { 'x': ev.clientX, 'y': ev.clientY });
    displayMap.start = { 'x': 0, 'y': 0 }
    if (mouse.y < 21) {
        shiftMap(displayMap, { 'x': 0, 'y': 100 })
    }
    else if (mouse.y > 35) {
        shiftMap(displayMap, { 'x': 0, 'y': -100 })
    }
    else if (mouse.x < 21) {
        shiftMap(displayMap, { 'x': 100, 'y': 0 })
    } 
    else if (mouse.x > 35) {
        shiftMap(displayMap, { 'x': -100, 'y': 0 })
    }
}

// ***************************************
//
// general, helper functions
//
// ***************************************

function getDisplayMap() {
    return document.getElementById('displayMap')
    //return this.displayMap;
}

function displayStatus(message) {
    var displayMap = getDisplayMap()
    displayMap.status.innerHTML = message;
}

function getEvent(event) {
    if (event == undefined) {
        return window.event;
    }
    return event;
}

function positionInsideMap(displayMap, mouse) {
    var dim = displayMap.dimensions;
    var step = { 'x': (mouse.x - displayMap.start.x) / 10, 'y': (mouse.y - displayMap.start.y) / 10 };
    if (centerOutsideMap(displayMap, displayMap.start)) return;
    do {
        var outside = centerOutsideMap(displayMap, mouse)
        if (outside) {
            mouse.x = Math.round(mouse.x - step.x)
            mouse.y = Math.round(mouse.y - step.y)
            positionTiles(displayMap, { 'x': mouse.x, 'y': mouse.y });
        }
    } while (outside);
}

function centerOutsideMap(displayMap, mouse) {
    var dim = displayMap.dimensions;
    var center = centerCoordinates(displayMap, mouse, displayMap.start)
    var difCenters = { 'x': center.x - dim.radius, 'y': center.y - dim.radius }
    var outside = difCenters.x * difCenters.x + difCenters.y * difCenters.y >= dim.radius * dim.radius
    return outside;
}

function centerCoordinates(displayMap, mouse, start) {
    var dim = displayMap.dimensions
    var dif = { 'x': dim.centerX - dim.tileSize / 2 - dim.x, 'y': dim.centerY - dim.tileSize / 2 - dim.y }
    var result = { 'x': dif.x + dim.mapX - mouse.x + start.x, 'y': dif.y + dim.mapY - mouse.y + start.y }
    return result;
}

function mapCoordinates(displayMap, mouse) {
    var dim = displayMap.dimensions
    var dif = { 'x': dim.centerX - dim.tileSize / 2 - dim.x, 'y': dim.centerY - dim.tileSize / 2 - dim.y }
    var result = { 'x': dif.x + dim.mapX - mouse.x, 'y': dif.y + dim.mapY - mouse.y }
    return result;
}


function mouseOut(event) {
    var ev = getEvent(event);
    var mouse = { 'x': ev.clientX, 'y': ev.clientY }
    var displayMap = getDisplayMap()
    //displayStatus(' out location ' + mouse.x + ',' + mouse.y)
    if (displayMap != null) {
        if (mouse.x <= 0 || mouse.y <= 0 || mouse.x >= displayMap.style.pixelWidth || mouse.y >= displayMap.style.pixelHeight) {
            releaseDisplayMap(event)
            if (tooltipText != '') displayMap.activeSurface.title = tooltipText
        }
    }
}

function GetClientUTC() {
    var now = new Date()
    var offset = -now.getTimezoneOffset();
    document.getElementById("hdClientUTC").value = offset
}

function fillHiddenFieldRequest(printableSize, tileSize) {
    var displayMap = getDisplayMap()
    var dim = displayMap.dimensions;
    var coord = centerCoordinates(displayMap, { 'x': 0, 'y': 0 }, { 'x': 0, 'y': 0 })
    document.getElementById('HiddenFieldX').value = coord.x
    document.getElementById('HiddenFieldY').value = coord.y     
    var width = dim.width
    var height = dim.height
    if (printableSize) {
        width = 800;
        height = 600;
    }
    else if (tileSize) {
        width = dim.tileSize
        height = dim.tileSize
    }        
    var now = new Date()
    var offset = -now.getTimezoneOffset();
    var src = 'r=' + dim.radius + '&x=' + coord.x + '&y=' + coord.y +
        '&lat=' + dim.latitude + '&long=' + dim.longitude + '&time=' + dim.time + '&rotation=' + dim.rotation + '&w=' + width + '&h=' + height + '&gmtoffset=' + offset
    if (document.getElementById('HiddenFieldAzGrid').value == 'true') src = src + '&azgrid=y'
    if (document.getElementById('HiddenFieldConstNames').value == 'false') src = src + '&cnames=n'
    if (document.getElementById('HiddenFieldConstLines').value == 'false') src = src + '&clines=n'
    if (document.getElementById('HiddenFieldFlipHorizontally').value == 'true') src = src + '&fliph=y'
    if (document.getElementById('HiddenFieldFlipVertically').value == 'true') src = src + '&flipv=y'    
    document.getElementById('HiddenFieldRequest').value = src
}

// ***************************************
//
//  tile manipulation logic based by on a modified version of gsv 1.0, by Michal Migurski <mike-gsv@teczno.com>, provided by author 'as is'
//
// ***************************************


function initDisplay(tileSize) {
    var displayMap = getDisplayMap();
    for(var child = displayMap.firstChild; child; child = child.nextSibling) {
        if(child.className == 'surface') {
            displayMap.activeSurface = child;
            child.displayMap = displayMap;        
        } else if(child.className == 'tileList') {
            displayMap.tileList = child;
            child.displayMap = displayMap;        
        } else if(child.className == 'status') {
            displayMap.status = child;
            child.displayMap = displayMap;        
        }
    }
    
//    var width = displayMap.offsetWidth;
    //    var height = displayMap.offsetHeight;
    var width = document.getElementById('HiddenFieldMapWidth').value
    var height = document.getElementById('HiddenFieldMapHeight').value
    if (document.getElementById('HiddenFieldTelrad').value == 'true' && document.form1.CheckBoxTelrad != null) {
        document.form1.CheckBoxTelrad.checked = true
    }
    if (document.getElementById('HiddenFieldAzGrid').value == 'true' && document.form1.CheckBoxAzGrid != null) {
        document.form1.CheckBoxAzGrid.checked = true
    }
    if (document.getElementById('HiddenFieldConstNames').value == 'true' && document.form1.CheckBoxConstNames != null) {
        document.form1.CheckBoxConstNames.checked = true
    }
    if (document.getElementById('HiddenFieldConstLines').value == 'true' && document.form1.CheckBoxConstLines != null) {
        document.form1.CheckBoxConstLines.checked = true
    }
    if (document.getElementById('HiddenFieldFlipHorizontally').value == 'true' && document.form1.CheckBoxFlipHorizontally != null) {
        document.form1.CheckBoxFlipHorizontally.checked = true
    }
    if (document.getElementById('HiddenFieldFlipVertically').value == 'true' && document.form1.CheckBoxFlipVertically != null) {
        document.form1.CheckBoxFlipVertically.checked = true
    }

    //var objInfo = document.getElementById('objectInfo')
    //var objInfoWidth = parseInt(width) - 60
    // = objInfoWidth + '.px'
    var center = { 'x': width / 2, 'y': height / 2 }
    var radius = Math.min(center.x, center.y)
    var map = { 'x': radius, 'y': radius }

    //todo - get zoomLevel and topLeft from hidden fields
    var zoomLevel = 0;  
    var topLeft = { 'x':  center.x - tileSize/2, 'y': center.y - tileSize/2 }; // top-left pixel of displayMap, if it were to be centered in the view window

    displayMap.style.width = width + 'px';
    displayMap.style.height = height + 'px';
    
    var top = 0;
    var left = 0;
    for(var node = displayMap; node; node = node.offsetParent) {
        top += node.offsetTop;
        left += node.offsetLeft;
    }

    displayMap.dimensions = {
        'width': width, 'height': height, 'top': top, 'left': left, 'tileSize': tileSize, 'radius': radius,
        'zoomLevel': zoomLevel, 'x': topLeft.x, 'y': topLeft.y, 'centerX': center.x, 'centerY': center.y, 'rotation': 90,
        'mapX': map.x, 'mapY': map.y, 'latitude': 47.22, 'longitude': -122.33, 'time': '20100101000000', 'show':''
    };
    var dim = displayMap.dimensions

    displayMap.start = {'x': 0, 'y': 0}; // this is reset each time that the mouse is pressed anew
    displayMap.pressed = false;

    if (document.body.displayMap == undefined) {
        document.body.displayMap = displayMap;
        //document.body.onmouseup = releaseDisplayMap;
    }

    //init zoom level
    if (document.getElementById('HiddenFieldZoom').value != 'undefined') {
        zoomLevel = document.getElementById('HiddenFieldZoom').value
        zoomImage(displayMap, parseInt(zoomLevel), false, true)
    }

    dim.show = document.getElementById('TextBoxSearch').value
    if (document.getElementById('HiddenFieldRotation').value != "") {
        dim.rotation = parseInt(document.getElementById('HiddenFieldRotation').value)
    }
    if (document.getElementById('HiddenFieldX').value != "") {
        dim.mapX = parseInt(document.getElementById('HiddenFieldX').value)
    }
    if (document.getElementById('HiddenFieldY').value != "") {
        dim.mapY = parseInt(document.getElementById('HiddenFieldY').value)
    }

    dim.latitude = parseFloat(document.getElementById('HiddenFieldLatitude').value)
    dim.longitude = parseFloat(document.getElementById('HiddenFieldLongitude').value)

    var info = document.getElementById('information')
    var hiddenUTC = document.getElementById('HiddenFieldTime')
    //info.innerHTML = "hello"
    if (info != null && hiddenUTC != null) {
        var list = hiddenUTC.value.split(',')
        var date = new Date(); //list[0], list[1], list[2], list[3], list[4], list[5])
        date.setUTCFullYear(list[0], parseInt(list[1]) - 1, list[2])
        date.setUTCHours(list[3], list[4], list[5])
        var secondlist = date.toString().split(' ') // to get timezone name
        //info.innerHTML = info.innerHTML + " on <a href=""javascript:__doPostBack('Menu1','Location')""> " + date.toLocaleString() + "</a>" //+ ":"+ secondlist[4] + ":" + date.toString()
        info.innerHTML = info.innerHTML + ' - <a href=\'javascript:__doPostBack(\"Menu1\",\"Time\")\'> ' + date.toLocaleString() + "</a>"
        dim.time = list[0] + doubleChar(list[1]) + doubleChar(list[2]) + doubleChar(list[3]) + doubleChar(list[4]) + doubleChar(list[5])
    }
    GetClientUTC()
    initTiles(displayMap);

    //var sliderObj = new Slider(displayMap, "0,0", "800,600");
}

function doubleChar(v) {
    var result = '0'
    if (v < 10) result = '0' + v.toString()
    else result = v.toString()
    return result
}


function initTiles(displayMap)
{
    var activeSurface = displayMap.activeSurface;
    var tileList = displayMap.tileList;
    var dim = displayMap.dimensions;

    displayMap.tiles = [];
    
    var rows = Math.ceil(dim.height / dim.tileSize) + 1;
    var cols = Math.ceil(dim.width / dim.tileSize) + 1;
    
    displayStatus('rows: '+rows+', cols: '+cols);
    
    for(var c = 0; c < cols; c += 1) {
        var tileCol = [];
    
        for(var r = 0; r < rows; r += 1) {

            var tile = {'c': c, 'r': r, 'img': document.createElement('img'), 'displayMap': displayMap, 'rc':c, 'rr':r};

            tile.img.className = 'tile';
            tile.img.style.width = dim.tileSize+'px';
            tile.img.style.height = dim.tileSize+'px';
            setTileSrc(tile, true);
            
            tileList.appendChild(tile.img);
            tileCol.push(tile);
        }
        
        displayMap.tiles.push(tileCol);
    }

    activeSurface.onmousedown = pressDisplayMap;
    tooltipText = displayMap.activeSurface.title
    positionTiles(displayMap, {'x': 0, 'y': 0}); // x, y should match displayMap.start x, y
}

function positionTiles(displayMap, mouse) {
    hideObjectInfo()
    var tiles = displayMap.tiles;
    var dim = displayMap.dimensions;
    var start = displayMap.start;
    
    var statusTextLines = [];
    statusTextLines.push('displayMap.dimensions x,y: '+dim.x+','+dim.y);
    
    for(var c = 0; c < tiles.length; c += 1) {
        for(var r = 0; r < tiles[c].length; r += 1) {

            var tile = tiles[c][r];
            
            // wrappedAround will become true if any tile has to be wrapped around
            var wrappedAround = false;
            
            tile.x = (tile.c * dim.tileSize) + dim.x + (mouse.x - start.x);
            tile.y = (tile.r * dim.tileSize) + dim.y + (mouse.y - start.y);
            
            if(tile.x > dim.width) {
                // tile is too far to the right
                // shift it to the far-left until it's within the displayMap window
                do {
                    tile.c -= tiles.length;
                    tile.x = (tile.c * dim.tileSize) + dim.x + (mouse.x - start.x);
                    wrappedAround = true;

                } while(tile.x > dim.width);

            } else {
                // tile may be too far to the right
                // if it is, shift it to the far-right until it's within the displayMap window
                while(tile.x < (-1 * dim.tileSize)) {
                    tile.c += tiles.length;
                    tile.x = (tile.c * dim.tileSize) + dim.x + (mouse.x - start.x);
                    wrappedAround = true;

                }
            }
            
            if(tile.y > dim.height) {
                // tile is too far down
                // shift it to the very top until it's within the displayMap window
                do {
                    tile.r -= tiles[c].length;
                    tile.y = (tile.r * dim.tileSize) + dim.y + (mouse.y - start.y);
                    wrappedAround = true;

                } while(tile.y > dim.height);

            } else {
                // tile may be too far up
                // if it is, shift it to the very bottom until it's within the displayMap window
                while(tile.y < (-1 * dim.tileSize)) {
                    tile.r += tiles[c].length;
                    tile.y = (tile.r * dim.tileSize) + dim.y + (mouse.y - start.y);
                    wrappedAround = true;

                }
            }

            statusTextLines.push('tile '+r+','+c+' at '+tile.c+','+tile.r + ' pos '+tile.x+','+tile.y);
            
            // set the tile image once to *maybe* null, then again to
            // definitely the correct tile. this removes the wraparound
            // artifacts seen over slower connections.
            setTileSrc(tile, wrappedAround);            

            tile.img.style.top = tile.y+'px';
            tile.img.style.left = tile.x + 'px';

            setTileSrc(tile, false);
        }
    }
    
    displayStatus(statusTextLines.join('<br>'));
}

function cleanTiles(displayMap) {
    hideObjectInfo()
    var tiles = displayMap.tiles;
    var dim = displayMap.dimensions;
    var start = displayMap.start;

    for (var c = 0; c < tiles.length; c += 1) {
        for (var r = 0; r < tiles[c].length; r += 1) {
            var tile = tiles[c][r];
            setTileSrc(tile, true);
        }
    }
}


function setTileSrc(tile, nullOverride)
{
    var dim = tile.displayMap.dimensions;

    var x = tile.c * dim.tileSize + dim.mapX // + radius because x,y passed to handler are centers
    var y = tile.r * dim.tileSize + dim.mapY

    var src = 'Handler1.ashx?r=' + dim.radius + '&x=' + x + '&y=' + y +
        '&lat= ' + dim.latitude + '&long=' + dim.longitude + '&time=' + dim.time + '&rotation=' + dim.rotation +
        '&w=' + dim.tileSize + '&h=' + dim.tileSize
    if (dim.show != "") {
        src = src + '&show=' + dim.show
    }
    if (document.getElementById('HiddenFieldAzGrid').value == 'true') src = src + '&azgrid=y'
    if (document.getElementById('HiddenFieldConstNames').value == 'false') src = src + '&cnames=n'
    if (document.getElementById('HiddenFieldConstLines').value == 'false') src = src + '&clines=n'
    if (document.getElementById('HiddenFieldFlipHorizontally').value == 'true') src = src + '&fliph=y'
    if (document.getElementById('HiddenFieldFlipVertically').value == 'true') src = src + '&flipv=y'
    //todo - optimize for tiles outside the map

    // has the image been scrolled too far in any particular direction?
    var left = tile.c < 0;
    var high = tile.r < 0;
    var right = tile.c >= Math.pow(2, tile.displayMap.dimensions.zoomLevel);
    var low = tile.r >= Math.pow(2, tile.displayMap.dimensions.zoomLevel);
    var outside = high || left || low || right;

    if (nullOverride) {
        //tile.img.style.width = "1px"
        //tile.img.style.height = "1px"
        tile.img.src = 'images/black.png';
        tile.img.alt = 'loading tile... please wait';
    }
    else {
        tile.img.src = src;
        tile.img.style.width = dim.tileSize + 'px';
        tile.img.style.height = dim.tileSize + 'px';
        tile.img.alt = 'sky map tile';
    }
//    else if(outside)          { src = 'null/none.png';          }

}

function moveViewer(event) {
    var displayMap = this.displayMap;
    var dim = displayMap.dimensions;
    var ev = getEvent(event);
    var mouse = localizeCoordinates(displayMap, { 'x': ev.clientX, 'y': ev.clientY });

    positionTiles(displayMap, { 'x': mouse.x, 'y': mouse.y });

    // cancel out any text selections
    document.body.focus();

    // prevent text selection in IE
    document.onselectstart = function() { return false; };

    return false;
}

function localizeCoordinates(displayMap, client) {
    var local = { 'x': client.x, 'y': client.y };
    local.x = local.x + document.documentElement.scrollLeft - document.documentElement.clientLeft + document.body.scrollLeft
    local.y = local.y + document.documentElement.scrollTop - document.documentElement.clientTop + document.body.scrollTop

    for (var node = displayMap; node; node = node.offsetParent) {
        local.x -= node.offsetLeft;
        local.y -= node.offsetTop;
    }

    return local;
}

function hideTooltip() {
    var displayMap = getDisplayMap()
    displayMap.activeSurface.title = ''
}

function pressDisplayMap(event) {
    hideObjectInfo()
    hideTooltip()
    var displayMap = this.displayMap;
    var dim = displayMap.dimensions;
    var ev = getEvent(event);
    if (ev.preventDefault) {
        ev.preventDefault();
    }
    var mouse = localizeCoordinates(displayMap, { 'x': ev.clientX, 'y': ev.clientY });

    displayMap.pressed = true;
    displayMap.tileList.style.cursor = displayMap.activeSurface.style.cursor = 'move';
    
    displayMap.start = {'x': mouse.x, 'y': mouse.y};
    this.onmousemove = moveViewer;

    displayStatus('mouse pressed at ' + mouse.x + ',' + mouse.y);
    //releaseSliderKnob();
}

function releaseDisplayMap(event) {
    var ev = getEvent(event);

    releaseSliderKnob();

    var displayMap = getDisplayMap();

    if (displayMap != 'undefined' && displayMap.pressed) {        
        var mouse = localizeCoordinates(displayMap, { 'x': ev.clientX, 'y': ev.clientY });
        var dim = displayMap.dimensions;
        positionInsideMap(displayMap, mouse)

        displayStatus(statusTextLines)

        displayMap.activeSurface.onmousemove = null;
        displayMap.tileList.style.cursor = displayMap.activeSurface.style.cursor = 'default';
        displayMap.pressed = false;

        dim.x += (mouse.x - displayMap.start.x);
        dim.y += (mouse.y - displayMap.start.y);

        var dif = { 'x': dim.x - dim.centerX + dim.tileSize / 2, 'y': dim.y - dim.centerY + dim.tileSize / 2 }
        var statusTextLines = [];
        statusTextLines.push('mouse dragged from ' + displayMap.start.x + ', ' + displayMap.start.y + ' to ' + mouse.x + ',' + mouse.y + '. image: ' + dim.x + ',' + dim.y);
        statusTextLines.push('<br/>difference  x,y ' + dif.x + ',' + dif.y + '  radius ' + dim.radius)

        var coord = centerCoordinates(displayMap, { 'x': 0, 'y': 0 }, { 'x': 0, 'y': 0 })
        document.getElementById('HiddenFieldX').value = coord.x
        document.getElementById('HiddenFieldY').value = coord.y
        statusTextLines.push('<br/>center on ' + coord.x + ',' + coord.y + ' mouse ' + mouse.x + ',' + mouse.y)

        var clickCoord = centerCoordinates(displayMap, { 'x': dim.centerX, 'y': dim.centerY }, mouse)
        statusTextLines.push('<br/>click on ' + clickCoord.x + ',' + clickCoord.y)
        if (Math.abs(mouse.x - displayMap.start.x) < 2 && Math.abs(mouse.y - displayMap.start.y) < 2) {
            var now = new Date()
            var offset = -now.getTimezoneOffset();
            var request = 'r=' + dim.radius + '&x=' + clickCoord.x + '&y=' + clickCoord.y + '&lat= ' + dim.latitude + '&long=' + dim.longitude +
                '&time=' + dim.time + '&rotation=' + dim.rotation + '&w=8&h=8&label=y' + '&gmtoffset=' + offset
            if (document.getElementById('HiddenFieldFlipHorizontally').value == 'true') request = request + '&fliph=y'
            if (document.getElementById('HiddenFieldFlipVertically').value == 'true') request = request + '&flipv=y'
                
            var label = document.getElementById('objectInfo')

            var top = (mouse.y - 28)
            var left = mouse.x
            if (top < 0) top = 0
            if (left > dim.width - 220) left = dim.width - 220

            label.style.top = top + 'px'
            label.style.left = left + 'px'
//            label.style.top = (mouse.y - 14) + 'px'
//            label.style.left = mouse.x + 'px'
            label.src = 'Handler1.ashx?' + request

            label.style.visibility = 'visible'
            statusTextLines.push(request)
        }
        displayStatus(statusTextLines)

    }
}

function hideObjectInfo() {
    var label = document.getElementById('objectInfo')
    label.src = 'images/black.png'
    label.style.visibility = 'hidden'
}

//function displayStatus(message)
//{
//    displayMap.status.innerHTML = message;
//}

function zoomImage(displayMap, direction, withPositionTiles, updateZoomSlider)
{
    var dim = displayMap.dimensions;
    hideObjectInfo()

    if(direction != 0 && dim.zoomLevel + direction >= 0 && dim.zoomLevel + direction <= 10) {

        //difference from previous set center
        var dif = { 'x': dim.centerX - dim.tileSize / 2 - dim.x, 'y': dim.centerY - dim.tileSize / 2 - dim.y}
        //new center before changing zoomLevel
        dim.mapX = (dif.x + dim.mapX)
        dim.mapY = (dif.y + dim.mapY)
        var statusMessage = ['old radius is ' + dim.radius + ' and zoom is ' + dim.zoomLevel + ' center coords ' + dim.mapX + ',' + dim.mapY];
        
        dim.zoomLevel += direction
        dim.radius = Math.round(Math.pow(1.5, dim.zoomLevel) * Math.min(dim.centerX, dim.centerY))
        //adjust map coordinates
        dim.mapX = Math.round(Math.pow(1.5, direction) * dim.mapX)
        dim.mapY = Math.round(Math.pow(1.5, direction) * dim.mapY)

        statusMessage.push('new radius is ' + dim.radius + ' and zoom is ' + dim.zoomLevel + ' center coords ' + dim.mapX + ',' + dim.mapY)
        //substract tile offset (how much the tile moved) to avoid moving the tile itself
        dim.mapX -= dif.x
        dim.mapY -= dif.y

        displayMap.start = { 'x': 0, 'y': 0 }
        var coord = centerCoordinates(displayMap, { 'x': 0, 'y': 0 }, { 'x': 0, 'y': 0 })
        if (withPositionTiles) {
            cleanTiles(displayMap);
            positionTiles(displayMap, displayMap.start);
            document.getElementById('HiddenFieldX').value = coord.x
            document.getElementById('HiddenFieldY').value = coord.y
        }
        document.getElementById('HiddenFieldZoom').value = dim.zoomLevel
        if (updateZoomSlider) {
            updateSlider(dim.zoomLevel)
        }

        UpdateTelrad()

        statusMessage.push('<br />center at ' + coord.x + ',' + coord.y)        
        displayStatus(statusMessage.join('<br>'));        
    }
}

function UpdateTelrad(displayMap) {
    var displayMap = getDisplayMap()
    if (displayMap != 'undefined') {
        if (document.form1.CheckBoxTelrad != null) {
            document.getElementById('HiddenFieldTelrad').value = document.form1.CheckBoxTelrad.checked
        }
        if (document.getElementById('HiddenFieldTelrad').value == "true") {            
            var dim = displayMap.dimensions;
            displayMap.activeSurface.style.backgroundImage = "url(background.ashx?r=" + dim.radius + ")"
        }
        else {
            displayMap.activeSurface.style.backgroundImage = "url(images/center.gif)"
        }
    }
}

function zoomImageUp(displayMap)
{
    zoomImage(displayMap, 1, true, false);
}

function zoomImageDown(displayMap)
{
    zoomImage(displayMap, -1, true, false);
}

function RefreshMap() {
    if (document.form1.CheckBoxAzGrid != null) {
        document.getElementById('HiddenFieldAzGrid').value = document.form1.CheckBoxAzGrid.checked
    }
    if (document.form1.CheckBoxConstNames != null) {
        document.getElementById('HiddenFieldConstNames').value = document.form1.CheckBoxConstNames.checked
    }
    if (document.form1.CheckBoxConstLines != null) {
        document.getElementById('HiddenFieldConstLines').value = document.form1.CheckBoxConstLines.checked
    }
    if (document.form1.CheckBoxFlipHorizontally != null) {
        document.getElementById('HiddenFieldFlipHorizontally').value = document.form1.CheckBoxFlipHorizontally.checked
    }
    if (document.form1.CheckBoxFlipVertically != null) {
        document.getElementById('HiddenFieldFlipVertically').value = document.form1.CheckBoxFlipVertically.checked
    }

    var displayMap = getDisplayMap()
    displayMap.start = { 'x': 0, 'y': 0 }
    positionTiles(displayMap, { 'x': 0, 'y': 0 })
}

//
// compass
//

function rotateMap(direction) {
    hideObjectInfo()
    var displayMap = getDisplayMap()
    document.getElementById("HiddenFieldRotation").value = direction
    var dim = displayMap.dimensions
    dim.rotation = direction
    displayMap.start = { 'x': 0, 'y': 0 }
    positionTiles(displayMap, { 'x': 0, 'y': 0 })    
}

function pressCompass(event) {
    var ev = getEvent(event)
    var compassbackground = document.getElementById("compassbackground")
    var north = document.getElementById("north")
    var mouse = localizeCoordinates(compassbackground, { 'x': ev.clientX, 'y': ev.clientY });

    var radius = compassbackground.offsetWidth / 2
    var angle = Math.atan2(mouse.y - radius, mouse.x - radius)
    //angle = Math.floor(angle * 15 / Math.PI)
    //angle = angle * Math.PI / 15
    
    var left = radius + radius * Math.cos(angle) - north.offsetWidth / 2
    var top = radius + radius * Math.sin(angle) - north.offsetHeight / 2
    //tooltip.innerHTML = 'x ' + mouse.x + ' y ' + mouse.y + ' angle ' + angle + ' left ' + left + ' top ' + top
    north.style.left = left + 'px'
    north.style.top = top + 'px'

    //if (angle < 0) angle += 2 * Math.PI
    angle += Math.PI
    angle *= 180 / Math.PI
    angle = Math.floor(angle)
    rotateMap(angle)   
}