/*
The setting function is highly customised
to the specific website. Please analysis before reuse.
*/

function effectSettings()
{
// ========== Settings for fading (Start) ==========		
/*	width = 555;
	sqw = 300;
	offset = $("#jcontainer").position().left;
	ioffset = 1;

	$("#jcontainer").css("width", width+"px");
	$("#jcontainer").css("height", sqw+"px");
	$("#jcontainer").css("overflow", "hidden");
	$("#jcontainer").css("border", "1px solid LightGrey");
	$("#jcontainer").css("marginLeft", "1px");

	$("#jcontainer img").css("opacity", 0);
	$("#jcontainer img").css("width", sqw+"px");
	$("#jcontainer img").css("height", sqw+"px");
//	$("#jcontainer img").css("border", "1px solid LightGrey");
	$("#jcontainer img").css("position", "absolute");


	max = $("#jcontainer img").size();
	interval = ioffset + ((width - sqw) / (max-1));
	for (i = 1; i< max; i++)
	{
		left = offset + i * interval;
		$("#jcontainer img:eq("+i+")").css("left", left+"px");
	} */
// ========== Settings for fading (End) ==========

// ========== Settings for sliding (Start) ==========
	//settings
	width = 120;
	height = 120;
	border = 5;
	borderColor = "white";
	slideTime = 2000;
	waitTime = 30;	//After tested, please use value no less than 30. Or else strange effects occur
	marginTop = 15;
	max2 = $("#scontainer img").size();

	//intermediate
	totalWidth = width + border;

	$("#scontainer").css("width", "558px");
	$("#scontainer").css("height", "160px");
	$("#scontainer").css("position", "absolute");
//	$("#scontainer").css("border", "1px solid black");
	$("#scontainer").css("overflow", "hidden");
	$("#scontainer").css("marginLeft", "1px");

	$("#scontainer img").css("width", width+"px");
	$("#scontainer img").css("height", height+"px");
	$("#scontainer img").css("marginTop", marginTop+"px");
	$("#scontainer img").css("border", border+"px solid "+borderColor);
	$("#scontainer img").css("position", "absolute");

	$("#scontainer img").mouseover(function()
	{
		$(this).css("height", "150px");
		$(this).css("width", "150px");
		$(this).css("z-index", "30");
		$(this).css("marginTop", "2px");
		$(this).css("border", "3px solid #fee698");
	});

	$("#scontainer img").mouseout(function()
	{
		$(this).css("height", height+"px");
		$(this).css("width", width+"px");
		$(this).css("z-index", "4");
		$(this).css("marginTop", marginTop+"px");
		$(this).css("border", border+"px solid "+borderColor);
	});


	for (i=0;i<max2;i++) $("#scontainer img:eq("+i+")").css("left", (i*totalWidth)+"px");
// ========== Settings for sliding (End) ==========
}

function fading(index)
{
	c = index;
	n = index+1;
	p = index-1;

	if (c >= max) c=0;
	if (n >= max) n=0;
	if (p < 0)  p=(max-1);

	//previous
	$("#jcontainer img:eq("+p+")").css("z-index", 1);

	//next
	$("#jcontainer img:eq("+n+")").fadeTo(1000, 0.5);
	$("#jcontainer img:eq("+n+")").css("z-index", 2);

	//current
	$("#jcontainer img:eq("+c+")").css("z-index", 3);
	$("#jcontainer img:eq("+c+")").show();
	$("#jcontainer img:eq("+c+")").fadeTo(1000, 0);

	t1=setTimeout("fading("+n+")", 2000);
}

function sliding()
{			
	for (i=0;i<max2;i++)
	{
		$("#scontainer img:eq("+i+")").animate({left: ((i-1)*totalWidth)+"px"}, slideTime, "linear", function(i)
		{
			$("#scontainer img:eq("+(max2-1)+")").hide();
			$("#scontainer img:eq("+(max2-2)+")").show();
		});
	}
	$("#scontainer a:eq(0)").appendTo("#scontainer");	
	t2=setTimeout("sliding()", slideTime + waitTime);
}