var rvt = new RevealTrans("idPicShow");
rvt.Add('images/toolsteel1.jpg', 'Tool Steel', '#.html');
rvt.Add('images/HotRolledSteelPlat.jpg', 'Hot Rolled Steel Plate', '#.html');
rvt.Add('images/ColdRolledSteelPlat.jpg', 'Cold Rolled Steel Plate', '#.html');
rvt.Add('images/stainlesssteelplate.jpg', 'Stainless Steel Plate', '#.html');
rvt.Add('images/SectionSteel.jpg', 'Aluminium Plate', '#.html');
rvt.Add('images/seamless-steel-pipe.jpg', 'Seamless Steel Pipe', '#.html');
var oList = $("idPicList"), oText = $("idPicText"), arrImg = [];
var oNum = $("idNum"), arrNum = [];
Each(rvt.List, function(list, i){
	var img = document.createElement("img");
	img.src = list["img"]; img.alt = list["text"];
	arrImg[i] = img;
	oList.appendChild(img);
	var li = document.createElement("li");
	li.innerHTML = i + 1;
	arrNum[i] = li;
	oNum.appendChild(li);
	img.onmouseover = li.onmouseover = function(){ rvt.Auto = false; rvt.Index = i; rvt.Start(); };
	img.onmouseout = li.onmouseout = function(){ rvt.Auto = true; rvt.Start(); };
});
rvt.onShow = function(){
	var i = this.Index, list = this.List[i];
	Each(arrImg, function(o){ o.className = ""; }); arrImg[i].className = "on";
	Each(arrNum, function(o){ o.className = ""; }); arrNum[i].className = "on";
	oText.innerHTML = !!list.url ? "<a href='" + list.url + "'>" + list.text + "</a>" : list.text;
}
oText.onmouseover = function(){ rvt.Auto = false; rvt.Stop(); };
oText.onmouseout = function(){ rvt.Auto = true; rvt.Start(); };
rvt.Start();