// JScript File


var PhorScrolls = new Array();

try {
	window.addEventListener('load', init, false);
} catch(e) {
	window.onload = init;
}


function init() {
// при загрузке страницы проверяем наличие
// слоев, в которые будем выводить изображения,
// информацию о них, а также есть ли настройки

    if (document.getElementById('Preview') &&
        document.getElementById('PrevSetup') &&
        document.getElementById('BigPhoto') &&
        document.getElementById('PhotoNum')){

    ownPreview = document.getElementById('Preview');
    BigImages = document.getElementById('BigPhoto');
    PhotoNums = document.getElementById('PhotoNum');

// считываем настройки галереи, условимся, что они есть
// хотя можно было бы проверять и их наличие

    setUps = document.getElementById('PrevSetup');
    ims = setUps.ims.value;
    prevPath = setUps.prevPath.value;
    bigImgPath =  setUps.photoPath.value;

// помещаем все параметры, необходимые для создания
// галереи в массив

    PhorScrolls[0] = new PhorScroll('Preview',
    				    'PtoRight',
    				    'PtoLeft',
    				    'ItoRight',
    				    'ItoLeft',
    				    'ims',
    				    'prevPath',
    				    'bigImgPath',
    				    'PhotoNum');

// и собираем галерею из уменьшенных изображений

    PhorScrolls[0].createPreviews();

// назначаем номер показываемой картинки,
// по-умолчанию = 1, т.е. первая.

if (!currPic){var currPic = 1;}	
    enLarge(currPic); 

        }
}

function PhorScroll(ownPrevID,
		    toRightID,
		    toLeftID,
		    predID,
		    sledID,
		    NumImgs,
		    prevPath,
		    photoPath,
		    PhotoNum) {

	this.index = PhorScrolls.length;
	this.prButton = document.getElementById(toRightID);
	this.plButton = document.getElementById(toLeftID);
	this.predButton = document.getElementById(predID);
	this.sledButton = document.getElementById(sledID);
	this.NumImgs = NumImgs;
	this.prevPath = prevPath;
	this.photoPath = photoPath;
	this.createPreviews = createPreviews;
	this.prevClick = prevClick;
	this.PredSledClick = PredSledClick;
}


// функция, в которой создадим массив уменьшенных изображений
// и выведем его результат на страницу

function createPreviews(){
	ImgArr = new Array();
	for (var i = 1; i <= ims; i++) { 
	ImgArr[i] = new Image(); 
	ImgArr[i].src = prevPath + i + '.jpg'; 
	} 


// инициализируем массив для уменьшенных изображений
	previewI = new Array();

	for (var m = 1; m <= ims; m++){

// создаем элементы img 
	var elemI = document.createElement('img');
	elemI.src = prevPath + m + '.jpg';

// устанавливаем ширину и высоту уменьшенных изображений
// можно было также передавать эти значения с настройками
	//elemI.width = 100;
	elemI.height = 100;

// и устанавливаем еще некоторые атрибуты
	elemI.alt = 'посмотреть';
	elemI.className = 'PrevImg';
	elemI.id = 'i' +m;

	ownPreview.appendChild(elemI);

// и складываем получившиеся изображения
// в назначенный для них слой div id="Preview"
// помещаем эти изображения в массив
	previewI[i] = document.getElementById('i'+m);

// и назначаем каждому из них обработчик события 
// onclick для вызова увеличенного изображения
	previewI[i].onclick = prevClick;
	}

// готовим кнопки навигации по галерее
// назначаем обработчики событий для кнопки сдвига
// изображений в галерее влево
    this.plButton.onmousedown = PrevScrollClick;
    this.plButton.onmouseup = handleScrollStop;
    this.plButton.onmouseout = handleScrollStop;
//  this.plButton.oncontextmenu = blockEvent;

// назначаем обработчики событий для кнопки сдвига
// изображений в галерее вправо
    this.prButton.onmousedown = PrevScrollClick;
    this.prButton.onmouseup = handleScrollStop;
    this.prButton.onmouseout = handleScrollStop;
//  this.prButton.oncontextmenu = blockEvent;

// назначаем обработчики событий для кнопок навигации
// под увеличенным изображением
    this.predButton.onclick = PredSledClick;
    this.sledButton.onclick = PredSledClick;
}

// отмена всех перемещений
function handleScrollStop() {
    scrollEngaged = false;
}

// обработчик события для сдвига уменьшенных изображений
// при нажатии на кнопки под галереей
function PrevScrollClick(evt){
    evt = (evt) ? evt : event;
    var target = (evt.target) ? evt.target : evt.srcElement;
    var index = target.index;

// определяем какая из кнопок нажата,
// т.е. в какую сторону двигать картинки
    course = (target.className == "arrowLeft") ? toLeft : toRight;
    scrollEngaged = true;

// одинарный клик по кнопке
    PrevScroll(index,course);

// переключатель для нажатой и удерживаемой кнопки
// задаем скорость и направление
    scrollInterval = setInterval('PrevScroll(' + index + ',' + course + ')', 200);
    evt.cancelBubble = true;
    return false;
}

// в этой функции запускаем скролл картинок
function PrevScroll(index,cource){ 
    var Pscroller = PhorScrolls[index];
    if (scrollEngaged) {
	return cource();
    } else {
       clearInterval(scrollInterval);
    }
}

// сдвиг уменьшенных изображений вправо
function toLeft(){

// берем первое изображение
	aaa = ownPreview.firstChild;

// определяем последнее изображение
	zzz = ownPreview.lastChild;

// и размещаем первое изображение после последнего
// теперь первая картинка будет последней и т.д.
// по кругу при каждом нажатии на кнопку сдвига вправо
// или при нажатии на нее и удержании
	ownPreview.insertBefore(zzz, aaa);
}

// сдвиг уменьшенных изображений влево
function toRight(){ 
// здесь чуть сложнее, чем при сдвиге вправо
// создаем любой временный элемент, например br
	var elemB = document.createElement('br');

// делаем его первым в галерее
	ownPreview.appendChild(elemB);

// снова берем первый элемент, теперь это не изображение
// а только что созданный br
	aaa = ownPreview.firstChild;

// берем последний элемент
	zzz = ownPreview.lastChild;

// и размещаем последнее изображение галереи после первого
// элемента(br), но зато оно будет теперь перед
// первым изображением в галерее
	ownPreview.insertBefore(aaa, zzz);

// и уничтожаем элемент br, который уже больше не нужен
	ownPreview.removeChild(elemB);
}


// обрабатываем щелчок по уменьшенному изображению
function prevClick(evt){ 
    evt = (evt) ? evt : event;
    var target = (evt.target) ? evt.target : evt.srcElement;
    var regexp = /\d+/;

// определяем по какой из картинок кликнули
    xxx = regexp.exec(target.getAttribute('id'));

// и увеличиваем соответствующую картинку
    enLarge(xxx);
    evt.cancelBubble = true;
    return false;
}

// выводим увеличенное изображение
function enLarge(photoId) { 

// удаляем содержимое div id="BigPhoto если там 
// уже было изображение, или что-то еще
	var BIchilds = BigImages.childNodes; 
	if (BIchilds.length > 0) {
	for (h=0; h <= BIchilds.length; h++ ){
		BigImages.removeChild(BIchilds.item(h));
		//BigImages.removeChild(BIchilds.item(h)).width = 100;
	//BigImages.removeChild(BIchilds.item(h)).height = 100;
		}
	}
// создаем новый элемент img для увеличенного изображения
	var elemBI = document.createElement('img');
	elemBI.src = bigImgPath + photoId + '.jpg';
	elemBI.alt = '';
	elemBI.id = 'B'+photoId;
	//elemBI.height=400;

// размещаем его в назначенный слой div id="BigPhoto
	BigImages.appendChild(elemBI);

// и вызываем функцию для вывода номера изображения
	countImg(photoId,ims);
	return false;
}


// счетчик картинок (1 из ... и т.д.)
function countImg(currImg,allImg){

// сперва прибиваем старый счетчик
	var PhotoNumschilds = PhotoNums.childNodes;
	if (PhotoNumschilds.length > 0) {
	for (h=0; h <= PhotoNumschilds.length; h++ ){
		PhotoNums.removeChild(PhotoNumschilds.item(h));
		}
	}
// создаем элемент span и вписываем в него номер картинки
// и общее количество изображений в галерее
 	var elemS = document.createElement('span');
	var txts = document.createTextNode(currImg + ' из ' + allImg);
	elemS.appendChild(txts);

// размещаем счетчик картинок в отведенный для них слой
	PhotoNums.appendChild(elemS);
	return false;
}

// навигация под увеличенными изображениями
function PredSledClick(evt){ 
    evt = (evt) ? evt : event;
    var target = (evt.target) ? evt.target : evt.srcElement;
    var regexp = /\d+/;
    xxx = regexp.exec(BigImages.firstChild.getAttribute('id'));
    var wView = (target.className == "arrowLeft") ? -1 : 1;
    var nextPhoto = parseInt(xxx)+parseInt(wView);
    if (nextPhoto <= 0) {
    nextPhoto = ims;
    }
    if (nextPhoto > ims) {
    nextPhoto = 1;
    }
     enLarge(nextPhoto);
    evt.cancelBubble = true;
    return false;

}