﻿// JScript File
function $get(id) {return document.getElementById(id); }
var isIE = (navigator.appName == 'Microsoft Internet Explorer');
var SlidePicture = 
{
	pictureArr	: null,
	pageSize	: null,
	pageNow		: null,
	cols		: null,
	container	: null,
	curImage	: null,
	timer		: null,
	transTime	: 10000,
	
	init		: function(args)
	{
		for (var i in args)
			this[i] = args[i];
			
		this.pageNow = 1;
		if (!this.cols) this.cols = 3;
				
		this.goPage(0);
	},
	
	goPage		: function(inc)
	{
		var total = Math.ceil(this.pictureArr.length * 1.0 / this.pageSize);
		switch (inc)
		{
			case -2 :
				this.pageNow = 0;
				break;
			case 2 :
				this.pageNow = total;
				break;
			default :
				this.pageNow += inc;
		}
		if (this.pageNow <= 0) this.pageNow = 1;
		if (this.pageNow > total) this.pageNow = total;
		this.loadPage();
	},
	
	loadPage	: function()
	{
		var div			= $get(this.container);
		var imgHTML		= "", titleHTML = "", html = "";
		var titleHTML	= "";
		
		var start	= (this.pageNow - 1) * this.pageSize;
		var count	= 1;
		var width	= 100.0 / this.cols;
		for (var i = 0 ; i + start < this.pictureArr.length && i < this.pageSize; i++)
		{
			var item = this.pictureArr[i + start];
			imgHTML += "<td width='" + width + "%'><img class='SmallImageThum' width='150' height='150' onclick='SlidePicture.showSlideShow(" + (i + start) + ")' src='" + item[0] + "' alt='" + item[1] + "' /></td>";
			titleHTML += "<td width='" + width + "%'>" + item[1] + "</td>";
			if (count++ >= this.cols)
			{
				html	+= "<tr>" + imgHTML + "</tr><tr>" + titleHTML + "</tr>";
				imgHTML = titleHTML = "";
				count	= 1;
			}
		}
		if (imgHTML != "")
			html += "<tr>" + imgHTML + "</tr><tr>" + titleHTML + "</tr>";
		
		div.innerHTML = "<table width='100%'>" + html + "</table>";
	},
	
	showSlideShow : function(index)
	{
		var html = "";
		for (var i = 0 ; i < this.pictureArr.length ; i++)
		{
			var item = this.pictureArr[i];
			html += "<img height='45' onclick='SlidePicture.viewLargeImage(" + i + ")' class='ThumImageClass' onclick='' src='" + item[0] + "' alt='" + item[1] + "' title='" + item[1] + "' />";
		}
	
		var thumZone		= $get('Div_SlideShow_ThumZone');
		thumZone.scrollLeft	= 0;
		thumZone.innerHTML	= html;
	
		this.curImage = null;
		$get('Div_SlideShowZone').style.display = '';
		this.viewLargeImage(index);
	},
	
	viewLargeImage : function(index)
	{
		if (index < 0) index = 0;
		if (index > this.pictureArr.length - 1) index = this.pictureArr.length - 1;
	
		var item	= this.pictureArr[index];
		var img		= $get('Img_SlideShow_LargeImage');
		
		if (isIE)
		{
			img.filters.item(0).apply();        
			img.filters.revealTrans.transition = Math.random() * 100; 
			img.filters.item(0).play();
		}
            
		img.src		= item[0];
		img.title	= item[1];
		$get('TD_SlideShow_Title').innerHTML = item[1];
		
		var thumZone	= $get('Div_SlideShow_ThumZone');
		var imgs		= thumZone.getElementsByTagName('IMG');
		if (this.curImage != null)
			imgs[this.curImage].className = 'ThumImageClass';
		this.curImage	= index;
		var curImg		= imgs[index]
		var thumZone	= $get('Div_SlideShow_ThumZone');
		var lImg1		= curImg.offsetLeft;
		var lImg2		= lImg1 + curImg.width;
		var lZone1		= thumZone.scrollLeft;
		var lZone2		= lZone1 + 415;
		
		if (lImg1 < lZone1 || lImg2 > lZone2)
			this.scrollThum(lImg1 - thumZone.scrollLeft);
		
		curImg.className	= 'ThumImageClassSelect';
		
	},
	
	scrollThum : function(incPos)
	{
		var thumZone	= $get('Div_SlideShow_ThumZone');
		if (Math.abs(incPos) <= 20)
			thumZone.scrollLeft += incPos;
		else
		{
			var inc = (incPos > 0) ? 20 : -20;
			thumZone.scrollLeft += inc;
			window.setTimeout("SlidePicture.scrollThum(" + (incPos - inc) + ")", 2);
		}
	},
	
	closeSlideShow : function()
	{
		$get('Div_SlideShowZone').style.display = 'none';
		this.stop();
	},
	
	firstImage : function(){this.viewLargeImage(0);},
	backImage : function(){this.viewLargeImage(this.curImage - 1);},
	nextImage : function(){this.viewLargeImage(this.curImage + 1);},
	lastImage : function(){this.viewLargeImage(this.pictureArr.length - 1);},
	
	nextslide : function()
	{
		var index = SlidePicture.curImage + 1;
		if (index > SlidePicture.pictureArr.length - 1) index = 0;
		SlidePicture.viewLargeImage(index);
		SlidePicture.timer = window.setTimeout(SlidePicture.nextslide, SlidePicture.transTime);
	},
	
	play : function()
	{
		$get('Img_SlideShow_Stop').style.display = '';
		$get('Img_SlideShow_Play').style.display = 'none';
		this.timer = window.setTimeout(SlidePicture.nextslide, SlidePicture.transTime);
	},
	
	stop : function()
	{
		$get('Img_SlideShow_Stop').style.display = 'none';
		$get('Img_SlideShow_Play').style.display = '';
		window.clearTimeout(this.timer);
	}
}