var banners = [];
var b_left = 2;
var b_right = 1;
var b_center = 0;

function banners_load() 
{	
	var count=0;
	var main_div_w = $('.main-gal').width();
	var banner_w=727;
	var center_left = (main_div_w-banner_w)/2;
	var right_left = main_div_w-banner_w;
	$('.gal-hide').each(function(){
		if(count == 0) $(this).removeClass('gal-hide').addClass('gal-center').css('left', center_left).css('padding-top','20px').css('z-index','200').css('z','200').css('opacity',1);	
		if(count == 1) $(this).removeClass('gal-hide').addClass('gal-right').css('left', right_left).css('padding-top','0px').css('z-index','0').css('z','0').css('opacity',0.6);	
		count++;
		banners[banners.length] = this;
	});
	$(banners[banners.length-1]).removeClass('gal-hide').addClass('gal-left').css('left', 0).css('padding-top','0px').css('z-index','0').css('z','0').css('opacity',0.6);
	b_left = banners.length-1;
	
	$('.ref').click(rotateBanners_to_left);
}

var customStep = function(now, obj) {
    if(obj.prop == 'z')
    {    	
    	$(obj.elem).css('z-index', obj.start + (obj.end - obj.start) * obj.pos);
    }
}

var rotateBanners_to_left = function() {
		var main_div_w = $('.main-gal').width();
		var banner_w=$('.gal-center').width();
		var center_left = (main_div_w-banner_w)/2;
		var right_left = main_div_w-banner_w;

		var b1 = $(banners[b_center]);
		var b2 = $(banners[b_right]);
		var b3 = $(banners[b_left]);

		if(banners.length == 3)
		{
			b1.animate({ left: 0, 'padding-top':'0px', z:0,opacity: 0.6 }, {duration :1500, queue: true,step: customStep}).removeClass('gal-center').addClass('gal-left');
			b2.animate({ left: center_left, 'padding-top':'20px', z:200,opacity: 1}, {duration :1500, queue: true,step: customStep} ).removeClass('gal-right').addClass('gal-center');
			b3.animate({ left: right_left, z:0,opacity: 0.6 }, {duration :1500, queue: true,step: customStep} ).removeClass('gal-left').addClass('gal-right');
			b_center++; if(b_center >= banners.length) b_center=0;
			b_right++; if(b_right >= banners.length) b_right=0;
			b_left++; if(b_left >= banners.length) b_left=0;
		}
		else
		{
			b_center++; if(b_center >= banners.length) b_center=0;
			b_right++; if(b_right >= banners.length) b_right=0;
			b_left++; if(b_left >= banners.length) b_left=0;						
			//b1.animate({ left: 0, 'padding-top':'0px', z:0,opacity: 0.6 }, {duration :1500, queue: true,step: customStep}).removeClass('gal-center').addClass('gal-left');			
			b1.animate({ left: 0,opacity: 0.7}, {duration :1000, queue: true}).animate({'padding-top':'0px', z:0,opacity: 0.5 }, {duration :500, queue: true,step: customStep}).removeClass('gal-center').addClass('gal-left');			
			//b2.animate({ left: center_left, 'padding-top':'20px', z:200,opacity: 1}, {duration :1500, queue: true,step: customStep} ).removeClass('gal-right').addClass('gal-center');			
			b2.animate({'padding-top':'20px', z:200,opacity: 0.7}, {duration :500, queue: true,step: customStep} ).animate({left: center_left,opacity: 1}, {duration :1000, queue: true} ).removeClass('gal-right').addClass('gal-center');			
			
			b3.animate({ left: center_left, z:0,opacity: 0.0 }, {duration :1500, queue: true,step: customStep} ).removeClass('gal-left').addClass('gal-right');			
			
			$(banners[b_right]).animate({ left: right_left, z:0,opacity: 0.6 }, {duration :1500, queue: true,step: customStep} ).removeClass('gal-hide').removeClass('gal-left').addClass('gal-right');
		}
	}
	
var rotateBanners_to_right = function() {
		var main_div_w = $('.main-gal').width();
		var banner_w=$('.gal-center').width();
		var center_left = (main_div_w-banner_w)/2;
		var right_left = main_div_w-banner_w;

		var b1 = $(banners[b_center]);
		var b2 = $(banners[b_right]);
		var b3 = $(banners[b_left]);

		if(banners.length == 3)
		{
			b1.animate({ left: 0, 'padding-top':'0px', z:0,opacity: 0.6 }, {duration :1500, queue: true,step: customStep}).removeClass('gal-center').addClass('gal-left');
			b2.animate({ left: center_left, 'padding-top':'20px', z:200,opacity: 1}, {duration :1500, queue: true,step: customStep} ).removeClass('gal-right').addClass('gal-center');
			b3.animate({ left: right_left, z:0,opacity: 0.6 }, {duration :1500, queue: true,step: customStep} ).removeClass('gal-left').addClass('gal-right');
			b_center++; if(b_center >= banners.length) b_center=0;
			b_right++; if(b_right >= banners.length) b_right=0;
			b_left++; if(b_left >= banners.length) b_left=0;
		}
		else
		{
			b_center--; if(b_center < 0) b_center=banners.length-1;
			b_right--; if(b_right < 0) b_right=banners.length-1;
			b_left--; if(b_left < 0) b_left=banners.length-1;						
			//b1.animate({ left: 0, 'padding-top':'0px', z:0,opacity: 0.6 }, {duration :1500, queue: true,step: customStep}).removeClass('gal-center').addClass('gal-left');			
			b1.animate({ left: right_left,opacity: 0.7}, {duration :1000, queue: true}).animate({'padding-top':'0px', z:0,opacity: 0.5 }, {duration :500, queue: true,step: customStep}).removeClass('gal-center').addClass('gal-right');			
			//b2.animate({ left: center_left, 'padding-top':'20px', z:200,opacity: 1}, {duration :1500, queue: true,step: customStep} ).removeClass('gal-right').addClass('gal-center');			
			b2.animate({ left: center_left, z:0,opacity: 0.0 }, {duration :1500, queue: true,step: customStep} ).removeClass('gal-right').addClass('gal-right');						
			
			b3.animate({'padding-top':'20px', z:200,opacity: 0.7}, {duration :500, queue: true,step: customStep} ).animate({left: center_left,opacity: 1}, {duration :1000, queue: true} ).removeClass('gal-left').addClass('gal-center');					
			
			$(banners[b_left]).animate({ left: 0, z:0,opacity: 0.6 }, {duration :1500, queue: true,step: customStep} ).removeClass('gal-hide').removeClass('gal-right').addClass('gal-left');
		}
	}
	
function main_banner_click(obj)
{
	var c = $(obj).parent().attr('class');
	if(c == 'gal-center') return true;
	//
	if(c == 'gal-right')
	{
		rotateBanners_to_left();
	}
	else
	if(c == 'gal-left')
	{
		rotateBanners_to_right();
	}
	//
	//gal-left
	return false;
}