/*
  * FlipClock for jQuery
  * http://www.hnkweb.com/2009/03/02/flipclock-tutorial-para-desarrollar-un-plugin-de-jquery/
  *
  * Copyright (c) 2009 Marcos Esperon [http://www.hnkweb.com]
  * Dual licensed under the MIT and GPL licenses:
  * http://www.opensource.org/licenses/mit-license.php
  * http://www.gnu.org/licenses/gpl.html
  *
  * $Version: 0.1 $
  * $Date: 2009-03-02 $
  *
  * Opciones:
  *   ampm: establece el formato corto (AM/PM) o largo (24H) del reloj (por defecto: false)
  *   dot:  muesta/oculta el punto de separacion entre hora y minutos (por defecto: false)
  *   msg:  establece el texto del mensaje que se muestra en la barra de opciones
  *
  --------------------------------------------------------------------
*/

function actualizarHora() {
	intMinutos++
	if (intMinutos > 59) {
		intMinutos = 0;
		intHora++;
	}
	if (intHora > 23) {
		intHora = 0;
	}
}


(function($){
 $.fn.flipclock = function(options) {

  // definimos variables generales
  var obj, divclock, divopt, flip, curtime;

  // establecemos las opciones
  var options = $.extend({
    ampm: false,
    dot: false,
    msg: '',
    hora: 0,
    minutos: 0
  }, options);

  // funcion encargada de recuperar la hora y generar el HTML
  var setclock = function() {
    var gh, gm, hd, hh, md, mm, html;
    actualizarHora();
    html = '';

    // obtenemos la hora y los minutos
//    gh = new Date().getHours();
//    gm =  new Date().getMinutes();   
    gh = intHora;
    gm =  intMinutos;   

/*
 * 
    // si usamos el formato de hora corta, modificamos la fecha y mostramos el AM/PM
    if (options.ampm) {
      html = '<span class="format">AM</span>';
      if (gh>12) {
        gh = gh - 12;
        html = '<span class="format">PM</span>';
      };
    };
*/
    // desglosamos los digitos de la hora y minutos
    if (gh>9) {
      hd = gh.toString().substring(0,1);
      hh = gh.toString().substring(1);
    } else {
      hd = '0';
      hh = gh.toString();
    };
    if (gm>9) {
      md = gm.toString().substring(0,1);
      mm = gm.toString().substring(1);
    } else {
      md = '0';
      mm = gm.toString();
    };

    // generamos el HTML
    html += '<img src="img/reloj_digital/'+hd+'.gif"  /><img src="images/blank.gif" width="2" height="5" /><img src="img/reloj_digital/'+hh+'.gif"  />';
    html += '<img src="images/blank.gif" width="2" height="5" /><img src="img/reloj_digital/dos-puntos.gif" />';
    html += '<img src="images/blank.gif" width="2" height="5" /><img src="img/reloj_digital/'+md+'.gif"  /><img src="images/blank.gif" width="2" height="5" /><img src="img/reloj_digital/'+mm+'.gif"  />';

//    // recargamos el reloj si la hora es distinta a la mostrada actualmente
//    if(curtime!=gh.toString()+gm.toString()){
//      curtime = gh.toString()+gm.toString();
      $(divclock).html(html);
//    };

  };

  // funcion encargada de mostrar la barra de opciones (mensaje + cambio de formato de hora)
  // llamada principal: construye el reloj en el elemento usado al llamar a flipclock
  
  return this.each(function() {

   obj = $(this);

   // creamos el bloque que va a contener al reloj
   divclock = document.createElement('div');
   // asginamos su clase de estilo
   divclock.className = 'clock';
   // creamos un intervalo de actualizacion del reloj
   setclock();
   flip = setInterval(setclock, 60000);
   
   // llamamos a la contruccion de la barra de opciones
  

   // agregamos el bloque del reloj y la barra de opciones al elemento principal
   $(obj).html(divclock);

   return false;

  });
 };

})(jQuery);