/**
 * @copyright Affinitive, LLC (support@beaffinitive.com)
 * @author Rob Marscher (rmarscher@beaffinitive.com)
 * @package Enclave
 */

/**
 * AffSlides
 * 
 * A jQuery extension that does a slideshow with a fade transition
 * (I think I might be reinventing the wheel here...)
 * 
 * HTML:
 *  <div id="mySlideshow">
 *    <div class="affslideContainer">
 *      <div class="affslide">
 *        1) something in here
 *      </div>
 *      <div class="affslide">
 *        2) something in here
 *      </div>
 *      <div class="affslide">
 *        3) something in here
 *      </div>
 *    </div>
 *    <div class="affslideNav">
 *      <div class="affslidePrev">&lt; Previous</div>
 *      <div class="affslideToc"></div>
 *      <div class="affslideNext">&gt; Next</div>
 *    </div>
 *  </div>
 * CSS:
 *   .affslideContainer {}
 *   .affslide {}
 *   .affslideNav {}
 *   .affslidePrev, .affslideNext {}
 *   .affslideToc {}
 * JS:
 *   jQuery('#mySlideshow').affSlides();
 *
 * @package Enclave
 */
jQuery.AffSlides = function(container) {
	this.container = jQuery(container);
};
jQuery.extend(jQuery.AffSlides, {
	prototype: {
		settings: {
			initialSlide: 1,
			tocHtml: '<a href="#" class="affslideTocElement button"></a>',
			transition: 'parallel'
		},
		initialize: function(settings) {
			var currentTocElement;
			jQuery.extend(this.settings, settings);
			this.slides = this.container.find('.affslide');
			this.totalSlides = this.slides.length;
			this.prevButton = this.container.find('.affslidePrev');
			this.prevButton.get(0).affSlides = this;
			this.prevButton.click(function() { this.affSlides.prev(); return false; });
			this.nextButton = this.container.find('.affslideNext');
			this.nextButton.get(0).affSlides = this;
			this.nextButton.click(function() { this.affSlides.next(); return false; });
			this.toc = this.container.find('.affslideToc');
			this.toc.html('');
			this.currentSlide = this.settings.initialSlide;
			if (this.currentSlide == 1) {
				this.prevButton.css('opacity',0.3);
			}
			if (this.currentSlide == this.totalSlides) {
				this.nextButton.css('opacity',0.3);
			}
			for (var i = 0; i < this.totalSlides; i++) {
				this.slides[i].affSlides = this;
				currentTocElement = jQuery(this.settings.tocHtml);
				this.toc.append(currentTocElement);
				currentTocElement.html(i + 1);
				currentTocElement.get(0).affslideNum = i + 1;
				currentTocElement.click(function() { this.affSlides.showSlide(this.affslideNum); return false; });
				currentTocElement.get(0).affSlides = this;
				if (i + 1 != this.currentSlide) {
					//if (this.settings.transition != 'parallel') {
						jQuery(this.slides[i]).hide();
					//}
				} else {
					currentTocElement.addClass('current');
				}
			}
			this.tocElements = this.toc.find('.affslideTocElement');
		},
		next: function() {
			var nextSlide = this.currentSlide + 1;
			if (nextSlide <= this.totalSlides) {
				this.showSlide(nextSlide);
			} else {
				this.nextButton.css('opacity',0.3);
			}
		},
		prev: function() {
			var prevSlide = this.currentSlide - 1;
			if (prevSlide >= 1) {
				this.showSlide(prevSlide);
			} else {
				this.prevButton.css('opacity',0.3);
			}
		},
		showSlide: function(slide) {
			if (this.currentSlide != slide) {
				if (this.settings.transition == 'parallel') {
					this._showSlideParallel(slide);
				} else {
					this._showSlideSeries(slide);
				}
			}
		},
		_showSlideParallel: function(slide) {
				jQuery(this.slides[this.currentSlide - 1]).fadeOut('slow');
					jQuery(this.slides[slide - 1]).fadeIn('slow');
					this.currentSlide = slide;
					if (this.currentSlide == this.totalSlides) {
						this.nextButton.css('opacity',0.3);
					} else {
						this.nextButton.css('opacity',1);
					}
					if (this.currentSlide == 1) {
						this.prevButton.css('opacity',0.3);
					} else {
						this.prevButton.css('opacity',1);
					}
					this.updateCurrentToc();
		},
		_showSlideSeries: function(slide) {
			jQuery(this.slides[this.currentSlide - 1]).fadeOut('fast', function() {
				jQuery(this.affSlides.slides[slide - 1]).fadeIn('slow');
				this.affSlides.currentSlide = slide;
				if (this.affSlides.currentSlide == this.affSlides.totalSlides) {
					this.affSlides.nextButton.css('opacity',0.3);
				} else {
					this.affSlides.nextButton.css('opacity',1);
				}
				if (this.affSlides.currentSlide == 1) {
					this.affSlides.prevButton.css('opacity',0.3);
				} else {
					this.affSlides.prevButton.css('opacity',1);
				}
				this.affSlides.updateCurrentToc();
			});
		},
		updateCurrentToc: function() {
			this.tocElements.removeClass('current');
			jQuery(this.tocElements[this.currentSlide - 1]).addClass('current');
		}
	}
});
      
/**
 * Extend jQuery so we can do something like this:
 * jQuery('div#whateverId').affSlides();
 */
jQuery.extend(jQuery.fn, {
	affSlides: function(settings) {
		var affSlide;
		this.each(function() {
			affSlide = new jQuery.AffSlides(this);
			jQuery(this).ready(function() {
				affSlide.initialize(settings);
			});
		});
	}
});