$ = $telerik.$;

var MiniMap = (function() {

    var marker = null;

    var CR_START = { "lat": 51.05553104168793, "lng": 12.100496292114258 },
        CR_END = { "lat": 48.551671433084245, "lng": 18.859705924987793 };

    var OFFSET = { "x": 16, "y": 2 },
        SIZE = { "x": 142, "y": 84 };

    var MARKER_OFFSET = { "x": 6, "y": 5 };
    MAX_POSITION = { "x": 174, "y": 93 }


    var MiniMap = {

        init: function(center) {

            var container = $("#minimap").
                css({ "position": "relative" });
            marker = $("<img src='/app_themes/default/_images/mini-map-marker.gif'>").
                css({ "position": "absolute" }).
                appendTo(container);

            var rlat = (center.lat() - CR_START.lat) / (CR_END.lat - CR_START.lat),
                rlog = (center.lng() - CR_START.lng) / (CR_END.lng - CR_START.lng);

            var top = limit((rlat * SIZE.y + OFFSET.y), 0, MAX_POSITION.y),
                left = limit((rlog * SIZE.x + OFFSET.x), 0, MAX_POSITION.x);

            marker.css({
                "top": (top - MARKER_OFFSET.y) + "px",
                "left": (left - MARKER_OFFSET.x) + "px"
            });
        },
        
        redraw: function(center) {
            var rlat = (center.lat() - CR_START.lat) / (CR_END.lat - CR_START.lat),
                rlog = (center.lng() - CR_START.lng) / (CR_END.lng - CR_START.lng);

            var top = limit((rlat * SIZE.y + OFFSET.y), 0, MAX_POSITION.y),
                left = limit((rlog * SIZE.x + OFFSET.x), 0, MAX_POSITION.x);

            marker.css({
                "top": (top - MARKER_OFFSET.y) + "px",
                "left": (left - MARKER_OFFSET.x) + "px"
            });
        }
    };

    return MiniMap;

    function limit(val, min, max) {
        return Math.max(Math.min(val, max), min);
    }

})();