Adding new option to pause and play slideshows

I have added the option pausePlay to select if you want to stop auto
sliding for a while.

demo/demo.html

@@ -28,8 +28,10 @@
 
       // Slideshow 3
       $("#slider3").responsiveSlides({
+        auto: true,
         manualControls: '#slider3-pager',
-        maxwidth: 540
+        maxwidth: 540,
+        pausePlay:true
       });
 
       // Slideshow 4

responsiveslides.css

@@ -31,3 +31,15 @@
   width: 100%;
   border: 0;
   }
+
+#button-pause-play.paused{
+  background: #fff url("pix/play.png");
+}
+
+#button-pause-play{
+  background: #fff url("pix/pause.png");
+  width: 16px;
+  height:16px;
+  margin: 0 auto;
+  cursor: pointer;
+}

responsiveslides.js

@@ -29,7 +29,8 @@
       "namespace": "rslides",   // String: change the default namespace used
       "before": $.noop,         // Function: Before callback
       "after": $.noop,          // Function: After callback
-      "callback": $.noop        // Function: callback
+      "callback": $.noop,        // Function: callback
+      "pausePlay" : false       // Boolean: Add play/pause button when auto is on
     }, options);
 
     return this.each(function () {
@@ -231,18 +232,17 @@
 
           startCycle = function () {
             rotate = setInterval(function () {
+                
+                // Clear the event queue
+                $slide.stop(true, true);
 
-              // Clear the event queue
-              $slide.stop(true, true);
+                var idx = index + 1 < length ? index + 1 : 0;
 
-              var idx = index + 1 < length ? index + 1 : 0;
-
-              // Remove active state and set new if pager is set
-              if (settings.pager || settings.manualControls) {
-                selectTab(idx);
-              }
-
-              slideTo(idx);
+                // Remove active state and set new if pager is set
+                if (settings.pager || settings.manualControls) {
+                  selectTab(idx);
+                }
+                slideTo(idx);
             }, waitTime);
           };
 
@@ -260,6 +260,23 @@
           }
         };
 
+        if(settings.pausePlay && settings.auto){
+          var classPausePlay = namespace + "-pause-play"; 
+          $pager.before("<div class = '" + classPausePlay+
+              "'><div id= 'button-pause-play'></div></div>");
+
+          $("#button-pause-play").on("click",function(){
+              var $this = $(this);
+              if(!($this.hasClass("paused"))){
+                clearInterval(rotate);
+                $this.addClass("paused");
+              }else{
+                restartCycle();
+                $this.removeClass("paused");
+              }
+          });
+        };
+
         // Pause on hover
         if (settings.pause) {
           $this.hover(function () {
@@ -333,15 +350,6 @@
               return;
             }
 
-            //  Adds active class during slide animation
-            //  $(this)
-            //    .addClass(namespace + "_active")
-            //    .delay(fadeTime)
-            //    .queue(function (next) {
-            //      $(this).removeClass(namespace + "_active");
-            //      next();
-            //  });
-
             // Determine where to slide
             var idx = $slide.index($visibleClass),
               prevIdx = idx - 1,