var activeImage = 0;
var smallImg = 0;
var smallLeft = 0;
var smallRight = 0;
var smallActive = 0;
var smallScroll = 0;
var bigImg = 0;
var arrow = 0;
var animateTimer = 0;
var imagesAmount = 0;
var smallAmount = 0;

function aTimer() { 
		animateTimer++;
  		if(!(animateTimer%10)) scroll("left");
  		setTimeout("aTimer()",1000);
  	}
	
function rebuild() {
	
		smallScroll = $('.images_scroll').each( function (i) {
		this.index = i;
		});
			
		smallImg = $('.small').each( function (i) {
		this.index = i;	
		});
		
		smallLeft = $('#left').each( function (i) {
		this.index = i;
		});
	
		smallRight = $('#right').each( function (i) {
		this.index = i;
		});
		
		smallActive = $('#active').each( function (i) {
		this.index = i;
		});
		
		arrow = $('.arrow').each( function (i) {
		this.index = i;
		});
		
		bigImg = $('.scroll').each( function (i) {
		this.index = i;
		});
	};

function scroll(side) {
		rebuild();
		animateTimer = 0;
		if(side=="left")
		{
		
			$(bigImg).animate({left: '-=871'}, 450, function () {
			activeImage++;
  				if(activeImage>imagesAmount-1) activeImage = 0;
  					$(bigImg).html(function () {
  					var html = '';
  					for(var i = -1; i!=2; i++)
						{
						if((activeImage+i)>imagesAmount-1)
							html += '<img width="871" height="362" src="' + bannerImages[0] + '" />';
						else if((activeImage+i)<0)
							html += '<img width="871" height="362" src="' + bannerImages[imagesAmount-1] + '" />';
						else
							html += '<img width="871" height="362" src="' + bannerImages[activeImage+i] + '" />';
						}
					return html;
  					}).css("left", "-871px");
			});
			
			$(smallActive[0]).animate({
    			width: 235,
    			marginLeft: '42',
    			marginRight: '42',
    			marginTop: '33',
    			marginBottom: '33'
  					}, 150, function() {
  					
  					$(smallScroll).animate({left: '-=319'}, 150, function () {
  						$(smallRight).animate({
   							width: 289,
    						marginLeft: '15',
    						marginRight: '15',
    						marginTop: '21',
    						marginBottom: '21'
  								}, 150, function() {
  								$(smallScroll).html(function () {
									var html = '';
									for(var i = -2; i<3; i++)
										{
										html += '<img class="';
										if(i==-1) html+= 'small" id="left"';
										else if(i==0) html+= 'big" id="active"';
										else if(i==1) html+= 'small" id="right"';
										else html+= 'small"';
										//if(i==0) html += ' style="margin: 21px 15px; width: 283px;"';
										if(activeImage+i==-2)
											html += ' src="' + minImages[smallAmount-2] + '" />';
										else if(activeImage+i==-1)
											html += ' src="' + minImages[smallAmount-1] + '" />';
										else if(activeImage+i==smallAmount)
											html += ' src="' + minImages[0] + '" />';
										else if(activeImage+i==smallAmount+1)
											html += ' src="' + minImages[1] + '" />';
										else
											html += ' src="' + minImages[activeImage+i] + '" />';
										}
									return html;
								}).css('left', '-319px');
  						});
  					});
  			});
		
		}
		else
		{
		
		$(bigImg).animate({left: '+=871'}, 450, function () {
		activeImage--;
  		if(activeImage<0) activeImage = imagesAmount-1;
  		$(bigImg).html(function () {
  			var html = '';
  			for(var i = -1; i!=2; i++)
			{
				if((activeImage+i)<0) 
					html += '<img width="871" height="362" src="' + bannerImages[imagesAmount-1] + '" />';
				else if((activeImage+i)>imagesAmount-1) 
					html += '<img width="871" height="362" src="' + bannerImages[0] + '" />';
				else
					html += '<img width="871" height="362" src="' + bannerImages[activeImage+i] + '" />';
			}
		return html;
  		}).css("left", "-871px");
  		});
  		
			
			$(smallActive).animate({
    			width: '235px',
    			marginLeft: '42px',
    			marginRight: '42px',
    			marginTop: '33px',
    			marginBottom: '33px'
  					}, 150, function() {
  					
  					$(smallScroll).animate({left: '+=319'}, 150, function () {
  						$(smallLeft).animate({
   							width: 289,
    						marginLeft: '15',
    						marginRight: '15',
    						marginTop: '21',
    						marginBottom: '21'
  								}, 150, function() {
  								$(smallScroll).html(function () {
									var html = '';
									for(var i = -2; i<3; i++)
										{
										html += '<img class="';
										if(i==-1) html+= 'small" id="left"';
										else if(i==0) html+= 'big" id="active"';
										else if(i==1) html+= 'small" id="right"';
										else html+= 'small"';
										//if(i==0) html += ' style="margin: 21px 15px; width: 283px;"';
										if(activeImage+i==-2)
											html += ' src="' + minImages[smallAmount-2] + '" />';
										else if(activeImage+i==-1)
											html += ' src="' + minImages[smallAmount-1] + '" />';
										else if(activeImage+i==smallAmount)
											html += ' src="' + minImages[0] + '" />';
										else if(activeImage+i==smallAmount+1)
											html += ' src="' + minImages[1] + '" />';
										else
											html += ' src="' + minImages[activeImage+i] + '" />';
										}
									return html;
								}).css('left', '-319px');
  						});
  					});
  			});
		}
		rebuild();
	}

$(document).ready (function () {
	
	imagesAmount = bannerImages.length;
	smallAmount = minImages.length;
	
	rebuild();
	
	$(smallScroll).html(function () {
		var html = '';
		for(var i = -2; i<smallAmount; i++)
			{
				html += '<img class="';
				if(i==-1) html+= 'small" id="left"';
				else if(i==0) html+= 'big" id="active"';
				else if(i==1) html+= 'small" id="right"';
				else html+= 'small"';
				if(i>=0)
				html += ' src="' + minImages[i] + '" />';
				else if(i==-1)
				html += ' src="' + minImages[smallAmount-1] + '" />';
				else
				html += ' src="' + minImages[smallAmount-2] + '" />';
			}
		return html;
	}).css("left", "-319px");
	
	$(bigImg).html(function () {
		var html = '';
		for(var i = -1; i!=imagesAmount; i++)
			{
				if(i>=0)
				html += '<img src="' + bannerImages[i] + '" />';
				else
				html += '<img src="' + bannerImages[imagesAmount-1] + '" />';
			}
		return html;
	}).css("left", "-871px");
	
	$(arrow).click( function () {
		if(this.index) {
		scroll("right");
  		}
		else { 
		scroll("left");
		}
	});
	
	$(smallRight).click( function () {
		scroll("left");
	});
	
	$(smallLeft).click( function () {
		scroll("right");
	});
	
	aTimer();
});