$(function(){
	// initialize png fix
	$(document).pngFix();
					 
	// initialize the modal
	$('#slideHolder').jqm({
		trigger: '#slideCall a',
		overlay: 80
	});
	
	// modal close button 
	$('#slideHolder').jqmAddClose('a.close'); 
	
	// show modal onLoad for testing
	//$('#slideHolder').jqmShow();
	
	slideshow();
	
	// *-*slideshow magic*-*
	 function slideshow(){	
			var s = $('#slideHolder .slide'),
					n = s.length;
					// hitTarget = '<div class="hitTarget"><div class="meta></div></div>';
			
			// add slide IDs for later script targeting and meta html for nav and slide number of the total
			s.each(function(i){
				var that = $(this);
				that.attr('id','s'+(i+1)+'');
				
				
				that.append('<div class="meta"><span class="nav previous"><a href="#s'+i+'"><img src="../assets/images/slideshow/nav-areas2_l.png" alt="previous" /></a></span><span class="number">Slide <span class="slideNum">'+(i+1)+'</span> of '+n+'</span><span class="nav next"><a href="#s'+(i+2)+'"><img src="../assets/images/slideshow/nav-areas2_r.png" alt="next" /></a></span></div>');
				
				// create duplicate slideshow nav for larger hit area
				/*var prevSrc = that.find('.previous a').clone().addClass('hitPrev');
				var nextSrc = that.find('.next a').clone().addClass('hitNext');
				that.append(hitTarget);
				if (i > 0) {
					that.find('.hitTarget .meta').append(prevSrc);
				}
				if (i < 21) {
					that.find('.hitTarget .meta').append(nextSrc);
				}*/
				
				// copy each slide image alt to title
				if ($(this).children('img').hasClass('hero')) {
					var childImg = $(this).children('img');
					var imgAlt = childImg.attr('alt');
					childImg.attr('title',imgAlt)
				}
			
			});
			
			
			// initial setting of slideshow nav active states
			$('#slideHolder > .slide:first-child').addClass('active');
			$('#slideHolder > .slide:first-child .meta .previous').css('visibility','hidden');

			// set initial slideshow nav image opacity
			$('.slide .meta a').children('img').fadeTo('fast', 0.1);
			
			
			// set opacity for slideshow nav hover states
			$('.slide .meta a').hover(function(){
				$(this).children('img').fadeTo('fast', 1);																 
			}, function(){
				$(this).children('img').fadeTo('fast', 0.1);
			});
			
			// nav click events that pull the href populated above and use it to select the target slide
			$('.slide .meta a').click(function(event){
				
				var clickTarget = $(this).attr('href');
				var clickFinal = clickTarget.split('#')[1];
				//console.log('[ clickTarget = %s ]',clickTarget)
				
				// prevent jumping to anchor id				
				event.preventDefault();
				
				// remove active state from slides before reassigning
				s.removeClass('active').css('display','none');
				$('#'+clickFinal).addClass('active').css('display','block');
				
				// checks for first and last slide to prevent moving beyond number of available slides
				if (clickFinal==='s1'){
					$('.meta .previous').css('visibility','hidden');
				}
				else if (clickFinal==='s22'){
					$('.meta .next').css('visibility','hidden');
				}
				else {
					$('.meta .previous').css('display','inline').css('visibility','visible');
					$('.meta .next').css('display','inline').css('visibility','visible');
				}
				
			});
				
		}
	
});