$(document).ready(function(){

    var mapContainer = T.DomUtil.get("map"),
        mapoLayer = new T.TibcoLayer(),
        vectorLayer = new T.VectorLayer({useCanvas: false});

    var map = new T.Map(
        mapContainer,					
        {
            zoom: 5, 
            center: new T.LatLng(34.0198672, -97.7998047)
        }
    );								

    map.addLayer(mapoLayer);
    map.addLayer(vectorLayer);

    // Add map event listeners
    map.events.on("press", onPress, this);

    // Distance computation
    this.tradeAreaService = new T.TradeAreaService("demo", "2u7kdn4DnYE=", "https://geowebservices.maporama.com/");

    // Init trade area renderer
    var tradeAreaRenderer = new T.TradeAreaRenderer(map);

    var computeTradeAreaHandler = function () {
        var centerStringNoSpaces = $("#center").val().replace(" ", "");

        var center = new T.LatLng(centerStringNoSpaces.split(',')[0], centerStringNoSpaces.split(',')[1]),
            value = $("#computation-value").val();

        // Add overlay
        showHideOverlay(true);

        // Save options
        var tradeAreaOptions = {
            travelMode: $("#travel-mode").val(),
            computationType: $("#computation-type").val(),
            precision: $("#precision").val()
        };

        // Compute distance
        this.tradeAreaService.computeTradeArea(center, value, tradeAreaOptions).then(function (tradeAreaServiceResults) {

            if (tradeAreaServiceResults) {
                // Remove itinerary
                tradeAreaRenderer.removeTradeArea();

                tradeAreaRenderer.displayTradeArea(tradeAreaServiceResults, {
                    centerMarker: true,
                    zoomToTradeArea: true,
                    stroke: true,
                    strokeColor: "#FFF000",
                    strokeOpacity: 0.9,
                    strokeWeight: 2,
                    fill: true,
                    fillColor: "#FF0000",
                    fillOpacity: 0.5
                });

                showHideOverlay(false);
            }

        }, function (tradeAreaServiceError) {

        });
    };

    function onPress (evt) {
        var pressEffectTimer = null,
            positionX = (evt.clientX - $(".press-effect").width() / 2 >= 0) ? (evt.clientX - $(".press-effect").width() / 2) : 0,
            positionY = (evt.clientY - $(".press-effect").height() / 2 >= 0) ? (evt.clientY - $(".press-effect").height() / 2) : 0,
            mousePosition = map.computeMousePosition(evt.clientX, evt.clientY),
            latLng = map.containerPointToLatLng(mousePosition);

        clearTimeout(pressEffectTimer);

        $(".press-effect").css("top", positionY);
        $(".press-effect").css("left", positionX);
        $(".press-effect").show();

        pressEffectTimer = setTimeout(function () {
            $(".press-effect").hide();
        }, 500);

        $("#center").val(latLng.lat + "," + latLng.lng);
    };

    var zoomToTradeArea = function () {
        var i = 0,
            bounds = new T.LatLngBounds(); 

        for (i = 0; i < markersLayer.markers.length; i++) {
            bounds.extend(markersLayer.markers[i].latlng);
        }

        map.fitToBounds(bounds);
    };

    var showHideOverlay = function (show) {

        if (show) {
            var docHeight = $(document).height();

            $("body").append("<div id='overlay'></div>");

            $("#overlay")
                .height(docHeight)
                .css({
                'opacity' : 0.4,
                'position': 'absolute',
                'top': 0,
                'left': 0,
                'background-color': 'black',
                'width': '100%',
                'z-index': 5000
            });
        } else {
            $("#overlay").remove();
        }
    };

    // Event listeners
    $("#compute-trade-area-btn").click(T.Util.bind(computeTradeAreaHandler, this));
});