// JavaScript Document
// Written by Chris Converse
// for Lynda.com
// edited by Ariel Garcia @ Uniworld Group

$(document).ready(function(){
	
	// Generate Photo Lineup
	$('img.marqueePanelPhoto').each(function(index){
		// var photoWidth = 960; 
		var photoWidth = $('.marqueeContainer').width();
		var photoPosition = index * photoWidth;
		$('.marqueePhotos').append('<img class="marqueePhoto" style="left: '+ photoPosition +'" src="'+ $(this).attr('src') +'" alt="'+ $(this).attr('alt') +'" width="'+ photoWidth +'" height="350" />');
		$('.marqueePhotos').css('width', photoPosition + photoWidth);
	}); // end Generate Photot Lineup

	// Preload all images, then initialize marquee
	$('.marqueePanels img').imgpreload(function(){
		initializeMarquee();
	}); // end Preload All images, then initialize marquee
	
	// Set up Navigation Links
	$('.marqueeNav a.marqueeNavItem').click(function(){
		// reset interval
		window.clearInterval(marqueeInterval);
		
		// Set the navigation state
		$('.marqueeNav a.marqueeNavItem').removeClass('selected');
		$(this).addClass('selected');
		var navClicked = $(this).index();
		var marqueeWidth = $('.marqueeContainer').width();
		var distanceToMove = marqueeWidth*(-1);
		var newPhotoPosition = navClicked*distanceToMove + 'px';
		var newCaption = $('.marqueePanelCaption').get(navClicked);
		
		// Animate the photos and caption
		$('.marqueePhotos').animate({left: newPhotoPosition}, 1000);
		var newHTML = $(newCaption).html();
		$('.marqueeCaptionContent').html(newHTML);
		// Animate Ticker
		var tickerSrc = document.getElementById('tickerImg').src;
		var newImg = (navClicked + 1);
		newSrc  =  "images/ticker/q" + newImg + ".png";
		document.getElementById('tickerImg').src=newSrc;
		
		// set interval 
		marqueeInterval = window.setInterval("moveMarquee()", 9000);
	}); // end Set up Navigation Links

	// Set up Prev arrows. Ariel
	$('.marqueeNavArrows a.marqueePrevious').click(function(){
		// reset interval
		window.clearInterval(marqueeInterval);
		previousMarquee();
		marqueeInterval = window.setInterval("moveMarquee()", 9000);
	}); // end Prev arrows.
	
	// set next arrow
	$('.marqueeNavArrows a.marqueeNext').click(function(){
		// reset interval
		window.clearInterval(marqueeInterval);
		nextMarquee();
		marqueeInterval = window.setInterval("moveMarquee()", 9000);
	}); // end next arrows.
	
	// set the interval
	var userInput = false;
	var curInterval = 5000;
	var marqueeInterval = window.setInterval("moveMarquee()", curInterval);
});

// basic interval actions 
function moveMarquee(){
	// Set the navigation state
	var navIndex = $('.marqueeNav a.marqueeNavItem.selected').index();
	var newIndex = '';
	var selectIndex = '';
	switch(navIndex) {
		case 0:
		case 1:
		case 2:
			newIndex = (navIndex + 1);
			selectIndex = (newIndex + 1);
		break;
		default:
			newIndex = 0;
			selectIndex = 1;
		break;
	}
	$('.marqueeNav a.marqueeNavItem').removeClass('selected'); // this stays
	// replace this with the index value 
	$('.marqueeNav a.marqueeNavItem:nth-child(' + selectIndex + ')').addClass('selected');

	// replace this with id index
	var navClicked = newIndex;
	var marqueeWidth = $('.marqueeContainer').width();
	var distanceToMove = marqueeWidth*(-1);
	var newPhotoPosition = navClicked*distanceToMove + 'px';
	var newCaption = $('.marqueePanelCaption').get(navClicked);

	// Animate the photos and caption
	$('.marqueePhotos').animate({left: newPhotoPosition}, 1000);
	var newHTML = $(newCaption).html();
	$('.marqueeCaptionContent').html(newHTML);
	// Animate Ticker
	var tickerSrc = document.getElementById('tickerImg').src;
	var newImg = (navClicked + 1);
	newSrc  =  "images/ticker/q" + newImg + ".png";
	document.getElementById('tickerImg').src=newSrc; 
}

function initializeMarquee(){
	$('.marqueeCaptionContent').html(
		$('.marqueePanels .marqueePanel:first .marqueePanelCaption').html()
	);
	$('.marqueeNav a.marqueeNavItem:first').addClass('selected');
	$('.marqueePhotos').fadeIn(0);
	//setCaption();
}

function prepareEventHandlers(){
	var prevCaseStudy = documeent.getElementById('marqueeNavArrowLeft');
	prevCaseStudy.onclick = function(){
		// write the function to advance the marquee
	};
		
	var nextCaseStudy = document.getElementById('marqueeNavArrowRight');
	nextCaseStudy.onclick = function(){
		// refer to the function writen above
	};
}


function nextMarquee(){
	// Set the navigation state
	var navIndex = $('.marqueeNav a.marqueeNavItem.selected').index();
	var newIndex = '';
	var selectIndex = '';
	switch(navIndex) {
		case 0:
		case 1:
		case 2:
			newIndex = (navIndex + 1);
			selectIndex = (newIndex + 1);
		break;
		default:
			newIndex = 0;
			selectIndex = 1;
		break;
	}
	$('.marqueeNav a.marqueeNavItem').removeClass('selected'); // this stays
	// replace this with the index value 
	$('.marqueeNav a.marqueeNavItem:nth-child(' + selectIndex + ')').addClass('selected');
	
	// replace this with id index
	var navClicked = newIndex;
	var marqueeWidth = $('.marqueeContainer').width();
	var distanceToMove = marqueeWidth*(-1);
	var newPhotoPosition = navClicked*distanceToMove + 'px';
	var newCaption = $('.marqueePanelCaption').get(navClicked);
	
	// Animate the photos and caption
	$('.marqueePhotos').animate({left: newPhotoPosition}, 1000);
	var newHTML = $(newCaption).html();
	$('.marqueeCaptionContent').html(newHTML);
	// Animate Ticker
	var tickerSrc = document.getElementById('tickerImg').src;
	var newImg = (navClicked + 1);
	newSrc  =  "images/ticker/q" + newImg + ".png";
	document.getElementById('tickerImg').src=newSrc; 
}

function previousMarquee(){
	// Set the navigation state
	var navIndex = $('.marqueeNav a.marqueeNavItem.selected').index();
	var newIndex = '';
	var selectIndex = '';
	switch(navIndex) {
		case 1:
		case 2:
		case 3:
			newIndex = (navIndex -1);
			selectIndex = navIndex;
		break;
		default:
			newIndex = 3;
			selectIndex = 4;
		break;
	}
	$('.marqueeNav a.marqueeNavItem').removeClass('selected'); // this stays
	// replace this with the index value 
	$('.marqueeNav a.marqueeNavItem:nth-child(' + selectIndex + ')').addClass('selected');
	
	// replace this with id index
	var navClicked = newIndex;
	var marqueeWidth = $('.marqueeContainer').width();
	var distanceToMove = marqueeWidth*(-1);
	var newPhotoPosition = navClicked*distanceToMove + 'px';
	var newCaption = $('.marqueePanelCaption').get(navClicked);
	
	// Animate the photos and caption
	$('.marqueePhotos').animate({left: newPhotoPosition}, 1000);
	var newHTML = $(newCaption).html();
	$('.marqueeCaptionContent').html(newHTML);
	// Animate Ticker
	var tickerSrc = document.getElementById('tickerImg').src;
	var newImg = (navClicked + 1);
	newSrc  =  "images/ticker/q" + newImg + ".png";
	document.getElementById('tickerImg').src=newSrc; 
}