var numTabs, curTab, newTab
,	slideCounter	= 0
,	directions		= [ 'scrollLeft', 'scrollUp', 'scrollRight', 'scrollDown' ]
,	last_dir_index	= 99
;

// NOTE: slideshow.init() called at bottom of page
var slideshow = {
	data: {
		container:	".slideshow"
	,	slides:		".slideshow > .slides"
	,	tabs:		".slideshow > .tabs > ul > li a" // NOTE: a wrapper-DIV will be inserted around A in IE9 */
	,	lights:		".slideshow > .tabs > ul > li a > div > span"
	}

,	numTabs:		0
,	curTab:			0
,	newTab:			0
,	slideCounter:	0
,	directions:		[ 'scrollLeft', 'scrollUp', 'scrollRight', 'scrollDown' ]
,	last_dir_index:	99

,	pause:	function () { $( slideshow.data.slides ).cycle("pause"); return false; }   // can be resumed with "resume" command 
,	resume:	function () { $( slideshow.data.slides ).cycle("resume"); return false; }  // resumes a paused slideshow 
,	play:	function () { return slideshow.resume(); }
,	toggle:	function () { $( slideshow.data.slides ).cycle("toggle"); return false; }  // toggles the pause/resume state of the slideshow 
,	next:	function () { $( slideshow.data.slides ).cycle("next"); return false; }    // advances slideshow to next slide 
,	prev:	function () { $( slideshow.data.slides ).cycle("prev"); return false; }    // advances slideshow to previous slide 
,	stop:	function () { $( slideshow.data.slides ).cycle("stop"); return false; }    // stops the slideshow 
,	destroy: function () { $( slideshow.data.slides ).cycle("destroy"); return false; }

,	init: function () {
		var _ = slideshow;
		_.initCycler();
		$( _.data.tabs   ).mouseenter( slideshow.setTab );
		$( _.data.lights ).mouseenter( slideshow.setSlide ).hover( slideshow.pause, slideshow.resume );
	}

,	initCycler: function () {
		var _		= slideshow
		,	$tabs	= $(".slideshow > .tabs > ul > li")
		;
		_.numTabs	= $tabs.length - 1; // don\'t count "controls" in bottom LI
		_.curTab	= 0;

		// SEE http://jquery.malsup.com/cycle/options.html
		$(".slideshow .slides").cycle({
			// More Effects: http://jquery.malsup.com/cycle/browser.html 
			fx:					"toss"	// eg: slideLeft, cover, uncover, toss
		,	delay:				1000	// _extra_ transition delay on first slide
		,	timeout:			6000	// ms between transitions
		,	pause:				true	// true = pause the cycler when over a slide
		,	pauseOnPagerHover:	true	// true = pause the cycler when over a pager-link
		,	nowrap:				false	// true = loop only ONCE
		,	random:				false	// true = randomly select the next slide
		//	container/slide sizing
		//,	containerResize:	1
		//,	fit:				1
		//	pager controls
		,	pager:				"" || "div.cycler-controls" // jQuery selector for Pager wrapper
		,	pagerEvent:			"mouseover"		// mouseover | click
		,	fastOnEvent:		true	// true = INSTANT change when pager hovered
		//	callbacks
		,	before: function(currSlideElement, nextSlideElement, options, forwardFlag) {
				slideshow.setTab( nextSlideElement );
				var $lights = $( _.data.lights );
				$lights.filter("."+ currSlideElement.className ).removeClass("current");
				$lights.filter("."+ nextSlideElement.className ).addClass("current");
				/*
				$(".slideshow .screen > ."+ currSlideElement.className )
					.stop(true, true)
					.hide("slide", { direction: "down" }, 600);
				*/
			}
		,	after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
				// TESTING to see if can vary fx, but do not think this is possible!
				var dir = _.directions[ ++_.last_dir_index >= _.directions.length ? 0 : _.last_dir_index ];
				/*
				$(".slideshow .screen > ."+ currSlideElement.className )
					.stop(true, true)
					.hide();
				$(".slideshow .screen ."+ nextSlideElement.className )
					.stop(true, true)
					.show("slide", { direction: "down" }, 300);
				*/
			}
		,	onPagerEvent: function ( zeroBasedSlideIndex, slideElement ) { // callback fn for pager events
				alert("onPagerEvent");
			}
		,	onPrevNextEvent: function ( isNext, zeroBasedSlideIndex, slideElement ) { // callback fn for prev/next events
				alert("onPrevNextEvent");
			} 
		});
	}

,	setSlide:	function (slide) {
		var _		= slideshow
		,	$slides	= $( _.data.slides ).children()
		,	idx
		;
		if (this.tagName)
			slide = this;
		else if ($.type(slide) === "object" && slide.tagName === "SPAN")
			slide = slide.className; // an 'image light' (pager), so get its className - handled below

		if ($.type(slide) === "number")
			idx = slide;
		else if ($.type(slide) === "string")
			slide = $slides.filter( "."+ slide )[0]; // find slide by className

		if ($.type(slide) === "object") {
			slide	= $slides.filter("."+ slide.className ); // is probably a 'light' (pager)
			idx		= $slides.index( slide );
		}

		if (idx >= 0)
			$( _.data.slides ).cycle( idx );

		return false;
	}

,	setTab: function (slide) {
		var _		= slideshow
		,	$tabs	= $(".slideshow > .tabs > ul > li")
		,	$hoveredTab	= false
		;
		if (this.tagName) {
			$hoveredTab	= $(this).parent();
			if ($hoveredTab.attr('tagName') === 'DIV') // wrapper-DIV added for IE9 ONLY
				$hoveredTab	= $hoveredTab.parent();
		}
		if ($hoveredTab)
			_.newTab = $tabs.index( $hoveredTab ) + 1;
		else if (slide)
			_.newTab = slide.className.substr(1,1); // eg: class="s3-1" => "3" - 1 = 2

		if (_.newTab !== _.curTab) { // NOT over the 'active tab'
			// NOTE that new/curTab is 1-based, not 0-based
			if (_.curTab) {
				$tabs.eq( _.curTab -1 ).removeClass("current");
				if (_.curTab >= 2)
					$tabs.eq( _.curTab -2 ).removeClass("aboveCurrent")
			}
			$tabs.eq( _.newTab -1 ).addClass("current");
			if (_.newTab >= 2)
				$tabs.eq( _.newTab -2 ).addClass("aboveCurrent");
			_.curTab = _.newTab;

			/*
			// apply wrapper-div hack for IE9 the first time each tab is made active
			// need tab active so has radiused corners for wrapper to clone!
			var $a = $tabs.eq( _.curTab -1 ).children('a');
			if (!$a.data('radius-hack')) {
				$a.data('radius-hack', true); // even though NOT applied unless is IE9
				Content.wrapRadiusedElems( $a );
			}
			*/
		}

		if ($hoveredTab) _.setSlide( 's'+ _.newTab +'-1' ); // eg: 's3-1' = first slide for tab-3
	}

};
$(document).ready( slideshow.init );