var AssurantHealth = window.AssurantHealth || {};

/*----------------------------------------------------------
 * Written by R/GA: Sharda Roodal
 *
 * Creates a rotating gallery that shows the contents of each 
 * ul.promoCollection li (or override with your own class with 
 * options) based on a timer. Create the following structure 
 * and initialize with the parent id:
 * 
 * <div id="parentID">
 * 	<ul class="promoCollection">
 * 		<li>Content to show</li>
 * 	</ul>
 * </div>
 * 
 * The gallery controls will be generated on initialization 
 * based on how many li elements are present.
---------------------------------------------------------*/

AssurantHealth.promotionGallery = (function(source,options) {
	this.autoRotate = true;
	this.globalViewTime = 8000;
	this.globalTransitionTime = 450;
	this.transitionTimeout = null;
	this.activeIndex = 0;
	this.isAnimating = false;
	this.slideClass = 'promoCollection';
	this.controlClass = 'promoControl';
	this.promoContainerClass = 'promoContainer';
	this.promoHeadlineClass = 'headline';
	this.activeClass = 'selected';
	this.init = function(source, options) {
		if (options) {
			options = jQuery.toJson(options);
			for (key in options) {
				this[key] = options[key];
			}
		}
		if (!document.getElementById(source)) {
			$('h1').before($('<div id="' + source + '" class="first section">'));
		}
		this.source = $('#' + source);
		//set up roles for dom elements, who is who
		this.slideContainer = $("ul."+ this.slideClass);
		this.slides = $('li', this.slideContainer);
		this.slideContainer.appendTo(this.source);
		this.promoLength = this.slides.length;
		this.controller = this.createController();
		if (this.autoRotate) this.createTimer();
	}
	
	this.createController = function() {
		var container = $('<div class="'+ this.promoContainerClass +'"></div>').appendTo(this.source);
		var control = $('<ul class="'+ this.controlClass +'"></ul>');
		control.appendTo(container);
		var that = this;
		that.slides.each(function(index, tout) {
			var selected = "";
			if (index == that.activeIndex) {
				selected = that.activeClass;
				$(tout).addClass(that.activeClass);
			}
			var li = $('<li class="' + selected + '"></li>').appendTo(control);
			var a = $('<a class="galleryTrigger" href="javascript:void(0)"></a>').appendTo($(li));
			$(a).click(function() {
				if (that.activeIndex !== index) {
					that.clearTimer();
					that.goTo(index);
					that.createTimer();
				}
			});
		});
		
		return control;
	}
	
	this.createTimer = function() {
		var that = this;
		this.transitionTimeout = setInterval(function(){that.goTo(that.activeIndex+1)}, this.globalViewTime);
	}
	
	this.clearTimer = function() {
		window.clearTimeout(this.transitionTimeout);
		this.transitionTimeout = null;
	}
	
	this.goTo = function(index) {
		if (index == this.activeIndex) return false;
		var that = this;
		var oldIndex = this.activeIndex;
		//if the new active slide is higher than the total amount of slides, reset to 0
		this.activeIndex = index+1 > this.promoLength ? 0 : index;
		
		this.isAnimating = true;
		//fade out the active slide
		$(this.slides[oldIndex]).animate({'opacity': 0}, function() {
			$(that.slides[oldIndex]).removeClass(that.activeClass).removeAttr('style');
		});
		//set the new active slide to 0 opacity and show it, then fade in
		this.controller.children().removeClass(this.activeClass).slice(this.activeIndex,this.activeIndex+1).addClass(this.activeClass);
		var newActive = $(that.slides[this.activeIndex]).animate({'opacity': 0}, 0).addClass(this.activeClass);

		newActive.animate({'opacity': 1}, function() {
			newActive.removeAttr('style');
		});
		
		this.isAnimating = false;
	}
	
	this.init(source,options);
	return true;
});

$(function(){
	new AssurantHealth.promotionGallery('hero');
});