if(typeof Map == 'undefined' || !Map) var Map = {};

/**
 * Context menu for google map
 * @param {Object} map
 */
Map.ContextMenu = (function() {
    var _map;
    var _menu;
    var clickedPixel;
    
    var hide = function() {
        $(_menu).hide();
    }
    
    var zoomIn = function(){
        _map.zoomIn();
        hide();
    }
    
    var zoomOut = function(){
        _map.zoomOut();
        hide();
    }
    
    var zoomInHere = function() {
        var point = _map.fromContainerPixelToLatLng(clickedPixel);
        _map.zoomIn(point, true);
        hide();
    }
    
    var zoomOutHere = function() {
        // perform the requested operation
        var point = _map.fromContainerPixelToLatLng(clickedPixel);
        _map.setCenter(point, _map.getZoom() - 1); // There is no map.zoomOut() equivalent
        hide();
    }
    
    var centerMapHere = function() {
        // perform the requested operation
        var point = _map.fromContainerPixelToLatLng(clickedPixel);
        _map.setCenter(point);
        hide();
    }
    
    var showLatLng = function() {
        var point = _map.getCenter();
        var message = point.y + ', ' + point.x;
        alert(message);
        hide();
    }
    
    var showLatLngHere = function() {
        var point = _map.fromContainerPixelToLatLng(clickedPixel);
        var message = point.y + ', ' + point.x;
        alert(message);
        hide();
    }
    
    var showZoomLevel = function() {
        alert(_map.getZoom());
        hide();
    }
    
    return {
        init: function(map){
            _map = map;
            var anchorStyle = {
                'display': 'block',
                'padding': '.2em .5em',
                'border-bottom': '1px solid #8888FF',
                'color': '#006699',
                'text-decoration': 'none'
            }
            // Creating context menu
            _menu = $('<div></div>').css({
                'display': 'none',
                'background': '#FFFFFF',
                'border': '1px solid #8888FF',
                'border-width': '1px 1px 0',
                'position': 'absolute',
                'width': '250px'
            }).append($('<a>Zoom in</a>').css(anchorStyle).click(function(){
                zoomIn();
            })).append($('<a>Zoom out</a>').css(anchorStyle).click(function(){
                zoomOut();
            })).append($('<a>Zoom in here</a>').css(anchorStyle).click(function(){
                zoomInHere();
            })).append($('<a>Zoom out here</a>').css(anchorStyle).click(function(){
                zoomOutHere();
            })).append($('<a>Center map here</a>').css(anchorStyle).click(function(){
                centerMapHere();
            })).append($('<a>Show latitude and longitude</a>').css(anchorStyle).click(function(){
                showLatLng();
            })).append($('<a>Show latitude and longitude here</a>').css(anchorStyle).click(function(){
                showLatLngHere();
            })).append($('<a>Show zoom level</a>').css(anchorStyle).click(function(){
                showZoomLevel();
            }));
            
            $(_map.getContainer()).append(_menu);
            
            // === listen for singlerightclick ===
            GEvent.addListener(_map, "singlerightclick", function(pixel, tile){
                // store the "pixel" info in case we need it later
                // adjust the context menu location if near an egde
                // create a GControlPosition
                // apply it to the context menu, and make the context menu visible
                clickedPixel = pixel;
                var x = pixel.x;
                var y = pixel.y;
                if (x > _map.getSize().width - 120) {
                    x = _map.getSize().width - 120
                }
                if (y > _map.getSize().height - 100) {
                    y = _map.getSize().height - 100
                }
                var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(x, y));
                $(_menu).css('top', pos.offset.height + 'px');
                $(_menu).css('left', pos.offset.width + 'px');
                $(_menu).fadeIn('fast');
            });
            
            // === If the user clicks on the map, close the context menu ===
            GEvent.addListener(_map, "click", function(){
                $(_menu).hide();
            });
        }
    }
}());