Head_banner={
	tag: null,
	slides: null,
	buttons: null,
	text: null,
	current: null,
	stoped: false,
	data: [
		{
			button: '/images/auto_audi.png',
			photo: '/images/photo_audi.jpg',
			textOffset: 120,
			text: "В автомагазине<br>“Вариант” вас ждут<br>доступные цены на запчасти<br>и аксессуары<br>для автомобилей <br>группы VW AUDI"
		},
		{
			button: '/images/auto_volkswagen.png',
			photo: '/images/photo_volkswagen.jpg',
			textOffset: 465,
			text: "Предлагаем<br>оригинальные,<br>а также качественные<br>неоригинальные<br>запчасти известных<br>брендов"
		},
		{
			button: '/images/auto_skoda.png',
			photo: '/images/photo_skoda.jpg',
			textOffset: 120,
			text: "У нас всегда<br>широкий ассортимент<br>деталей для ремонта<br>и ТО в наличии"
		},
		{
			button: '/images/auto_seat.png',
			photo: '/images/photo_seat.jpg',
			textOffset: 465,
			text: "На сайте магазина<br>“Вариант”<br>заказ запчастей<br>и расходников<br><a href=\"/spares\">в 1 клик</a>"
		}
	],

	init: function()
	{
		//active link color
		$('.head_menu a').each(function(){
			if (this.href==location.href)
				$(this).addClass('active');
		})

		this.tag=$('#head_banner');
		var _parent=this;
		this.tag.hover(function(){
			_parent.stoped=true;
		}, function() {
			_parent.stoped=false;
		})
		this.buttons=$('<div/>');
		this.buttons
			.css({
				position: 'absolute',
				top: 80,
				left: 0,
				zIndex: 20
			})

		this.slides=$('<div/>');
		this.slides
			.css({
				position: 'absolute',
				top: 0,
				left: 0,
				zIndex: 10
			})
		this.text=$('<div><div/></div>');
		this.text.css({
			position: 'absolute',
			top: 0,
			bottom: 0,
			left: -300,
			width: 195,
			height: '100%',
			zIndex: 15,
			padding: '30px 20px 30px 20px',
			textAlign: 'left',
			lineHeight: '30px',
			background: 'url(/images/transpbg.png)',
			overflow: 'hidden'
		})
		for(var i=0; i<this.data.length; i++) {
			this.buttons.append('<div style="cursor:pointer;text-align:center" onclick="Head_banner.goto('+i+')"><img src="'+this.data[i].button+'"></div>');
			this.slides.append('<div style="height:274px"><img src="'+this.data[i].photo+'"></div>');
		}
		this.slides.find('div').css({
			position: 'absolute',
			left: 0,
			top: 0
		});
		this.tag.append(this.slides);
		this.tag.append(this.text);
		this.tag.append(this.buttons);
		this.current=-1;
		this.animation();
	},

	goto: function(num)
	{
		//highlight button
		this.buttons.find('div')
			.css('background','')
			.eq(num).css('background', 'url(/images/transpbg.png)')
		//remove text
		var textEdge=(parseInt(this.text.css('left'))>200?'right':'left');
		var _parent=this;
		var animateTo={ opacity: 0 };
		animateTo.marginLeft=textEdge=='left' ? '-70%' : '70%';
		this.text.find('div').animate(animateTo)
		.parent().delay(200).animate({
			left: textEdge=='left' ? -245 : 760
		},function(){
			textEdge=_parent.data[num].textOffset>200 ? 'right' : 'left';
			animateTo={ opacity: 1};
			animateTo.marginLeft=0;
			_parent.text.find('div').html(_parent.data[num].text)
				.css({opacity: 0}).css('margin-left', textEdge=='left' ? '-70%' : '70%');
			_parent.text.css({ left: (textEdge=='left' ? -245 : 760) })
			_parent.text.animate({
				left: _parent.data[num].textOffset
			})
			.find('div').delay(200).animate(animateTo)
		})
		//scroll images
		this.slides.find('div').fadeOut();
		this.slides.find('div').eq(num).fadeIn();

		this.current=num;
	},

	animation: function()
	{
		if (!this.stoped) {
			this.current++;
			if (this.current>=this.data.length) this.current=0;
			this.goto(this.current)
		}
		var _parent=this;
		setTimeout(function(){
			_parent.animation();
		}, 5000)
	}
}

$(function(){
	Head_banner.init();
})