(function($) {
    $.fn.extend({
        regionMapClick: function(options) {
            var map = options.regionMap;
            var container = $(this);
            var startKbCapture = false;
            var absPos;

            var activeMarkerImage = $('<img src="/images/s-symbol.gif" />');
            var activeMarker = $("<div>").hide().css({ "position": "absolute", "width": "12px", "height": "12px" }).append(activeMarkerImage);

            map.click(setPosition);
            map.click(function() { startKbCapture = true; });
            $(':input').focus(function() { startKbCapture = false; });

            $(document).keydown(function(e) {
                if (startKbCapture) {
                    var xOffset = absPos.x;
                    var yOffset = absPos.y;

                    if (e.keyCode == 38 || e.keyCode == 104) yOffset = absPos.y - 1;
                    else if (e.keyCode == 40 || e.keyCode == 98) yOffset = absPos.y + 1;
                    else if (e.keyCode == 37 || e.keyCode == 100) xOffset = absPos.x - 1;
                    else if (e.keyCode == 39 || e.keyCode == 102) xOffset = absPos.x + 1;
                    else return true;

                    setPosition({ pageX: xOffset, pageY: yOffset });

                    return false;
                }
            });

            if (options.initialPosition) { setPosition(); }

            function setPosition(e) {
                var mapPosition = map.position();

                var posX, posY, absPosX, absPosY;

                if (e) {
                    posX = parseInt(e.pageX - mapPosition.left);
                    posY = parseInt(e.pageY - mapPosition.top);
                    absPosX = parseInt(e.pageX);
                    absPosY = parseInt(e.pageY);
                } else if (options.initialPosition) {
                    posX = options.initialPosition.x;
                    posY = options.initialPosition.y;
                    var pos = options.regionMap.position();
                    absPosX = pos.left + posX;
                    absPosY = pos.top + posY;
                } else {
                    return;
                }

                absPos = { x: absPosX, y: absPosY };

                map.data('selectedPosition', { x: posX, y: posY });

                if (!activeMarker.visible) {
                    container.append(activeMarker.show());
                }

                activeMarker.css("top", absPosY - 5).css("left", absPosX - 8);
//                activeMarker.simpletip({
//                    content: options.tooltipText,
//                    fixed: true,

//                    // Offsets required due to browser quirk?
//                    position: [10, 10]
//                });
            }
        },
        displayHotels: function(options, hotels) {
            var container = $(this);

            if (container.data('initted')) {
                container.find("div.markerImage").remove();
            }
            $(hotels).each(function(index, item) {
                addToMap(item);
            });
            container.data('initted', true);


            function addToMap(hotel) {
                var markerImage = $('<img src="/images/tick2.gif" />');
                var a = $('<a>').attr({ href: hotel.url, title: hotel.name, alt: hotel.name }).append(markerImage);
                var marker = $('<div class="markerImage">').addClass("marker").css({ "position": "absolute", "width": "18px", "height": "10px" }).append(a);

                container.append(marker);
                var pos = options.regionMap.position();

                marker.css("top", pos.top + hotel.posY - 2).css("left", pos.left + hotel.posX - 9);
            }
        }
    });
})(jQuery);