var images = new Array();
var canvas;
var frame;
var canvasBack;
var buttonBack;
var buttonPrev;
var buttonNext;
var currentPicIndex = 0;
var newHappeningForm;

var displayImage = function(_imageBody) {

	if (_imageBody.nodeName) {
		imageBody = _imageBody;
	} else {
		imageBody = this;
	}

	var hrefAttr = imageBody.parentNode.getAttribute('href');
	var imageBasename = hrefAttr.substring(0, hrefAttr.lastIndexOf('.'));

	var pic = new Element('img');
	pic.setAttribute('src', (imageBasename + '.jpg'));
	frame.appendChild(pic);

	for (var i = 0; i < images.length; i++)
		if (images[i].getAttribute('src') == imageBasename + '_thumb.jpg') {
			currentPicIndex = i;
		}
	
	canvasBack.style.height = Window.getScrollHeight();
	canvas.style.display = 'block';
	frame.style.display = 'block';
	
	frame.style.marginTop = Window.getScrollTop();
	
	canvasBack.style.display = 'block';
	canvasBack.setOpacity(.8);
	
	canvasBack.style.width = '100%';
	
	reinitPhotoNavi();
}

var nextImage = function() {
	frame.innerHTML = '';
	var newImg = new Element('img');
	var thumbSrc = images[++currentPicIndex].getAttribute('src');

	newImg.setAttribute('src', thumbSrc.substring(0, thumbSrc.lastIndexOf('_')) + '.jpg');
	frame.appendChild(newImg);
	
	reinitPhotoNavi();
}

var prevImage = function() {
	frame.innerHTML = '';
	var newImg = new Element('img');
	var thumbSrc = images[--currentPicIndex].getAttribute('src');
	newImg.setAttribute('src', thumbSrc.substring(0, thumbSrc.lastIndexOf('_')) + '.jpg');
	frame.appendChild(newImg);

	reinitPhotoNavi();
}

var reinitPhotoNavi = function() {
	if (currentPicIndex > 0) {
		buttonPrev.addEvent('click', prevImage);
		if (buttonPrev.hasClass('dark'))
			buttonPrev.removeClass('dark');
	} else {
		buttonPrev.addClass('dark');
		buttonPrev.removeEvents('click');
	}

	if ((currentPicIndex + 1) < images.length) {
		buttonNext.addEvent('click', nextImage);
		if (buttonNext.hasClass('dark'))
			buttonNext.removeClass('dark');
	} else {
		buttonNext.addClass('dark');
		buttonNext.removeEvents('click');
	}
}

var hideImage = function() {
	canvasBack.style.display = 'none';
	canvas.style.display = 'none';
	frame.innerHTML = '';
	currentPicIndex = 0;
}

var initImages = function() {
	if (!$('photoNavi')) {
		newHappeningForm = $('newHappeningForm');
		return;
	}

	canvas = $('canvas');
	canvasBack = $('canvasBack');
	frame = $('frame');

	var photoNaviElements = $('photoNavi').childNodes;
	for (var i = 0; i < photoNaviElements.length; i++) {
		if (photoNaviElements.item(i).getAttribute('id') == 'prevBut') {
			buttonPrev = new Element(photoNaviElements.item(i)); // "new Element()" routine is needed for IE
		} else if (photoNaviElements.item(i).getAttribute('id') == 'backBut') {
			buttonBack = new Element(photoNaviElements.item(i));
		} else if (photoNaviElements.item(i).getAttribute('id') == 'nextBut') {
			buttonNext = new Element(photoNaviElements.item(i));
		}
	}
	
	buttonBack.addEvent('click', hideImage);

	var selectedPic = window.location.search.substring(1, window.location.search.length);
	
	images = $('main_block').getElementsByTagName('img');
	
	for (var i = 0; i < images.length; i++) {
		images[i].addEvent('click', displayImage.bind(images[i]));
		var src = images[i].getAttribute('src');

		if (src.substring((src.lastIndexOf('/')+1), src.lastIndexOf('_')) == selectedPic) {
			displayImage(images[i]);
		}
	}	
}