var images = [];
var idx = 1;
var len = 3;
$(document).ready (function ()  {

	$.post ('/carousel/', { request : "images" }, function (json) {
		json = eval ('(' + json + ')');
		images = json.images;
		
		loadImages ();
	});

});

function loadImages()
{
	img = new Image ();



	img.onload = function ()
	{
		
	
		
		for (i = 0; i < images.length; i++)
		{
			var img = new Image ();
			img.src = images[i].src;
		

			e = $('<a id="image_'+idx+'" class="rotating_image" href="#"></a>');
			e.appendTo('#rotator');
			if(idx <= len){
				e.show();	
			}
			else{
				e.hide();
			}
			
			e.attr('index',idx);
			e.attr('href',images[i].target);
			e.attr('alt',images[i].name);
			e.attr('title',images[i].name);
			$('#image_'+idx).html(img);
			idx++;
		}
		idx=4;
			

		setInterval ("nextImages()", 10000);	
	}	
	$(img).attr ( {
		src : images[0].src,
		title : images[0].target
	});
}

function nextImages () {
	$('#rotator').animate ({ opacity : 0.0 }, 2000, function () {
			
$(".rotating_image").each(function(i){
	$(this).hide();
	if($(this).attr('index') >= idx && $(this).attr('index')< idx+len){
		$(this).show();
	}	
	
});
	idx+=len;
	$('#rotator').animate ({ opacity : 1.0 }, 2000)

	if(idx >= images.length){
		idx=1;
	}
	
});

		
 
}