$(function () {
/*
	Assumes 2 UL's -- one is frame for rotating pics, the other is frame for thumbnails.
	First sets background of all thumbnails to be the image source of corresponding image.
	Next, it hides all image containing li's in the first frame.
	Click function is added to make clicked thumbnail the current image and to hide thumbnail of current image.
	
	--images then need to rotate...--
*/

	
	if (!$('#kscarousel').length) {	// Does frame exist?
		return;	// If not, exit.
	}

	/* VARIABLES */
	var mainContainer = $('#kscarousel');
	var imgFrame = $('ul#ksc_main');
	var imgContainers = $(imgFrame).children('li'); //direct li descendants in main container frame
	var thumbFrame = $('ul#ksc_thumbs');
	var thumbContainers = $(thumbFrame).children('li'); // direct li descendants in thumb container
	var transitionSpeed = 1400;
	var displayTime = 4000;
	var displayTimeSet = null;
	var thumbTransition = 600;
	var numImages = $(imgContainers).length; // number of images to cycle
	var startTimer = 0;

	/* INITIALIZE */
	currentImageContainer = null;
	currentImageContainerID = null;
	nextImageContainer = null;
	currentThumbContainer = null;
	$(mainContainer).css('overflow', 'hidden');
	$(mainContainer).css('float', 'left');
	$(imgContainers).css('position', 'absolute');
	$(thumbFrame).css('display', 'block');
	$(imgContainers).hide(); //hide all imgContainers initially
	
	/* BUILD THUMBNAILS */
	for(i=0;i<numImages;i++)	// run number of times equal to number of images
	{
		$(thumbContainers).eq(i).attr('id','thumb'+(i+1));//create a unique id for each thumb
        $(imgContainers).eq(i).attr('class','thumb'+(i+1));// match thumb ID to class
        var thumb = $(imgContainers).children('img').eq(i).attr('src');
		$(thumbContainers).eq(i).css('background-image', 'url('+thumb+')' ); // make backgrounds of ksc_thumbs li the same as corresponding image
	};
	
	/* Establish Current and Next */
	function establishState () {
		//window.clearTimeout(establishState, displayTime); //clears the transition timer called in thumbClick
		clearTimeout(startTimer);
				
		if($(imgFrame).find('img:visible').length == 0) { // if no image is visible
			$(imgContainers).filter(':first').fadeIn(transitionSpeed); //show the first image
		}
		currentImageContainer = $(imgFrame).find('img:visible').length ? // if image is visible...
			$(imgFrame).find('img:visible').parent() : // get parent li of image
			$(imgFrame).find('img:first').parent(); // otherwise get first image
		currentImageContainerID = $(currentImageContainer).attr('class'); //get the class of the current image's container li
		nextImageContainer = $(currentImageContainer).next('li').length ? //If there is an li after current one, then...
        	$(currentImageContainer).next('li') : //next image container is the next li
        	$(imgFrame).find('li:first'); //otherwise it is the first li
        currentThumbContainer = $(thumbContainers).filter('#'+currentImageContainerID); //determine current pic's thumb (match ID to class)
        
	    $(thumbContainers).fadeIn(thumbTransition); //reveal ALL thumbs
    	$(currentThumbContainer).hide(); //but hide current pic's thumb
	    
	    startTimer = setTimeout(imageTransition, displayTime); //wait, then transition images
	}
    
	
	/* TRANSITION EFFECT */
	function imageTransition () {
		$(imgContainers).fadeOut(transitionSpeed); // fade Out all image containers
		$(nextImageContainer).fadeIn(transitionSpeed * 0.5);	//fade in next image container
		$(currentImageContainer).hide(); //make sure current image container becomes hidden
	    
	    /*console.log(currentImageContainer);
  	  	console.log(currentImageContainerID);
   		console.log(nextImageContainer);
	    console.log(currentThumbContainer);*/
	    
	    establishState(); //when finished with transition, return
	}
	
	/* CLICK FUNCTIONALITY */
	//$(thumbContainers).children('a').unbind('click', thumbClick).bind('click', thumbClick);
	$(thumbContainers).children('a').click(thumbClick);
	function thumbClick(event){
		clearTimeout(startTimer);
		
		clickThumbID = $(this).parent('li').attr('id'); //determine the id of the clicked thumb
		nextImageContainer = null;
		nextImageContainer = $(imgContainers).filter('.'+clickThumbID); //split next image to match clicked thumb
		currentThumbContainer = $(this).parent('li');
		
		$(thumbContainers).fadeIn(thumbTransition); //reveal ALL thumbs
    	$(currentThumbContainer).hide(); //but hide current pic's thumb
		
		$(imgContainers).fadeOut(transitionSpeed); // fade Out all image containers
		$(nextImageContainer).fadeIn(transitionSpeed);	//fade in next image container
		$(currentImageContainer).hide(); //make sure current image container becomes hidden
		
    	/*console.log(currentImageContainer);
  	  	console.log(currentImageContainerID);
   		console.log(nextImageContainer);
	    console.log(currentThumbContainer);*/
	    
		startTimer = setTimeout(establishState, displayTime); //wait, then transition images
		
		return false; // stop window from default action of jumping to that location
	};
	
	

	$(window).load(function() { //Wait for page load
		establishState();//begin rotating images
	});
		
	
});