(function () {
	'use strict';

	angular
	.module('app')
	.component('myTimepicker', {
		templateUrl: 'app/components/myTimepicker/myTimepicker.html',
		controller: myTimepickerController,
		bindings: {
			// '=' two way binding
			// '@' simply reads the value (one-way binding)
			// '<' simply reads test (one-way binding)
			hour: '=',
			id: '<',
			placeholder: '@',
			readonly: '<'
		},
		controllerAs: 'vm'
	});

	myTimepickerController.$inject = ['__env'];

	function myTimepickerController(__env) {
		var vm = this;

		vm.$onInit = function () {

			if (vm.readonly === undefined) {
				vm.readonly = true;
			}

			if (vm.id === undefined) {
				vm.id = '';
			}

			if (vm.placeholder === undefined) {
				vm.placeholder = '';
			}

			vm.timePickerSize = __env.timePicker.size;
			vm.timePickerFormat = __env.timePicker.format;
			vm.timePickerMinuteSteps = __env.timePicker.minuteSteps;
		};

		vm.onKeyDown = onKeyDown;

		function onKeyDown(key) {
			if (key.keyCode === 8) {
				vm.hour = '';
				$('#' + vm.id).val("");
			}
			else {
				if (key.keyCode === 46) {
					vm.hour = '';
					$('#' + vm.id).val("");
				}
			}
		}
	}
})();