$(document).ready(function()
{
	BindBanners();
});

function BindBanners()
{
	var banner_links = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];
	var inscriptions = ["Автоматизация в электроэнергетике", "Автоматизация в нефтегазовой отрасли", "Автоматизация на транспорте", "Автоматизация в промышленности", "Автоматизация объектов ЖКХ"];
	var max = 5, largen = 3;
	var width = 96, widthmid = 216, margin = 28;
	var heightmid = 149, height = 119;
	var topmid = 20, top = 33;
	var direction = "right";
	var duration = 200, delay = 2500;
	
	var newElement = function(i, position, center)
	{
		return '<div class="banner_element ' + (center ? "centered" : "") + '" style="' + direction + ': ' + position + 'px"><img src="/js/banner/' + banner_links[i - 1] + '" /><div class="b_i"></div><div class="corners_tl"></div><div class="corners_tr"></div><div class="corners_bl"></div><div class="corners_br"></div><div class="inscription">' + inscriptions[i - 1] + '</div></div>';
	}
	
	var s = "";
	for(var i = 0; i <= max; i++)
	{
		var position = margin / 2 + ((i > largen ? i - 2 : i - 1)) * (width + margin) + (i > largen ? widthmid + margin : 0);
		s += newElement((i == 0 ? banner_links.length : i), position, i == 3);
	}
	
	var last = banner_links.length - 1;
	
	$("#comp_text").html(s);
	
	$("#comp_text > .centered").css({"width": widthmid, "height": heightmid, "top": topmid});
	$("#comp_text > .centered > .inscription").css("display", "block");
	$("#comp_text > .centered > .b_i").css({"width": widthmid - 2, "height": heightmid - 2});
	$("#comp_text > .centered > img").css({"left": 0});
	
	setTimeout(function(){
		var parent = $("#comp_text").children();
		var length = parent.get().length;
		for(var i = 0; i < length; i++)
		{
			var el = $("#comp_text > div:nth-child(" + (i + 1) + ")");
			var position = parseFloat(el.css(direction));
			position += width + margin;
			
			if(i + 1 == largen)
			{
				var chars = 
				{
					"width": widthmid,
					"height": heightmid,
					"top": topmid
				}
				chars[direction] = position;
				
				el.animate(chars, duration);
				el.children(".b_i").animate({"width": widthmid - 2, height: heightmid - 2}, duration);
				el.children("img").animate({"left": "0"}, duration);
				el.children(".inscription").css("display", "block").animate({"opacity": 1}, duration);
			}		
			else if(i == largen)
			{
				var chars = 
				{
					"width": width,
					"height": height,
					"top": top
				}
				chars[direction] = position + widthmid - width;
				el.animate(chars, duration);
				el.children(".b_i").animate({"width": width - 2, height: height - 2}, duration);
				el.children("img").animate({"left": "-50%"}, duration);
				el.children(".inscription").css("display", "none");
			}
			else if(direction == "left")
				el.animate({"left": position}, duration);
			else
				el.animate({"right": position}, duration);
		}
		setTimeout(function(){
			$("#comp_text > div:nth-child(" + (length) + ")").remove();
			$("#comp_text").prepend(newElement(last--, -margin/2 - width));
			if(last < 1)
				last = banner_links.length;
		}, duration);
		
			
		setTimeout(arguments.callee, delay);
	}, delay);
}