(function($) {

    $.widget("ui.smartTimePicker", {
        _init: function() {
            var self = this;
            self._computeOptions();
            self._renderPicker();
        },

        _renderPicker: function() {
            var self = this;
            var options = this.options;

            var $stp = self.element;

            if ($stp.val().length == 0)
                $stp.val('09:00');

            $stp.css('width', '65px');

            $stp.wrap('<div class=\'timeWrapper\'/>');
            /// <reference path=".." />

            var stpStr = '<img class=\'sd-timepicker-button\' src=\'/App_Themes/SmartTheme/images/Clock.png\' />';
            stpStr += '<div class=\'timeSliderDiv\' style=\'z-index:9999\'>';
            stpStr += '<span class=\'sd-timepicker-label\'>hour:</span><span class=\'sd-timepicker-slider sd-hour-slider\'></span>';
            stpStr += '<span class=\'sd-timepicker-label-second\'>mins:</span><span class=\'sd-timepicker-slider sd-minute-slider\'></span>';
            stpStr += '</div>';

            var $timeWrapper = $stp.parent();
            $timeWrapper.append(stpStr);

            var $openTime = $timeWrapper.find('.sd-timepicker-button');

            $timeWrapper.find('.sd-hour-slider').slider(
           {
               range: 'min',
               step: 1,
               value: 10,
               min: 0,
               max: 23,
               slide: function(event, ui) {
                   var str = $stp.val();
                   var h = ui.value;
                   if (h < 10)
                       h = '0' + h;

                   $stp.val(h + str.substr(2, 3));
               }
           });
            $timeWrapper.find('.sd-minute-slider').slider(
           {
               range: 'min',
               step: 15,
               value: 30,
               min: 0,
               max: 55,
               slide: function(event, ui) {
                   var str = $stp.val();
                   var m = ui.value;
                   if (m < 10)
                       m = '0' + m;
                   $stp.val(str.substring(0, 3) + m);
               }
           });

            $(document).click(function() {
                $(document).find('div.timeSliderDiv').each(function() {
                    $(this).hide('slow');
                });
            });
            $stp.bind('click', function() {
                $('body').find('div.timeSliderDiv').each(function() {
                    $(this).hide('slow');
                });
                var val = self.element.val();
                var st1 = val.indexOf(':');
                var st2 = val.indexOf(' ');
                var h = val.substr(0, st1);
                var m = val.substr(st1 + 1, st2 - st1);
                $timeWrapper.find('.sd-hour-slider').slider('option', 'value', h);
                $timeWrapper.find('.sd-minute-slider').slider('option', 'value', m);
                $timeWrapper.find('.timeSliderDiv').show('slow');
                return false;
            });
            $openTime.click(function() {
                $('body').find('div.timeSliderDiv').each(function() {
                    $(this).hide('slow');
                });
                var val = self.element.val();
                var st1 = val.indexOf(':');
                var st2 = val.indexOf(' ');
                var h = val.substr(0, st1);
                var m = val.substr(st1 + 1, st2 - st1);
                $timeWrapper.find('.sd-hour-slider').slider('option', 'value', h);
                $timeWrapper.find('.sd-minute-slider').slider('option', 'value', m);
                $timeWrapper.find('div.timeSliderDiv').show('slow');
                return false; //.toggle('blind');
            });
            $timeWrapper.find('div.timeSliderDiv').blur(function() {
                $(this).hide();
            });
            $stp.bind('change', function() {

                var val = $(this).val();
                var st1 = val.indexOf(':');
                var st2 = val.indexOf(' ');
                var h = val.substr(0, st1);
                var m = val.substr(st1 + 1, st2 - st1);
                $timeWrapper.find('.sd-hour-slider').slider('option', 'value', h);
                $timeWrapper.find('.sd-minute-slider').slider('option', 'value', m);

            });

        },

        _computeOptions: function() {
            var self = this;
        }

    });

    $.extend($.ui.smartTimePicker, {
        version: '1.0.1',
        defaults: {
            icon: '',
            entity: 'appointment',
            isNew: false,
            readOnly: false,
            inputId: ''
        }
    });
})(jQuery);