// Change PRELOAD_IMAGES value to "false" to disable image preloading;
var PRELOAD_IMAGES = true;
var X_COUNTER = 0;

// Draws image gallery according to specifies parameters.

// Image urls are made by getImageName() call, currently
// algorithm is: baseName + imageIndex + .jpg.
// For example, baseName is "derby" and we need image with index 2,
// full image url will be "derby2.jpg".

// Width and height are the same for all images in gallery.

// Count parameter specifies how much images will be shown.

// Optionally playURL specifies URL for "Play now" link. It can be
// empty string ("") if not needed.
function showImages(baseName, width, height, count, playURL) {
	if(count <= 0) return;

	if(PRELOAD_IMAGES)
		preloadImages(baseName, count);

	var container = document.createElement('div');
	container.className = 'galleryContainer';
	container.__baseName = baseName;
	container.__count = count;
	container.style.width = width + 'px';

	var imgTag = document.createElement('div');
	imgTag.className = 'galleryImage';
	imgTag.style.backgroundImage = 'url(' + getImageName(baseName, 1) + ')';
	imgTag.style.width = width + 'px';
	imgTag.style.height = height + 'px';

	container.appendChild(imgTag);

	var menuContainer = document.createElement('div');
	menuContainer.className = 'menuContainer';

	var listingContainer = document.createElement('ul');
	listingContainer.className = 'galleryListingContainer';

	for(var i = 1; i <= count; i++) {
		var itemLink = document.createElement('a');
		itemLink.href = '#';
		if(itemLink.addEventListener)
			itemLink.addEventListener('click', changeImage, false);
		else
			itemLink.attachEvent('onclick', changeImage);
		itemLink.innerHTML = i;
		itemLink.__index = i;

		if(i == 1) {
			container.__currentItem = itemLink;
			itemLink.className = 'galleryCurrentItem';
		}

		var listItem = document.createElement('li');
		listItem.appendChild(itemLink);
		listingContainer.appendChild(listItem);
	}

	menuContainer.appendChild(listingContainer);

	if(playURL != '') {
		var playLink = document.createElement('a');
		playLink.className = 'galleryPlayLink';
		playLink.href = playURL;
		playLink.innerHTML = 'Play now';

		var playDiv = document.createElement('div');
		playDiv.className = 'galleryPlayContainer';

		playDiv.appendChild(playLink);
		menuContainer.appendChild(playDiv);
	}

	var tempDiv = document.createElement('div');
	tempDiv.style.clear = 'both';
	menuContainer.appendChild(tempDiv);

	container.appendChild(menuContainer);

	var dummyID = 'X_GALLERY_' + X_COUNTER;
	document.write('<d' + 'iv id="' + dummyID + '"></d' + 'iv>');
	document.getElementById(dummyID).appendChild(container);
	X_COUNTER++;
	//document.body.appendChild(container);
}

// Event handler for image listing links.
// Changes current visible image in gallery.
// Only works as an ONCLICK event handler!
function changeImage(event) {
	var e = event ? event : window.event;
	var target = e.target ? e.target : e.srcElement;
	var index = target.__index;
	var container = target.parentNode.parentNode.parentNode.parentNode;
	var baseName = container.__baseName;
	var imgTag = findImageTag(container);

	if(imgTag) {
//		imgTag.src = getImageName(baseName, index);
		imgTag.style.backgroundImage = 'url(' + getImageName(baseName, index) + ')';

		if(container.__currentItem)
			container.__currentItem.className = '';

		container.__currentItem = target;
		target.className = 'galleryCurrentItem';
	}

	if(e.preventDefault)
		e.preventDefault();
	return(false);
}

// Searches for img tag with CSS class name "galleryImage".
// If tag is not found, "false" is returned.
function findImageTag(source) {
	var imgList = source.getElementsByTagName('div');
	for(var i = 0; i < imgList.length; i++)
		if(imgList[i].className == 'galleryImage')
			return(imgList[i]);
	return(false);
}

// Creates full url to image according to specified parameters.
// Algorithm is described in showImages() function comments.
function getImageName(baseName, index) {
	return('pics/games/'+baseName + index + '.jpg');
}

// Preloads images to browser cache.
function preloadImages(baseName, count) {
	var img = new Image();
	for(var i = 1; i <= count; i++) {
		img.src = getImageName(baseName, i);
	}
}