'use strict';
/**
 * Implements directive for timepicker JQueryUI component. 
 * Timepicker component: http://jonthornton.github.com/jquery-timepicker/
 */
angular.module('qusion.ui.timepicker', [])
    .directive('qnTimepicker', [
        function() {
            return {
                require: '?ngModel',
                link: function(scope, element, attr, controller) {
                    var settings = {
                        timeFormat: 'H:i',
                        step: 30
                    };

                    var getOptions = function() {
                        return angular.extend({ }, settings, scope.$eval(attr.qnTimepicker));
                    };

                    var init = function() {
                        var options = getOptions();

                        if (controller) {
                            var updateModel = function() {
                                scope.$apply(function() {
                                    var date = element.timepicker("getTime");
                                    element.timepicker("setTime", element.val());
                                    controller.$setViewValue(date);
                                    element.blur();
                                });
                            };

                            // update model on time change
                            element.on('changeTime', function() {
                                updateModel();
                            });

                            // In case the user changes the text directly in the input box
                            element.bind('change', updateModel);

                            // Update the date picker when the model changes
                            controller.$render = function() {
                                var date = controller.$viewValue;
                                //console.log(date);
                                if (angular.isDefined(date) && date !== null && !angular.isDate(date)) {
                                    throw new Error('ng-Model value must be a Date/Time object - currently it is a ' + typeof date + ' - use ui-time-format to convert it from a string');
                                }
                                element.timepicker("setTime", date);
                            };
                        }

                        // If we don't destroy the old one it doesn't update properly when the config changes
                        element.timepicker('remove');
                        // Create the new datepicker widget
                        element.timepicker(options);
                        if (controller) {
                            // Force a render to override whatever is in the input text box
                            controller.$render();
                        }
                    };

                    // Watch for changes to the directives options
                    scope.$watch(getOptions, init, true);

                }
            };
        }
    ]);