/// <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";

        var me = this;
        $("#SlideBox_ListImage_Container").animate
        (
            {scrollLeft: 170 + (34 * index)},
            300,
            "linear",
            function()
            {
                $("#SlideShow_ImageContainer").css("background-color", "#ffffff").animate
                ({
                    opacity: 0,
                    backgroundColor: "#000000"
                }, 800, "linear", function()
                {
                    Element.invisible("SlideShow_ImageDiv")
                    $("#SlideShow_ImageDiv").css("opacity", 0);
                    Element.show("SlideShow_ImageLoading");

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

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

        $("#SlideShow_ImageContainer").stop().animate
        ({
            opacity: 1
        }, 800, "linear", function()
        {
            var w = div.offsetWidth + 10;
            var dw = Math.abs(get("SlideShow_ImageContainer").offsetWidth - w);
            if (dw < 5) dw = 0;
            else dw = 800;
        
            $("#SlideShow_ImageContainer").animate
            ({
                width: w
            }, dw, "linear", function()
            {
                var h = div.offsetHeight + 10;
                var dh = Math.abs(get("SlideShow_ImageContainer").offsetHeight - h);
                if (dh < 5) dh = 0;
                else dh = 800;
                
                $("#SlideShow_ImageContainer").animate
                ({
                    height: h
                }, dh, "linear", function()
                {
                    Element.visible("SlideShow_ImageDiv");
		            $("#SlideShow_ImageContainer").animate
                    ({
                        backgroundColor: "#ffffff"
                    }, 800, "linear");
		            $("#SlideShow_ImageDiv").animate
                    ({
                        opacity: 1
                    }, 800, "linear", function()
                    {
                        var r_h = $("#SlideBoxContent").height(),
                            i_h = $("#SlideShow_ImageContainer").height(),
                            m = 10;
                           
                        if (i_h < r_h)
                            m = (r_h - i_h) / 2;
                            
                        $("#SlideShow_ImageContainer").animate
                        ({
                            marginTop: m
                        }, 800, "linear", function()
                        {
                            me._onloadimage = false;
				            me._onloadcomplete();
                        });
                    });
                });
            });
        });
	},

	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;
			var me = this;
            $("#SlideBox_ListImage_Container").animate
            (
                {scrollLeft: end},
                300,
                "linear",
                function()
                {
                    me._onScroll = false;
                }
            );
		}
	},

	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;
			var me = this;
            $("#SlideBox_ListImage_Container").animate
            (
                {scrollLeft: end},
                300,
                "linear",
                function()
                {
                    me._onScroll = false;
               }
            );
		}
	},

	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);
	},

	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);
	}
}