//Template directory variable for javascript files
	var tempdir = $('#template-dir').text() + "/";

function nextImage() {
	var current = $('#image-slider img').first();
	var next = $('#image-slider img:nth-child(2)');
	current.fadeOut('slow', function() {
		current.toggleClass('active');
		next.toggleClass('active');
		next.fadeIn('slow');
	});
	current.detach().appendTo('#image-slider');
}


$(document).ready(function() {
	
	/* ~~~ Homepage Slideshow Transitions ~~~ */
	$('#image-slider img').hide();
	$('#image-slider img').first().fadeIn();
	var homePageSliderInterval;
	var speed = 7000;
	homePageSliderInterval = setInterval(nextImage, speed);

	/* ~~~ Page Transitions ~~~ */
	$('#nav-main a').click(function() {
		var currentPage = $('.active-page');
		var nextPageID = $(this).attr('href');
		var nextPage = $(nextPageID);
		if(!nextPage.hasClass('active-page') ) {
			currentPage.fadeOut(function() {
				currentPage.addClass('inactive-page').removeClass('active-page');
				if(nextPageID == '#home') {
					$('#image-slider img').not('.active').css("display", "none");
				}
				nextPage.fadeIn();
				nextPage.addClass('active-page').removeClass('inactive-page');
			});
		}
	});
	
	/* ~~~ toggle hover for portfolio tabs ~~~ */
	$('#tabs a').hover(function() {
		$(this).addClass('.tab-hover');
	});
	
	/* ~~~ Submit button ~~~ */
	$('#submit').click(function() {
		$('form#order-form').submit();
	});


	/* ~~~ tab transitions under portfolio ~~~ */
	$('#tabs a').click(function() {
		var currentTabLink = $('.active-tab-link');
		var currentTab = $('.active-tab');
		var nextTabID = $(this).attr('href');
		var nextTab = $(nextTabID);
		currentTabLink.addClass('inactive-tab-link').removeClass('active-tab-link');
		$(this).addClass('active-tab-link').removeClass('inactive-tab-link');
		currentTab.fadeOut(function() {
			currentTab.addClass('inactive-tab').removeClass('active-tab');
			nextTab.fadeIn();
			nextTab.addClass('active-tab').removeClass('inactive-tab');
		});
	});
	
	
	/* ~~~ Portfolio Images - Lightbox ~~~ */
	$('.images img').wrap(function() {
		return '<a href="' + $(this).attr('src') + '"></a>';
	});

	//group images of each posts' slider together, and create a lightBox group
	$('.images').each(function() {
		var links = $(this).find('a');
		links.lightBox({
			fixedNavigation:		true,
			imageLoading:			tempdir + 'lightbox/images/lightbox-ico-loading.gif',		// (string) Path and the name of the loading icon
			imageBtnPrev:			tempdir + 'lightbox/images/lightbox-btn-prev.gif',		// (string) Path and the name of the prev button image
			imageBtnNext:			tempdir + 'lightbox/images/lightbox-btn-next.gif',		// (string) Path and the name of the next button image
			imageBtnClose:			tempdir + 'lightbox/images/lightbox-btn-close.gif',		// (string) Path and the name of the close btn
			imageBlank:				tempdir + 'lightbox/images/lightbox-blank.gif'			/* (string) Path and the name of a blank image (one pixel)*/
		});
		links.first().addClass('first');
		links.last().addClass('last');
		
		$(this).find('a:gt(2)').hide();
	});
	
	//hide prev buttons at the beginning...
	//$('.prev').text().hide();
	$('.prev').hide();
	
	//animations for next button...
	$('.next').click(function() {
		var this_next = $(this); //the 'next' button within this tab
		var parent = this_next.parent(); //selects content div, containing prev/next btns and images
		var this_prev = parent.find('.prev'); //the 'previous' button within this tab
		var last = parent.find('.images a.last');
		
		//hide current visible images
		parent.find('.images a:visible')
			.last().addClass('last-visible')
			.end()
			.hide();
		$('.last-visible').removeClass('last-visible')
			//fade in next three pictures
			.next().fadeIn('slow')
			.next().fadeIn('slow')
			.next().fadeIn('slow');
		
		//if we are clicking next, we MUST have a prev group of pics	
		this_prev.show();
		
		if(last.css('display') == "inline" ) {
			this_next.hide();
		}
	});
	
	//animations for next button...
	$('.prev').click(function() {
		var this_prev = $(this); //the 'previous' button within this tab
		var parent = this_prev.parent(); //selects content div, containing prev/next btns and images
		var this_next = parent.find('.next'); //the 'next' button within this tab
		var first = parent.find('.images a.first');
		
		parent.find('.images a:visible')
			.first().addClass('first-visible')
			.end()
			.hide();
		$('.first-visible').removeClass('first-visible')
		    //fade in next three pictures
			.prev().fadeIn()
			.prev().fadeIn()
			.prev().fadeIn();
			
		//if we are clicking prev, we MUST have a next group of pics
		this_next.show();
		
		if(first.css('display') == "inline" ) {
			this_prev.hide();
		}	
	});
	
	
});