$(document).ready(function(){

	var slides = new Array();
	var slinks = new Array();

	$k = 0;
	//var slides = new Array('/upload/banner/103.jpg',
	//var slinks = new Array('/upload/banner/103.jpg',
	$.getJSON(json_url,
		function(data){
		  $.each(data.Banner, function(i,item){
			slides[i] = item.filename;
			slinks[i] = item.link;
			//if ( i == 4 ) return true;
		  });
			for (var i=0;i<slides.length;i++)
				(new Image()).src=slides[i];
			transition(1);
	});

	$('#sb1').click(function(){
		transition(1);
		clearInterval(auto);
	});
	$('#sb2').click(function(){
		transition(2);
		clearInterval(auto);
	});
	$('#sb3').click(function(){
		transition(3);
		clearInterval(auto);
	});
	$('#sb4').click(function(){
		transition(4);
		clearInterval(auto);
	});
	$('#sb5').click(function(){
		transition(5);
		clearInterval(auto);
	});

	$('.arrow.left').click(function(){
		prev();
		clearInterval(auto);
	});
	$('.arrow.right').click(function(){
		next();
		clearInterval(auto);
	});

	//transition(Math.floor( Math.random( ) * 5 ) + 1);

	/* Устанавливаем auto-advance каждые 10 секунд */
	var auto;

	auto = setInterval(function(){
		next();
	}, 5*1000);

	var current = {};
	function transition(id)
	{
		/* Эта функция показывает слайд с указанным id. */
		if(!slides[id-1]) {
			return false;
		}

		if(current.id)
		{
			/* Если слайд, который мы хотим показать уже показан: */
			if(current.id == id) return false;
			/* Двигаем текущий слайд наверх: */
			current.layer.css('z-index',10);
			/* Убираем все другие слайды снизу */
			$('.mosaic-slide').not(current.layer).remove();
		}

		var link = slinks[id-1];
		var div = '<div class="mosaic-slide" onClick="window.location.href=\''+link+'\'" style="cursor:pointer">'; 

		/* Создаем новый слайд и заполняем его generateGrid: */
		var newLayer = $(div).html(generateGrid({rows:5,cols:10,image:slides[id-1]}));

		/* Двигаем его за текущим слайдом: */
		newLayer.css('z-index', 10);
		$('#mosaic-slideshow').append(newLayer);

		if(current.layer)
		{
			/* Прячем каждую плитку текущего слайда, показываем новый слайд: */
			$('.tile',current.layer).each(function(i){
				var tile = $(this);
				setTimeout(function(){
					tile.css('visibility','hidden');
				},i*10);
			})
		}

		var b = '#sb' + id;
		$('.banner_select div').removeClass('banner_select_inactive');
		$('.banner_select div').addClass('banner_select_inactive');
		$(b).removeClass('banner_select_inactive'); 
		$(b).addClass('banner_select_active'); 

		/* Добавляем текущий id и элемент newLayer к текущему объекту: */
		current.id = id;
		current.layer = newLayer;
	}

	function next()
	{
		if(current.id)
			transition(current.id%slides.length+1);
	}

	function prev()
	{
		if(current.id)
			transition((current.id+(slides.length-2))%slides.length+1);
	}

	function generateGrid(param)
	{
		/* Creating an empty jQuery object: */
		var elem = $([]),tmp;
		var tabwidth = 97, tabheight = 54;
		for(var i=0;i<param.rows;i++)
		{
			for(var j=0;j<param.cols;j++)
			{
				tmp = $('<div>', {
						"class":"tile",
						"css":{
							"background":'#555 url('+param.image+') no-repeat '+(-j*tabwidth)+'px '+(-i*tabheight)+'px'
						}
				});
				/* Добавляем плитку к объекту jQuery: */
				elem = elem.add(tmp);
			}
			elem = elem.add('<div class="clear"></div>');
		}
		return elem;
	}

});