$(function()
{
	$(".thumbnail").empty();
	
	var list = [];
	
	$.getJSON(
		'/flashcms/libs/gallery.php',
		{ "type" : "salon", "format" : "json" },
		function(json)
		{
			if (json.header.status != 'ok') return;
			
			$.each(json.items, function()
			{
				this.mainimage['@obj'] =
					$('<img />')
						.attr('src', this.mainimage['@src'])
						.css({ "interpolation-mode" : "bicubic", "-ms-interpolation-mode" : "bicubic" })
					;
					
				this.thumbnail['@obj'] =
					$('<img />')
						.attr('src', this.thumbnail['@src'])
						.css({ "interpolation-mode" : "bicubic", "-ms-interpolation-mode" : "bicubic" })
					;
				
				list.push(this);
			});
			
			for (var i = 0; i < list.length; i++)
			{
				$(".thumbnail").append(list[i].thumbnail['@obj'].width(28).height(28));
			}
			
//			$('#img_wrapper').append(list[0].mainimage['@obj'].width(670).height(446));
			
			$("#img_wrapper")
				.width($("#img_wrapper > img").width())
				.height($("#img_wrapper > img").height())
			;
			
			$(".thumbnail > img").click(function()
			{
				var self = $(this);
				var index = $(".thumbnail > img").index(self);
				
				changeImage(index);
			})
			.css({ "cursor" : "pointer" });
			
			changeImage(0);
		}
	);
	
	var changeImage = function(index)
	{
		$(".salon-gallery .cbox")
			.width($("#img_wrapper > img").width())
			.height($("#img_wrapper > img").height())
			.css("background-color", "#eeeeee")
		;
		
		$(".salon-gallery :animated").stop();
				
		$(".salon-gallery .cbox").animate(
		{
			"opacity" : 0
		}, 500);
		
		$("#img_wrapper").animate(
		{
			"height" : 0
		}, 500, "easeOutExpo", function()
		{
			$(this).children("img").attr("src", list[index].mainimage['@src']);
			
			$(".cbox").animate(
			{
				"opacity" : 1
			}, 500);
			
			$(this).animate(
			{
				"height" : 446,
				"opacity" : 1
			}, 2000, "easeOutExpo");
		});
	};
});