From 3612b0ced6671a5e541106e9c6e8a45cb2a23d4b Mon Sep 17 00:00:00 2001
From: helei <heleifz@126.com>
Date: Fri, 7 Nov 2014 19:52:43 +0800
Subject: [PATCH 1/2] add endsAt option, stop(), and infinite mode

---
 README.md                                     |   0
 SyntaxHighlighter/Scripts/clipboard.swf       | Bin
 SyntaxHighlighter/Scripts/shBrushCss.js       |   0
 SyntaxHighlighter/Scripts/shBrushJScript.js   |   0
 SyntaxHighlighter/Scripts/shBrushXml.js       |   0
 SyntaxHighlighter/Scripts/shCore.js           |   0
 .../Styles/SyntaxHighlighter.css              |   0
 demos/fancy.html                              |   6 +-
 demos/inifite-and-finalnumber.html            |  67 +++++++++++++++
 index.html                                    |  25 +++++-
 jquery.easing.1.3.js                          |   0
 jquery.jSlots.js                              |  81 +++++++++++++++---
 jquery.jSlots.min.js                          |   2 +-
 jslots.jquery.json                            |   0
 14 files changed, 164 insertions(+), 17 deletions(-)
 mode change 100644 => 100755 README.md
 mode change 100644 => 100755 SyntaxHighlighter/Scripts/clipboard.swf
 mode change 100644 => 100755 SyntaxHighlighter/Scripts/shBrushCss.js
 mode change 100644 => 100755 SyntaxHighlighter/Scripts/shBrushJScript.js
 mode change 100644 => 100755 SyntaxHighlighter/Scripts/shBrushXml.js
 mode change 100644 => 100755 SyntaxHighlighter/Scripts/shCore.js
 mode change 100644 => 100755 SyntaxHighlighter/Styles/SyntaxHighlighter.css
 create mode 100755 demos/inifite-and-finalnumber.html
 mode change 100644 => 100755 jquery.easing.1.3.js
 mode change 100644 => 100755 jquery.jSlots.js
 mode change 100644 => 100755 jquery.jSlots.min.js
 mode change 100644 => 100755 jslots.jquery.json
diff --git a/README.md b/README.md
old mode 100644
new mode 100755
diff --git a/SyntaxHighlighter/Scripts/clipboard.swf b/SyntaxHighlighter/Scripts/clipboard.swf
old mode 100644
new mode 100755
diff --git a/SyntaxHighlighter/Scripts/shBrushCss.js b/SyntaxHighlighter/Scripts/shBrushCss.js
old mode 100644
new mode 100755
diff --git a/SyntaxHighlighter/Scripts/shBrushJScript.js b/SyntaxHighlighter/Scripts/shBrushJScript.js
old mode 100644
new mode 100755
diff --git a/SyntaxHighlighter/Scripts/shBrushXml.js b/SyntaxHighlighter/Scripts/shBrushXml.js
old mode 100644
new mode 100755
diff --git a/SyntaxHighlighter/Scripts/shCore.js b/SyntaxHighlighter/Scripts/shCore.js
old mode 100644
new mode 100755
diff --git a/SyntaxHighlighter/Styles/SyntaxHighlighter.css b/SyntaxHighlighter/Styles/SyntaxHighlighter.css
old mode 100644
new mode 100755
diff --git a/demos/fancy.html b/demos/fancy.html
index 3f7966b..66043d7 100755
--- a/demos/fancy.html
+++ b/demos/fancy.html
@@ -190,7 +190,7 @@
 </head>
 <body>
         
-            
+    <h2>Always stop at 1234567</h2>
     <div class="fancy">
         <ul class="slot">
             <!-- In reverse order so the 7s show on load -->
@@ -220,7 +220,9 @@
             easing : 'easeOutSine',
             time : 7000,
             loops : 6,
-            onStart : function() {
+            // new functionality : set final numbers
+            endsAt : [7, 6, 5, 4, 3, 2, 1],
+            onStart : function(jslot) {
                 $('.slot').removeClass('winner');
             },
             onWin : function(winCount, winners) {
diff --git a/demos/inifite-and-finalnumber.html b/demos/inifite-and-finalnumber.html
new file mode 100755
index 0000000..785cedf
--- /dev/null
+++ b/demos/inifite-and-finalnumber.html
@@ -0,0 +1,67 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<title>jSlots Slot Machine - Matthew Lein</title>
+
+<style type="text/css">
+
+
+ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+.jSlots-wrapper {
+    overflow: hidden;
+    height: 20px;
+    display: inline-block; /* to size correctly, can use float too, or width*/
+    border: 1px solid #999;
+}
+
+.slot {
+    float: left;
+}
+
+
+</style>
+
+</head>
+
+<body>
+	<h2>
+		This slot machine always stop at 123
+	</h2>
+    <ul class="slot">
+        <li>1</li>
+        <li>2</li>
+        <li>3</li>
+        <li>4</li>
+        <li>5</li>
+        <li>6</li>
+        <li>7</li>
+    </ul>
+    <input type="button" id="playNormal" value="play">
+
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
+    <script src="../jquery.easing.1.3.js" type="text/javascript" charset="utf-8"></script>
+    <script src="../jquery.jSlots.min.js" type="text/javascript" charset="utf-8"></script>
+    <script type="text/javascript" charset="utf-8">
+        
+        // normal example
+        $('.slot').jSlots({
+            spinner : '#playNormal',
+            winnerNumber : 7,
+			loops : 4,
+			minimumSpeed : 300,
+			// new functionality : allow it spins infinitely (the speed is stable at options.minimumSpeed after options.loops)
+			infinite : true,
+			// new functionality : stop the slot machine manually and set final number
+			onStart : function (jslot) { setTimeout(function () {jslot.stop([1, 2, 3]);}, 2000); }
+        });
+  
+    </script>
+    
+</body>
+</html>
diff --git a/index.html b/index.html
index 057e921..4582f47 100755
--- a/index.html
+++ b/index.html
@@ -244,10 +244,13 @@ <h2>Options</h2>
     spinEvent : 'click', // String: event to start slots on this event
     onStart : $.noop,    // Function: runs on spin start,
     onEnd : $.noop,      // Function: run on spin end. It is passed (finalNumbers:Array). finalNumbers gives the index of the li each slot stopped on in order.
-    onWin : $.noop,      // Function: run on winning number. It is passed (winCount:Number, winners:Array, finalNumbers:Array)
-    easing : 'swing',    // String: easing type for final spin. I recommend the easing plugin and easeOutSine, or an easeOut of your choice.
+    onWin : $.noop,      // Function: run on winning number. It is passed (winCount:Number, winners:Array)
+    easing : 'swing',    // String: easing type for final spin
     time : 7000,         // Number: total time of spin animation
-    loops : 6            // Number: times it will spin during the animation
+    loops : 6,           // Number: times it will spin during the animation (or times it will spin to get to minimumSpeed in infinite mode)
+    minimumSpeed : 1000, // Number: minimum speed the slot can spin (works only in infinite mode)
+    infinite : false,    // Boolean: if it spins infinitely
+    endsAt : []          // Array: manually set final numbers
 };</pre>
 
         <h2 id="scroll_to_here">Usage</h2>
@@ -293,6 +296,22 @@ <h2 id="scroll_to_here">Usage</h2>
         winnerNumber : 7
     });
 
+&lt;/script&gt;</pre>
+
+        <p>You can spin it infinitely, and stop it manually</p>
+
+        <pre name="code" class="html">
+&lt;script type="text/javascript" charset="utf-8"&gt;
+
+    $('.slot').jSlots({
+        spinner : '#playBtn',
+        winnerNumber : 7,
+        infinite : true,
+        onStart : function (jslot) {
+            setTimeout(function() { jslot.stop([1, 2, 3, 4, 5, 6, 7]); }, 2000);
+        }
+    });
+
 &lt;/script&gt;</pre>
 
         <p>Styling is up to you, but jSlots supplies a jSlots-wrapper div around your lists that should get overflow: hidden and a height set on it. Here are some recommended styles:</p>
diff --git a/jquery.easing.1.3.js b/jquery.easing.1.3.js
old mode 100644
new mode 100755
diff --git a/jquery.jSlots.js b/jquery.jSlots.js
old mode 100644
new mode 100755
index eda376c..cd67768
--- a/jquery.jSlots.js
+++ b/jquery.jSlots.js
@@ -42,7 +42,10 @@
             onWin : $.noop,      // Function: run on winning number. It is passed (winCount:Number, winners:Array)
             easing : 'swing',    // String: easing type for final spin
             time : 7000,         // Number: total time of spin animation
-            loops : 6            // Number: times it will spin during the animation
+            loops : 6,           // Number: times it will spin during the animation (or times it will spin to get to minimumSpeed in infinite mode)
+			minimumSpeed : 1000, // Number: minimum speed the slot can spin (works only in infinite mode)
+			infinite : false,    // Boolean: if it spins infinitely
+            endsAt : []          // Array: manually set final numbers
         };
 
         // --------------------------------------------------------------------- //
@@ -87,8 +90,20 @@
 
             base.listHeight = base.$liHeight * base.liCount;
 
-            base.increment = (base.options.time / base.options.loops) / base.options.loops;
-
+			// default increment speed
+			
+			if (base.isInfinite()) {
+				
+				// the slots take options.loops loops to get to its minimum speed
+				base.increment = base.options.minimumSpeed / (base.options.loops - 1);
+				
+			} else {
+				
+				// lower speed when number of loops is finite
+				base.increment = (base.options.time / base.options.loops) / base.options.loops;
+			
+			}
+			
             $list.css('position', 'relative');
 
             $li.clone().appendTo($list);
@@ -103,7 +118,18 @@
                 base.allSlots.push( new base.Slot() );
             }
 
+            // set final numbers
+            if (!$.isEmptyObject(base.options.endsAt)) {
+                $.each(base.allSlots, function(index, val) {
+                    val.endNum = base.options.endsAt[index];
+                    val.isSpinning = false;
+                }); 
+            }
         };
+		
+		base.isInfinite = function () {
+			return base.options.infinite;
+		};
 
         base.bindEvents = function() {
             $(base.options.spinner).bind(base.options.spinEvent, function(event) {
@@ -112,16 +138,39 @@
                 }
             });
         };
+		
+		base.stop = function (idx) {
+		
+			if ($.isArray(idx)) {
+			
+				$.each(base.allSlots, function(index, val) {
+					val.endNum = idx[index];
+					val.isSpinning = false;
+				});
+				
+			} else {
+			
+				$.each(base.allSlots, function(index, val) {
+					if (idx) {
+						val.endNum = idx;
+					}
+					val.isSpinning = false;
+				});
+				
+			}			
+		};
 
         // Slot contstructor
         base.Slot = function() {
-
+		
             this.spinSpeed = 0;
             this.el = base.$el.clone().appendTo(base.$wrapper)[0];
             this.$el = $(this.el);
             this.loopCount = 0;
             this.number = 0;
-
+			this.isSpinning = true;
+			delete this.endNum;
+			
         };
 
 
@@ -142,10 +191,15 @@
 
             lowerSpeed : function() {
 
-                this.spinSpeed += base.increment;
-                this.loopCount++;
+				if (!base.isInfinite() || this.loopCount <= base.options.loops) {
+				
+					this.spinSpeed += base.increment;
+				
+				}
 
-                if ( this.loopCount < base.options.loops ) {
+                this.loopCount++;
+                
+                if (this.isSpinning && (base.isInfinite() || this.loopCount < base.options.loops )) {
 
                     this.spinEm();
 
@@ -160,8 +214,11 @@
             finish : function() {
 
                 var that = this;
-
-                var endNum = base.randomRange( 1, base.liCount );
+				var endNum = base.randomRange( 1, base.liCount );
+				
+				if (this.endNum) {
+					endNum = this.endNum;
+				}
 
                 var finalPos = - ( (base.$liHeight * endNum) - base.$liHeight );
                 var finalSpeed = ( (this.spinSpeed * 0.5) * (base.liCount) ) / endNum;
@@ -169,6 +226,7 @@
                 that.$el
                     .css( 'top', -base.listHeight )
                     .animate( {'top': finalPos}, finalSpeed, base.options.easing, function() {
+						that.isSpinning = false;
                         base.checkWinner(endNum, that);
                     });
 
@@ -222,12 +280,13 @@
             base.winners = [];
 
             if ( $.isFunction(base.options.onStart) ) {
-                base.options.onStart();
+                base.options.onStart(base);
             }
 
             $.each(base.allSlots, function(index, val) {
                 this.spinSpeed = 0;
                 this.loopCount = 0;
+				this.isSpinning = true;
                 this.spinEm();
             });
 
diff --git a/jquery.jSlots.min.js b/jquery.jSlots.min.js
old mode 100644
new mode 100755
index 49efa0d..e10eed3
--- a/jquery.jSlots.min.js
+++ b/jquery.jSlots.min.js
@@ -7,4 +7,4 @@
  * Requires: jQuery v1.4.1 or later
  */
 
-(function(a){a.jSlots=function(c,b){var d=this;d.$el=a(c);d.el=c;d.$el.data("jSlots",d);d.init=function(){d.options=a.extend({},a.jSlots.defaultOptions,b);d.setup();d.bindEvents();};a.jSlots.defaultOptions={number:3,winnerNumber:1,spinner:"",spinEvent:"click",onStart:a.noop,onEnd:a.noop,onWin:a.noop,easing:"swing",time:7000,loops:6};d.randomRange=function(e,f){return Math.floor(Math.random()*(1+f-e))+e;};d.isSpinning=false;d.spinSpeed=0;d.winCount=0;d.doneCount=0;d.$liHeight=0;d.$liWidth=0;d.winners=[];d.allSlots=[];d.setup=function(){var e=d.$el;var g=e.find("li").first();d.$liHeight=g.outerHeight();d.$liWidth=g.outerWidth();d.liCount=d.$el.children().length;d.listHeight=d.$liHeight*d.liCount;d.increment=(d.options.time/d.options.loops)/d.options.loops;e.css("position","relative");g.clone().appendTo(e);d.$wrapper=e.wrap('<div class="jSlots-wrapper"></div>').parent();d.$el.remove();for(var f=d.options.number-1;f>=0;f--){d.allSlots.push(new d.Slot());}};d.bindEvents=function(){a(d.options.spinner).bind(d.options.spinEvent,function(e){if(!d.isSpinning){d.playSlots();}});};d.Slot=function(){this.spinSpeed=0;this.el=d.$el.clone().appendTo(d.$wrapper)[0];this.$el=a(this.el);this.loopCount=0;this.number=0;};d.Slot.prototype={spinEm:function(){var e=this;e.$el.css("top",-d.listHeight).animate({top:"0px"},e.spinSpeed,"linear",function(){e.lowerSpeed();});},lowerSpeed:function(){this.spinSpeed+=d.increment;this.loopCount++;if(this.loopCount<d.options.loops){this.spinEm();}else{this.finish();}},finish:function(){var e=this;var g=d.randomRange(1,d.liCount);var f=-((d.$liHeight*g)-d.$liHeight);var h=((this.spinSpeed*0.5)*(d.liCount))/g;e.$el.css("top",-d.listHeight).animate({top:f},h,d.options.easing,function(){d.checkWinner(g,e);});}};d.checkWinner=function(f,g){d.doneCount++;g.number=f;if((a.isArray(d.options.winnerNumber)&&d.options.winnerNumber.indexOf(f)>-1)||f===d.options.winnerNumber){d.winCount++;d.winners.push(g.$el);}if(d.doneCount===d.options.number){var e=[];a.each(d.allSlots,function(h,i){e[h]=i.number;});if(a.isFunction(d.options.onEnd)){d.options.onEnd(e);}if(d.winCount&&a.isFunction(d.options.onWin)){d.options.onWin(d.winCount,d.winners,e);}d.isSpinning=false;}};d.playSlots=function(){d.isSpinning=true;d.winCount=0;d.doneCount=0;d.winners=[];if(a.isFunction(d.options.onStart)){d.options.onStart();}a.each(d.allSlots,function(e,f){this.spinSpeed=0;this.loopCount=0;this.spinEm();});};d.onWin=function(){if(a.isFunction(d.options.onWin)){d.options.onWin();}};d.init();};a.fn.jSlots=function(b){if(this.length){return this.each(function(){(new a.jSlots(this,b));});}};})(jQuery);
\ No newline at end of file
+(function($){$.jSlots=function(el,options){var base=this;base.$el=$(el);base.el=el;base.$el.data("jSlots",base);base.init=function(){base.options=$.extend({},$.jSlots.defaultOptions,options);base.setup();base.bindEvents();};$.jSlots.defaultOptions={number:3,winnerNumber:1,spinner:'',spinEvent:'click',onStart:$.noop,onEnd:$.noop,onWin:$.noop,easing:'swing',time:7000,loops:6,minimumSpeed:1000,infinite:false,endsAt:[]};base.randomRange=function(low,high){return Math.floor(Math.random()*(1+high-low))+low;};base.isSpinning=false;base.spinSpeed=0;base.winCount=0;base.doneCount=0;base.$liHeight=0;base.$liWidth=0;base.winners=[];base.allSlots=[];base.setup=function(){var $list=base.$el;var $li=$list.find('li').first();base.$liHeight=$li.outerHeight();base.$liWidth=$li.outerWidth();base.liCount=base.$el.children().length;base.listHeight=base.$liHeight*base.liCount;if(base.isInfinite()){base.increment=base.options.minimumSpeed/(base.options.loops-1);}else{base.increment=(base.options.time/base.options.loops)/base.options.loops;}$list.css('position','relative');$li.clone().appendTo($list);base.$wrapper=$list.wrap('<div class="jSlots-wrapper"></div>').parent();base.$el.remove();for(var i=base.options.number-1;i>=0;i--){base.allSlots.push(new base.Slot());}if(!$.isEmptyObject(base.options.endsAt)){$.each(base.allSlots,function(index,val){val.endNum=base.options.endsAt[index];val.isSpinning=false;});}};base.isInfinite=function(){return base.options.infinite;};base.bindEvents=function(){$(base.options.spinner).bind(base.options.spinEvent,function(event){if(!base.isSpinning){base.playSlots();}});};base.stop=function(idx){if($.isArray(idx)){$.each(base.allSlots,function(index,val){val.endNum=idx[index];val.isSpinning=false;});}else{$.each(base.allSlots,function(index,val){if(idx){val.endNum=idx;}val.isSpinning=false;});}};base.Slot=function(){this.spinSpeed=0;this.el=base.$el.clone().appendTo(base.$wrapper)[0];this.$el=$(this.el);this.loopCount=0;this.number=0;this.isSpinning=true;delete this.endNum;};base.Slot.prototype={spinEm:function(){var that=this;that.$el.css('top',-base.listHeight).animate({'top':'0px'},that.spinSpeed,'linear',function(){that.lowerSpeed();});},lowerSpeed:function(){if(!base.isInfinite()||this.loopCount<=base.options.loops){this.spinSpeed+=base.increment;}this.loopCount++;if(this.isSpinning&&(base.isInfinite()||this.loopCount<base.options.loops)){this.spinEm();}else{this.finish();}},finish:function(){var that=this;var endNum=base.randomRange(1,base.liCount);if(this.endNum){endNum=this.endNum;}var finalPos=-((base.$liHeight*endNum)-base.$liHeight);var finalSpeed=((this.spinSpeed*0.5)*(base.liCount))/endNum;that.$el.css('top',-base.listHeight).animate({'top':finalPos},finalSpeed,base.options.easing,function(){that.isSpinning=false;base.checkWinner(endNum,that);});}};base.checkWinner=function(endNum,slot){base.doneCount++;slot.number=endNum;if(($.isArray(base.options.winnerNumber)&&base.options.winnerNumber.indexOf(endNum)>-1)||endNum===base.options.winnerNumber){base.winCount++;base.winners.push(slot.$el);}if(base.doneCount===base.options.number){var finalNumbers=[];$.each(base.allSlots,function(index,val){finalNumbers[index]=val.number;});if($.isFunction(base.options.onEnd)){base.options.onEnd(finalNumbers);}if(base.winCount&&$.isFunction(base.options.onWin)){base.options.onWin(base.winCount,base.winners,finalNumbers);}base.isSpinning=false;}};base.playSlots=function(){base.isSpinning=true;base.winCount=0;base.doneCount=0;base.winners=[];if($.isFunction(base.options.onStart)){base.options.onStart(base);}$.each(base.allSlots,function(index,val){this.spinSpeed=0;this.loopCount=0;this.isSpinning=true;this.spinEm();});};base.onWin=function(){if($.isFunction(base.options.onWin)){base.options.onWin();}};base.init();};$.fn.jSlots=function(options){if(this.length){return this.each(function(){(new $.jSlots(this,options));});}};})(jQuery);
\ No newline at end of file
diff --git a/jslots.jquery.json b/jslots.jquery.json
old mode 100644
new mode 100755

From 0f39de1012e8124564f41da96199209d66786dce Mon Sep 17 00:00:00 2001
From: helei <heleifz@126.com>
Date: Fri, 7 Nov 2014 19:55:53 +0800
Subject: [PATCH 2/2] update readme

---
 README.md | 154 ++++++++++++++++++++++++++++++------------------------
 1 file changed, 86 insertions(+), 68 deletions(-)

diff --git a/README.md b/README.md
index 483bb1f..71e6324 100755
--- a/README.md
+++ b/README.md
@@ -1,69 +1,87 @@
-# jQuery jSlots
-
-jSlots is 2k of jQuery slot machine magic. It turns any list (`<ol>` or `<ul>`) into a slot machine!
-
-## Options
-
-These are the options, with their default values, and what they do
-
-    $.jSlots.defaultOptions = {
-        number : 3,          // Number: number of slots
-        winnerNumber : 1,    // Number or Array: list item number(s) upon which to trigger a win, 1-based index, NOT ZERO-BASED
-        spinner : '',        // CSS Selector: element to bind the start event to
-        spinEvent : 'click', // String: event to start slots on this event
-        onStart : $.noop,    // Function: runs on spin start,
-        onEnd : $.noop,      // Function: run on spin end. It is passed (finalNumbers:Array). finalNumbers gives the index of the li each slot stopped on in order.
-        onWin : $.noop,      // Function: run on winning number. It is passed (winCount:Number, winners:Array, finalNumbers:Array)
-        easing : 'swing',    // String: easing type for final spin. I recommend the easing plugin and easeOutSine, or an easeOut of your choice.
-        time : 7000,         // Number: total time of spin animation
-        loops : 6            // Number: times it will spin during the animation
-    };
-
-## Usage
-
-Attach jQuery (successfully tested down to v1.4.1)
-
-    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
-
-Attach jSlots plugin
-
-    <script src="jquery.jSlots.js" charset="utf-8"></script>
-
-Attach easing plugin (optional but HIGHLY recommended for nice animation)
-
-    <script src="jquery.easing.1.3.js" charset="utf-8"></script>
-
-Create a list and an element that will spin the slots
-
-    <ul class="slot">
-        <li>1</li>
-        <li>2</li>
-        <li>3</li>
-        <li>4</li>
-        <li>5</li>
-        <li>6</li>
-        <li>7</li>
-    </ul>
-
-    <!-- this button will start the spin -->
-    <input type="button" id="playBtn" value="play">
-
-Target the list and make it a jSlot!
-
-    <script type="text/javascript" charset="utf-8">
-
-        $('.slot').jSlots({
-            spinner : '#playBtn',
-            winnerNumber : 7
-        });
-
-    </script>
-
-Styling is up to you, but jSlots supplies a jSlots-wrapper div around your lists that should get `overflow: hidden` and a height set on it. Here are some recommended styles:
-
-    .jSlots-wrapper {
-        overflow: hidden; /* to hide the magic */
-        height: 20px; /* whatever the height of your list items are */
-        display: inline-block; /* to size width correctly, can use float too, or width*/
-        border: 1px solid #999;
+# jQuery jSlots
+
+jSlots is 2k of jQuery slot machine magic. It turns any list (`<ol>` or `<ul>`) into a slot machine!
+
+## Options
+
+These are the options, with their default values, and what they do
+
+    $.jSlots.defaultOptions = {  
+        number : 3,          // Number: number of slots  
+        winnerNumber : 1,    // Number or Array: list item number(s) upon which to trigger a win, 1-based index, NOT ZERO-BASED  
+        spinner : '',        // CSS Selector: element to bind the start event to  
+        spinEvent : 'click', // String: event to start slots on this event  
+        onStart : $.noop,    // Function: runs on spin start,  
+        onEnd : $.noop,      // Function: run on spin end. It is passed (finalNumbers:Array). finalNumbers gives the index of the li each slot stopped on in order.  
+        onWin : $.noop,      // Function: run on winning number. It is passed (winCount:Number, winners:Array)  
+        easing : 'swing',    // String: easing type for final spin  
+        time : 7000,         // Number: total time of spin animation  
+        loops : 6,           // Number: times it will spin during the animation (or times it will spin to get to minimumSpeed in infinite mode)  
+        minimumSpeed : 1000, // Number: minimum speed the slot can spin (works only in infinite mode)  
+        infinite : false,    // Boolean: if it spins infinitely  
+        endsAt : []          // Array: manually set final numbers  
+    };  
+
+## Usage
+
+Attach jQuery (successfully tested down to v1.4.1)
+
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
+
+Attach jSlots plugin
+
+    <script src="jquery.jSlots.js" charset="utf-8"></script>
+
+Attach easing plugin (optional but HIGHLY recommended for nice animation)
+
+    <script src="jquery.easing.1.3.js" charset="utf-8"></script>
+
+Create a list and an element that will spin the slots
+
+    <ul class="slot">
+        <li>1</li>
+        <li>2</li>
+        <li>3</li>
+        <li>4</li>
+        <li>5</li>
+        <li>6</li>
+        <li>7</li>
+    </ul>
+
+    <!-- this button will start the spin -->
+    <input type="button" id="playBtn" value="play">
+
+Target the list and make it a jSlot!
+
+    <script type="text/javascript" charset="utf-8">
+
+        $('.slot').jSlots({
+            spinner : '#playBtn',
+            winnerNumber : 7
+        });
+
+    </script>
+   
+You can spin it infinitely, and stop it manually
+
+	<script type="text/javascript" charset="utf-8">  
+
+        $('.slot').jSlots({  
+            spinner : '#playBtn',  
+            winnerNumber : 7,  
+            infinite : true,  
+            onStart : function (jslot) {  
+                setTimeout(function() { jslot.stop([1, 2, 3, 4, 5, 6, 7]); }, 2000);  
+            }  
+        });  
+
+    </script>  
+
+Styling is up to you, but jSlots supplies a jSlots-wrapper div around your lists that should get `overflow: hidden` and a height set on it. Here are some recommended styles:
+
+    .jSlots-wrapper {
+        overflow: hidden; /* to hide the magic */
+        height: 20px; /* whatever the height of your list items are */
+        display: inline-block; /* to size width correctly, can use float too, or width*/
+        border: 1px solid #999;
     }
\ No newline at end of file
