/**
 * @author Terry Wooton
 * @desc Adds a background layer to an element
 * @version 1.1
 * @example
 * $("#element").clock({displayFormat:'12',storeFormat:'24',defaultHour:'12',defaultMinute:'00',defaultAM:'AM',seconds:false});
 * @license free
 *
 */
 
$(document).ready(function() {
  var clockNumber = 0;
  $.fn.clock = function(params) {
    
    $(this).each(function() {
      var s = $(this).extend({displayFormat:'12',storeFormat:'12',defaultHour:'12',defaultMinute:'00',defaultAM:'AM',seconds:false,defaultSeconds:'00'},params || {});
      var clockTemplate  = '<div id="clock'+ (++clockNumber) +'">';
      clockTemplate += '<select name="clockHours'+clockNumber+'" id="clockHours'+clockNumber+'" rel="'+clockNumber+'">';
      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 name="clockMinutes'+clockNumber+'" id="clockMinutes'+clockNumber+'" rel="'+clockNumber+'">';
      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 || s.defaultSecond){
        clockTemplate += '<select name="clockSeconds'+clockNumber+'" id="clockMinutes'+clockNumber+'" rel="'+clockNumber+'">';
        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 += '<select 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 = $(this);          
      $(this).css({display:'none'});
      $(this).after(clockTemplate);
      calculateClockValue(t,s,clockNumber);
      $('#clockHours'+clockNumber+', #clockMinutes'+clockNumber+', #clockSeconds'+clockNumber+', #clockAM'+clockNumber).change(function(from){
        var num = $(this).attr('rel');
        calculateClockValue(t,s,num);
      });
    });
    
    function calculateClockValue(t,s,num){
      var hour = (s.displayFormat/s.storeFormat) * $('#clockHours'+num).val();
      var value = hour + ':' + $('#clockMinutes'+num).val();
      if(s.storeFormat == '14' || (s.seconds || s.defaultSecond))
        value += ' ' + $('#clockSeconds'+num).val();
      if(s.storeFormat == '12')
        value += ' ' + $('#clockAM'+num).val();        
      t.val(value);    
    }
  }      
});