$(function(){

	$('.reference-box').each(function() {
		var $t = $(this);
		var $overlayPreview = $('<span>').addClass('overlay-preview');
		var $overlay = $('<a>')
			.addClass('overlay')
			.attr('href', $t.find('p.name > a').attr('href'))
			.hover(
				function() {
					$(this).fadeTo(200,0.3)
				},
				function() {
					$(this).fadeTo(200,0)
				}
			);
		$t
			.append(
				$overlayPreview
			)
			.append(
				$overlay.hide()
			)
			.hover(
				function() {
					$overlayPreview.addClass('hover');
					$t.find('p').show();
					$overlay.show().css({opacity:0})
				},
				function() {
					$overlayPreview.removeClass('hover');
					$t.find('p').hide();
					$overlay.hide()
				}
			);
	});
	
	$('#mycarousel')
		.jcarousel({
			scroll: 3
		})
		.find('li > a')
			.click(function() {
				var $t = $(this);
				$('.ref-detail-preview')
					.find('a')
						.attr('href', $(this).attr('rel').match(/\[(.+)\]/)[1])
						.find('img')
							.fadeOut(200, function() {
								$(this)
									.attr('src', $t.attr('href'))
									.load(function() {
										$(this).fadeIn(200);
									})
							});
							
				$('#mycarousel')
					.find('li > a > img')
						.removeClass('tn-active');
				// oznacime aktivni obr.
				$t
					.find('img')
						.addClass('tn-active');
				return false;
			});
    
	$('.slideshow').cycle({
		fx: 'fade',
		timeout: 2000
	});
})