var current_id = 0;
var wait_time = 5000;
var speed = 1200;

var timer = null;

var total = 0;

function homeGallery(){
	var container = $('div.gallery');
	var image_list = container.find('ul.illustration li');
	
	var bottom_nav = container.find('div.listing');
	var button = $('<ul> </ul>');
	
	//If the container was found continue, or else stop.
	if(container.length == 0){
		return;
	}
	
	//Set the total number of items	
	total = image_list.length;
	
	//Build the image select list
	bottom_nav.append(button);
	
	//Create the nav button items
	for(i = 0; i < total; i++){
		button.append('<li><a href="#" id="item_' + i + '">' + i + '</a></li>');
	}
	
	//Add an unique ID to each list item
	$('ul.illustration li').each(function(i){
		$(this).attr('id', 'list_' + i).hide();
	});
	
	//Show the first item
	$('#list_' + current_id).show();
	
	//Highlight the first one
	bottom_nav.find('a:first').addClass('active');

	//Append the button click action
	button.find('li a').click(function(){
		//Get the current ID
		item = $(this).attr('id').replace('item_','');
		
		//If the current item isn't equal to the current active item
		if(item !== current_id){
			changeItem(item);
		}
		
		//Reset the auto change function
		clearTimeout(timer);
		
		//Start the auto change function again
		autoChange();
	});
	
	//Initialize the auto change for the first time
	autoChange();
}

/**
 * Perform the slideshow functions
 */
function autoChange(){
	timer = setInterval(function(){
		next_item = parseInt(current_id) + 1;
		
		if(next_item == total){
			next_item = 0;
		}
		
		changeItem(next_item);
	}, wait_time);
}

/**
 * Perform the fading
 */
function changeItem(item){
	$('#list_' + current_id).fadeOut(speed, function(){
		
	});
	
	$('#list_' + item).fadeIn(speed);
	
	$('#item_' + current_id).removeClass('active');
	$('#item_' + item).addClass('active');

	current_id = item;
}