Progress Bar Timer Pause clock

Question

I have a progress bar in my application that increases when the timer reduces.I am stuck with an issue,I mean there is a pause popup which when the user clicks should pause the timer and once he clicks resume the progress bar begins from where it was paused. Below is my code,Please let me know what needs to be done to make that work.Thanks

    jQuery.fn.anim_progressbar = function(aOptions) {
                var iCms = 1000;
                var iMms = 60 * iCms;
                var iHms = 3600 * iCms;
                var iDms = 24 * 3600 * iCms;

                var aDefOpts = {
                    start : new Date(),
                    finish : new Date().setTime(new Date().getTime() + 10 * iMms), // TODO get time from database
                    interval : 100
                };
                var aOpts = jQuery.extend(aDefOpts, aOptions);
                var vPb = this;

                return this.each(function() {

                    var iDuration = aOpts.finish - aOpts.start;
                    var vInterval = setInterval(function() {


                            var iLeftMs = aOpts.finish - new Date();

                            var iElapsedMs = new Date() - aOpts.start;
                            var iDays = parseInt(iLeftMs / iDms), iHours = parseInt((iLeftMs - (iDays * iDms)) / iHms), iMin = parseInt((iLeftMs - (iDays * iDms) - (iHours * iHms)) / iMms), iSec = parseInt((iLeftMs - (iDays * iDms) - (iMin * iMms) - (iHours * iHms)) / iCms), iPerc = (iElapsedMs > 0) ? iElapsedMs / iDuration * 100 : 0;
                            $(vPb).children('.progressbar_con').children('#progressBar').html(iMin + 'm:' + iSec + 's</b>');
                            $(vPb).children('.progressbar_con').children('#progressBar').css('width', iPerc + '%');
                            if (iPerc >= 100) {
                                $(vPb).children('.progressbar_con').children('#progressBar').html('<b>Time Over</b>');

                                clearInterval(vInterval);


                        }

                    }, aOpts.interval);

                });
            };
            $('#progressBarMain').anim_progressbar();

Answer 1

Added functionality over your codebase.

http://jsfiddle.net/N99Ha/2/

jQuery.fn.anim_progressbar = function(aOptions) {
                var iCms = 1000;
                var iMms = 60 * iCms;
                var iHms = 3600 * iCms;
                var iDms = 24 * 3600 * iCms;

                var aDefOpts = {
                    start : new Date(),
                    finish : new Date().setTime(new Date().getTime() + 10 * iMms), // TODO get time from database
                    interval : 100
                };
                var aOpts = jQuery.extend(aDefOpts, aOptions);
                var vPb = this;

                return this.each(function() {
                    var iElapsedMs=0,
                        iLeftMs = aOpts.finish - new Date();
                    var iDuration = aOpts.finish - aOpts.start;
                    var ticker = function() {


                            iElapsedMs += aOpts.interval;

                            iLeftMs -= aOpts.interval;

                            var iDays = parseInt(iLeftMs / iDms), iHours = parseInt((iLeftMs - (iDays * iDms)) / iHms), iMin = parseInt((iLeftMs - (iDays * iDms) - (iHours * iHms)) / iMms), iSec = parseInt((iLeftMs - (iDays * iDms) - (iMin * iMms) - (iHours * iHms)) / iCms), iPerc = (iElapsedMs > 0) ? iElapsedMs / iDuration * 100 : 0;
                            $(vPb).children('.progressbar_con').children('#progressBar').html(iMin + 'm:' + iSec + 's</b>');
                            $(vPb).children('.progressbar_con').children('#progressBar').css('width', iPerc + '%');
                            if (iPerc >= 100) {
                                $(vPb).children('.progressbar_con').children('#progressBar').html('<b>Time Over</b>');

                                clearInterval(vInterval);     


                        }

                    };


                    var vInterval = setInterval(ticker, aOpts.interval);
                    $(vPb).find(".pause").on("click",function(){

                         clearInterval(vInterval); 
                    });
                    $(vPb).find(".resume").on("click",function(){

                         vInterval = setInterval(ticker, aOpts.interval);
                    });


                });
            };
            $('#progressBarMain').anim_progressbar();