//Галерея изображений на первой странице сайта
class TCGallery
{
	constructor(parent)
	{
		this.test=0;

		//Конструктор
		this.timeout_id =0;
		this.parent=parent;
		this.mas = this.getChildsMas(); //Массив элементов которые будут "Галереится"
		this.mas.sort(function(a,b){return b.style.zIndex-a.style.zIndex;});
		this.firstmas = [].concat(this.mas); //Первоначальный порядок элементов
		this.btns = new Array();
	}

	work()
	{
		if(this.mas[0].style.opacity > 0.05)
		{
			this.mas[0].style.opacity = this.mas[0].style.opacity - 0.05;
			this.timeout_id=setTimeout(()=>this.work(),50);

			this.test++;
		}else
		{
			//Перестовляем Z индексы первый на последнее место (больший наверху)
			if(this.mas.length>0)
			{
				let z=this.mas[this.mas.length-1].style.zIndex;
				for(let i=this.mas.length-1;i>0;i--)
				{
					this.mas[i].style.zIndex=this.mas[i-1].style.zIndex
				}
				this.mas[0].style.zIndex=z;
			}
			
			//Поменяли местами востанавливаем прозрачность
			for(let i=0;i<this.mas.length;i++)
			{	this.mas[i].style.opacity = 1;
			}
			this.mas.sort(function(a,b){return b.style.zIndex-a.style.zIndex;}); //Сортируем с макс Z индексом наверху в 0ле
			this.timeout_id=setTimeout(()=>this.work(),5000); //Перезапускаем таймер через 10 секунд с максимальным Z индексом
			this.selected();
			this.test++;
		}
	}
	//Стартуем галерею
	Init()
	{
		let maxz=0;
		for(let i=0;i<this.mas.length;i++)
		{	this.mas[i].style.opacity = 1;
			if(maxz<this.mas[i].style.zIndex) maxz=this.mas[i].style.zIndex;
		}
		if(this.mas.length>0)
			setTimeout(()=>this.work(),5000);
		maxz++;

		//Кнопочки для переключения картинок
		let cdv=document.createElement('div');
		cdv.style.cssText='opacity: 0.7; display: block; position: absolute; bottom: 5px; right: 5px; z-index: '+maxz+'; border: solid 0px red;';
		for(let i=0;i<this.mas.length;i++)
		{
			let btn=document.createElement('div');
			btn.style.cssText='cursor: pointer; background-color: #eeeeee; text-align: center; display: inline-block; margin: 2px; border: solid 1px black; width: 17px;';
			btn.appendChild(document.createTextNode(i+1));
			btn.onclick = function(thiz,i){return function(){ thiz.moveTo(i); }; }(this,i);
			cdv.appendChild(btn);
			this.btns.push(btn);
		}
		this.parent.appendChild(cdv);
		if(this.btns.length>0) this.btns[0].style.backgroundColor='#f3af5a';
	}
	//Переместить на заданный слой (позиция с 0)
	moveTo(pos)
	{
		if(pos<0 || pos>this.firstmas.length - 1) return;
		let elm=this.firstmas[pos];
		for(let j=0;j<this.mas.length;j++)
		{
			if(this.mas[0]==elm) break;

			let z=this.mas[this.mas.length-1].style.zIndex;
			for(let i=this.mas.length-1;i>0;i--)
			{
				this.mas[i].style.zIndex=this.mas[i-1].style.zIndex
			}
			this.mas[0].style.zIndex=z;
			this.mas.sort(function(a,b){return b.style.zIndex-a.style.zIndex;});
		}
		//Поменяли местами востанавливаем прозрачность
		for(let i=0;i<this.mas.length;i++)
		{	this.mas[i].style.opacity = 1.0;
		}

		clearTimeout(this.timeout_id)
		this.timeout_id=setTimeout(()=>this.work(),10000);
		this.selected();
	}
	//Поменялся элемент
	selected()
	{
		let pos=0;
		for(let i=0;i<this.firstmas.length;i++)
		{	if(this.mas[0]==this.firstmas[i])
			{	pos=i;
				break;
			}
		}
		//Обнуляем стили
		for(let i=0;i<this.btns.length;i++)
			this.btns[i].style.backgroundColor='#eeeeee';
		//Выставляем стиль для выбранного элемента
		this.btns[pos].style.backgroundColor='#f3af5a';
	}
	
	//Private
	//Получить детей в виде массива
	getChildsMas()
	{
		let mas = new Array();
		if(this.parent!==null)
		{
			let child = this.parent.firstChild;
			while(child){
				if(typeof child.style !== "undefined"){ //Только те где есть стиль
					mas.push(child);
				}
				child = child.nextSibling;
			}
		}
	    return mas;
	}
	//Private
	//Получить позицию по объекту (-1 если ненайден)
	getPos(obj)
	{
		for(let i=0;i<this.firstmas.length;i++)
		{	if(this.firstmas[i]==obj) return i;
		}
		return -1;
	}
}

//Галерея изображений на странице товара (Двигается в право в лево)
class TCGallery2
{
	constructor(parent) {
		this.parent=parent; //Элемент который будем двигать в право в лево
		
		this.mas = new Array(); //Массим элементов с рисуночками
		this.pos=0;
		this.ower=true;
		
		this.iWidth=200; //Размер картинки по умолчанию
		
		// повторить с интервалом 2 секунды
		setInterval(() => this.resize(), 1000);
	}
	
	//Подстраиваюсь под размер родительского компонента
	resize()
	{
		let pDiv = this.parent.parentElement;

		this.parent.style.width = pDiv.offsetWidth+'px';
	}

	//Добавляю кнопочки для переключения картинок
	addImage(small)
	{		
		this.mas.push({div: small, sell: false});

		small.onmouseover = function(thiz,small)
		{	return function()
			{
				if(!thiz.ower) return;

				let pos=-1;
				for(let i=0;i<thiz.mas.length;i++) if(small===thiz.mas[i].div) { pos=i;} //Позиция элемента в массиве
				if(pos===-1) return;

				if(thiz.ower && pos!== thiz.pos )
				{	thiz.pos=pos * 400;
					thiz.moveTo();
				}
			};
		}(this,small);

		small.onclick = function(thiz,small)
		{	return function()
			{

				let pos=-1;
				for(let i=0;i<thiz.mas.length;i++) if(small===thiz.mas[i].div) { pos=i; } else { thiz.mas[i].div.style.borderColor="#dfdfdf"; thiz.mas[i].sell=false; } //Позиция элемента в массиве
				if(pos===-1) return;

				if(!thiz.mas[pos].sell) //Если щёлкнули на выделеное 1й раз
				{	thiz.mas[pos].sell = true;
					thiz.ower=false;
					small.style.borderColor='#999999';	
				}else
				{	thiz.mas[pos].sell = false;
					thiz.ower=true;
					small.style.borderColor='#dfdfdf';
				}				

				if(pos!== thiz.pos )
				{	thiz.pos=pos * 400;
					thiz.moveTo();
				}
			};
		}(this,small);

	};

	//Плавная прокрутка по горизонтали
	moveTo()
	{
		if(this.parent==null) return;
		var dx=(this.pos - this.parent.scrollLeft)/20.0; //Шагов для достижения нужного положения
		if(dx>0) dx=Math.ceil(dx); else dx=Math.floor(dx);
		this.parent.scrollLeft+=dx;
		if(this.parent.scrollLeft!=this.pos)
			setTimeout(()=>this.moveTo(),10);
	}

}