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

			$("#hourslider").dateRangeSlider({
				range: {
				  	min: {hours: 1},
				    max: {hours: 72}
				},
				step: {
				  	hours: 1
				},
				wheelMode: "zoom",
				formatter: function(val){
				   return moment(val).format("MM/DD HH:mm");
				}
			});

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