/*
 * guimap.map.js
 * Map module
 */

/* jslint
 */

/* global $, guimap */

guimap.map = (function () {
    // ---------- MODULE SCOPE VARIABLES ----------
    var
        configMap = {
            main_html: String()
                + '<div id="map_canvas" style="width:100%;height:100%;">map</div>',
            settable_map: {
                center_lat: true,
                center_lng: true,
                zoom: true
            },
            center_lat: 37.566535,
            center_lng: 126.977969,
            zoom: 5
        },
        stateMap = {
            $append_target: null,
            map: null,
            option: null
        },
        jqueryMap = {},
        setJqueryMap, initMap, initModule, getMap, setCenter, setViewport, drawRoute;

    // ---------- UTILITY METHODS ----------

    // ---------- DOM METHODS ----------
    setJqueryMap = function () {
        jqueryMap.$map = $('#map_canvas');
    };

    initMap = function () {
        var TILE_URL = 'http://tile.openstreetmap.org/{z}/{x}/{y}.png';
        var layerID = 'my-custom-layer';

        // Create a tile layer, configured to fetch tiles from TILE_URL.
        var layer = new google.maps.ImageMapType({
            name: layerID,
            getTileUrl: function (coord, zoom) {
                console.log(coord);
                var url = TILE_URL
                    .replace('{x}', coord.x)
                    .replace('{y}', coord.y)
                    .replace('{z}', zoom);
                return url;
            },
            tileSize: new google.maps.Size(256, 256),
            minZoom: 1,
            maxZoom: 20
        });

        var settings = {
            zoom: configMap.zoom,
            center: new google.maps.LatLng(configMap.center_lat, configMap.center_lng),
            mapTypeControl: false,
            //mapTypeId: google.maps.MapTypeId.ROADMAP,
            scaleControl: false,
            streetViewControl: false,
        };
        
        //stateMap.map = new google.maps.Map(jqueryMap.$map[0], settings);
		var map = new google.maps.Map(jqueryMap.$map[0], settings);
		stateMap.map = map;
	
		//var myLatLng = { lat: 37, lng: 132 };
		/*
		new google.maps.Marker({
			position: { lat: 37, lng: 132 },
			map,
			title: "독도",
		});
		*/

        // Apply the new tile layer to the map.
        stateMap.map.mapTypes.set(layerID, layer);
        stateMap.map.setMapTypeId(layerID);

        if (guimap.util.getVarType(stateMap.option) === 'Object') {
            if (stateMap.option.hasOwnProperty('onIdle')) {
                if (guimap.util.getVarType(stateMap.option['onIdle']) === 'Function') {
                    google.maps.event.addListener(stateMap.map, 'idle', stateMap.option['onIdle']);
                }
            }
        }
        
    };

    function getNormalizedCoord(coord, zoom) {
        var y = coord.y;
        var x = coord.x;

        // tile range in one direction range is dependent on zoom level
        // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
        var tileRange = 1 << zoom;

        // don't repeat across y-axis (vertically)
        if (y < 0 || y >= tileRange) {
            return null;
        }

        // repeat across x-axis
        if (x < 0 || x >= tileRange) {
            x = (x % tileRange + tileRange) % tileRange;
        }

        return { x: x, y: y };
    }

    // ---------- EVENT HANDLERS ----------

    // ---------- PUBLIC METHODS ----------
    initModule = function ($append_target, option) {
        $append_target.append(configMap.main_html);
        stateMap.$append_target = $append_target;
        stateMap.option = option || {};
        setJqueryMap();
        initMap();


        return true;
    };
    getMap = function () {
        return stateMap.map;
    };
    setCenter = function (lat, lng) {
        var latlng = new google.maps.LatLng(lat, lng);
        stateMap.map.setCenter(latlng);
    }
    setViewport = function (ne, sw) {
        //var latlng = new google.maps.LatLng(lat, lng);

        var latlngbounds = new google.maps.LatLngBounds();
        latlngbounds.extend(ne);
        latlngbounds.extend(sw);
        //latlngbounds.extend(new google.maps.LatLng(
        //latlngbounds.getSouthWest().lat() - (latlngbounds.getNorthEast().lat() - latlngbounds.getSouthWest().lat()) / 2.4,
        //latlngbounds.getSouthWest().lng()
        //));
        stateMap.map.fitBounds(latlngbounds);
    }
    drawRoute = function () {
        startshape();
    }
    endRoute = function () {
        endshape();
    }



    var poly;
    var path;
    var shapemarker;
    var drawingshape;

    function startshape() {
        drawingshape = true;

        path = new google.maps.MVCArray();
        shapemarker = [];
        poly = new google.maps.Polyline({ strokeWeight: 2, strokeColor: 'maroon' });
        poly.setMap(stateMap.map);
        poly.setPath(path);

        google.maps.event.addListener(poly, 'click', function (e) {
            var idx = null;
            for (var i = 0; i < shapemarker.length; i++) {
                if (shapemarker[i] == this) idx = i;
            }
            if (idx !== null) path.removeAt(idx);
            shapemarker[idx].setMap(null);
            shapemarker.splice(idx, 1);
        });

        stateMap.map.setOptions({ draggableCursor: 'crosshair' });
        google.maps.event.addListener(stateMap.map, 'click', addPoint);
    };
    function endshape() {
        if (drawingshape !== true) return false;

        drawingshape = false;
        poly.setOptions({ strokeColor: 'black' });
        stateMap.map.setOptions({ draggableCursor: 'null' });
    }
    function addPoint(e) {
        if (drawingshape === true) {
            path.insertAt(path.length, e.latLng);
            var marker = new google.maps.Marker({ position: e.latLng, icon: { path: google.maps.SymbolPath.CIRCLE, scale: 3, strokeWeight: 2 }, map: stateMap.map, draggable: true });
            shapemarker.push(marker);
            google.maps.event.addListener(marker, 'click', function (e) {
                var idx = null;
                for (var i = 0; i < shapemarker.length; i++) {
                    if (shapemarker[i] == this) idx = i;
                }
                if (idx !== null) path.removeAt(idx);
                shapemarker[idx].setMap(null);
                shapemarker.splice(idx, 1);
            });
            google.maps.event.addListener(marker, 'drag', function (e) {
                var idx = null;
                for (var i = 0; i < shapemarker.length; i++) {
                    if (shapemarker[i] == this) idx = i;
                }
                if (idx !== null) path.setAt(idx, this.getPosition());
            });
        }
    }




    return {
        initModule: initModule,
        getMap: getMap,
        setCenter: setCenter,
        setViewport: setViewport,
        drawRoute: drawRoute,
        endRoute: endRoute,
    };
}());