Looking for javascript people "spinner" effect
<p>I'm a newbie at javascript and mostly take a tutorial to make what I need. I want to make a spinner effect using people split into thirds. You hit a spin button, and different heads, middles and feet randomly match up.</p>

<p>I used the files from this example:
<a href="http://www.eyecon.ro/slotmachine/" rel="nofollow">http://www.eyecon.ro/slotmachine/</a></p>

<p>But all the javascript is for vertical "easing/bouncing" and not horizontal. I realize the code is a mess but I can't find any help on this so any feedback/suggestions would be greatly appreciated.</p>

<p>I've set up a test, <a href="http://mediapartners-inc.com/DevNew/" rel="nofollow">http://mediapartners-inc.com/DevNew/</a>, but as any of you will see, its all broken and not functioning properly.</p>

<p>Here is the code:</p>

<pre><code>&lt;script type="text/javascript"&gt;

(function($){
    var slotMachine = function() {
        var credits = 0,
            spinning = 3,
            spin = [0,0,0],
            slotsTypes = {
                'cherry': [2,5,10],
                'orange': [0,15,30],
                'prune': [0,40,50],
                'bell': [0,50,80],
                'bar1': [0,0,100],
                'bar2': [0,0,150],
                'bar3': [0,0,250],
                'seven': [0,0,500],
                'anybar': [0,0,80]
            },
            slots = [
                ['orange','bell','orange','bar2','prune','orange'],
                ['chery','prune','orange','bell','bar1','cherry'],
                ['cherry','orange','bell','prune','bar2','cherry']
            ],

            startSlot = function() {
                credits = 15;
                spinning = false;
                $('#slotSplash').animate({top: -130}, 1000, 'bounceOut');
                $('#slotTrigger').removeClass('slotTriggerDisabled');
                this.blur();
                return false;
            },
            endSlot = function() {
                $('#slotSplash').animate({top: 0}, 1000, 'bounceOut');
            },
            addCredit = function(incrementCredits) {
                var currentCredits = credits;
                credits += incrementCredits;
                $('#slotCredits')
                    .css('credit', 0)
                    .animate({
                        credit: incrementCredits
                    },{
                        duration: 400 + incrementCredits,
                        easing: 'easeOut',
                        step: function (now) {
                            $(this).html(parseInt(currentCredits + now, 10));
                        },
                        complete: function() {
                            $(this).html(credits);
                        }
                    });
            },
            spin = function() {
                this.blur();
                if (spinning == false) {
                    spinning = 3;
                    credits --;
                    $('#slotCredits').html(credits);
                    spin[0] = parseInt(Math.random() * 23);
                    spin[1] = parseInt(Math.random() * 23);
                    spin[2] = parseInt(Math.random() * 23);
                    $('#slotTrigger').addClass('slotTriggerDisabled');
                    $('img.slotSpinAnimation').show();
                    $('#wheel1 img:first');
                    $('#wheel2 img:first');
                    $('#wheel3 img:first');
                    setTimeout(function(){
                        stopSpin(1);
                    }, 1500 + parseInt(1500 * Math.random()));
                    setTimeout(function(){
                        stopSpin(2);
                    }, 1500 + parseInt(1500 * Math.random()));
                    setTimeout(function(){
                        stopSpin(3);
                    }, 1500 + parseInt(1500 * Math.random()));
                }
                return false;
            },
            stopSpin = function(slot) {
                $('#wheel' + slot)
                    .find('img:last')
                        .hide()
                        .end()
                    .find('img:first')
                        .animate({
                            top: + spin[slot + 1] * 32
                        },{
                            duration: 500,
                            easing: 'elasticOut',
                            complete: function() {
                                spinning --;
                                if (spinning == 0 ) {
                                    endSpin();
                                }
                            }
                        });
            },
            endSpin = function() {
                var slotType = slots[0][spin[0]],
                    matches = 1,
                    barMatch = /bar/.test(slotType) ? 1 : 0,
                    winnedCredits = 0,
                    waitToSpin = 10;
                if ( slotType == slots[1][spin[1]]) {
                    matches ++;
                    if ( slotType == slots[2][spin[2]]) {
                        matches ++;
                    } else if (barMatch !=0 &amp;&amp; /bar/.test(slots[2][spin[2]])) {
                        barMatch ++;
                    }
                } else if (barMatch != 0 &amp;&amp; /bar/.test(slots[1][spin[1]])) {
                    barMatch ++;
                    if (/bar/.test(slots[2][spin[2]])) {
                        barMatch ++;
                    }
                }
                if (matches != 3 &amp;&amp; barMatch == 3) {
                    slotType = 'anybar';
                    matches = 3;
                }

                var winnedCredits = slotsTypes[slotType][matches-1];

                if (winnedCredits &gt; 0) {
                    addCredit(winnedCredits);
                    waitToSpin = 410 + winnedCredits;
                }
                setTimeout(function() {
                    if (credits == 0) {
                        setTimeout(function() {
                            endSlot();
                        }, 1000);
                    } else {
                        $('#slotTrigger').removeClass('slotTriggerDisabled');
                        spinning = false;
                    }
                }, waitToSpin);
            };
        return {
            init: function() {
                $('#slotSplash a').bind('click', startSlot);
                $('#slotTrigger')
                    .bind('mousedown', function(){
                        $(this).addClass('slotTriggerDown');
                    })
                    .bind('click', spin);
                $(document).bind('mouseup', function(){
                    $('#slotTrigger').removeClass('slotTriggerDown');
                });
                $('#wheel1 img:first').css('top', + (parseInt(Math.random() * 23) * 32) + 'px');
                $('#wheel2 img:first').css('top', + (parseInt(Math.random() * 23) * 32) + 'px');
                $('#wheel3 img:first').css('top', + (parseInt(Math.random() * 23) * 32) + 'px');
            }
        };
    }();
    $.extend($.easing,{
        bounceOut: function (x, t, b, c, d) {
            if ((t/=d) &lt; (1/2.75)) {
                return c*(7.5625*t*t) + b;
            } else if (t &lt; (2/2.75)) {
                return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
            } else if (t &lt; (2.5/2.75)) {
                return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
            } else {
                return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
            }
        },
        easeOut:function (x, t, b, c, d) {
            return -c *(t/=d)*(t-2) + b;
        },
        elasticOut: function (x, t, b, c, d) {
            var s=1.70158;var p=0;var a=c;
            if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
            if (a &lt; Math.abs(c)) { a=c; var s=p/4; }
            else var s = p/(2*Math.PI) * Math.asin (c/a);
            return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
        }
    });
    $(document).ready(slotMachine.init);
})(jQuery);

&lt;/script&gt;

&lt;body&gt;

&lt;div id="slotMachine"&gt;

        &lt;div id="wheel1" class="wheel"&gt;
            &lt;img src="images/heads.gif" alt="" /&gt;
            &lt;img src="images/anim1.gif" alt="" class="slotSpinAnimation" /&gt;
 &lt;/div&gt;
        &lt;div id="wheel2" class="wheel"&gt;
            &lt;img src="images/middle.gif" alt="" /&gt;
            &lt;img src="images/anim2.gif" alt="" class="slotSpinAnimation" /&gt;
        &lt;/div&gt;
        &lt;div id="wheel3" class="wheel"&gt;

            &lt;img src="images/bottoms.gif" alt="" /&gt;
            &lt;img src="images/anim3.gif" alt="" class="slotSpinAnimation" /&gt;
        &lt;/div&gt;
                &lt;a href="#" id="slotTrigger"&gt;spin&lt;/a&gt;
&lt;p id="slotSplash"&gt;
            &lt;a href="#"&gt;start&lt;/a&gt;
        &lt;/p&gt;
    &lt;/div&gt;
</code></pre>

<p>This portion of the code I do not understand. It's creating a vertical bounce and I would like it to be horizontal. </p>

<pre><code> $.extend($.easing,{
    bounceOut: function (x, t, b, c, d) {
        if ((t/=d) &lt; (1/2.75)) {
            return c*(7.5625*t*t) + b;
        } else if (t &lt; (2/2.75)) {
            return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
        } else if (t &lt; (2.5/2.75)) {
            return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
        } else {
            return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
        }
    },
    easeOut:function (x, t, b, c, d) {
        return -c *(t/=d)*(t-2) + b;
    },
    elasticOut: function (x, t, b, c, d) {
        var s=1.70158;var p=0;var a=c;
        if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
        if (a &lt; Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
</code></pre>

<p>I believe these variables are controlling that but don't understand it to edit it. Somehow, when the bounce finishes, an inline element style applies a negative top number and I can't figure out where in the javascript its telling it to do that to correct it.</p>
