/** @preserve Maintained by the Office of Web & New Media, Missouri State University.
* Compacted version available at
* http://search.missouristate.edu/map/mobile/examples/ZoomPanControl_compiled.js
*
* Usage:
* map.controls[google.maps.ControlPosition.TOP_LEFT].push(new missouristate.web.ZoomPanControl(map));
*/

/**
* @param {string} tagName
* @param {Object.<string, string>} properties
* @returns {Node}
*/
function CreateElement(tagName, properties) {
    var elem = document.createElement(tagName);
    for (var prop in properties) {
        if (prop == "style")
            elem.style.cssText = properties[prop];
        else if (prop == "class")
            elem.className = properties[prop];
        else
            elem.setAttribute(prop, properties[prop]);
    }
    return elem;
}

/**
* @constructor
* @param {google.maps.Map} map
*/
function ZoomPanControl(map) {
    this.map = map;
    this.originalCenter = map.getCenter();

    var t = this;
    var zoomPanContainer = CreateElement("div", { 'style': "position: relative; padding: 5px;" });

    //Pan Controls
    var PanContainer = CreateElement("div", { 'style': "position: relative; left: 2px; top: 5px; width: 56px; height: 56px; padding: 5px; overflow: hidden;" });
    zoomPanContainer.appendChild(PanContainer);
    var div = CreateElement("div", { 'style': "width: 56px; height: 56px; overflow: hidden;" });
    div.appendChild(CreateElement("img", { 'alt': ' ', 'src': 'http://maps.gstatic.com/intl/en_ALL/mapfiles/mapcontrols3d5.png', 'style': "position: absolute; left: 0px; top: -1px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 59px; height: 492px;" }));
    PanContainer.appendChild(div);

    div = CreateElement("div", { 'style': "position: absolute; left: 0px; top: 19px; width: 18.6667px; height: 18.6667px; cursor: pointer;", 'title': 'Pan left' });
    google.maps.event.addDomListener(div, "click", function() { t.pan(PanDirection.LEFT); });
    PanContainer.appendChild(div);
    div = CreateElement("div", { 'style': "position: absolute; left: 37px; top: 19px; width: 18.6667px; height: 18.6667px; cursor: pointer;", 'title': 'Pan right' });
    google.maps.event.addDomListener(div, "click", function() { t.pan(PanDirection.RIGHT); });
    PanContainer.appendChild(div);
    div = CreateElement("div", { 'style': "position: absolute; left: 19px; top: 0px; width: 18.6667px; height: 18.6667px; cursor: pointer;", 'title': 'Pan up' });
    google.maps.event.addDomListener(div, "click", function() { t.pan(PanDirection.UP); });
    PanContainer.appendChild(div);
    div = CreateElement("div", { 'style': "position: absolute; left: 19px; top: 37px; width: 18.6667px; height: 18.6667px; cursor: pointer;", 'title': 'Pan down' });
    google.maps.event.addDomListener(div, "click", function() { t.pan(PanDirection.DOWN); });
    PanContainer.appendChild(div);
    div = CreateElement("div", { 'style': "position: absolute; left: 19px; top: 19px; width: 18.6667px; height: 18.6667px; cursor: pointer;", 'title': 'Reset center' });
    google.maps.event.addDomListener(div, "click", function() { t.map.setCenter(t.originalCenter); });
    PanContainer.appendChild(div);

    //Zoom Controls
    var zoomContainer = CreateElement("div", { 'style': "position: relative; width: 58px; height: 48px; -moz-user-select: none; overflow: hidden;" });
    zoomPanContainer.appendChild(zoomContainer);
    div = CreateElement("div", { 'style': "position: absolute; left: 18px; top: 0px; width: 24px; height: 22px; overflow: hidden; background-image: url('http://maps.gstatic.com/intl/en_ALL/mapfiles/mapcontrols3d5.png'); background-position: -17px -65px; background-repeat: no-repeat; cursor: pointer;", 'title': 'Zoom in' });
    google.maps.event.addDomListener(div, "click", function() { t.zoom(ZoomDirection.IN); });
    zoomContainer.appendChild(div);
    div = CreateElement("div", { 'style': "position: absolute; left: 18px; top: 21px; width: 24px; height: 22px; overflow: hidden; background-image: url('http://maps.gstatic.com/intl/en_ALL/mapfiles/mapcontrols3d5.png'); background-position: -17px -360px; background-repeat: no-repeat; cursor: pointer;", 'title': 'Zoom out' });
    google.maps.event.addDomListener(div, "click", function() { t.zoom(ZoomDirection.OUT); });
    zoomContainer.appendChild(div);

    return zoomPanContainer;
}

/** @param {PanDirection} direction */
ZoomPanControl.prototype.pan = function(direction) {
    var panDistance = 50;
    if (direction == PanDirection.UP || direction == PanDirection.DOWN) {
        panDistance = Math.round(this.map.getDiv().offsetHeight / 2);
        this.map.panBy(0, direction == PanDirection.DOWN ? panDistance : -1 * panDistance);
    }
    else {
        panDistance = Math.round(this.map.getDiv().offsetWidth / 2);
        this.map.panBy(direction == PanDirection.RIGHT ? panDistance : -1 * panDistance, 0);
    }
}

/** @param {ZoomDirection} direction */
ZoomPanControl.prototype.zoom = function(direction) {
    var zoom = this.map.getZoom();
    if (direction == ZoomDirection.IN && zoom < 19)
        this.map.setZoom(zoom + 1);
    else if (direction == ZoomDirection.OUT && zoom > 1)
        this.map.setZoom(zoom - 1);
}

/** @enum */
var PanDirection = {
    LEFT: 0,
    RIGHT: 1,
    UP: 3,
    DOWN: 4
}

/** @enum */
var ZoomDirection = {
    IN: 0,
    OUT: 1
}

window["missouristate"] = window["missouristate"] || {};
window["missouristate"]["web"] = window["missouristate"]["web"] || {};
window["missouristate"]["web"]["ZoomPanControl"] = ZoomPanControl;