/// <reference path="../Lib/Lib.js" />
var SlideShow_Button = new Class();
SlideShow_Button.prototype =
{
	button: null,
	className: null,

	init: function()
	{
		this.button = get(this.button);
		if (this.button)
		{
			this.button.onmouseover = function()
			{
				this.button.className = this.className[1];
			} .handle(this);

			this.button.onmouseout = function()
			{
				this.button.className = this.className[0];
			} .handle(this);

			this.button.onmousedown = function()
			{
				this.button.className = this.className[2];
			} .handle(this);

			this.button.onmouseup = function()
			{
				this.button.className = this.className[1];
			} .handle(this);
		}
	}
}


var SlideShow_Class = new Class();
SlideShow_Class.prototype =
{
	loadImage: "images/upload/site/slide-loading.gif",
	blankImage: "images/upload/site/blank.gif",

	images: null,
	slideTime: 3000,
	ruleIndex: -1,
	_onresize: null,

	init: function()
	{
		new SlideShow_Button({
			button: "SlideShow_ListBack",
			className: ["SlideShow_ListBack", "SlideShow_ListBack_Hover", "SlideShow_ListBack_Hold"]
		});
		new SlideShow_Button({
			button: "SlideShow_ListNext",
			className: ["SlideShow_ListNext", "SlideShow_ListNext_Hover", "SlideShow_ListNext_Hold"]
		});

		var slideBox = get("SlideBox");
		slideBox.parentNode.removeChild(slideBox);
		document.forms[0].appendChild(slideBox);
	},

	show: function(images, index)
	{
		if (images != null)
		{
			Element.setPosition("SlideBox", (document.documentElement.scrollLeft || document.body.scrollLeft), (document.documentElement.scrollTop || document.body.scrollTop));
			document.getElementsByTagName("HTML")[0].style.overflow = "hidden";

			this.curActiveImage = null;
			get("SlideShow_Image").onload = null;
			get("SlideShow_Image").src = this.blankImage;

			var count = images.length;
			var listTag = get("SlideBox_ListImage");
			listTag.scrollLeft = 0;
			listTag.innerHTML = "";
			listTag.style.width = (count * 34) + 306 + "px";

			this.images = [];
			for (var i = 0; i < count; i++)
			{
				var tagA = create("A");
				var loadImage = create("IMG");
				var srcImage = create("IMG");

				tagA.className = "SlideShow_ThumLink";
				loadImage.className = "SlideShow_ThumImage";
				loadImage.src = this.loadImage;
				srcImage.className = "SlideShow_ThumImage";
				srcImage.onload = this._onLoadThumImage.handle(this, loadImage, srcImage);
				srcImage.onclick = this._activeImage.handle(this, i);
				srcImage.style.display = "none";
				srcImage.src = images[i][1];
				srcImage.bigSrc = images[i][2];
				srcImage.title = images[i][0];
				srcImage.skin = images[i][3];

				tagA.appendChild(loadImage);
				tagA.appendChild(srcImage);
				listTag.appendChild(tagA);
				this.images[i] = srcImage;
			}
			Element.show("SlideBox");
			Element.setSize("SlideBoxContent", get("SlideBox").offsetWidth, get("SlideBox").offsetHeight - 112);
			this._activeImage(index);
			
			this._onresize = window.onresize;
			window.onresize = function()
			{
				Element.setPosition("SlideBox", (document.documentElement.scrollLeft || document.body.scrollLeft), (document.documentElement.scrollTop || document.body.scrollTop));
				Element.setSize("SlideBoxContent", get("SlideBox").offsetWidth, get("SlideBox").offsetHeight - 112);
			};
		}
	},

	_onLoadThumImage: function(loadImage, srcImage)
	{
		Element.hide(loadImage);
		Element.show(srcImage);
	},

	_activeImage: function(index)
	{
		if (this.curActiveImage == index || this._onloadimage)
			return;
		if (this.timer) window.clearTimeout(this.timer);
		this._onloadimage = true;
		var img = null;
		if (this.curActiveImage != null)
		{
			img = this.images[this.curActiveImage]
			img.className = "SlideShow_ThumImage";
		}
		this.curActiveImage = index;
		img = this.images[this.curActiveImage]
		img.className = "SlideShow_ThumImage_Active";

		this.fxScrollLeft("SlideBox_ListImage_Container", 170 + (34 * index), null, function()
		{
			Element.invisible("SlideShow_ImageDiv");
			Element.show("SlideShow_ImageLoading");

			get("SlideShow_Image").onload = this._onLoadBigImage.handle(this);
			get("SlideShow_Image").src = img.bigSrc;
			get("SlideShow_ImageDiv").className = "SlideShow_Skin_" + img.skin;
			Element.setText("SlideShow_Title", img.title);
		} .handle(this));
	},

	_onLoadBigImage: function()
	{
		Element.hide("SlideShow_ImageLoading");
		var tag = get("SlideShow_ImageContainer");
		var img = get("SlideShow_Image");
		var div = get("SlideShow_ImageDiv");

		this.fxHeight(tag, div.offsetHeight + 10, null, function()
		{
			this.fxWidth(tag, div.offsetWidth + 10, null, function()
			{
				this.fxOpacity(tag, function()
				{
					Element.visible("SlideShow_ImageDiv");
				}, function()
				{
					this._onloadimage = false;
					this._onloadcomplete();
				} .handle(this));
			} .handle(this));
		} .handle(this));
	},

	scrollBack: function()
	{
		var tag = get("SlideBox_ListImage_Container");
		if (tag.scrollLeft > 306 && !this._onScroll)
		{
			this._onScroll = true;
			var end = tag.scrollLeft - 306;
			if (end < 306) end = 306;
			this.fxScrollLeft("SlideBox_ListImage_Container", end, null, function()
			{
				this._onScroll = false;
			} .handle(this));
		}
	},

	scrollNext: function()
	{
		var tag = get("SlideBox_ListImage_Container");
		var scroll = get("SlideBox_ListImage").offsetWidth - 610;
		if (tag.scrollLeft < scroll && !this._onScroll)
		{
			this._onScroll = true;
			var end = tag.scrollLeft + 306;
			if (end > scroll) end = scroll;
			this.fxScrollLeft("SlideBox_ListImage_Container", end, null, function()
			{
				this._onScroll = false;
			} .handle(this));
		}
	},

	listBack: function()
	{
		if (this.curActiveImage > 0 && this.curActiveImage < this.images.length)
			this._activeImage(this.curActiveImage - 1);
	},

	listNext: function()
	{
		if (this.curActiveImage < this.images.length - 1)
			this._activeImage(this.curActiveImage + 1);
	},

	fxHeight: function(element, end, onstart, onend)
	{
		element = get(element);
		var fps = 10;
		var time = 500;
		if (Math.abs(element.offsetHeight - end) <= 20)
			fps = time = 1;

		element.fx = new Effect
		({
			element: element,
			transition: Effect.Transitions.linear,
			style: "height",
			from: element.offsetHeight,
			to: end,
			fps: fps,
			duration: time,
			onstart: function()
			{
				if (onstart) onstart();
			},
			onend: function()
			{
				if (onend) onend(true);
			}
		});
		element.fx.start();
	},

	fxWidth: function(element, end, onstart, onend)
	{
		element = get(element);
		var fps = 10;
		var time = 500;
		if (Math.abs(element.offsetWidth - end) <= 20)
			fps = time = 1;

		element.fx = new Effect
		({
			element: element,
			transition: Effect.Transitions.linear,
			style: "width",
			from: element.offsetWidth,
			to: end,
			fps: fps,
			duration: time,
			onstart: function()
			{
				if (onstart) onstart();
			},
			onend: function()
			{
				if (onend) onend(true);
			}
		});
		element.fx.start();
	},

	fxOpacity: function(element, onstart, onend)
	{
		element = get(element);
		element.fx = new Effect
		({
			element: element,
			transition: Effect.Transitions.linear,
			style: "opacity",
			from: 0,
			to: 1,
			fps: 10,
			duration: 500,
			onstart: function()
			{
				if (onstart) onstart();
			},
			onend: function()
			{
				if (onend) onend(true);
			}
		});
		element.fx.start();
	},

	fxScrollLeft: function(element, end, onstart, onend)
	{
		element = get(element);
		element.fx = new Effect
		({
			element: element,
			transition: Effect.Transitions.linear,
			style: "scrollLeft",
			from: element.scrollLeft,
			to: end,
			fps: 30,
			duration: 300,
			onstart: function()
			{
				if (onstart) onstart();
			},
			onend: function()
			{
				if (onend) onend(true);
			}
		});
		element.fx.start();
	},

	close: function()
	{
		this.stop();
		
		document.getElementsByTagName("HTML")[0].style.overflow = "auto";
		Element.hide("SlideBox");
		var slideBox = get("SlideBox");
		slideBox.parentNode.removeChild(slideBox);
		
		window.onresize = this._onresize;
	},

	play: function()
	{
		Element.hide("SlideShow_BottomBar_Play");
		Element.show("SlideShow_BottomBar_Stop");
		this.isSlideShow = true;
		this._onloadcomplete();
	},

	stop: function()
	{
		Element.show("SlideShow_BottomBar_Play");
		Element.hide("SlideShow_BottomBar_Stop");
		if (this.timer) window.clearTimeout(this.timer);
		this.isSlideShow = false;
	},

	_play: function()
	{
		if (this.curActiveImage >= this.images.length - 1)
			this._activeImage(0);
		else
			this._activeImage(this.curActiveImage + 1);
	},

	_onloadcomplete: function()
	{
		if (this.isSlideShow)
			this.timer = window.setTimeout(this._play.handle(this), this.slideTime);
	}
}