jQuery(function(){
	// Remove the react-slider-no-js class from the body
	jQuery("body").removeClass("react-slider-no-js");
	// Preloader
	jQuery(".react-slider").children('.panel').hide().end().prepend('<p class="loading">Loading...<br /><img src="/v/vspfiles/templates/ReactGear/images/ajax-loader.gif" alt="loading..." /></p>');
});

var sliderCount = 1;

jQuery.fn.reactSlider = function(settings) {

	settings = jQuery.extend({
		autoSlide: false,
		autoSlideInterval: 7000,
		autoSlideStopWhenClicked: true,
		crossLinking: true,
		dynamicTabs: true,
		externalTriggerSelector: "a.xtrig",
		firstPanelToLoad: 1,
		panelTitleSelector: "h2.title"
	}, settings);
	
	var old = false;
	
	return this.each(function(){
		
		var slider = jQuery(this);
		slider.find('.panel').css({ 'z-index':1,opacity:0,display:'none' }).bind('mouseover',function () {
			notAnimating = false;
		}).bind('mouseout',function () {
			notAnimating = true;
		});
		
		var notAnimating = true;
		var panelWidth = slider.find(".panel").width();
		var panelCount = slider.find(".panel").size();
		var panelContainerWidth = panelWidth*panelCount;
		var navClicks = 0; // Used if autoSlideStopWhenClicked = true
				
		// If the loaded URL has a hash (cross-linking), we're going to use that hash to give the slider a specific starting position...
		if (settings.crossLinking && location.hash && parseInt(location.hash.slice(1)) <= panelCount) {
			var currentPanel = parseInt(location.hash.slice(1));
		}
		else if(settings.firstPanelToLoad != 1 && settings.firstPanelToLoad <= panelCount) { 
			var currentPanel = settings.firstPanelToLoad;
		}
		else { 
			var currentPanel = 1;
		}
		jQuery('#slide'+currentPanel).css({opacity:100}).show();
		
		// If we need a dynamic menu
		if (settings.dynamicTabs) {
			var dynamicTabs = '<div class="react-nav" id="react-nav-' + sliderCount + '"><ul></ul></div>';
			//
			slider.parent().append(dynamicTabs);
			//
			ul = jQuery('#react-nav-' + sliderCount + ' ul');
			// Create the nav items
			jQuery('.panel', slider).each(function(n) {
				ul.append('<li class="tab' + (n+1) + '"><a href="#' + (n+1) + '">' + jQuery(this).find(settings.panelTitleSelector).text() + '</a></li>');												
			});
			//navContainerWidth = slider.width();// + slider.siblings('.react-nav-left').width() + slider.siblings('.react-nav-right').width();
			//ul.parent().css({ width: navContainerWidth });
		};
		
		
		// If we need a tabbed nav
		jQuery('#react-nav-' + sliderCount + ' a').each(function(z) {
			bind.apply(this,[z]);
		});
		
		function bind(z) {
			jQuery(this).bind("click",function() {
				if(currentPanel != (z+1) && notAnimating) {
					notAnimating = false;
					var a = this;
					jQuery(this).unbind('click');
					navClicks++;
					jQuery(this).addClass('current').parents('ul').find('a').not(jQuery(this)).removeClass('current');
					old = jQuery('#slide'+currentPanel).css({ 'z-index':1 }).animate({opacity:0},500,'swing',function () { old.hide(); });
					currentPanel = z + 1;
					jQuery('#slide'+currentPanel).show().css({ 'z-index':0 }).animate({opacity:100},500,'swing',function () { bind.apply(a,[z]);notAnimating=true; });
					clearInterval(timer);
					timer = setInterval(autoSlide,settings.autoSlideInterval);
				}
			});	
		}
		
		// Specify which tab is initially set to "current". Depends on if the loaded URL had a hash or not (cross-linking).
		if (settings.crossLinking && location.hash && parseInt(location.hash.slice(1)) <= panelCount) {
			jQuery("#react-nav-" + sliderCount + " a:eq(" + (location.hash.slice(1) - 1) + ")").addClass("current");
		} else if (settings.firstPanelToLoad != 1 && settings.firstPanelToLoad <= panelCount) {
			jQuery("#react-nav-" + sliderCount + " a:eq(" + (settings.firstPanelToLoad - 1) + ")").addClass("current");
		} else {
			jQuery("#react-nav-" + sliderCount + " a:eq(0)").addClass("current");
		};
		
		// Trigger autoSlide
		if (settings.autoSlide) {
			slider.ready(function() {
				timer = setInterval(autoSlide,settings.autoSlideInterval);
			});
		};
		
		function autoSlide() {
			if(notAnimating) {
				old = jQuery('#slide'+currentPanel).css({ 'z-index':1 }).animate({opacity:0},500,'swing',function () { old.hide(); });
				if (currentPanel == panelCount) {
					currentPanel = 1;
				} else {
					currentPanel += 1;
				};
				jQuery('#slide'+currentPanel).show().css({ 'z-index':0 }).animate({opacity:100},500,'swing',function () { notAnimating=true; });
				// Switch the current tab:
				slider.siblings('.react-nav').find('a').removeClass('current').parents('ul').find('li:eq(' + (currentPanel - 1) + ') a').addClass('current');
			};
		};
		
		// Kill the preloader
		jQuery('.panel', slider).end().find("p.loading").remove();
		slider.removeClass("preload");
		
		sliderCount++;
		jQuery('.react-slider').css({opacity:100});
		
	});
};
jQuery(document).ready(function() {
	jQuery('#react-slider-1').reactSlider({autoSlide:true});
});