// Tour page slider
var tourSlideshow = {
    context: false,
    slides: false,
    pager: false,
    pagerButtons: false,
    next: false,
    prev: false,
    startingSlide: 0,

    init: function() {
        this.context = $('#tour');
        this.slides = $('div.slides > ul', this.context);
        this.pager = $('div.slides-nav > ul', this.context);
        this.pagerButtons = this.pager.children();
        this.next = $('li.right a.btn', this.context).not('.highlight');
        this.prev = $('li.left a.btn', this.context);

        // prepare slideshow
        this.prepareSlideshow();
        // prepare pager left/right scroller buttons
        this.preparePagerScrollbarButtons(6);
    },

    prepareSlideshow: function() {
		
        // show next and prev buttons at top
        // and bottom of the page
        this.context.children('.button-strip:first').removeClass('hide');
        this.context.find('.button-strip:last li').removeClass('hide');

        // prepare thumbnail buttons
        this.prepareSlideshowPager();

        // attach cycle event to slides
        this.slides.cycle({
            timeout: 0,
            speed: 1000,
            fastOnEvent: 1000,
            fx: 'scrollHorz',
            startingSlide: tourSlideshow.startingSlide,
            after: function() {
                // show video when slide has finished sliding in
                $('object', tourSlideshow.context).removeClass('hide');
            }
			
        });

        // prepare slideshow next/prev buttons
        this.prepareSlideshowNextPrevButtons();
		
		
    },

    prepareSlideshowPager: function() {
        var slide = '';
        var clone = {};

        this.pagerButtons.each(function(i, val) {
            slide = tourSlideshow.getSlideId($(this).children('a').attr('href'));
			
            // append empty slides to match number of buttons
            // so that we can load content into them later
            if($('#' + slide).length === 0) 
			{
                tourSlideshow.slides.append('<li id="' + slide + '" class="slide"></li>');
              // alert(slide)
            }
			else 
			{
				// user is loading a particular slide page directly
                // so set this as the starting slide
                tourSlideshow.startingSlide = 0;
                tourSlideshow.pagerButtons.eq(0).addClass('on');
                
                //alert(slide + i)

                // re-append it so that it is in the right
                // order in the DOM
                // clone = $('#' + slide).clone(); NOT WORKING IN IE7
                clone = $('#' + slide).wrap('<div></div>').parent().html();
                $('#' + slide).parent().remove();
                tourSlideshow.slides.append(clone);
				
            }

            // prepare click event and overlay
            // for thumbnails
            $(this).find('a').append($('<span class="overlay"></span>').css('opacity', '0.2'));
            $(this).click(function(e) {
                slide = tourSlideshow.getSlideId($(this).children('a').attr('href'));

                tourSlideshow.loadSlide(i, slide);
                e.preventDefault();
            });
        });
    },

    preparePagerScrollbarButtons: function(scrollAmount) {
        scrollAmount = scrollAmount || 1;

        var scrollbarButtonClick = function(forward, el) {
            if(el.hasClass('left-disabled') || el.hasClass('right-disabled')) {
                return;
            }

            var position = parseInt(tourSlideshow.pagerButtons.eq(0).css('left').replace('px', ''), 10);
            var scrollTo = position;
            var speed = 1000;
            var pager = tourSlideshow.pager;

            if(forward) {
                var remainder = pager.data('totalWidth') - (Math.abs(position) + pager.data('visibleWidth'));
                scrollTo = position - pager.data('scrollPx');

                if(remainder < Math.abs(scrollTo)) {
                    scrollTo = position - remainder;
                    speed = 500;
                }
            } else {
                scrollTo = position + pager.data('scrollPx');

                if(scrollTo > 0) {
                    scrollTo = 0;
                    speed = 500;
                }
            }

            // scroll thumbnails if they aren't already scrolling
            if(tourSlideshow.pagerButtons.eq(0).is(':animated') === false) {
                tourSlideshow.pagerButtons.animate(
                    {'left': scrollTo + 'px'},
                    {queue: false, duration: speed},
                    tourSlideshow.updatePagerScrollbarButtons(scrollTo)
                );
            }
        }

        // create left scrollbar button
        this.pager.data('scrollLeft', $('<span class="btn-left"></span>')
        .bind('click', function(e) { scrollbarButtonClick(0, $(this)); }));

        // create right scrollbar button
        this.pager.data('scrollRight', $('<span class="btn-right"></span>')
        .bind('click', function(e) { scrollbarButtonClick(1, $(this)); }));

        // append scrollbar buttons to pager
        this.pager.parent()
        .append(this.pager.data('scrollLeft'))
        .append(this.pager.data('scrollRight'));

        // set width of pager to total width of thumbnails
        // and wrap an overflow div around the pager
        this.pager.css('width', (tourSlideshow.pagerButtons.width()*tourSlideshow.pagerButtons.length)+20)
        .wrap($('<div></div>'));

        // set some pager data for use later
        this.pager.data('totalWidth', tourSlideshow.pagerButtons.width()*tourSlideshow.pagerButtons.length)
        .data('visibleWidth', this.pager.parent().width())
        .data('scrollPx', tourSlideshow.pagerButtons.width()*scrollAmount);

        // enable/disable scrollbar buttons as necessary
        this.updatePagerScrollbarButtons();
    },

    prepareSlideshowNextPrevButtons: function() {
        // prepare click event for next/prev buttons
        var nextPrevButtonClick = function(forward, el) {
            if(el.children('span:eq(0)').hasClass('disabled')) {
                return;
            }

            var visible = $('li.slide:visible', tourSlideshow.context);

            if(visible.length > 1 && forward) {
                visible = visible.eq(1);
            }

            var i = $('li.slide', tourSlideshow.context).index(visible);
            var remainder = i;

            if(forward) {
                i = i + 1;
                remainder = i + 1;
            } else {
                i = i - 1;
                remainder = i - 1;
            }

            var slide = tourSlideshow.getSlideId(tourSlideshow.pagerButtons.eq(i).children('a').attr('href'));
            tourSlideshow.loadSlide(i, slide);
        }

        this.next.click(function(e) {
            nextPrevButtonClick(1, $(this));
            e.preventDefault();
        });

        this.prev.click(function(e) {
            nextPrevButtonClick(0, $(this));
            e.preventDefault();
        });

        this.updateSlideshowNextPrevButtons(this.startingSlide);
    },

    updatePagerScrollbarButtons: function(scrollTo) {
        scrollTo = scrollTo || 0;

        var leftDisabled = this.pager.data('scrollLeft').hasClass('left-disabled');
        var rightDisabled = this.pager.data('scrollRight').hasClass('right-disabled');

        // enable left button
        if(scrollTo < 0 && leftDisabled) {
            this.pager.data('scrollLeft').removeClass('left-disabled');
        }

        // disable left button
        if(scrollTo === 0 && !leftDisabled) {
            this.pager.data('scrollLeft').addClass('left-disabled');
        }

        // enable right button
        if((this.pager.data('totalWidth')-Math.abs(scrollTo)) > this.pager.data('scrollPx') && rightDisabled) {
            this.pager.data('scrollRight').removeClass('right-disabled');
        }

        // disable right button
        if((this.pager.data('totalWidth')-Math.abs(scrollTo)) <= this.pager.data('visibleWidth') && !rightDisabled) {
           this.pager.data('scrollRight').addClass('right-disabled');
        }
    },

    updateSlideshowNextPrevButtons: function(visible) {
        visible = visible || 0;

        // enable/disable next button
        if((visible+1) === this.slides.children().length) {
            this.next.each(function(i, val) {
                $(this).children('span:eq(0)').addClass('disabled');
            });
        } else {
            this.next.each(function(i, val) {
                $(this).children('span:eq(0)').removeClass('disabled');
            });
        }

        // enable/disable prev button
        if(visible === 0) {
            this.prev.each(function(i, val) {
                $(this).children('span:eq(0)').addClass('disabled');
            });
        } else {
            this.prev.each(function(i, val) {
                $(this).children('span:eq(0)').removeClass('disabled');
            });
        }
    },

    loadSlide: function(i, slide) {
        el = $('#' + slide);

        if(el.length === 0) {
            return false;
        }

        var scroll = function() {
            tourSlideshow.resizePage(el);

            // hide all vimeo videos
            $('object', this.context).addClass('hide');

            // go to relevant slide
            tourSlideshow.slides.cycle(i);

            // stop loading spinner
            tourSlideshow.pagerButtons.eq(i).find('.overlay')
            .removeClass('loading').css('opacity', '0.2');

            // add class to active thumbnail
            tourSlideshow.pagerButtons.removeClass('on');
            tourSlideshow.pagerButtons.eq(i).addClass('on');

            // enable/disable next/prev buttons
            tourSlideshow.updateSlideshowNextPrevButtons(i);
        };

        if(el.children().length > 0) {
            scroll();
        } else {
            // show loading spinner
            this.pagerButtons.eq(i).find('.overlay')
            .addClass('loading').css('opacity', '0.7');                
            el.load('/product-tour/' + slide + '/#' + slide, {}, function() {
                var contents = el.children().contents();
                el.children().remove().end().append(contents);					
                scroll();
            });			
        }                

        return true;
    },

    getSlideId: function(location) {
        var el = location.split('/');

        if((el[el.length-1] == '')) {
            el = el[el.length-2];
        } else {
            el = el[el.length-1];
        }

        return el;
    },

    resizePage: function(slide) {
        // animate page height to match height of slide
        // if they don't currently match
        if(tourSlideshow.slides.height() != slide.height()) {
            tourSlideshow.slides.animate({'height': slide.height()}, 500);
        }
    }
};