/*
    Marquee
    Author: Caleb Kniffen (VML)
*/
$(document).ready(function(){
    $.fn.marquee = function(options){
        new Marquee(this, options);
        return $(this);
    }
    
    Marquee = function(element, options){
        this.options = $.extend(true, {}, Marquee.defaultOptions, options);
        var selectors = this.options.selectors;
        // caches elements and attaches event listeners
        $element = $(element);
        this.$itemsWrapper = $element.find(selectors.itemsWrapper);
        this.$items = $element.find(selectors.items);
        
        $element.find(selectors.prevArrow).click($.proxy(this, 'onPrevArrowClick'));
        $element.find(selectors.nextArrow).click($.proxy(this, 'onNextArrowClick'));
        
        this.$element = $element;
        // initializes count and current index
        this.count = this.$items.length;
        
        this.$itemsWrapper.width( this.count * this.options.width )
        this.currentIndex = 0;        
        
        if(this.options.useSkipToLinks){
            this.generateSkipToLinks();
        }
        this.slideShowEnabled = (this.options.timerDuration) ? true : false;
        
        if(this.slideShowEnabled){
            var instance = this;
            this.slideShowTimer = setInterval(function(){
                instance.next();
            }, this.options.timerDuration)
        }
    }
    
    $.extend(Marquee.prototype, {
        next : function(){
            var newIndex = this.currentIndex + 1;
            if(newIndex >= this.count){
                newIndex = 0;
            }
            
            this.skipTo(newIndex);
        },
        prev : function(){
            var newIndex = this.currentIndex - 1;
            if(newIndex < 0){
                newIndex = this.count - 1;
            }
            
            this.skipTo(newIndex);
        },
        skipTo: function(newIndex){
            // handles animation
            this.$itemsWrapper
                .stop(true, true)
                .animate({
                    left : -1 * (newIndex * 948)
                }, {
                    'easing' : 'easeInOutCirc',
                    duration : 2500            
                });
            
            // saves the newIndex as the currentIndex
            this.currentIndex = newIndex;
            
            // sets the correct skipTo link to its active state
            this.$skipToLinks
                .removeClass('active')
                .eq(newIndex).addClass('active');
        },
        generateSkipToLinks:function(){
    html = ['<ul class="clearfix" style="width:', this.count * 16, 'px">'];
            for(var i = 0; i < this.count; i++){
                    html.push('<li>');
                    html.push('    <a href="#" class="marquee-skip-to"></a>');
                    html.push('</li>');
            }
            html.push('</ul>');
            
            this.$skipToLinkWrapper = this.$element.find(this.options.selectors.skipToLinkWrapper);
      this.$skipToLinkWrapper.html(html.join(''));
            this.$skipToLinks = this.$skipToLinkWrapper.find('a');
            this.$skipToLinks.click($.proxy(this, 'onSkipToClick'));
            this.$skipToLinks.eq(0).addClass('active');
        }
    });
    
    /* DOM Event handlers */
    $.extend(Marquee.prototype, {
        /* Click handler for dot navigation */
        onSkipToClick: function(event){
            event.preventDefault();
            $target = $(event.target);
            newIndex = this.$skipToLinks.index($target);
            this.skipTo(newIndex);;
        },
        onPrevArrowClick: function(event){
            this.prev();
            this.slideShowEnabled = false;
            clearInterval(this.slideShowTimer);
        },
        onNextArrowClick: function(event){
            this.next();
            this.slideShowEnabled = false;
            clearInterval(this.slideShowTimer);
        }
    });
    
    Marquee.defaultOptions = {
        useSkipToLinks : true,
        
                timerDuration : 10500,
              
        width : 948,
        selectors : {
            items : '.marquee-items li',
            prevArrow : '.marquee-prev-arrow',
            nextArrow : '.marquee-next-arrow',
            itemsWrapper : '.marquee-items',
            skipToLinkWrapper : '.marquee-nav'
        }
    }
    
    $.easing.easeInOutCirc =  function (x, t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t*t + b;
        return c/2*((t-=2)*t*t + 2) + b;
    }
});