/*!
 * overflowMarquee Plugin for jQuery JavaScript Library
 * http://hackthetruth.org/
 *
 * Copyright (c) 2009 - 2011 Dakota Schneider
 * Dual licensed under the MIT and GPL licenses.
 *  - http://www.opensource.org/licenses/mit-license.php
 *  - http://www.gnu.org/copyleft/gpl.html
 *
 *
 * Author: Dakota A. Schneider
 * Version: 1.0.0
 * Date: 23st July 2011
 *
 * @requires: jquery.trueWidthWithStyle by Dakota Schneider
 *            from http://hackthetruth.org/
 *
 * @params: object[ speed, margin, auto ]
 *          speed: int  - speed at which the marquee should scroll
 *                        in pixels per second
 *          margin: int - distance in pixels between the beginning
 *                        and end of the marquee content loop
 *          auto: bool  - whether or not to animate automatically
 */

(function($){
    $.fn.overflowMarquee = function (settings) {
        var $marquee = this;

        // parameter defaults
        var defaultSettings = {
                speed  : 20,
                margin : 20,
                auto   : true
        };
        // Combine the defaults with the supplied settings
        settings = $.extend(defaultSettings,settings);
        // change speed into miliseconds
        settings.speed = parseInt(settings.speed*1000);
        
        function marqueeAnimator(id, settings, distance) {
            this.id = id;
            this.settings = settings;
            this.distance = distance;
            
            this.marquee = $("#overflowMarqueeWrap-"+this.id);
        }
        
        marqueeAnimator.prototype = {
            animateMarquee : function(stop) {
                // scope scope scope... this is for the animation callback
                var self = this;

                // re-set the margin
                this.marquee.css("margin-left", "0px");
                // animate the margin to "scroll" the text
                this.marquee.animate({"margin-left": -(this.distance)+"px"}, this.settings.time, 'linear', function(){ self.animateMarquee(); });
            },
            start : function() {
                this.marquee.stop();
                this.animateMarquee();
            },
            stop : function() {
                this.marquee.stop();
                this.marquee.css("margin-left", "0px");
            }
        };
        
        return this.each(function(){
            // a unique ID for each instance
            var id = parseInt(Math.random()*10000);

            // if the width of the content exceeds the width of its container, move on
            if ($(this).trueWidthWithStyle() < $(this).width()) return true;
        
        
            // wrap up all the content to loop
            $(this).wrapInner("<div class='overflowMarqueeWrap' style='display: inline; margin-right: "+settings.margin+"px'></div>");
            
            // clone that content, so we can see the beginning before the end leaves the area
            // this makes the loop look nicer
            $(this).append($(this).find(".overflowMarqueeWrap").clone());
            
            // wrap up both of those, to animate the margin neatly and apply nice styles to
            $(this).wrapInner("<div class='overflowMarquee' id='overflowMarqueeWrap-"+id+"'style='overflow: hidden; text-overflow: ellipsis; font-size: inherit;'></div>");
            
            // figure out how far to scroll before looping
            distance = $(this).find('.overflowMarqueeWrap').width() + settings.margin;
            
            // adjust animation duration to make each marquee move at the same speed
            settings.time = (settings.speed/1000) * distance;

            // set up the marquee animator
            this.marquee = new marqueeAnimator(id, settings, distance);
            
            // scope again...
            var self = this;
            
            this.test = "TEST";
            
            if (settings.auto) {
                self.marquee.start();
                $(this).hover(function(){
                    self.marquee.stop();
                },function(){
                    self.marquee.start();
                });
            } else {
                $(this).hover(function(){
                    self.marquee.start();
                },function(){
                    self.marquee.stop();
                });
            }
        });
    };
})(jQuery);