define(['action/drifter', 'google', 'emitter/render', 'vue'], function(DrifterAction, google, RenderEmitter, Vue){
	var _map;

	Vue.component('my-map', {
		props: ['highlight'],
		template: '<div id="map_canvas"></div>',
		mounted: function(){
			var center = new google.maps.LatLng(25.15, 122.775);
			var myOptions = {
	            zoom: 4,
	            center: center,
	            mapTypeControl: true,
	            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
	            navigationControl: true,
	            mapTypeId: google.maps.MapTypeId.HYBRID
	        }
	        _map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
			_drawBoundary();
		},
		watch: {
			highlight: function(drifterId){
				for(var k in _polylines){
					if(_polylines.hasOwnProperty(k)){
						if(k == drifterId) _polylines[drifterId].setOptions({strokeWeight: 4});
						else _polylines[k].setOptions({strokeWeight: 2});
					}
				}
			}
		}
	});

	var _markers = {};

	var _drawBoundary = function(){
      	var rectangle = new google.maps.Rectangle({
			strokeColor: '#FF0000',
			strokeOpacity: 0.8,
			strokeWeight: 2,
			// fillColor: '#FF0000',
			// fillOpacity: 0.35,
			map: _map,
		    bounds: {
		      	north: 35.0267791748047,
		      	south: 11.9743633270264,
		      	east: 135.0,
		      	west: 110.0
		    }
		});
		rectangle.addListener('click', function(e){
			DrifterAction.add(e.latLng.lat(), e.latLng.lng());
		});
	}

	RenderEmitter.register('add-map-marker', function(drifterModel){
		var marker = new google.maps.Marker({
		    position: {lat: drifterModel.getLat(), lng: drifterModel.getLon()}, 
		    map: _map
		});
		marker.addListener('click', function(){
			if(!_trajectoryModels[drifterModel.getId()]) return;
			window._vForm.trajectoryData = _trajectoryModels[drifterModel.getId()];
			window._vForm.showModal = true;
		});
		_markers[drifterModel.getId()] = marker;
	});

	RenderEmitter.register('remove-map-marker', function(drifterModel){
		_markers[drifterModel.getId()].setMap(null);
		delete _markers[drifterModel.getId()];
	});

	var _polylines = {};
	var _trajectoryModels = {};
	
	var _checkPolylines = function(drifterId){
		if (_polylines[drifterId]) {
			_polylines[drifterId].setMap(null);
		};
	}

	var _addPolylines = function(drifterId, polyline, trajectoryModel){
		_polylines[drifterId] = polyline;
		_trajectoryModels[drifterId] = trajectoryModel;
	}

	RenderEmitter.register('add-trajectory', function(trajectoryModel){
		var coordinates = [], path = trajectoryModel.getPath(), drifterId = trajectoryModel.getDrifterId();
		_checkPolylines(drifterId);

		for(var i=0, p; p = path[i++];)
			coordinates.push(new google.maps.LatLng(p.lat, p.lon));
		var polyline = new google.maps.Polyline({
	        path: coordinates,
	        strokeColor: '#FF0000',
	        strokeOpacity: 1.0,
	        strokeWeight: 2,
	        editable: true
      	});
      	polyline.setMap(_map);

      	_addPolylines(drifterId, polyline, trajectoryModel);
	});

	RenderEmitter.register('remove-trajectory', function(trajectoryModel){
		for(var drifterId in _polylines){
			if(_polylines.hasOwnProperty(drifterId)){
				if(drifterId == trajectoryModel.getDrifterId()){
					_polylines[drifterId].setMap(null);
					delete _polylines[drifterId];
					break;
				}
			}
		}
	});

	RenderEmitter.register('clear-trajectories', function(){
		for(var drifterId in _polylines){
			if(_polylines.hasOwnProperty(drifterId)){
				_polylines[drifterId].setMap(null);
			}
		}
		_polylines = {};
	});

	RenderEmitter.register('clear-drifters', function(){
		for(var drifterId in _markers){
			if(_markers.hasOwnProperty(drifterId)){
				_markers[drifterId].setMap(null);
			}
		}
		_markers = {};
	});

});

