$(document).ready(function() {

	$(".scrollbox")
		.wrap($("<div />").addClass('scrollbox_wrapper'))
		.wrapInner($("<div />").addClass('scrollbox_content'))
		.css({ 'overflow': 'hidden' })

	$(".scrollbox_wrapper")
		.prepend($("<div />")
			.addClass('controls')
			.append($("<a />")
				.addClass('prev')
				.attr({'href':'', 'title':'Poprzedni'})
				.html('&laquo;')
				.append($("<span />")))
			.append(" ")
			.append($("<a />")
				.addClass('next')
				.attr({'href':'', 'title':'Następny'})
				.html('&raquo;')
				.append($("<span />"))));

	var prev = $(".scrollbox_wrapper .prev");
	var next = $(".scrollbox_wrapper .next");
	var count = $(".scrollbox_content img").length;
	var image_width = $(".scrollbox_content img").width() + parseFloat($(".scrollbox_content img").css('marginLeft').replace(/px/, "")) + parseFloat($(".scrollbox_content img").css('marginRight').replace(/px/, "")) + parseFloat($(".scrollbox_content img").css('borderRightWidth').replace(/px/, "")) + parseFloat($(".scrollbox_content img").css('borderRightWidth').replace(/px/, ""));
	var images_width = count * image_width;
	var scroll_width = $(".scrollbox").width();

	$(".scrollbox_content").css({'width':images_width + 'px'});

	$(".scrollbox_wrapper .controls a").click(function() {
		if($(this).attr('class') == 'next') {
			var margin = parseFloat($(".scrollbox_content").css('marginLeft').replace(/px/, "")) - scroll_width;
			var rest_width = images_width + margin;
			if(rest_width < scroll_width) {
				margin = -(images_width - scroll_width);
				next.detach();
			}
			$(".scrollbox_wrapper .controls").prepend(prev);
		} else {
			var margin = parseFloat($(".scrollbox_content").css('marginLeft').replace(/px/, "")) + scroll_width;
			if(margin >= 0) {
				margin = 0;
				prev.detach();
			}
			$(".scrollbox_wrapper .controls").append(next);
		}
		$(".scrollbox_content").stop().animate({
			marginLeft: margin + 'px'
		}, 200);
		return false;
	});

	prev.detach();
	if(images_width < scroll_width) {
		next.detach();
	}

	$(".large_image").append($("<img />")
		.attr({
			'width': $(".scrollbox_content a:first-child").attr('title').split('(')[1].split(' ')[0],
			'height': $(".scrollbox_content a:first-child").attr('title').split('(')[1].split(')')[0].split(' ')[2],
			'src': $(".scrollbox_content a:first-child").attr('href'),
			'alt': $(".scrollbox_content a:first-child").attr('title')
		})
	)

	$(".scrollbox_content a").click(function() {
		var src = $(this).attr('href');
		var alt = $(this).attr('title');
		var width = $(this).attr('title').split('(')[1].split(' ')[0];
		var height = $(this).attr('title').split('(')[1].split(')')[0].split(' ')[2];

		$(".large_image").css({'background':'#fff url(/media/images/ajax-loader.gif) center center no-repeat'})

		$(".large_image img").stop().animate({
			opacity: '0.2'
		}, 200, function callback() {
			$(this).remove();
			$(".large_image").append($("<img />")
				.attr({
					'width': width,
					'height': height,
					'src': src,
					'alt': alt
				})
			)

			$(".large_image img").animate({ opacity: '1' }, 200);
		})
		return false;	
	});

});