// JavaScript Document

/* ***************************
*
* класс для нескольких каруселек на одной странице
* html должен быть такой
*
* <table cellpadding=0 cellspacing=0  class="gallery" id="%id%">
*		<tr>
*			<td class="gallery-arr-l"  onclick="scroll_to(%id%, 'left')">
*				<img class="slider_arrow" src="/gif/l.gif">
*			</td>
*			<td align="center">
*				<div class="browser">
*					<div class="slidercontainer" id="slidercontainer_%id%">
*						<ul class="slider_list" id="slider_list_%id%">
*							<li><a.....><img...>
*
****************************** */
var sr_l;
var sr_r;
var multiSlider = new Class({
	Implements: [Events, Options],
	initialize: function (id, pre_id){
			this.sliderLength = 0;
			this.step = 133;
			this.margin = 70;//маргин между фотками
			this.n_pic = 1;//количество картинок в окне
			this.s_pic = 1;//количество картинок на шаг
			sr_l = 'disable';
			sr_r = 'disable';

			this.str = '#' + id + ' .foto_slider';//формируем строку для фоток с класом foto_slider внутри элемнта с #id

			this.fotos = new Array();
			this.fotos = $$(this.str);
			this.str = this.fotos.length;
			for(this.i=0; this.i < this.str; this.i++)
			{
		//		this.sliderLength = this.sliderLength + this.step + this.margin;
				$(this.fotos[this.i]).setProperty('id', 'foto' + id + (this.i + 1));
			}
			this.sliderLength = this.step*this.str;
			this.sliderLength = this.sliderLength;
//			$('slider_list_' + id).style.width = this.sliderLength + 'px';

			this.slidercontainer = 'slidercontainer_' + id;
			this.slider = new Fx.Scroll(this.slidercontainer, {
				duration: 2000,
				transition: Fx.Transitions.Quad.easeInOut
			});

			this.scroll = new Hash({
						'id': id,
						'slider': this.slider,
						'x': 1,
						'fotos': this.fotos.length
					});
//			this.onresize_calc(id, 0);
			element = 'lf_'+pre_id;
			this.scroll.slider.toElement(element);
			sr_l = 'enable';
			this.cache(pre_id);
			$('left_conrol').setStyle('cursor', 'pointer');
//			this.start_position(id);
		},
	posit: function(id){
					this.x = this.cache('null');
					this.x = $('slidercontainer_' + id).getScroll().x;
					right_scroll = $('slider_list_' + id).getWidth() - $('slidercontainer_' + id).getWidth() - this.x;//-48;
					this.x = Math.round(this.x/83) + 1;
					this.cache(this.x);
					if(right_scroll <= 0){
						$('scroll_r').src = '/images/arrow_right_in.gif';
						sr_r = 'disable';
					}
					else{
						$('scroll_r').src = '/images/arrow_right.gif';
						sr_r = 'enable';
					}
					if(this.x == 1){
						$('scroll_l').src = '/images/arrow_left_in.gif';
						sr_l = 'disable';
					}
					else{
						$('scroll_l').src = '/images/arrow_left.gif';
						sr_l = 'enable';
					}
		},
	start_position: function(id){
					this.posit.delay(5000, this, id);
		},
	onresize_calc: function (id, pid)
		{
			if($('slidercontainer_'+id))
			{
				k = window.getWidth()-$('slider_container_block').getLeft()-$('gall_l').offsetWidth - $('gall_r').offsetWidth;
				leng_1 = (Math.round(k/83)*(83))-83;
				leng_2 = $('slider_list_' + id).offsetWidth;//-12;

				if(leng_2 < leng_1)
				{
					$('slidercontainer_'+id).style.width = leng_2 + 'px';
				}
				else
				{
					$('slidercontainer_'+id).style.width = leng_1 + 'px';
				}
				if(pid != 0){
				this.state.delay(4000, this, id);
				}
			}
		},
	state: function(id)
		{
				x_f = $('slidercontainer_' + id).getScroll().x;
				r_scroll = $('slider_list_' + id).getWidth() - $('slidercontainer_' + id).getWidth() - x_f;

				if(r_scroll <= 0){
					$('scroll_r').src = '/images/arrow_right_in.gif';
					sr_r = 'disable';
				}
				else{
					$('scroll_r').src = '/images/arrow_right.gif';
					sr_r = 'enable';
				}
		},
	cache: function(x){
			if(x == 'null') x = this.scroll.x; else  this.scroll.x = x;
			return x;
		},

	scroll_to: function(direct,id){
				this.x = this.cache('null');
//				dx = Math.round($('slidercontainer_'+id).offsetWidth / 83);
//				h = this.sliderLength/83;//87;
				if(direct == 'right' && sr_r != 'disable')
				{
					this.x = this.x + 1;
					if(this.x < 4){
						if (sr_l == 'disable'){
							sr_l = 'enable';
							$('left_conrol').setStyle('cursor', 'pointer');
						}
						element = 'lf_'+this.x;
						this.scroll.slider.toElement(element);
						if(this.x == 3){
							sr_r = 'disable';
							$('right_control').setStyle('cursor', 'default');
						}
						this.cache(this.x);
					}
/*					if (sr_l == 'disable'){
						sr_l = 'enable';
					    $('scroll_l').src = '/images/arrow_left.gif';
					}*/
//					this.x = this.x + dx*2;
//					this.foto = 'foto' + this.scroll.id + this.x;
/*					if(this.x >=h){
						$('scroll_r').src = '/images/arrow_right_in.gif';
						sr_r = 'disable';
					}

					if(!$(this.foto))
					{
						this.x = this.scroll.fotos - dx+1;

					}else this.x = this.x - dx;
					this.foto = 'foto' + this.scroll.id + this.x;
					if($(this.foto))
					{
						this.li = $(this.foto).getParent().getParent().getPosition($('slider_list_' + this.scroll.id));
						this.scroll.slider.start(this.li.x,0);
					}
					this.cache(this.x);*/
				}
				if(direct == 'left' && sr_l != 'disable')
				{
					this.x = this.x - 1;
					if(this.x > 0){
						if (sr_r == 'disable'){
							sr_r = 'enable';
							$('right_control').setStyle('cursor', 'pointer');
						}
						element = 'lf_'+this.x;
						this.scroll.slider.toElement(element);
						if(this.x == 1){
							sr_l = 'disable';
							$('left_conrol').setStyle('cursor', 'default');
						}
						this.cache(this.x);
					}

/*					if (sr_r == 'disable'){
						sr_r = 'enable';
						$('scroll_r').src = '/images/arrow_right.gif';
					}

					this.x = this.x - dx;
					this.foto = 'foto' + this.scroll.id + this.x;
					if($(this.foto))
					{
						this.li = $(this.foto).getParent().getParent().getPosition($('slider_list_' + this.scroll.id));
						this.scroll.slider.start(this.li.x,0);
					}
					else
					{
						this.x = 1;
						this.cache(this.x);
						this.scroll.slider.toLeft();
					}
					this.cache(this.x);
					if(this.x == 1){
						sr_l = 'disable';
					    $('scroll_l').src = '/images/arrow_left_in.gif';
					}*/
				}
		}
});