(function($){
    var digits = '000000';
    var currentDigits = '000000';
    var nextflip = null;
    
    $.fn.flip = function(options){    
        var opts = $.extend($.fn.flip.defaults, options);
        
        return this.each(function(){
            $this = $(this);
         

        $this.html('<div id="back"><div id="upperFlipBack"><img src="images/counter/spacer.gif" class="spacer" /><img id="upper0Back" src="images/counter/0_01.png" /><img id="upper1Back" src="images/counter/0_01.png" /><img id="upper2Back" src="images/counter/0_01.png" /><img id="comma1Back" src="images/counter/ca.png" /><img id="upper3Back" src="images/counter/0_01.png" /><img id="upper4Back" src="images/counter/0_01.png" /><img id="upper5Back" src="images/counter/0_01.png" /></div>' +
                       '<div id="lowerFlipBack"><img src="images/counter/spacer.gif" class="spacer" /><img id="lower0Back" src="images/counter/0_02.png" /><img id="lower1Back" src="images/counter/0_02.png" /><img id="lower2Back" src="images/counter/0_02.png" /><img id="comma1Back" src="images/counter/cb.png" /><img id="lower3Back" src="images/counter/0_02.png" /><img id="lower4Back" src="images/counter/0_02.png" /><img id="lower5Back" src="images/counter/0_02.png" /></div></div>' +
                       '<div id="front"><div id="upperFlip"><img src="images/counter/spacer.gif" class="spacer" /><img id="upper0" src="images/counter/0_01.png" /><img id="upper1" src="images/counter/0_01.png" /><img id="upper2" src="images/counter/0_01.png" /><img id="comma1Back" src="images/counter/ca.png" /><img id="upper3" src="images/counter/0_01.png" /><img id="upper4" src="images/counter/0_01.png" /><img id="upper5" src="images/counter/0_01.png" /></div>' +
                       '<div id="lowerFlip"><img src="images/counter/spacer.gif" class="spacer" /><img id="lower0" src="images/counter/0_02.png" /><img id="lower1" src="images/counter/0_02.png" /><img id="lower2" src="images/counter/0_02.png" /><img id="comma1Back" src="images/counter/cb.png" /><img id="lower3" src="images/counter/0_02.png" /><img id="lower4" src="images/counter/0_02.png" /><img id="lower5" src="images/counter/0_02.png" /></div></div>');
                       
                      
            if(opts.animate){
                if(opts.reverse){
                    flipper(opts.count, 1, 1, opts.reverse);
                }
                else{
                    flipper(opts.count - 50, opts.count, 1, opts.reverse);
                }
            }
            else{
                flipper(opts.count, opts.count, 0, opts.reverse);
            }
        });
    };

    $.fn.flip.defaults = {
        count: 0,
        animate: 1,
        reverse: 0
    };
    
    function flipper(cfrom, cto, delay, reverse){
        var progress;
        
        if(((cfrom <= cto) && !reverse) || ((cfrom >= cto) && reverse)){
            if(delay != 0){
                progress = 0.5 - Math.abs((cto - cfrom) / Math.max(cfrom, cto)) / 2;
                if(Math.abs(cto - cfrom) > 9){
                    delay = Math.pow(Math.sin(progress * Math.PI), 100) * 50;
                }
                else
                {
                    delay = 950 - (Math.abs(cto - cfrom) * 100 );
                }
            }
            
            digits = numberPadding(cfrom,3);
            for(k = 0; k < digits.length; k++){
                if(digits.charAt(k) != currentDigits.charAt(k)){
                    flip('#upper' + k.toString(), '#lower' + k.toString(), digits.charAt(k), 0.15 * delay);
                }
            }
            currentDigits = digits;
            
            if(reverse){
                cfrom--;
            }
            else{
                cfrom++;
            }
            nextflip = window.setTimeout(function(){ flipper(cfrom, cto, delay, reverse); }, delay);
        }
        else{
            window.clearTimeout(nextflip);
        }
    }
    
    function flip(upperId, lowerId, changeNumber, delay){
        var upperBackId = upperId + 'Back';
        
        $(upperId).attr('src', $(upperBackId).attr('src'));
        $(upperId).css({'height': '15px', 'visibility': 'visible'});
        
        $(lowerId).css({'height': '0px', 'visibility': 'visible'});
        
        $(upperBackId).attr('src', "images/counter/" + changeNumber.toString() + '_01.png');
        $(lowerId).attr('src', "images/counter/" + changeNumber.toString() + '_02.png');
        
        if(delay != 0){
            $(upperId).animate({height: '0px'}, delay, 'linear', function(){//, display: 'inline'
                 $(lowerId).animate({height: '15px'}, delay, 'linear', function(){//, display: 'inline'
                     lowerBackId = lowerId + 'Back';
                     $(lowerBackId).attr('src', $(lowerId).attr('src'));
                     $(lowerId).css('visibility', 'hidden');
                     $(upperId).css('visibility', 'hidden');
                 });
            });
        }
        else{
           lowerBackId = lowerId + 'Back';
           $(lowerBackId).attr('src', $(lowerId).attr('src'));
           $(lowerId).css('visibility', 'hidden');
           $(upperId).css('visibility', 'hidden');
        }
    }
    
    function numberPadding(n, length){
        var pd = '';
        
        n = n.toString();
        
        if(length > n.length){
            for(i = 0; i < (length - n.length); i++){
                pd += '0';
            }
        }
        
        return pd + n.toString();
    }
})(jQuery);