// JavaScript Document @Coretomic 2009 max@coretomic.com
// TODO: popup image on Gallery.config.bPosition == 'popup'

Gallery = 
{
	configDefault:
	{
		tVisible: 0,//visible thumbnails count
		tWidth: 250,//thumbnail width
		tHeight: 250,//thumbnail height
		tMargin: 5,//thumbnail margin
		tOpacity: 0.5,//inactive thumbnail opacity
		tArrowWidth: 20,//arrow field width
		bPosition: 'top',//big picture position
		bWidth: 420,//big picture width
		bHeight: 280,//big picture height
		bMargin: 0//big picture margin
	},
	config: {},
	pics: [],
	thumbs: [],
	titles: [],
	html: [],
	
	thumbIndex: 0,//index of left thumb image
	bigIndex: 0,//index of loaded big image
	moveNode: null,
	bigPictureNode: null,
	lock: false,
	numPics:0,
	
	show: function(parentNode)
	{
		var baseNode = document.getElementById(parentNode);
		if(!baseNode)//wait for DOM ready
			return setTimeout('Gallery.show("'+parentNode+'")', 500);
		
		for(var i in this.configDefault)
		{
			if(typeof(this.config[i]) == 'undefined' || this.config[i] == '')
			{
				this.config[i] = this.configDefault[i];
			}
			switch(i)
			{
				case 'bPosition':
				break;
				case 'tOpacity':
					this.config[i] = parseFloat(this.config[i]);
				break;
				default:
					this.config[i] = parseInt(this.config[i]);
				break;
			}
		}
		if(!this.config.bPosition)
			this.config.bPosition = this.configDefault.bPosition;
		
		var needScroll = this.thumbs.length > this.config.tVisible;
		var showBig = this.config.bPosition == 'top';
		var thumbsLineWidth = this.config.tVisible * (this.config.tWidth + 2 * this.config.tMargin);
		var thumbsWidth = thumbsLineWidth + 2 * this.config.tArrowWidth;
		var totalWidth = Math.max(thumbsWidth+8, (this.config.bWidth + 2 * this.config.bMargin)+8);
		var template =
			'<div class="gallery"><table class="gallery" width="100%" cellpadding="0" cellspacing="0" border="0">'+
			'<tr class="thumb-row" height="">'+
			//'	<td align="center" width="'+this.config.tArrowWidth+'"><div class="label-left"'+(needScroll ? ' onClick="Gallery.moveRight()"' : '')+'><img src="/images/main-gallery-arrow-left.gif" alt="Previous" width="24" height="13"/></div></td>'+
			//'	<td class="thumb-nav" align="center" width="'+this.config.tArrowWidth+'"><div class="label-right"'+(needScroll ? ' onClick="Gallery.moveLeft()"' : '')+'><img src="/images/main-gallery-arrow-right.gif" alt="Next" width="24" height="13"/></div></td>'+
			'	<td class="title">Image Gallery</td>'+
			'	<td class="counter" align="right"><div id="counter">asdsda</div></td>'+
			'	<td class="arrows"><div class=""'+(needScroll ? ' onClick="Gallery.moveRight()"' : '')+'><img src="/images/gallery-arrow-left.gif" alt="Previous" width="28" height="26"/></div></td>'+
			'	<td class="arrows"><div class=""'+(needScroll ? ' onClick="Gallery.moveLeft()"' : '')+'><img src="/images/gallery-arrow-right.gif" alt="Next" width="29" height="26"/></div></td>'+
			'	<td>&nbsp;</td>'+
			'</tr>'+
			(this.config.bPosition == 'top' ?
				'<tr class="big-row" height="">'+
				'	<td class="big-col" colspan="4"><div id="galleryBigPicture" class="big"></div></td>'+
				'	<td class="description"><div id="galleryBigPictureHTML" class="big"></div></td>'+
				'</tr>'
			:''
			)+
			'</table></div>';
		
		baseNode.innerHTML = template;
		this.moveNode = document.getElementById('galleryMove');
		
		this.bigPictureNode = document.getElementById('galleryBigPicture');
		
		this.bigPictureNodeHTML = document.getElementById('galleryBigPictureHTML');
		
		var visibleCount = Math.min(this.config.tVisible, this.thumbs.length);
		for(var i = 0; i < visibleCount; i++)
			this.moveNode.appendChild(this.createThumbImageNode(i));
		if(this.thumbs.length > 0)
			this.showBigPicture(this.bigIndex);
	},
	
	addItem: function(thumb, picture, title, html)
	{	
		this.thumbs.push(thumb);
		this.pics.push(picture ? picture : thumb);
		this.titles.push(title);
		this.html.push(html);
		
		this.numPics++;
		
		
	},
	
	createThumbImageNode: function(pictureID)
	{
		var img = document.createElement('IMG');
		img.id = this.getThumbNodeID(pictureID);
		img.src = this.thumbs[pictureID];
		img.width = this.config.tWidth;
		img.height = this.config.tHeight;
		img.hspace = this.config.tMargin;
		img.title = this.titles[pictureID];
		
		img.html = this.html[pictureID];
		
		this.setOpacity(img, this.config.tOpacity);
		img.onclick = function(){Gallery.showBigPicture(pictureID);};
		
		return img;
	},
	
	createBigImageNode: function(pictureID)
	{
		var img = document.createElement('IMG');
		img.src = this.pics[pictureID];
		img.width = this.config.bWidth;
		img.height = this.config.bHeight;
		img.hspace = this.config.bMargin;
		img.title = this.titles[pictureID];
		
		img.html = this.html[pictureID];
		document.getElementById('galleryBigPictureHTML').innerHTML = img.html;
		img.style.position = 'absolute';
		this.setOpacity(img, 0.01);
		
		return img;
	},
	
	showBigPicture: function(pictureID)
	{	
		if(this.lock)
			return;
		this.lock = true;
		this.bigIndex = pictureID;
		this.setActiveThumb(pictureID);
		
		var newBigNode = this.createBigImageNode(pictureID);
		
		var oldBigNode = this.bigPictureNode.firstChild;
		
		this.bigPictureNode.appendChild(newBigNode, oldBigNode);
		
		this.exchangeImages(newBigNode, oldBigNode, 0);
	
		document.getElementById('counter').innerHTML = (pictureID+1)+" of "+this.numPics;
		
	//	var oldBigNodeHTML = this.bigPictureNodeHTML.firstChild;
	//	this.bigPictureNodeHTML.appendChild(newBigNode, oldBigNodeHTML);
		
	},
	
	setActiveThumb: function(pictureID)
	{
		this.setOpacity(document.getElementById(this.getThumbNodeID(pictureID)), 1);
		for(var i = 0; i < this.config.tVisible; i++)
		{
			var currentID = this.getTrueIndex(i + this.thumbIndex);
			if(currentID != pictureID)
				this.setOpacity(document.getElementById(this.getThumbNodeID(currentID)), this.config.tOpacity);
		}
	},
	
	exchangeImages: function(newImg, oldImg, opacity)
	{
		this.setOpacity(newImg, opacity);
		if(opacity < 1)
		{
			var _this = this;
			setTimeout
			(
				function()
				{
					_this.exchangeImages(newImg, oldImg, opacity + 0.02)
				},
				10
			);
		}
		else
		{
			if(oldImg)
			{
				try
				{
					oldImg.removeNode(true);
				}
				catch(e)
				{
					if(oldImg.parentNode)
						oldImg.parentNode.removeChild(oldImg);
				}
			}
			this.lock = false;
		}
	},
	
	moveLeft: function()
	{
		if(this.lock)
			return;
	
		if(this.config.tVisible > 0)
		{
			this.lock = true;
			this.addToRight();
			this.shiftLeft(50);
		}
		else
		{
			this.thumbIndex = this.getNextRight();
			this.showBigPicture(this.thumbIndex);
		}
	},
	
	moveRight: function()
	{
		if(this.lock)
			return;
		if(this.config.tVisible > 0)
		{
			this.lock = true;
			this.addToLeft();
			this.shiftRight(50);
		}
		else
		{
			this.thumbIndex = this.getNextLeft();
			this.showBigPicture(this.thumbIndex);
		}
	},
	
	shiftLeft: function(interrup)
	{
		var interrup = Math.max(1, interrup - 1);
		this.moveNode.style.left = (this.moveNode.offsetLeft - 3) + 'px';
		if(this.moveNode.offsetLeft > -this.config.tWidth - 2*this.config.tMargin)
		{
			var _this = this;
			setTimeout
			(
				function()
				{
					_this.shiftLeft(interrup);
				},
				interrup
			);
		}
		else
		{
			this.removeFromLeft();
			this.thumbIndex = this.getTrueIndex(this.thumbIndex + 1);
			this.lock = false;
		}
	},
	
	shiftRight: function (interrup)
	{
		var interrup = Math.max(1, interrup - 1);
		this.moveNode.style.left = (this.moveNode.offsetLeft + 3) + 'px';
		if(this.moveNode.offsetLeft < 0)
		{
			var _this = this;
			setTimeout
			(
				function()
				{
					_this.shiftRight(interrup);
				},
				interrup
			);
		}
		else
		{
			this.removeFromRight();
			this.thumbIndex = this.getTrueIndex(this.thumbIndex - 1);
			this.lock = false;
		}
	},
	
	addToLeft: function()
	{
		var newThumb = this.createThumbImageNode(this.getNextLeft());
		this.moveNode.insertBefore(newThumb, this.moveNode.firstChild);
		this.moveNode.style.left = (this.moveNode.offsetLeft - this.config.tWidth - 2*this.config.tMargin) + 'px';
		this.setActiveThumb(this.bigIndex);
	},
	
	addToRight: function()
	{
		var newThumb = this.createThumbImageNode(this.getNextRight());
		this.moveNode.appendChild(newThumb);
		this.setActiveThumb(this.bigIndex);
	},
	
	removeFromLeft: function()
	{
		var thumb = document.getElementById(this.getThumbNodeID(this.thumbIndex));
		try
		{
			thumb.removeNode(true);
		}
		catch(e)
		{
			if(thumb.parentNode)
				thumb.parentNode.removeChild(thumb);
		}
		this.moveNode.style.left = (this.moveNode.offsetLeft + this.config.tWidth + 2*this.config.tMargin) + 'px';
	},
	
	removeFromRight: function()
	{
		var removeIndex = this.getTrueIndex(this.getNextRight()-1);
		var thumb = document.getElementById(this.getThumbNodeID(removeIndex));
		try
		{
			thumb.removeNode(true);
		}
		catch(e)
		{
			if(thumb.parentNode)
				thumb.parentNode.removeChild(thumb);
		}
	},
	
	getNextLeft: function()
	{
		var result = this.getTrueIndex(this.thumbIndex - 1);
		return result;
	},
	
	getNextRight: function()
	{
		var result = this.getTrueIndex(this.thumbIndex + (this.config.tVisible > 0 ? this.config.tVisible : 1));
		return result;
	},
	
	setOpacity: function(imgNode, opacity)
	{
		try
		{
			imgNode.style.opacity = opacity;
			imgNode.style.filter = 'alpha(opacity='+(100 * opacity)+')';
		}
		catch(e)
		{
		}
	},
	
	getThumbNodeID: function(pictureID)
	{
		return 'galleryThumb'+pictureID;
	},
	
	getTrueIndex: function(pictureID)
	{
		if(pictureID < 0)
			return this.thumbs.length + pictureID;
		else
			return(pictureID % this.thumbs.length);
	}
};