(function($) {

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

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

            var $stp = self.element;

            var sDay = $stp.data('day');
            if (sDay==undefined) {
                $stp.data('day', '0');
                $stp.data('hour', '0');
                $stp.data('minute', '30');
            }
            self._setValue();
            //            if ($stp.val().length == 0)
            //                $stp.val('0 day(s) 0 hr(s) 30 min(s)');

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

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

            var stpStr = '<img class=\'sd-timepicker-button\' src=\'/App_Themes/SmartTheme/images/Clock.png\' />';
            stpStr += '<div class=\'durationSliderDiv\' style=\'z-index:9999\'>';
            stpStr += '<span class=\'sd-timepicker-label\'>day:</span><span class=\'sd-timepicker-slider sd-day-slider\'></span>';
            stpStr += '<span class=\'sd-timepicker-label-second\'>hour:</span><span class=\'sd-timepicker-slider sd-hour-slider\'></span>';
            stpStr += '<span class=\'sd-timepicker-label-third\'>min:</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-day-slider').slider(
           {
               range: 'min',
               step: 1,
               value: 0,
               min: 0,
               max: 30,
               slide: function(event, ui) {
                   self.element.data('day', ui.value);
                   self._setValue();
               }
           });
            $timeWrapper.find('.sd-hour-slider').slider(
           {
               range: 'min',
               step: 1,
               value: 0,
               min: 0,
               max: 23,
               slide: function(event, ui) {
                   self.element.data('hour', ui.value);
                   self._setValue();
               }
           });
            $timeWrapper.find('.sd-minute-slider').slider(
           {
               range: 'min',
               step: 5,
               value: 30,
               min: 0,
               max: 55,
               slide: function(event, ui) {
                   self.element.data('minute', ui.value);
                   self._setValue();
               }
           });

            $(document).click(function() {
                $(document).find('div.durationSliderDiv').each(function() {
                    $(this).hide('slow');
                });
            });
            $stp.bind('click', function() {
                $('body').find('div.durationSliderDiv').each(function() {
                    $(this).hide('slow');
                });
                $timeWrapper.find('.sd-day-slider').slider('option', 'value', self.element.data('day'));
                $timeWrapper.find('.sd-hour-slider').slider('option', 'value', self.element.data('hour'));
                $timeWrapper.find('.sd-minute-slider').slider('option', 'value', self.element.data('minute'));
                $timeWrapper.find('.durationSliderDiv').show('slow');
                return false;
            });
            $openTime.click(function() {
                $('body').find('div.durationSliderDiv').each(function() {
                    $(this).hide('slow');
                });
                $timeWrapper.find('.sd-day-slider').slider('option', 'value', self.element.data('day'));
                $timeWrapper.find('.sd-hour-slider').slider('option', 'value', self.element.data('hour'));
                $timeWrapper.find('.sd-minute-slider').slider('option', 'value', self.element.data('minute'));
                $timeWrapper.find('div.durationSliderDiv').show('slow');
                return false; //.toggle('blind');
            });
            $timeWrapper.find('div.durationSliderDiv').blur(function() {
                $(this).hide();
            });
            $stp.bind('change', function() {
            $timeWrapper.find('.sd-day-slider').slider('option', 'value', self.element.data('day'));
            $timeWrapper.find('.sd-hour-slider').slider('option', 'value', self.element.data('hour'));
            $timeWrapper.find('.sd-minute-slider').slider('option', 'value', self.element.data('minute'));
        });

        },

        _setValue: function() {
            var self = this;
            var day = self.element.data('day') == null ? 0 : self.element.data('day');
            var hour = self.element.data('hour') == null ? 0 : self.element.data('hour');
            var minute = self.element.data('minute') == null ? 0 : self.element.data('minute');

            var value = day + ' day(s) ' + hour + ' hr(s) ' + minute + 'min(s)';

            self.element.val(value);
        },
        _computeOptions: function() {
            var self = this;
        }

    });

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