/**
* jquery.bandit.js
*
* Copyright (c) 2009 Zolv.com (http://www.zolv.com/)
* Licensed under the MIT License (http://www.opensource.org/licenses/mit-license.php)
* 
* @author Bear
*
* @projectDescription jQuery plugin for allowing a <div /> element that can display a given string (a score) like the reels of a one-armed bandit
*
* @version 0.1.0
* 
* @requires jquery.js (tested with 1.3.2)
*/

$.extend($.easing, {
    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 < 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;
    }
});

(function($) {

    $.bandit = function(el, options) {

        // set up the div
        var container = $(el);

        var totalReels = options.score.length

        // force width and height of the container
        container.css({
            "width": (totalReels * options.reelNumWidth) + "px",
            "height": options.reelNumHeight + "px"
        })

        // store score
        var spin = [];

        // returns a random stop time based on the original spin time
        function time() {
            return options.spinTime + parseInt(options.spinTime * Math.random());
        }

        // set up the timeouts for stopping the animation via increments rather than a for loop
        function setuptimeout(_reel) {

            if (_reel++ < totalReels - 1) {
                var id = window.setTimeout(function() { stop(_reel); }, time());
                setuptimeout(_reel);
            }

        }

        // stops the individual reels from spinning
        function stop(_reel) {

            var reel = container.find('.bandit-reel' + _reel);
            var reelNumber = reel.find('.bandit-reel-no');
            var reelAnim = reel.find('.bandit-reel-anim');

            // hide the animation
            reelAnim.hide();

            // bounce in the number
            reelNumber.animate({
                top: -((spin[_reel] * options.reelNumHeight)) + 'px'
            }, {
                duration: options.animDuration,
                easing: options.animType,
                complete: function() {

                }
            });

        }

        // initialise the chose div to display the reels
        function init() {

            var reelHtml = '';

            for (var i = 0; i < totalReels; i++) {

                // grab score
                spin[i] = options.score.charAt(i);

                // create the reels
                reelHtml += '<div class="bandit-reel' + i + ' bandit-reel">';
                reelHtml += '<img src="' + options.reelImg + '" alt="" class="bandit-reel-no" />';
                reelHtml += '<img src="' + options.reelAnim + '" alt="" class="bandit-reel-anim" />';
                reelHtml += '</div>';

            }

            // add the html for the reels
            container.html(reelHtml);

            for (var i = 0; i < totalReels; i++) {

                var reel = container.find(".bandit-reel" + i);

                // force position of the reel numbers
                reel.find(".bandit-reel-no").css({
                    "left": (i * options.reelNumWidth) + "px",
                    "top": -((spin[i] * options.reelNumHeight) + options.reelNumHeight) + "px"
                });

                // force position of the reel animation
                reel.find(".bandit-reel-anim").css({
                    "left": (i * options.reelNumWidth) + "px"
                });

            }

            // kick off animation
            setuptimeout(-1);

        }

        // init
        init();

    };

    $.fn.bandit = function(options) {

        options = options || {};

        // final score to display
        options.score = options.score || "9999";

        // image to use for the numbers on the reel
        options.reelImg = options.reelImg || '';

        // image to use for the spinning numbers animation
        options.reelAnim = options.reelAnim || '';

        // width of number (inc. background) on the reel
        options.reelNumWidth = options.reelNumWidth || 15;

        // height of number (inc. background) on the reel 
        options.reelNumHeight = options.reelNumHeight || 20;

        // time each reel should spin for
        options.spinTime = options.spinTime || 2000;

        // final animation and speed as the numbers come into view
        options.animSpeed = options.animDuration || 850;
        options.animType = options.animType || 'elasticOut';
        
        this.each(function() {
            new $.bandit(this, options);
        });

        return this;

    };



})(jQuery);