// 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');
	var previousfeat = $('#exp').data('activefeat');
	$('#exp').data('activefeat', 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
	});
	
	// 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 + ")");
	//adjust size of frame
}