(function($){
$.fn.selecttime = function()
{
    var markerClass = 'hasDateTime';
    var timetype = 24;
    return this.each(function(){
        $(this).after('<a href="#" class="dp-choose-time" title="Click to select time">time</a>');

        $(this).next().click(function(){
                                            var top = $(this).offset().top+$(this).outerHeight();
                                            var left = $(this).offset().left;
                                            renderPickerPlug();
                                            $('#timepickerplug').css({ left: left+'px', top: top+'px'}).show('normal');
                                            if ($('#timepickerplug').css('display') == 'none'){
                                                $('#timepickerplug').show();
                                            }
                                            $(this).prev().focus();
                                            $('.ui-timepicker-now').click(function(){
                                                                                    var day=new Date();
                                                                                    var currentHour = day.getHours();
                                                                                    $('#hourSlider').slider('option', 'value', currentHour);
                                                                                    writeTime(day.getHours(),'hour');
                                                                                    var currentMinutes = day.getMinutes();
                                                                                    $('#minuteSlider').slider('option', 'value', currentMinutes);
                                                                                    writeTime(currentMinutes,'minute');
    return false;
                                                                                  });

                                            return false;
                                       });

        function renderPickerPlug()
        {
            if (!$('#timepickerplug').length){
                var htmlins = '<ul id="timepickerplug">';
                    htmlins += '<li>';
                    htmlins += '<div id="timepicker" class="bg_header_left"><div class="bg_header_right"><div class="bg_footer_left"><div class="bg_footer_right">';
                    htmlins += '<div class="timewidget_top_border"></div>';
                    htmlins += '<div class="timewidget_left_border"><div class="timewidget_right_border"><div class="timewidget_maincontainer">';
                    htmlins += '<div class="block-with-title-titlelb"><div class="block-with-title-titlerb"><div class="block-with-title-titlecontent">';
                    htmlins += '<h3 id="tpSelectedTime">';
                    htmlins += '<span id="text_time"></span>';
                    htmlins += '<span class="selHrs" >00</span>';
                    htmlins += '<span class="delim" >.</span>';
                    htmlins += '<span class="selMins">00</span>';
                    htmlins += '<span class="dayPeriod"></span>';
                    htmlins += '</h3>';
                    htmlins += '</div></div></div>';
//                    htmlins += '<div class="timeFormatSelection"><span class="seltimeformat12" >am</span><span class="delim" >/</span><span class="seltimeformat24 selectedtimeformat" >pm</span></div>';
                    htmlins += '<ul id="sliderContainer">';
                    htmlins += '<li>';
                    htmlins += '  <h4 id="text_hour">Hrs.</h4>';
                    htmlins += '  <div id="hourSlider" class="slider"></div>';
                    htmlins += '</li>';
                    htmlins += '<li>';
                    htmlins += '  <h4 id="text_minute">Min.</h4>';
                    htmlins += '  <div id="minuteSlider" class="slider"></div>';
                    htmlins += '</li>';
                    htmlins += '</ul>';
                    htmlins += '<a class="ui-timepicker-now timepicker-now-link" href="#" title="{%trans "Current time"%}">Now</a></div></div></div>';
                    htmlins += '<div class="timewidget_bottom_border"></div>';
                    htmlins += '</div></div></div></div>';
                    htmlins += '<button type="button" class="ui-timepicker-close ui-state-default ui-priority-primary ui-corner-all" id="text_close">Close</button>';
//                    htmlins += '<button type="button" class="ui-timepicker-now ui-state-default ui-priority-primary ui-corner-all" id="text_now">Now</button>';
                    htmlins += '</li>';
                    htmlins += '</ul>';
                $('body').append(htmlins);

                $(document).mousedown(closePickPlug);
                $('#timepickerplug .ui-timepicker-close').click(closePickPlug);

                // Slider
                $('#hourSlider').slider({ orientation: "vertical",
                                          range: 'min',
                                          min: 0,
                                          max: 23,
                                          step: 1,
                                          slide: function(event, ui) {writeTime(ui.value,'hour');},
                                          change: function(event, ui) {$('#tpSelectedTime .selHrs').effect('highlight', 1000);}
                });
                // Slider
                $('#minuteSlider').slider({ orientation: "vertical",
                                            range: 'min',
                                            min: 0,
                                            max: 59,
                                            step: 1,
                                            slide: function(event, ui) {writeTime(ui.value,'minute');},
                                            change: function(event, ui) {$('#tpSelectedTime .selMins').effect('highlight', 1000);}
                });
        } // end of the renderPickerPlug function
}
        $(this).bind('focus',function(){
            var top = $(this).next().offset().top+$(this).outerHeight();
            var left = $(this).next().offset().left;
            renderPickerPlug();
            $('#timepickerplug').css({ left: left+'px', top: top+'px'}).show('normal');
            parseTime(this);

            $(this).bind('keyup',parseTime);
            $(this).addClass(markerClass);
            $('#timepickerplug').data('inputfield',this);
        });

        function parseTime (obj) {
            var time = ($(obj).val() || $(this).val());

            if (time == ''){
                time = '00.00';
            }

            $('#timepickerplug').data('lasttime',time);
            time = time.split(".");

            if (time.length < 2){
                time = ['00','00'];
            }

            var hour = time[0] || '00';
            var minute = time[1] || '00';
            if(hour > 23){
                hour = 23;
                writeTime(hour,'hour');
            }
            if(minute > 59){
                minute = 59;
                writeTime(minute,'minute');
            }

            $('#tpSelectedTime .selHrs').text(hour);
            $('#tpSelectedTime .selMins').text(minute);
            $('#hourSlider').slider('option', 'value', hour);
            $('#minuteSlider').slider('option', 'value', minute);
        }

        function writeTime(fragment,type) {
            var time = '';

            switch (type) {
                case 'hour':
                    var hours = parseInt(fragment,10);
                    var fragment = parseInt(fragment,10);

                    if (hours < 10) {
                        hours = '0'.concat(hours);
                    }

                    if (fragment < 10) {
                        fragment = '0'.concat(parseInt(fragment));
                    }

                    $('#tpSelectedTime .selHrs').text(hours);

                    time = fragment+':'+$('#tpSelectedTime .selMins').text();
                    break;
                case 'minute':
                    minutes = ((fragment < 10) ? '0' :'') + parseInt(fragment,10);
                    $('#tpSelectedTime .selMins').text(minutes);
                    var timevalue = parseInt($('#hourSlider').slider('option', 'value'));
                    time = timevalue+':'+minutes;
                    break;
            }

            $('#timepickerplug').data('lasttime',time);
            $($('#timepickerplug').data('inputfield')).val($('#timepickerplug').data('lasttime') );
        }

        function closePickPlug (event) {
            if (($(event.target).parents('#timepickerplug').length || $(event.target).hasClass(markerClass)) && !$(event.target).hasClass('ui-timepicker-close')){
                return;
            }

            $('#timepickerplug').remove();
            $(this).unbind('click',closePickPlug);
            $(this).unbind('keyup',parseTime);
            $(this).removeClass(markerClass);
        }
    });
}
})(jQuery);