function fadeOut(obj)
	{
	$('div.control').animate({'opacity': '0.5'}, 300);
	}
	
$(function() {
	fadeoutTimer = 0;
	$('div.control').bind('mouseover', function() {
		clearTimeout(fadeoutTimer);
		$(this).animate({'opacity': '1'}, 300);
	}).bind('mouseout', function() {
		fadeoutTimer = setTimeout("fadeOut()", 200);
	});
	var thumbsList = imgList.getLinks();
	var codeBlock = '<ul>';
	$(thumbsList).each(function(i) {
		var g = i + 1;
		if(g < 10)
			{ codeBlock += '<li><span rel="'+ thumbsList[i] +'">0' + g + '</span></li>'; }
			else
			{ codeBlock += '<li><span rel="'+ thumbsList[i] +'">' + g + '</span></li>'; }
	});
	codeBlock += '</ul>';
	$('.stepContent').html(codeBlock);

	$('div.stepContent span:first').addClass('active');
	var imageString = $('div.stepContent span:first').attr('rel');
	imageString = imageString.replace('thumbs/', '');	
	$('#content').css('background', 'transparent url(\'' + imageString + '\') top left no-repeat');

	$('div.stepContent span').bind('click', function() {
		var imageString = $(this).attr('rel');
		imageString = imageString.replace('thumbs/', '');
		$('div.stepContent span').removeClass('active');
		$(this).addClass('active');
		$('#content').css('background', 'transparent url(\'' + imageString + '\') top left no-repeat');		
	}).bind('mouseover', function() {
		$(this).addClass('hover');
		var img = $(this).attr('rel');
		var leftPx = eval(($(this).position().left + 4) - ($(this).width() / 2));
		$('div.preview').show().css({ 'left': leftPx + 'px' });
		$('div.preview').html('<div class="img" style="background: transparent url(\'' + img + '\') top left no-repeat; font-size: 0;">&nbsp;</div>');
	}).bind('mouseout', function() {
			$(this).removeClass('hover');
			$('div.preview').hide();
	});
	$('span[rel=stepLeft]').bind('click', function() {
		margin = $('div.stepContent ul').css('marginLeft');
		margin = margin.replace('px', '');
		// width = $('div.stepContent ul li:first').width();
		width = 36;
		scroll_distance = Number(margin) + Number(width);
		$('div.stepContent ul').animate({ marginLeft: scroll_distance + 'px' });
	});
	$('span[rel=stepRight]').bind('click', function() {
		margin = $('div.stepContent ul').css('marginLeft');
		margin = margin.replace('px', '');
		// width = $('div.stepContent ul li:first').width();
		width = 36;
		scroll_distance = Number(margin) - Number(width);
		$('div.stepContent ul').animate({ marginLeft: scroll_distance + 'px' });
	});
	$('span[rel=start]').bind('click', function() {
		var imageString = $('div.stepContent ul li span:first').attr('rel');
		imageString = imageString.replace('thumbs/', '');
		$('div.stepContent span').removeClass('active');
		$('div.stepContent ul li span:first').addClass('active');
		$('#content').css('background', 'transparent url(\'' + imageString + '\') top left no-repeat');		
		$('div.stepContent ul').animate({ marginLeft: '0px' }, 2000);
	});
	$('span[rel=end]').bind('click', function() {
		var imageString = $('div.stepContent ul li span:last').attr('rel');
		imageString = imageString.replace('thumbs/', '');
		$('div.stepContent span').removeClass('active');
		$('div.stepContent ul li span:last').addClass('active');
		$('#content').css('background', 'transparent url(\'' + imageString + '\') top left no-repeat');		
		$('div.stepContent ul').animate({ marginLeft: '-' + $('div.stepContent ul li span:last').offset().left + 'px' }, 2000);
	});
});