$(document).ready(function(){
    $('input.time-picker').each(function(){
        // ----------------------------------------------------------------
        // main variables...
        // ----------------------------------------------------------------
        
        // configuration variables...
        var defTimeSeparator=':';
        var defHoursLabel='hh';
        var defMinutesLabel='mm';
        var defFadeDuration=100;
        var closeAfterHoursSelection=false;
        var closeAfterMinutesSelection=true;
        
        // global variables...
        var htmlTimePickerSelector='';
        var myTimePickerSelectorClassname=$(this).attr('id')+'-selector';
        var selectedTime=($(this).val()).split(defTimeSeparator);
        var selectedHours=selectedTime[0];
        var selectedMinutes=selectedTime[1];
        var closeable=false;
        
        // ----------------------------------------------------------------
        // main functions...
        // ----------------------------------------------------------------
        
        function updateTime(id){
            if(selectedHours==defHoursLabel||!selectedHours)selectedHours='00';
            if(selectedMinutes==defMinutesLabel||!selectedMinutes)selectedMinutes='00';
            
            $('#'+id).val(selectedHours+defTimeSeparator+selectedMinutes);
            
            $('.'+id+'-selector td.hours').each(function(){
                $(this).removeClass('current-selected');
                if($(this).attr('id')=='hours-'+selectedHours)$(this).addClass('current-selected');
            });
            
            $('.'+id+'-selector td.minutes').each(function(){
                $(this).removeClass('current-selected');
                if($(this).attr('id')=='minutes-'+selectedMinutes)$(this).addClass('current-selected');
            });
        }
        
        // ----------------------------------------------------------------
        // set up time picker input box...
        // ----------------------------------------------------------------
        
        $(this).attr('readonly',true);
        if($(this).val()=='')$(this).val(defHoursLabel+defTimeSeparator+defMinutesLabel);
        
        // ----------------------------------------------------------------
        // create the time picker selector box...
        // ----------------------------------------------------------------
        
        htmlTimePickerSelector+='<table cellspacing=0 cellpadding=0 border=0><tr>';
        
        // draw hours rows...
        for(i=0;i<=23;i++){
            var num=i;
            if(num<10)num='0'+num;
            var additionalClass='';
            if(num==selectedHours)additionalClass=' current-selected';
            htmlTimePickerSelector+='<td valign=center align=center class="hours'+additionalClass+'" id="hours-'+num+'">'+num+'</td>';
            if(i==11)htmlTimePickerSelector+='</tr><tr>';
        }
        
        htmlTimePickerSelector+='</tr><tr>';
        
        // draw minutes rows...
        for(i=0;i<=55;i+=5){
            var num=i;
            if(num<10)num='0'+num;
            var additionalClass='';
            if(num==selectedMinutes)additionalClass=' current-selected';
            htmlTimePickerSelector+='<td valign=center align=center class="minutes'+additionalClass+'" id="minutes-'+num+'" colspan=2>'+num+'</td>';
            if(i==25)htmlTimePickerSelector+='</tr><tr>';
        }
        
        htmlTimePickerSelector+='</tr></table>';
        
        // append in page, set position and visibility...
        $('body').append($('<div id="time-picker-selector" class="'+myTimePickerSelectorClassname+'"></div>'));
        $('.'+myTimePickerSelectorClassname).html(htmlTimePickerSelector);
        $('.'+myTimePickerSelectorClassname).css('position','absolute');
        $('.'+myTimePickerSelectorClassname).css('display','none');
        $('.'+myTimePickerSelectorClassname).css('z-index','999');
        
        // ----------------------------------------------------------------
        // manage the time picker selector events...
        // ----------------------------------------------------------------
        
        // hours selection events...
        $('.'+myTimePickerSelectorClassname+' td.hours').click(function(){
            selectedHours=$(this).html();
            updateTime(myTimePickerSelectorClassname.replace('-selector',''));
            if(closeAfterHoursSelection)$('.'+myTimePickerSelectorClassname).fadeOut(defFadeDuration);
        });
        
        // minutes selection events...
        $('.'+myTimePickerSelectorClassname+' td.minutes').click(function(){
            selectedMinutes=$(this).html();
            updateTime(myTimePickerSelectorClassname.replace('-selector',''));
            if(closeAfterMinutesSelection)$('.'+myTimePickerSelectorClassname).fadeOut(defFadeDuration);
        });
        
        // ----------------------------------------------------------------
        // manage events...
        // ----------------------------------------------------------------
        
        $(this).click(function(){
            if($('.'+myTimePickerSelectorClassname).css('display')=='none')$(this).focus();
        });
        
        // show/hide the time picker selector...
        $(this).focus(function(){
            $('div').each(function(){
                if($(this).attr('id')=='time-picker-selector')$(this).fadeOut(defFadeDuration);
            });
            
            if($('.'+myTimePickerSelectorClassname).css('display')=='none'){
                var rootPosition = $(this).offset();
                $('.'+myTimePickerSelectorClassname).css('top',rootPosition.top+$(this).height());
                $('.'+myTimePickerSelectorClassname).css('left',rootPosition.left);
                $('.'+myTimePickerSelectorClassname).fadeIn(defFadeDuration);
            }
        });
        
        // close if lost focus (when it's closeable)...
        $(this).blur(function(){
            if(closeable)$('.'+myTimePickerSelectorClassname).fadeOut(defFadeDuration);
        });
        
        // ----------------------------------------------------------------
        // manage closing events...
        // ----------------------------------------------------------------
        
        // closing prevention...
        $(this).mouseover(function(){closeable=false;});
        $(this).mouseout(function(){closeable=true;});
        $('.'+myTimePickerSelectorClassname+' td').mouseover(function(){closeable=false;});
        $('.'+myTimePickerSelectorClassname+' td').mouseout(function(){closeable=true;});
        
        // by document events...
        $(document).click(function(ev){
            if(closeable)$('.'+myTimePickerSelectorClassname).fadeOut(defFadeDuration);
        });
        
        // by keypress events...
        $(document).keypress(function(ev){
            if(ev.keyCode=='27'){
                // ESC key handling...
                $('.'+myTimePickerSelectorClassname).fadeOut(defFadeDuration);
            }else if(ev.keyCode=='13'){
                // RETURN key handling...
                $('.'+myTimePickerSelectorClassname).fadeOut(defFadeDuration);
            }
        });
    });
});