
jQuery().ready(function() {
	var current; // текущий елемент. всегда на позиции 0.
	var big_img_num = $('.big_panel').size(); // кол-во больших изображений.
	var big_panel = $('.big_panel');// содержит большие изображения.
	var small_img_wrap = $('.small_panel'); //  ul Элемент , в нем все li т.е. img изображения.
	var	small_img = $('li','.small_panel'); //  превью img 
	var offset_left = -429; // отступ превью изображения от левого края.
	var offset_top = 0; // отступ превью изображения от верхнего края.
	var id; // значение атрибута id на каждом изображении превью.
	var small_img_num = $('.small_panel').size(); // кол-во больших изображений.
	var i;
	var ih = 1;
	var iv = -1;
	var speed = "slow";
//##############################################################################################	

	function showNextItem(sufix) {
	if($('#g_prev').css('display') == 'block'){
		$("#0").animate({"left":"+=143px"},speed);
		$(".horizontal").animate({"left":"+=143px"}, speed);
		$(".vertical").animate({"top":"-=105px"}, speed);
		var ver_num = $('.vertical').size();
		var hor_num = $('.horizontal').size();
		if(ver_num == 4) {$("#g_prev").css({
		'display':'none',
		"-moz-opacity":"0.3",
		"-khtml-opacity":"0.3",
		"opacity":"0.3",
		"cursor":"default"});
		$("#g_prev_2").css({'display':'block'});
		}	
		if(ver_num >= 7) { 
		$("#g_next").css({
		'display':'block',
		"-moz-opacity":"1",
		"-khtml-opacity":"1", 
		"opacity":"1",
		"cursor":"pointer"}); 
		$("#g_next_2").css({'display':'none'});
		}
		for(i = 0; i < hor_num; i++){
			id = $('.horizontal').eq(i).attr('id');
			id++;
			$('.horizontal').eq(i).attr('id',id);
		}
		$("#0").attr({'class':'horizontal','id':'1'}).css({'border':'0px'});
		for(i = 0; i < ver_num; i++){
			id = $('.vertical').eq(i).attr('id');
			id++;
			$('.vertical').eq(i).attr('id',id);
		}
		$("#0").removeClass('vertical');
		big_panel.css({'display':'none'});
		var attr_img = $('#-3 img').attr('min');
		for(i=0; i<=big_img_num; i++){
		var big_panel_item = big_panel.eq(i);
		var big_panel_item_num = big_panel_item.attr('big');
		if(big_panel_item_num == attr_img)  big_panel.eq(i).css({'display':'block'});
		}
	}	
	};
	
	function showPrevItem(sufix) {
		if($('#g_next').css('display') == 'block'){

		$("#0").animate({"top": "+=105px"}, speed);
		$(".vertical").animate({"top": "+=105px"}, speed);
		$(".horizontal").animate({"left": "-=143px"}, speed);
		var ver_num = $('.vertical').size();
		var hor_num = $('.horizontal').size();
		if(ver_num == 3) { 
		$("#g_prev").css({
		'display':'block',
		"-moz-opacity":"1",
		"-khtml-opacity":"1", 
		"opacity":"1",
		"cursor":"pointer"});
		$("#g_prev_2").css({'display':'none'});
		}
		if(hor_num == 7) {
		$("#g_next").css({
		'display':'none',
		"-moz-opacity":"0.3",
		"-khtml-opacity":"0.3", 
		"opacity":"0.3",
		"cursor":"default"});
		$("#g_next_2").css({'display':'block'});
		}
		for(i = 0; i < ver_num; i++){
			id = $('.vertical').eq(i).attr('id');
			id--;
			$('.vertical').eq(i).attr('id',id);
		}
		$("#0").attr({'class':'vertical','id':'-1'}).css({'border':'0px'});
		for(i = 0; i < hor_num; i++){
			id = $('.horizontal').eq(i).attr('id');
			id--;
			$('.horizontal').eq(i).attr('id',id);
		}
		$("#0").removeClass('horizontal');
		big_panel.css({'display':'none'});
		var attr_img = $('#-3 img').attr('min');
		for(i=0; i<=big_img_num; i++){
		var big_panel_item = big_panel.eq(i);
		var big_panel_item_num = big_panel_item.attr('big');
			if(big_panel_item_num == attr_img)  big_panel.eq(i).css({'display':'block'});
		}
	}
	};

	$("#g_next").mouseover(function() {
		ID_next = setInterval(function() {showPrevItem()}, 1000);	
    });

    $("#g_next").mouseout(function() {
       clearInterval(ID_next);
    });

	$("#g_prev").mouseover(function() {
		ID_next = setInterval(function() {showNextItem()}, 1000);	
	});

    $("#g_prev").mouseout(function() {
       clearInterval(ID_next);
    });  

big_panel.eq(3).css({'display':'block'}); 

for(i = 0; i < big_img_num; i++){
		if(i == 0) {
			small_img.eq(i).attr('id',i);
			small_img.eq(i).css({'margin':'0','padding':'0','width':'133px','position':'absolute','zIndex':'2','top':offset_top+'px','left':'0','height':'100px'});
		}

		if(i > 3 ) {
			small_img.eq(i).attr('id',ih);
			small_img.eq(i).attr('class','horizontal');
			small_img.eq(i).css({'margin':'0','padding':'0','width':'133px','position':'absolute','zIndex':'2','top':'0','left':offset_left+'px','height':'100px'});
			ih++;
			}		
		if(i <= 3 && i!=0) {
			small_img.eq(i).attr('id',iv);
			small_img.eq(i).attr('class','vertical');
			small_img.eq(i).css({'margin':'0','padding':'0','width':'133px','position':'absolute','zIndex':'2','top':offset_top+'px','left':'0','height':'100px'});
			iv--;
			}
		offset_left += 143;
		offset_top += 105;
}
		var ver_num = $('.vertical').size();
		var hor_num = $('.horizontal').size();
		
		if(ver_num == 3){
			$("#g_prev").css({"-moz-opacity":"0.3","-khtml-opacity":"0.3","opacity":"0.3","cursor":"default"});
			$("#g_prev_2").css({'display':'block'});
		}
		
		if(hor_num ==8){ 
			$("#g_next").css({"-moz-opacity":"0.3","-khtml-opacity":"0.3","opacity":"0.3","cursor":"default"});
			$("#g_next_2").css({'display':'block'});
		}
}); 



