﻿var testimonialEndPointUrl = '/api/v1_0/eventEdition/testimonials/{0}/{1}';

var testimonialScroller = function(container, testimonials, o) {
    this.init(container, testimonials, o);
}
jQuery.extend(testimonialScroller.prototype, {
    container: null,
    scroller: null,
    options: null,
    testimonials: null,
    currentIndex: -1,

    init: function(container, testimonials, o) {
        // Default configuration properties       
        var defaults = {};
        // Cache references to key DOM elements
        this.container = container;

        this.options = jQuery.extend({}, defaults, o || {});

        var _self = this;

        // Initialise testimonial array then rip all the testimonials out of the DOM and store then in the list we will scroll through
        this.testimonials = [];
        jQuery('li', testimonials).each(function(index) {
            _self.testimonials[index] = {};
            _self.testimonials[index].quote = jQuery('q p', this).text();
            _self.testimonials[index].cite = jQuery('cite', this).text();
        });

        if (this.testimonials.length == 0) {
            return;
        }

        // Create scrolling div
        jQuery(container).append('<div id="testimonial-scroller"></div>');

        this.scroller = jQuery('#testimonial-scroller', container)

        jQuery(testimonials).css('display', 'none');
        // TODO This is a hack. We are assuming there is a parent that 
        // we can safely hide and we are hiding in a non-accessible way
        jQuery(testimonials).parent().css('display', 'none');

        // Create a q element inside the scroller.
        jQuery(this.scroller).append('<q><p></p><cite></cite></q>');

        this.loadTestimonial(1, -1);

        this._ensureCorrectPagingUI();

    },

    loadTestimonial: function(direction, currentIndex) {
        // Get data for next testimonial
        var testimonial = this.testimonials[currentIndex + direction]

        // Start transitioning old testimonial out

        // Hide buttons during transition
        jQuery('.action', this.scroller).css('display', 'none');

        var _self = this;

        jQuery('q', this.scroller).css('position', 'relative')

        if (direction > 0) {
            jQuery('q', this.scroller).animate({ 'left': '-=640' }, 'slow', 'swing',
                    function() {
                        // Update the DOM
                        jQuery('q p', _self.scroller).text(testimonial.quote);
                        jQuery('q cite', _self.scroller).text(testimonial.cite);

                        // Update index. Note the direction is -1 or 1
                        _self.currentIndex = _self.currentIndex + direction
                        _self._ensureCorrectPagingUI();

                        // Now that the new text has been inserted bring the text back in from the other side
                        jQuery('q', _self.scroller).css('left', 640);
                        jQuery('q', _self.scroller).animate({ left: '-=640' }, 'slow', 'swing',
                        function() {
                            // Bring back paging buttons
                            jQuery('.action', _self.scroller).css('display', 'block');
                        });
                    })

        }
        else {
            jQuery('q', this.scroller).animate({ 'left': '+=640' }, 'slow', 'swing',
                    function() {
                        // Update the DOM
                        jQuery('q p', _self.scroller).text(testimonial.quote);
                        jQuery('q cite', _self.scroller).text(testimonial.cite);

                        // Update index. Note the direction is -1 or 1
                        _self.currentIndex = _self.currentIndex + direction
                        _self._ensureCorrectPagingUI();

                        // Now that the new text has been inserted bring the text back in from the other side
                        jQuery('q', _self.scroller).css('left', -640);
                        jQuery('q', _self.scroller).animate({ left: '+=640' }, 'slow', 'swing',
                        function() {
                            // Bring back paging buttons
                            jQuery('.action', _self.scroller).css('display', 'block');
                        });
                    })
        }

    },

    _ensureCorrectPagingUI: function() {
        if (this.currentIndex + 1 < this.testimonials.length) {
            this._ensureNextButton();
        }
        else {
            this._removeNextButton();
        }

        if (this.currentIndex > 0) {
            this._ensurePrevButton();
        }
        else {
            this._removePrevButton();
        }
    },

    _nextButtonClick: function(event) {
        var _self = event.data;

        _self.loadTestimonial(1, _self.currentIndex);

        event.preventDefault();
        event.stopPropagation();
    },

    _prevButtonClick: function(event) {
        var _self = event.data;
        _self.loadTestimonial(-1, _self.currentIndex);

        event.preventDefault();
        event.stopPropagation();
    },

    _ensurePrevButton: function() {
        if (jQuery('div.prev', this.scroller).length === 0) {
            // Create previous button
            jQuery('#testimonial-scroller').append('<div class="action prev"/>')
                                            .addClass('prev-button');
            jQuery('div.prev', this.scroller)
                .bind('click', this, this._prevButtonClick)
                .hover(
                        function() {
                            jQuery(this).addClass('hover');
                        },
                        function() {
                            jQuery(this).removeClass('hover');
                        }
                    );
        }
    },

    _ensureNextButton: function() {
        if (jQuery('div.next', this.scroller).length === 0) {
            // Create next button
            jQuery(this.scroller).append('<div class="action next"/>')
                                .addClass('next-button');
            jQuery('div.next', this.scroller)
                .bind('click', this, this._nextButtonClick)
                .hover(
                        function() {
                            jQuery(this).addClass('hover');
                        },
                        function() {
                            jQuery(this).removeClass('hover');
                        }
                    );

        }
    },

    _removePrevButton: function() {
        jQuery(this.scroller).removeClass('prev-button');
        jQuery('div.prev', this.scroller).remove();
    },

    _removeNextButton: function() {
        jQuery(this.scroller).removeClass('next-button');
        jQuery('div.next', this.scroller).remove();
    }


});

if (!window.Nova) { window['Nova'] = {}; };
if (!window.Nova.Controls) { window['Nova']['Controls'] = {}; };
window['Nova']['Controls']['TestimonialScroller'] = testimonialScroller;

