/* tabbedPageHelper.js */

$.fn.convertTechniques = function () {

	return this.each(function () {	
		var $source = $(this);
			
		// -- buildTechniqueSlides
		// for each h3 we find, we call this to build a DOM structure that supports
		// a techniques thumbnail gallery:
		//	div.techniqueSlides
		//  	h3
		//		div.thumbNav
		//			<a>previous</a><a>next</a>
		//		div.largeImages
		//			img
		//			...
		//		div.descriptions
		//			div
		//				whatever
		//			...
		//		div.thumbImages
		//			img
		//			...
		//	and we also hook up the required interactions
		function buildTechniqueSlides () {
			function initInteraction ($theShow) {			
				var thumber = OCMS.slideShow({
						selector: $('.largeImages img', $theShow),
						autoStart: false
					}),
					$thumbs = $('.thumbImages img', $theShow);
					
				function showTechniqueInfo (nIt) {
					$thumbs.siblings('.active').removeClass('active');
					$thumbs.eq(nIt).addClass('active');
						
					$('.descriptions > div', $theShow).each(function (nDesc) {
						if (nDesc !== nIt) {
							$(this).hide();
						} else {
							if (!$(this).is(':visible')) {
								$(this).fadeIn();
							}
						}
					});
				}	
					
				$thumbs.each(function (nIt) {
					$(this).click(function () {
						thumber.goToSlideNumber.apply(this, [nIt]);
						showTechniqueInfo(nIt);
					});
				});
			
				// install click handlers for previous and next
				$('.thumbNav a', $theShow).click(function () {
					if ($(this).nextAll().length === 0) {
						// next a is last child in .thumbNav
						thumber.next();
					} else {
						thumber.previous();
					}
					showTechniqueInfo(thumber.getSlideNumber());
				});
			
				showTechniqueInfo(0);
			}	// initInteraction

			var $showStarts = $('h3', this);
				
			$showStarts.each(function (nIt) {
				var $thisShow = $(this).nextUntil('h3');

				var $newShow = $('<div class="techniqueSlides techSS' + nIt + '">' +
					'<div class="thumbNav"><a>Previous</a><a>Next</a></div>' +
					'<div class="largeImages"></div>' +
					'<div class="descriptions"></div>');
				
				$newShow.prepend(this);	// add h3 above .thumbNav
			
				var nSlide = 0,
					txtSlide = $(this).text(),
					$slideDesc = $('<div>'),
					bSlideHasImg = false;

				$thisShow.each(function () {
					switch (this.tagName.toLowerCase()) {
						case 'img':
							txtSlide += '\nimg src=' + $(this).attr('src');
							bSlideHasImg = true;
							$newShow.find('.largeImages').append(this);							
							break;
						
						case 'hr':
							if (bSlideHasImg) {
								nSlide++;
								txtSlide = '';
								bSlideHasImg = false;
								
								$newShow.find('.descriptions').append($slideDesc);
								$slideDesc = $('<div>');								
							}
							// else we ignore the hr that follows the h3
							break;
						
						default:
							txtSlide += '\nCOPY ' + $(this).html();
							$slideDesc.append(this);
							break;
					}
				});
				
				$newShow.find('.largeImages').clone().appendTo($newShow);
				$newShow.find('.largeImages').eq(1).removeClass('largeImages').addClass('thumbImages');
				
				initInteraction($newShow);
				
				$('#insert__Above').before($newShow);
			});
		}	// buildTechniqueSlides

		$source.after('<div id="insert__Above"></div>');
		$source.each(buildTechniqueSlides);
		$('#insert__Above').remove();
	});	// convertTechniques
};


$().ready(function () {

	// h1.document-1-title "Techniques"
	$('span.document-1-content > h3 + hr').each(function () {
		// if we're here, we found a techniques tab (and only expecting one)

		var techTabId = null;
		var hash = window.location.hash;	// + '#techniques';
		if (hash.toLowerCase().indexOf('techniques') > 0) {
			techTabId = '#' + $(this).closest('[class^="tab_"]').addClass('techniques').attr('id');
		}

		$(this).parent().convertTechniques().remove();
		
		if (techTabId) {
			var $ttab = $('.tab[href="' + techTabId + '"]');
			if ($ttab.length === 1) {
				setTimeout(function () {
					$ttab.click();
					$('html, body').animate({
						scrollTop: $(techTabId).offset().top - 45
					}, 1500);
				}, 1000);
			}
		}	
	});
});