/**
	Галерея с прокруткой, на которой фотографии распологаются в виде матрицы.
	ArtProduct.ru
	07.2011
	Куцевалов К.Д.
	
	Принцип работы
		Скрипт ищет списки <ul> имеющие класс, указанный в аргументе функции, после чего формирует из него
		матрицу изображений (или текста, поскольку в <li> можно поместить все что угодно) и добавляет к
		ней кнопки прокрутки
	Требуемая структура шаблона
		<ul class="className">
			<li><img src="..." alt=""/></li>	(внутри <li> могут быть любые другие дополнительные теги, например рисунок может быть заключен в тег <a> и тп)
			<li><img src="..." alt=""/></li>
			<li><img src="..." alt=""/></li>
			...
			<li><img src="..." alt=""/></li>
		</ul>
	Аргументы  art.cGallery( "className", {params} )
		className - имя класса принадлежащего списку (спискам);
		params.rows - количество строк (видимых);
		params.cols - количество столбцов (видимых);
		params.scrolltime - время прокрутки в мс;
		params.scrollcols - количество пролистываемых столбцов;
	Стили
		Настраиваем сами, они в отдельном файле artCGallery.css
		
*/

if( typeof art === 'undefined' ){ var art = {}; }


art.cGallery = function( className, params ){
	if( typeof className === 'undefined' || className === null ){ return false; }
	//количество строк и столбцов
	var rows = parseInt(params.rows) || 3;
	var cols = parseInt(params.cols) || 3;
	var scrollTime = parseInt(params.scrolltime) || 400;
	var scrollCols = parseInt(params.scrollcols) || cols;
	if( scrollCols > cols ){
		scrollCols = cols;
	}
	var interval;
	
	//ищем все списки присутствующие в документе
	var ULs = document.getElementsByTagName('ul');
	var galleryes = [];
	var t = 0;
	for( i=0; i<ULs.length; i++ ){
		if( ULs[i].className.indexOf(className) > -1 ){	//запоминаем только те, что имеют нужный класс. Данное условие не совсем корректно, поскольку могут попадаться списки с похожими именами классов, ведь не учитывается конкретное совпадение, только наличие подстроки
			galleryes[t] = ULs[i];
			t++;
		}
	}
	ULs = null;
	if( t == 0 ){ return false; /* ! */ }	//нет галерей
	
	//вытаскивает содержимое всех LI из переданного в аргументе UL
	var getImages = function( ul ){
		var LIs = [];
		var t = 0;
		for( var i=0; i<ul.childNodes.length; i++ ){
			if( ul.childNodes[i].nodeType == 1 ){
				if( ul.childNodes[i].tagName.toLowerCase() == 'li' ){
					LIs[t] = ul.childNodes[i].innerHTML;
					t++;
				}
			}
		}
		return LIs;	//!
	}
	
		
	//теперь для каждой галереи производим обработку напильником
	for( i=0; i<galleryes.length; i++ ){
		var gallery = galleryes[i];
		//считываем все изображения из списка
		var images = getImages( gallery );
		//создаем контейнер для галереи
		var mainBlock = document.createElement("div");
		mainBlock.className = "artCGallery";
		var galBlock = document.createElement("div");
		galBlock.className = "gallery";
		var ulBlock = gallery.cloneNode(false);	//делаем клон оригинального <UL>, ну мало ли, может там присвоены некоторые нужные пользователю аргументы или стили
		if( ulBlock.className != null ){
			ulBlock.className = ulBlock.className + " container";
		}else{
			ulBlock.className = "container";
		}
		if( ulBlock.id == null || ulBlock.id == '' ){
			ulBlock.id = "artCGallery_container_" + i;
		}
		//контейнеру нужно присвоить уникальный id
		
		//теперь наполняем изображениями в соответствии с параметром rows
		var liTag;
		var subLiTag;
		var ulTag;
		var totalCols = 0;	//итоговое количество столбцов
		var t = 0;
		for( j=0; j<images.length; j++ ){
			if( t == 0 ){
				//начинаем столбец
				ulTag = document.createElement('ul');
				totalCols++;
			}
			subLiTag = document.createElement('li');
			subLiTag.innerHTML = images[j];
			ulTag.appendChild( subLiTag );
			t++;
			if( t == rows || j == (images.length-1) ){	//если равно кличеству строк или это последний рисунок
				//завершаем столбец
				liTag = document.createElement('li');
				liTag.appendChild( ulTag );
				ulBlock.appendChild( liTag );
				t = 0;
			}			
			
		}

		//собираем воедино
		galBlock.appendChild( ulBlock );
		mainBlock.appendChild( galBlock );
		//заменяем существующий список на новый
		gallery.parentNode.replaceChild( mainBlock, gallery );
		//делаем расчеты размеров контейнера
		//берем последний добавленный елемент и проверяем его обновленные после добавления в html страницу css свойства
		var itemWidth = subLiTag.offsetWidth;
		var itemHeight = subLiTag.offsetHeight;
		if( ulBlock.style == null ){ ulBlock.setAttribute("style", ""); }
		if( galBlock.style == null ){ galBlock.setAttribute("style", ""); }
		if( mainBlock.style == null ){ mainBlock.setAttribute("style", ""); }
		ulBlock.style.width = (totalCols * itemWidth) + "px";
		ulBlock.style.height = (rows * itemHeight) + "px";
		galBlock.style.width = (cols * itemWidth) + "px";
		galBlock.style.height = (rows * itemHeight) + "px";
		mainBlock.style.width = (cols * itemWidth) + "px";
		mainBlock.style.height = (rows * itemHeight) + "px";

		//делаем кнопочки прокрутки (pagesButtons) из рисунков
		var pagesButtons = document.createElement('div');
		pagesButtons.className = 'pagesLinks';
		pagesButtons.id = ulBlock.id + '_pagesLinks';
		//посчитаем сколько нужно кнопочек
		var countButtons = Math.ceil( totalCols / scrollCols );
		var lastPos;
		if( countButtons > 1 ){
			for( j=0; j<countButtons; j++){
				var button = document.createElement('a');
				button.className = "button";
				if( j== 0 ){
					button.className = "button act";
				}
				button.href = "javascript:void(0)";
				button.title = "";
				button.target = ulBlock.id;	//элемент который двигаем
				button.id = (scrollCols * itemWidth * j * -1) + "px";	//позиция к которой двигаем
				//для последней кнопки позиция должна быть равна ширине блока ul
				if( j == (countButtons-1) ){
					button.id = ( (ulBlock.offsetWidth - cols * itemWidth ) * -1) + "px";
					if( button.id == lastPos ) break;
				}
				//добавляем событие для прокрутки
				//по сути нужно указывать координаты, к которым должен передвинуться ul блок
				var pos = 0;
				button.onclick = function(){
					var pos = parseInt( this.id.split("px").join("") );
					var elem = document.getElementById( this.target );
					if( typeof elem != 'undefined' ){
						//определяем текущую позицию
						var nowpos = parseInt( elem.offsetLeft );
						//меняем background у кнопки
						//для этого ищем все кнопки текущей галереи
						var prevButtons = document.getElementById( this.target + '_pagesLinks' );
						if( typeof prevButtons != 'undefined' && prevButtons != null ){
							for( var jj=0; jj<prevButtons.childNodes.length; jj++ ){
								if( prevButtons.childNodes[jj].nodeType == 1 ){
									if( prevButtons.childNodes[jj].tagName == "A" ){
										prevButtons.childNodes[jj].className = "button";
									}
								}
							}
						}
						//рассчитаем шаг прокрутки
						var r = Math.abs( nowpos - pos );
						var t = 3;
						r = Math.ceil( r / (scrollTime / t) );
						clearInterval( interval );
						if( nowpos < pos ){
							interval = setInterval( function(){
									var left = elem.offsetLeft;
									if( left < pos ){
										left += r;
										elem.style.left = left + "px";
									}else{
										clearInterval( interval );
										elem.style.left = pos + "px";
									}
								}, t
							);
						}else{
							interval = setInterval( function(){
									var left = elem.offsetLeft;
									if( left > pos ){
										left -= r;
										elem.style.left = left + "px";
									}else{
										clearInterval( interval );
										elem.style.left = pos + "px";
									}
								}, t
							);
						}
						//подсветим новую кнопку
						this.className = "button act";
					}
					return false;	//обязательно вернем false, иначе FF откроет новое окно из-за атрибута target
				}
				lastPos = button.id;
				pagesButtons.appendChild( button );
			}
		}
		if( pagesButtons.style == null ){ pagesButtons.setAttribute("style", ""); }
		pagesButtons.style.width = (cols * itemWidth) + "px";
		mainBlock.appendChild( pagesButtons );
	}
	//фсе
	return;
};