/* FLIPTIME PlugIn START */
(function($) {
  
  $.fn.fliptimeGfx = function(options) {
    
    // default configuration properties
    var defaults = {
      counter: true,
      targetCount: '31.12.2010,23:59:59',
      flipBorderW: 0,
      flipBorderColor: '#000000',
      flipBGColor: '#a1a1a1',
      flipDigitW : 18,
      flipDigitH : 26,
      flipDigitPadding: 1,
      flipDigitBG : 'css/images/bg_count_black_18px26px.png',
      flipDigitBarHeight : 1,
      flipDigitBgColor: '#a1a1a1',
      flipFontSize: '20px',
      flipFontColor: '#ffffff',
      flipDiffDayW: 5,
      flipDiffDaySep: '.',
      flipDiffHourW: 5,
      flipDiffHourSep: ':',
      flipDiffMinW: 5,
      flipDiffMinSep: ':',
      flipDiffBgColor: '#a1a1a1',
      flipDiffFontColor: '#ffffff'
    };
    
    debug = false;
    
    var $dayMax = 365;
    var $hourMax = 23;
    var $minMax = 59;
    var $secMax = 59;
    
    function dm(message){
      if(debug==true){
        console.log(message);
      }
    }
    
    var options = $.extend(defaults, options);
    obj = $(this);
    var s = $("li:has(div)", obj).length;
    dm(obj);
    dm("anzahl digits: "+s);
    // set border/background to complete fliptime
    obj.css({
      'background': options.flipBGColor,
      'border': options.flipBorderW+'px solid '+options.flipBorderColor
    });
    // step through each digit
    $("li:has(div)", obj).each(function() {
      // set background to all digits excl. diff's
      if($(this).attr('class')!='diff-day' && $(this).attr('class')!='diff-hour' && $(this).attr('class')!='diff-min'){
        $($(this)).css({
          'width': options.flipDigitW+'px',
          'height': options.flipDigitH+'px',
          'padding': '0px',
          'margin': options.flipDigitPadding+'px',
          'overflow':'hidden'
        });
      }
      // set background to diff-day
      if($(this).attr('class')=='diff-day'){
        $($(this)).css({
          'width': options.flipDiffDayW+'px',
          'height': options.flipDigitH+'px',
          'color': options.flipDiffFontColor,
          'background': options.flipDiffBgColor
        });
        $($(this)).text(options.flipDiffDaySep);
      }
      // set background to diff-hour
      if($(this).attr('class')=='diff-hour'){
        $($(this)).css({
          'width': options.flipDiffHourW+'px',
          'height': options.flipDigitH+'px',
          'color': options.flipDiffFontColor,
          'background': options.flipDiffBgColor
        });
        $($(this)).text(options.flipDiffHourSep);
      }
      // set background to diff-min
      if($(this).attr('class')=='diff-min'){
        $($(this)).css({
          'width': options.flipDiffMinW+'px',
          'height': options.flipDigitH+'px',
          'color': options.flipDiffFontColor,
          'background': options.flipDiffBgColor
        });
        $($(this)).text(options.flipDiffMinSep);
      }
      // add next digit
      $('.high',$(this)).before('<div class="low"></div>');
      $('.low',$(this)).css({
        'height': (options.flipDigitH/2)+'px',
        'width': (options.flipDigitW)+'px',
        'font-size': options.flipFontSize,
        'color': options.flipFontColor,
        'z-index': '110',
        'visibility': 'visible'
      });
      // add top/bottom-gfx
      $('.high',$(this)).after('<div class="middle"><ul><li class="btop"><div></div></li><li class="bbot"><div></div></li></ul></div>');
      $('.middle',$(this)).css({
        'position': 'relative',
        'top': -(options.flipDigitH)+'px',
        'left':'0',
        'height': (options.flipDigitH)+'px',
        'border': 'none',
        'z-index': '112',
        'background-color': 'transparent',
        'visibility': 'hidden'
      });
      $('.middle li.btop',$(this)).css({
        'height': ((options.flipDigitH)/2)+'px',
        'width': (options.flipDigitW)+'px',
        'background-color': 'transparent'
      });
      $('.middle li.btop div',$(this)).css({
        'position': 'absolute',
        'left':'0',
        'bottom': ((options.flipDigitH)/2)+'px',
        'height': ((options.flipDigitH)/2)+'px',
        'width': (options.flipDigitW)+'px',
        'background-color': 'transparent'
      });
      $('.middle li.bbot',$(this)).css({
        'height': ((options.flipDigitH)/2)+'px',
        'width': (options.flipDigitW)+'px',
        'background-color': 'transparent'
      });
      $('.middle li.bbot div',$(this)).css({
        'position': 'relative',
        'bottom': '0px',
        'height': ((options.flipDigitH)/2)+'px',
        'width': (options.flipDigitW)+'px',
        'background-color': 'transparent'
      });
      // add style to top-digit
      $('.high',$(this)).css({
        'top': '0px',
        'height': (options.flipDigitH/2)+'px',
        'font-size': options.flipFontSize,
        'color': options.flipFontColor,
        'background-color': 'transparent',
        'visibility': 'visible',
        'z-index': '111'
      });
   });
   return $(obj).html();
  };
})(jQuery);
/* FLIPTIME PlugIn END */

function watchCountdown(periods) {
  obj = $(this);
  
  var flipDigitW = $.fliptime._defaults['flipDigitW'];
  var flipDigitH = $.fliptime._defaults['flipDigitH'];
  var flipDigitBGTop = (flipDigitH/2);
  var flipDigitBGBot = (flipDigitH/2);
  
  var digit = function(value, pos, len) {
    value = '0000000000' + value;
    return value.substr(value.length - pos, len);
  };
  
  var digAnim = function(ident,low,high){
    $('#'+ident+' .low',obj).css({
      visibility:'visible'
    });
    $('#'+ident+' .middle .btop div',obj).css({
      visibility:'visible'
    });
    $('#'+ident+' .middle .btop div img',obj).animate({
      'height': '0px',
      'width':flipDigitW
      },250,function(){
        digAnimBot(ident,low,high);
    });
  };
  
  var digAnimBot = function(ident,low,high){
    $('#'+ident+' .middle .bbot div',obj).css({
      visibility:'visible'
    });
    $('#'+ident+' .middle .bbot div img',obj).animate({
      'height': flipDigitBGBot+'px',
      'width':flipDigitW
      },250,function(){
        digAnimEnd(ident,low,high);
    });
  };
  
  var digAnimEnd = function(ident,low,high){
    offSetLow = parseInt(flipDigitW*(parseInt(low)+1));
    offSetHigh = parseInt(flipDigitW*(parseInt(high)+1));
  };
  
  periodsSingle = {
    d100: digit(periods[3], 3, 1),
    d10: digit(periods[3], 2, 1),
    d1: digit(periods[3], 1, 1),
    h10: digit(periods[4], 2, 1),
    h1: digit(periods[4], 1, 1),
    m10: digit(periods[5], 2, 1),
    m1: digit(periods[5], 1, 1),
    s10: digit(periods[6], 2, 1),
    s1: digit(periods[6], 1, 1)
  };
  
  periodsMax = {
    d100: 9,
    d10: 9,
    d1: 9,
    h10: 2,
    h1: 3,
    m10: 5,
    m1: 9,
    s10: 5,
    s1: 9
  };
  
  $.each(periodsSingle, function(ident, vars) {
    digitThis = vars;
    if(vars==periodsMax[ident]){
      digitNext = 0;
    }else{
      digitNext = parseInt(vars)+1;
    }
    
    if($('#'+ident,obj).attr('title')!=vars){
      // overlay-digits
      $('#'+ident+' .middle .btop div',obj).css({
        'visibility':'hidden'
      });
      $('#'+ident+' .middle .btop div img',obj).remove();
      $('<img src="css/images/oben_ziffer'+digitNext+'.png" />').prependTo('#'+ident+' .middle .btop div',obj);
      $('#'+ident+' .middle .btop div img',obj).css({
        'position': 'absolute',
        'bottom': '0px',
        'left':'0px',
        'height':flipDigitBGTop+'px',
        'width':flipDigitW+'px'
      });
      
      $('#'+ident+' .middle .bbot div',obj).css({
        'visibility':'visible'
      });
      $('#'+ident+' .middle .bbot div img',obj).remove();
      $('<img src="css/images/unten_ziffer'+digitThis+'.png" />').prependTo('#'+ident+' .middle .bbot div',obj);
      $('#'+ident+' .middle .bbot div img',obj).css({
        'height':'0px',
        'width':flipDigitW+'px'
      });
      
      // underlay-digits
      $('#'+ident+' .low img',obj).remove();
      $('<img src="css/images/oben_ziffer'+digitThis+'.png" />').prependTo('#'+ident+' .low',obj);
      
      $('#'+ident+' .high img',obj).remove();
      $('<img src="css/images/unten_ziffer'+digitNext+'.png" />').prependTo('#'+ident+' .high',obj);
      
      
      digAnim(ident,parseInt(vars)-1,vars);
    }else{
      
    }
    $('#'+ident,obj).attr({title:vars});
  });
  
}