define(['vue', 'action/drifter'], function(Vue, DrifterAction){
	Vue.component('lat-lon-adder', {
		template: '<div>\
					<div class="col-sm-4" style="padding-right: 2px;">\
						<input class="form-control" type="text" v-bind:class="{invalid: isInvalidLat}" v-model="lat" placeholder="Latitude" />\
					</div>\
					<div class="col-sm-4" style="padding-left: 2px;">\
						<input class="form-control" type="text" v-bind:class="{invalid: isInvalidLon}" v-model="lon" placeholder="Longitude" />\
					</div>\
					<div class="col-sm-1" style="padding-left: 0px;">\
						<button type="button" class="btn btn-default" v-on:click="addDrifter"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>\
					</div>\
				   </div>',
		data: function(){
			return {
				lat: '',
				lon: '',
				isInvalidLat: false,
				isInvalidLon: false
			}
		},
		methods: {
			addDrifter: function(){
				this.isInvalidLon = false;
				this.isInvalidLat = false;

				if(this.lat == '') this.isInvalidLat = true;
				if(this.lon == '') this.isInvalidLon = true;
				if(this.isInvalidLat || this.isInvalidLon) return;
				
				var re = new RegExp('^-?\\d*(\\.(?=\\d))?\\d*$');
				if(!re.test(this.lat)) this.isInvalidLat = true;
				if(!re.test(this.lon)) this.isInvalidLon = true;
				if(this.isInvalidLat || this.isInvalidLon) return;
				
				var lat = parseFloat(this.lat), lon = parseFloat(this.lon);
				if(lat < -90. || lat > 90.) this.isInvalidLat = true;
				if(lon < -180. || lon > 180.) this.isInvalidLon = true;
				
				if(!this.isInvalidLat && !this.isInvalidLon) DrifterAction.add(lat, lon);
			}
		}
	});
});