var slider;
var sliderTimer;

$(function() {

	// only add in the cycle if the selector exists
	// as it seems to conflict with bxSlider otherwise
	if($('.bannerArea .slides.cycle').size() > 0) {
		$('.bannerArea .slides.cycle').cycle({
			fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
		});
	}

	// only add in the bxSlider if the selector exists
	if($('.bannerArea .slides.slider').size() > 0) {
		// dynamically generate the slider nav based off the number of images
		// we have in the slides container
		var slideNav = $('<ul/>')
		$('.bannerArea .slides img').each(function() {
			slideNav.append('<li><a href="#"><span></span></a></li>');
		});

		$('.slidenav').append(slideNav);

		$('.slidenav li:first').addClass('active');
		var currentImage =$('.bannerArea .slides li:first img');
		$('.slidebar .projectname').html(currentImage.attr('alt'));
		$('.slidebar .link a').attr('href', currentImage.parent('a').attr('href'));


		slider = $('.bannerArea .slides ul').bxSlider();
		
		$('.slidenav a').click(function(){
			// when the user manually clicks a slidenav item
			// then cancel the auto scroll
			clearInterval(sliderTimer);
			nextSlide(this);
			return false;
		});

		//$('.slidenav a').bind('next-slide', function(){
		//	nextSlide();
		//});

		// as we've constructed the pager manually we will need to scroll through it manually
		sliderTimer = setInterval(function() {
			var next = $('.slidenav li.active').next('li');
			if(next.size() == 0) {
				next = $('.slidenav li:first');
			}
			nextSlide(next.children('a:first')[0]);
			//next.children('a').trigger('next-slide');
			
		},3000);
	}
})

function nextSlide(target)
{
	var thumbIndex = $('.slidenav a').index(target);
	var currentImage = $('.bannerArea .slides img:eq(' + (thumbIndex+1) + ')');

	// slide our image
	slider.goToSlide(thumbIndex);

	// update our project name + link
	$('.slidebar .projectname').html(currentImage.attr('alt'));
	$('.slidebar .link a').attr('href', currentImage.parent('a').attr('href'));

	// set the approriate links to active
	$('.slidenav li').removeClass('active');
	$(target).parent('li').addClass('active');

}
