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',
    				    '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 = 76;
	elemI.height = 57;

// и устанавливаем еще некоторые атрибуты
	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.predButton.onclick = PredSledClick;
    this.sledButton.onclick = PredSledClick;
}

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



// обрабатываем щелчок по уменьшенному изображению
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));
		}
	}
// создаем новый элемент img для увеличенного изображения
	var elemBI = document.createElement('img');
	elemBI.src = bigImgPath + photoId + '.jpg';
	elemBI.alt = '';
	elemBI.id = 'B'+photoId;

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


}


// навигация под увеличенными изображениями
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;

}