/*
	sdRotator version: 1.0 (tested with jQuery v1.2 or later)
	
	Feel free to use it! Credits, comments and suggestions are always welcome.
	
	Contact: nikos@savage-dreams.gr
	
	Files:
	sdRotator-1.0.js
	sdRotator.css
	sdRotator.png
	
	Usage:
	jQuery(document).ready(function($) {
		initiateRotation();
	});
	
	<div id="rotation">
		<ul id="items">
			<li id="Item id">
				<div id="image"><img src="Image URL" alt="ImageTitle" /></div>
				<div id="caption">Image caption</div>
			</li>
			.
			.
			.
		</ul>
	</div>
*/

function initiateRotation() {
	$('#rotation').append('<ul id="thumbs"></ul>');
	
	var arr = $('#items').contents().filter('li');
	
	jQuery.each(arr, function() {
		var id = $(this).attr('id');
		var src = $('#' + id + ' img').attr('src');
		var alt = $('#' + id + ' img').attr('alt');
		$('#thumbs').append('<li id="' + id + '"><img src="' + src + '" alt="' + alt + '" /></li>');
	});
	
	$('#thumbs li').fadeTo('fast', 0.50);
	$('#thumbs li:first').fadeTo('fast', 1.00);
	
	$('#thumbs li').mouseover(function () {
		$(this).fadeTo('fast', 1.00);
	});
	
	$('#thumbs li').mouseout(function () {
		if ($(this).attr('class') != 'current') { 
			$(this).fadeTo('fast', 0.50);
		}
	});
	
	$('#thumbs li:first').attr('class', 'current');
	
	last = $('#thumbs li:last').attr('id');
	
	/*$('#items li:first').fadeIn('normal', function() {
		$('#caption').animate({ marginTop: '-' + $('#caption').innerHeight() + 'px' }, function() {
			timeoutRotation = setTimeout("rotateItems();", 4000);
		});
	}).attr('class', 'selected');*/
	
	$('#items li:first').fadeIn('normal', function() {
		timeoutRotation = setTimeout("rotateItems();", 4000);
	}).attr('class', 'selected');
	
	$('#thumbs li').click(function() {
		clearTimeout(timeoutRotation);
		changeItem($(this).attr('id'));
		timeoutRotation = setTimeout("rotateItems();", 4000);
	});
}

function changeItem(id) {
	/*$('.selected #caption').animate({ marginTop: '0px' }, function() {
		$('.current').attr('class', '');	
		$('.selected').fadeOut('normal', function() {
			$('#thumbs ' + '#' + id).attr('class', 'current');
			$('#' + id).fadeIn('normal', function() {
				$('#' + id + ' #caption').animate({
					marginTop: '-' + $('#' + id + ' #caption').innerHeight()
				});
			}).attr('class', 'selected');
		}).attr('class', '');
	});*/
	
	$('#rotation .selected').fadeOut('normal', function() {
		$('.current').attr('class', '');
		$('#thumbs ' + '#' + id).attr('class', 'current');
	
		$('#thumbs li').fadeTo('fast', 0.50);
		$('.current').fadeTo('fast', 1.00);
		
		/*$('#' + id).fadeIn('normal', function() {
			$('#' + id + ' #caption').animate({
				marginTop: '-' + $('#' + id + ' #caption').innerHeight()
			});
		}).attr('class', 'selected');*/
		
		$('#' + id).fadeIn('normal').attr('class', 'selected');
	}).attr('class', '');
}

function rotateItems() {
	if ($('#thumbs').children('li').length > 1) {
		next = ($('#rotation  .selected').attr('id')*1)+1;
		if (next > last) { next = $('#thumbs li:first').attr('id'); }
		changeItem(next);
		timeoutRotation = setTimeout("rotateItems();", 4000);
	}
}