/**
 * @author Terry Wooton
 * @desc transforms a text input box into a dropdown style analog clock
 * @version 1.1
 * @example
 * jQuery("#element").clock({displayFormat:'12',defaultHour:'12',defaultMinute:'00',defaultAM:'AM',seconds:false});
 * @license free
 *
 */
 
jQuery(document).ready(function() {
  var clockNumber = 0;
  jQuery.fn.clock = function(params) {
    
    jQuery(this).each(function() {
      var s = jQuery(this).extend({displayFormat:12,defaultHour:'12',defaultMinute:'00',defaultAM:'AM',seconds:false,defaultSeconds:'00'},params || {});
      var clockTemplate  = '<div id="clock'+ (++clockNumber) +'">';
      clockTemplate += '<select class="padding0 margin0" name="clockHours'+clockNumber+'" id="clockHours'+clockNumber+'" rel="'+clockNumber+'">';
   	  clockTemplate += '<option value=""> </option>';
      for(var i = 1; i<=s.displayFormat;i++){
        j = (i<10 ? ('0'+i) : i);
        clockTemplate += '<option value="'+j+'"'+(j == s.defaultHour ? ' selected' : '')+'>'+j+'</option>';
      }
      clockTemplate += '</select>';        
      clockTemplate += ' : <select class="padding0 margin0" name="clockMinutes'+clockNumber+'" id="clockMinutes'+clockNumber+'" rel="'+clockNumber+'">';
      clockTemplate += '<option value=""> </option>';
      for(var i = 0; i<60;i++){
        j = (i<10 ? ('0'+i) : i);
        clockTemplate += '<option value="'+j+'"'+(j == s.defaultMinute ? ' selected' : '')+'>'+j+'</option>';
      }      
      clockTemplate += '</select>';
      if(s.seconds){
        clockTemplate += ' : <select class="padding0 margin0" name="clockSeconds'+clockNumber+'" id="clockSeconds'+clockNumber+'" rel="'+clockNumber+'">';
        clockTemplate += '<option value=""> </option>';
        for(var i = 0; i<60;i++){
          j = (i<10 ? ('0'+i) : i);
          clockTemplate += '<option value="'+j+'"'+(j == s.defaultSeconds ? ' selected' : '')+'>'+j+'</option>';
        }                    
        clockTemplate += '</select>';
      }
      if(s.displayFormat == '12'){
        clockTemplate += '&nbsp;<select class="padding0 margin0" name="clockAM'+clockNumber+'" id="clockAM'+clockNumber+'" rel="'+clockNumber+'">';
        clockTemplate += '<option value="AM"'+(s.defaultAM == 'AM' ? ' selected' : '')+'>AM</option>';
        clockTemplate += '<option value="PM"'+(s.defaultAM == 'PM' ? ' selected' : '')+'>PM</option>';
        clockTemplate += '</select>';
      }
      clockTemplate += '</div>';            
      var t = jQuery(this);          
      jQuery(this).css({display:'none'});
      jQuery(this).after(clockTemplate);
      calculateClockValue(t,s,clockNumber);
      jQuery('#clockHours'+clockNumber+', #clockMinutes'+clockNumber+', #clockSeconds'+clockNumber+', #clockAM'+clockNumber).change(function(from){
        var num = jQuery(this).attr('rel');
        calculateClockValue(t,s,num);
      });
    });
    
    function calculateClockValue(t,s,num){
      var hour = jQuery('#clockHours'+num).val();
      var minutes = ':'+jQuery('#clockMinutes'+num).val();
      var sec = (s.seconds ? ':'+jQuery('#clockSeconds'+num).val() : '');
      var am = (s.displayFormat == '12' ? ' ' + jQuery('#clockAM'+num).val() : '');                    
      t.val(hour + minutes + sec + am);    
    }
  }      
});