/**
 *
 * @param map
 * @returns {null}
 */
function printMapControl(map) {
    "use strict";
    if (!isCanvasSupported()) {
        return null;
    }
    var controlDiv = printMapButton("Print", "printMap");
    google.maps.event.addDomListener(controlDiv, "click", function () {
        printMap(map);
    });
    return controlDiv;
}

function isCanvasSupported() {
    "use strict";
    var elem = document.createElement("canvas");
    return !!(elem.getContext && elem.getContext("2d"));
}

function printMap(map) {
    "use strict";
    var mapControlVisible = map.mapTypeControl;
    var zoomVisible = map.zoomControl;
    var streetViewVisible = map.streetViewControl;
    var panVisible = map.panControl;
    var fullscreenVisible = map.fullscreenControl;
    map.setOptions({
        mapTypeControl: false,
        zoomControl: false,
        streetViewControl: false,
        panControl: false,
        fullscreenControl: false
    });
    map.controls.forEach(function (array) {
        array.forEach(function (elem) {
            $(elem).hide();
        });
    });

    var showControls = function () {
        map.setOptions({
            mapTypeControl: mapControlVisible,
            zoomControl: zoomVisible,
            streetViewControl: streetViewVisible,
            panControl: panVisible,
            fullscreenControl: fullscreenVisible
        });
        map.controls.forEach(function (array) {
            array.forEach(function (elem) {
                $(elem).show();
            });
        });
    };
    var popUpAndPrint = function () {
        try {
            printMapCanvas();
        }
        catch (error) {
            alert(error.message);
        }
        finally {
            showControls();
        }
    };
    setTimeout(popUpAndPrint, 500);
}

//
function printMapButton(text, className) {
    "use strict";
    var controlDiv = document.createElement("div");
    controlDiv.className = className;
    controlDiv.index = 1;
    controlDiv.style.padding = "10px";
    // set CSS for the control border.
    var controlUi = document.createElement("div");
    controlUi.style.backgroundColor = "rgb(255, 255, 255)";
    controlUi.style.color = "#565656";
    controlUi.style.cursor = "pointer";
    controlUi.style.textAlign = "center";
    controlUi.style.boxShadow = "rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px";
    controlDiv.appendChild(controlUi);
    // set CSS for the control interior.
    var controlText = document.createElement("div");
    controlText.style.fontFamily = "Roboto,Arial,sans-serif";
    controlText.style.fontSize = "11px";
    controlText.style.paddingTop = "8px";
    controlText.style.paddingBottom = "8px";
    controlText.style.paddingLeft = "8px";
    controlText.style.paddingRight = "8px";
    controlText.innerHTML = text;
    controlUi.appendChild(controlText);
    $(controlUi).on("mouseenter", function () {
        controlUi.style.backgroundColor = "rgb(235, 235, 235)";
        controlUi.style.color = "#000";
    });
    $(controlUi).on("mouseleave", function () {
        controlUi.style.backgroundColor = "rgb(255, 255, 255)";
        controlUi.style.color = "#565656";
    });
    return controlDiv;
}