// Created for TMARKS Design by Joel Davis of Yellow Button

var transdur = 600;

function speedup() {
	transdur = transdur - 20;
	if (transdur < 200) {
		transdur = 200;
	}
}
function changeFeature(clickedbtn) {
	var clickedfeature = clickedbtn.attr('href');
	if (clickedfeature != undefined) {
		var previousfeat = $('#exp').data('activefeat');
		$('#exp').data('activefeat', clickedfeature);
		
		//location.hash = clickedfeature;
		
		// play transfer effect
		if (previousfeat != '#none') {
			clickedbtn.effect("transfer",{ to: $('.featurebox'), className: 'ui-effects-transfer' },transdur);
		}

		if (previousfeat != clickedfeature) {
			// dim the previous feature button
			$(previousfeat + '-btn').removeClass('selected');
			$(previousfeat + '-btn').css({opacity: 0.33});	

			// highlight the current feature button
			clickedbtn.css({opacity: 1.0});
			clickedbtn.addClass('selected');

			//pause slideshow
			// $(previousfeat + '-content').find('.slideshow').cycle('pause'); (unneccessary)
			// fade out previous 
			$(previousfeat + '-content').css('background', 'transparent').fadeOut((transdur/2));
			if(previousfeat == '#none'){
				// fade in current
				$(clickedfeature).css("background","transparent").fadeIn((transdur/2), function(){
					// slide in current content
					$(clickedfeature + '-content').css("background","transparent").show('slide', {}, transdur, function(){
						// run the slideshow if there is one
						// $(this).find('.slideshow').cycle('resume'); (manual advance only)
					});
				});		
			} else {
				$(previousfeat).css("background", "transparent").fadeOut((transdur/2), function(){
					// fade in current
					$(clickedfeature).css("background","transparent").fadeIn((transdur/2), function(){
						// slide in current content
						$(clickedfeature + '-content').css("background","transparent").show('slide', {}, transdur, function(){
							// run the slideshow if there is one
							// $(this).find('.slideshow').cycle('resume'); (manual advance only)
						});
					});
				});
			}
		}
		speedup();
	}
}
function scrollNav(dir) {
	var itemsToDisplay = 4;
	var heightOfItems = 107;
	var navitems = $('#exp').data('navitems');
	var currentscroll = $('#exp').data('navitemsscroll');

	var newscroll =  (dir=='next') ? currentscroll + itemsToDisplay : currentscroll - itemsToDisplay;

	// hide invalid buttons	
	if (newscroll + itemsToDisplay >= navitems) { $('#next-btn').hide('slide',{direction: 'down'}, transdur/2); }
	if (newscroll - itemsToDisplay < 0) { $('#prev-btn').hide('slide',{direction: 'up'}, transdur/2); }

	$('#pagenav ul').css("background", "transparent").animate({ marginTop: -newscroll * heightOfItems }, transdur, 'easeOutBack', function(){ 
		$('#exp').data('navitemsscroll', newscroll);

		// show good buttons
		if (newscroll + itemsToDisplay < navitems) { $('#next-btn:hidden').show('slide',{direction: 'down'}, transdur/2); }
		if (newscroll - itemsToDisplay >= 0) { $('#prev-btn:hidden').show('slide',{direction: 'up'}, transdur/2); }		
	});
}

// when document is ready
$(function() {
	// store data
	$('#exp').data('activefeat', '#none');

	// setup the navigation menu
	var navitems = $('#pagenav').find("li").length;
	$('#exp').data('navitems', navitems);
	$('#exp').data('navitemsscroll', 0);
	if (navitems > 4) { 
		// we need the buttons
		$('#pagenav').before('<a class="expbtn" href="#" id="prev-btn"><span>More Projects</span></a> <a class="expbtn" href="#" id="next-btn"><span>More Projects</span></a>');

		// enable buttons
		$('#prev-btn').click(function(event){
			event.preventDefault();
			scrollNav('prev');
		});
		$('#next-btn').click(function(event){
			event.preventDefault();
			scrollNav('next');
		});	
		
		// show the next button, hide the previous to start	
		$('#next-btn').show(); 
		$('#prev-btn').hide(); 
	}


	// enable feature buttons
	$('#pagenav').click(function(event){
		event.preventDefault();
		changeFeature($(event.target).closest('a'));
		

	});

	// enable slideshows
	$('.slideshow').each(function(idx){
		var firstslide = $(this).find('img:first');
		var slidescnt = $(this).find('img').length;
		
		$(this).find('img').wrap('<div class="slideframe"></div>');
		
		var afterhtml = '<div class="slideframeCurrent"></div>';
		if (slidescnt > 1) {
			var afterhtml = afterhtml + '<div class="slideframePrevious" id="slprev' + idx + '"></div><div class="slideframeNext" id="slnext' + idx + '"></div>';
		}
		
		$(this)
		.after(afterhtml)
		.cycle({
			fx: 'fade',
			timeout: 4000,
			prev: '#slprev' + idx,
			next: '#slnext' + idx,
			before: onBefore, 
			after: onAfter,
			// fastOnEvent: 1,
			pause: 1 // hover to pause
		})
		.cycle('pause'); // start paused
	});
	
	
	
	if(window.location.hash) {
		var hash = window.location.hash;		
		changeFeature($(hash + '-btn'));
		//alert(hash + '-btn');
	} else {
		// show the first feature
		changeFeature($('#feature1-btn'));
	}
	
});

// called by slideshow
function onBefore(curr, next, opts, fwd) {
	$(this).closest('.expcontent').find('.slideframeCurrent').html("(" + (opts.nextSlide+1) + " of " + opts.elements.length + ")");
}

function onAfter(curr, next, opts, fwd) {
	$(this).closest('.expcontent').find('.slideframeCurrent').html("(" + (opts.currSlide+1) + " of " + opts.elements.length + ")");

}