$(document).ready(function() {

	$("#carusel")
		.addClass('js')
		.prepend(jQuery("<ul />").addClass('nav'))
		.prepend(	jQuery("<div />").addClass('image_wrapper').css({'background':'#fff url(/media/images/ajax-loader.gif) center center no-repeat'}))
		.prepend(jQuery("<h2 />").css({'display':'none'}).text($("#carusel h2").text()));

	var carusel_data = [[], [], [[], [], []]];
	var count = $("#carusel .content li").length;

	for(var i = 1; i <= count; i++) {
		var element_image = $("#carusel .content li:nth-child(" + i + ") img").attr('alt');
		carusel_data[0].push($("#carusel .content li:nth-child(" + i + ") span").text());
		carusel_data[1].push($("#carusel .content li:nth-child(" + i + ") .text a").attr('href'));
		carusel_data[2][0].push(element_image.substr(8).split(' ')[0]);
		carusel_data[2][1].push(element_image.split('(')[1].split(' ')[0]);
		carusel_data[2][2].push(element_image.split('(')[1].split(')')[0].split(' ')[2]);

		$("#carusel .nav")
			.append(jQuery("<li />")
				.append(jQuery("<a />")
					.attr({'href' : element_image.substr(8).split(' ')[0], 'title': $("#carusel .content li:nth-child(" + i + ") span").text()})
					.text(i)
				)
			);
	}

	$("#carusel .content").remove();
	$("#carusel .nav li:first-child").addClass('selected');

	var object = $("#carusel .image_wrapper");

	if(carusel_data[1][0] != undefined) {
		$("#carusel .image_wrapper").html(
			jQuery("<a />").attr({'href': carusel_data[1][0], 'title': carusel_data[0][0]})
		);
		object = $("#carusel .image_wrapper a");
	}

	object.append(jQuery('<img />').attr({
		'src': carusel_data[2][0][0],
		'width': carusel_data[2][1][0],
		'height': carusel_data[2][2][0],
		'alt': carusel_data[0][0]
	}))

	$("#carusel .nav a").click(function() {
		var nr = parseFloat($(this).text());
		$("#carusel .nav li").removeClass('selected');
		$(this).parent().addClass('selected');

		$("#carusel .image_wrapper img").stop().animate({
			opacity: '0.2'
		}, 200, function callback() {
			if(carusel_data[1][nr - 1] != undefined) {
				if($(this).parent().attr('class') == 'image_wrapper') {
					$(this).wrap(jQuery("<a />"));
				}
				$(this).parent().attr({
					'href': carusel_data[1][nr - 1],
					'title': carusel_data[0][nr - 1]
				})
			} else {
				if($(this).parent().attr('class') != 'image_wrapper') {
					$(this).unwrap();
				}
			}

			$(this).attr({
				'src': carusel_data[2][0][nr - 1],
				'width': carusel_data[2][1][nr - 1],
				'height': carusel_data[2][2][nr - 1],
				'alt': carusel_data[0][nr - 1]
			})
			
			$(this).animate({ opacity: '1' }, 200);
		});
		return false;
	});

	if(count == 1) { $("#carusel .nav").remove() }

});