define(['vue', 'jquery', 'moment', 'dateRangeSlider'], function(Vue, $, moment){
	Vue.component('days-range-slider', {
		props: ['monthModel'],
		template: '<div id="dayslider"></div>',
		mounted: function(){
			var _this = this;

			$("#dayslider").dateRangeSlider({
				range: {
				  	min: {hours: 72},
				    max: {hours: 72}
				},
				step: {
				  	hours: 6
				},
				// wheelMode: "scroll",
				// wheelSpeed: 5,
				formatter: function(val){
				   return moment(val).format("MM/DD HH:mm");
				}
			});

			$("#dayslider").bind("userValuesChanged", function(e, data){
			  	_this.onChange(data.values);
			});
		},
		methods: {
			onChange: function(daysModel){
				this.$emit('days-model-change', daysModel);
			}
		},
		watch: {
			monthModel: function(mDate) {
				$("#dayslider").dateRangeSlider("bounds", mDate.toDate(), mDate.clone().add(72, 'hours').toDate());
				$("#dayslider").dateRangeSlider("values", mDate.toDate(), mDate.clone().add(72, 'hours').toDate());
				this.$emit('days-model-change', {
					min: mDate.toDate(),
					max: mDate.clone().add(72, 'hours').toDate()
				});
			}
		}
	});
});