$(document).ready(function(){
    $('input.time-picker').each(function(el){
        var defTimeSeparator=':';
        var htmlTimePickerSelector='';
        var myTimePickerSelectorClassname=$(this).attr('id')+'-selector';
        var defFadeDuration=100;
        
        function updateTime(id,hours,minutes){
            currentTime=($("#"+id).val()).split(defTimeSeparator);
            
            if(hours=='')hours=currentTime[0];
            if(hours.length==1)hours='0'+hours;
            
            if(minutes=='')minutes=currentTime[1];
            if(minutes.length==1)minutes='0'+minutes;
            
            $('#'+id).val(hours+defTimeSeparator+minutes);
        }
        
        // ----------------------------------------------------------------
        // set up time picker input box...
        // ----------------------------------------------------------------
        
        $(this).attr("readonly",true);
        
        // ----------------------------------------------------------------
        // create the time picker selector box...
        // ----------------------------------------------------------------
        
        htmlTimePickerSelector+='<table border=0><tr>';
        
        // draw hours rows...
        for(i=0;i<=23;i++){
            htmlTimePickerSelector+='<td valign=center align=center class="hours">'+i+'</td>';
            if(i==11)htmlTimePickerSelector+='</tr><tr>';
        }
        
        htmlTimePickerSelector+='</tr><tr>';
        
        // draw minutes rows...
        for(i=0;i<=55;i+=5){
            htmlTimePickerSelector+='<td valign=center align=center class="minutes" colspan=2>'+i+'</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','9999');
        
        // ----------------------------------------------------------------
        // create the time picker selector box...
        // ----------------------------------------------------------------
        
        // hours selection events...
        $('.'+myTimePickerSelectorClassname+' td.hours').click(function(){
            updateTime(myTimePickerSelectorClassname.replace('-selector',''),$(this).html(),'');
        });
        
        // minutes selection events...
        $('.'+myTimePickerSelectorClassname+' td.minutes').click(function(){
            updateTime(myTimePickerSelectorClassname.replace('-selector',''),'',$(this).html());
            $('.'+myTimePickerSelectorClassname).fadeOut(defFadeDuration);
        });
        
        // keypress management...
        $(document).keypress(function(ev){
            if(ev.keyCode=='27')$('.'+myTimePickerSelectorClassname).fadeOut(defFadeDuration);
        });
        
        // ----------------------------------------------------------------
        // manage the time picker events...
        // ----------------------------------------------------------------
        
        // show/hide the time picker selector...
        $(this).focus(function(){
            $('div').each(function(subel){
                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);
            }
        });
    });
});