var DHTML = (document.getElementById || document.all || document.layers);

function ImageGallery(images, folder)
{
	// print_r(arrName, forAlertOrDoc, level)
	//alert(print_r(images, "alert"));
	////////////////////////////////////////////////////////////////////////
	// CONSTRUCTOR
	////////////////////////////////////////////////////////////////////////

	// set private vars
	this.imgs = images;
	
	this.imagesChunks = [];
	this.curChunkInx = 0;
	this.chunkCounter = 0;
	
	this.curImg = 0;

	this.curFolder = folder;

	this.lastImgId;
	
	//-----------------------------------------------

	// divide the images array into chunks of 20 images
	
	if(this.imgs.length > 20)
	{
		for(var i = 0; i < this.imgs.length; i+=20)
		{
			var length = (i + 20) < this.imgs.length ? 20 : this.imgs.length - i;
			this.imagesChunks[this.chunkCounter] = this.imgs.slice(i, i+length);
			this.chunkCounter++;
		}
	}
	else
	{
		this.imagesChunks[this.chunkCounter] = this.imgs;
	}
	
	this.createNrsMenu();
}
	
////////////////////////////////////////////////////////////////////////
// PUBLIC METHODS
////////////////////////////////////////////////////////////////////////

// create the numbered menu on top
ImageGallery.prototype.createNrsMenu = function(prevOrNextChunk, imgID)
{
	// if the numbers menu changes, we need to set this.lastImgId to null. otherwise, we try to reset the style of a non existant number.
	this.lastImgId = null;

	if(prevOrNextChunk == "prev")
	{
		this.curChunkInx--;
	}
	else if(prevOrNextChunk == "next")
	{
		this.curChunkInx++;
	}

	var htmlStr = "<ul id='menuNrs'>";
	
	htmlStr += "<li><a href='#' onClick=\"imgGalleryOBJ.prevImg();\">Prev</a></li>\n";
	htmlStr += "<li> / </li>\n";
	htmlStr += "<li><a href='#' onClick=\"imgGalleryOBJ.nextImg();\">Next</a></li>\n";
	
	htmlStr += "<li> - </li>\n";

	// move to prev chunk
	if(this.curChunkInx > 0)
	{
		htmlStr += "<li><a href='#' onClick=\"imgGalleryOBJ.prevNrsMenu()\"><<</a></li>";
	}

	// create numbers
	for(var i = 0; i < this.imagesChunks[this.curChunkInx].length; i++)
	{
		htmlStr += "<li><a href='#' id=\"imgNrLink"+((this.curChunkInx*20)+i)+"\" onClick=\"imgGalleryOBJ.displayImage("+((this.curChunkInx*20)+i)+");\">"+((this.curChunkInx*20)+(i+1))+"</a></li>\n";
	}
	
	// move to next chunk
	if(this.curChunkInx < this.imagesChunks.length-1)
	{
		htmlStr += "<li><a href='#' onClick=\"imgGalleryOBJ.nextNrsMenu()\">>></a></li>";
	}
	
	htmlStr += "</ul>";
	htmlStr += "<div id='cur_item'>";
	htmlStr += "<p></p>";
	htmlStr += "</div>";
	
	this.changeImgOrNrsMenu("content", htmlStr);

	if(imgID == null)
	{
		this.displayImage((this.curChunkInx*20));
	}
	else if(imgID != null)
	{
		this.displayImage(imgID);
	}
}

//-----------------------------------------------

ImageGallery.prototype.prevNrsMenu = function()
{
	var prev_img = ((this.curChunkInx)*20)-1;
	
	this.createNrsMenu("prev", prev_img);
}

//-----------------------------------------------

ImageGallery.prototype.nextNrsMenu = function()
{
	this.createNrsMenu("next");
}

//-----------------------------------------------

ImageGallery.prototype.prevImg = function()
{
	var prev_img = this.curImg - 1 >= 0 ? this.curImg -= 1 : this.curImg;

	if(prev_img >= (this.curChunkInx*20))
	{
		if(prev_img < (this.curChunkInx*20))
		{
			this.createNrsMenu("prev");
		}
		if(prev_img >= 0)
		{
			this.displayImage(prev_img);
		}
	}
	else
	{
		this.createNrsMenu('prev', prev_img);
	}
}

//-----------------------------------------------

ImageGallery.prototype.nextImg = function()
{
	var next_img = this.curImg + 1 <= this.imgs.length-1 ? this.curImg += 1 : this.curImg;

	if(next_img < ((this.curChunkInx+1)*20))
	{
		if(next_img >= ((this.curChunkInx+1)*20))
		{
			this.createNrsMenu("next");
		}

		if(next_img <= this.imgs.length - 1)
		{
			this.displayImage(next_img);
		}
	}
	else
	{
		this.createNrsMenu('next');
	}
}

//-----------------------------------------------

// display image
ImageGallery.prototype.displayImage = function(id)
{
	this.curImg = id;
	var newSrc = this.curFolder + this.imgs[id].src;
	var newComment = this.imgs[id].comment;
	//
	var htmlStr = "";
	
	if(this.curFolder.indexOf("_imgs/_forSale/") != -1)
	{
		htmlStr += "<br><a id='forSaleEmailLink' href='mailto:davethechimp@gmail.com?subject=mail from FOR SALE - davethechimp.co.uk'>Email me for more Info</a><br>"
	}
	
	htmlStr += (newComment != undefined) ? "<br><p>"+newComment+"</p><br>" : "<br><p>&nbsp;</p><br>";
	
	htmlStr += "<p><img id=\"cur_img\" src=\""+newSrc+"\"></p>";
	//
	this.changeImgOrNrsMenu("cur_item", htmlStr);
	//
	this.setHighlightedNr(id);
}
	
////////////////////////////////////////////////////////////////////////
// PRIVATE METHODS
////////////////////////////////////////////////////////////////////////
// set the highlighted number
ImageGallery.prototype.setHighlightedNr = function(id)
{	
	var img = new GetOBJ("imgNrLink"+id);
	img.style.color = "white";
	img.style.background = "#FF33CC";
	
	if(this.lastImgId != null && this.lastImgId != id)
	{
		var lastImg = new GetOBJ("imgNrLink"+this.lastImgId);
		lastImg.style.color = "black";
		lastImg.style.background = "transparent";
	}
	this.lastImgId = id;
}

//-----------------------------------------------

// change an html element. either the image or the number menu
ImageGallery.prototype.changeImgOrNrsMenu = function(element, replacement)
{
	if (document.getElementById)
	{
		var elm = document.getElementById(element);
	}
	else if (document.all)
	{
		var elm = document.all[element];
	}
	else if (document.layers)
	{
		var elm = document.layers[element];
	}

	if(elm != null)
	{
		if(replacement != null)
		{
			elm.innerHTML = replacement;
		}
		else
		{
			alert("Problem with 'replacement' argument in 'changeElement' function.\n --> replacement: "+replacement);
		}
	}
	else
	{
		alert("Problem with 'element' argument in 'changeElement' function.\n --> document.getElementById("+element+"): "+document.getElementById(element));
	}
}