// JavaScript Document

function getId(id){
	return document.getElementById(id);
}
function createBtn(txt){
	btn = document.createElement("div");
	btn.id = "tagBtn_off";
	btn.innerHTML=txt;
	return btn;
}
function setSize(w,h)
{
	pic_width = w;
	pic_height = h;
}
var index = 0;
var time_gap = 4000;
var cvPic = getId("cvPic");
var cvCaption = getId("cvCaption");
var tagBar = getId("tagBar");

var picPane = getId("cvinfo");
var picArr = picPane.getElementsByTagName("div"); //all picture pane
var picCnt = picArr.length; 
//stop and play

obj = createBtn("//");
obj.onclick = function(){
	txt = this.innerHTML;
	if(txt == "//")
	{
		this.innerHTML = ">>"
		window.clearInterval(hd_timeout);
	}else{
		this.innerHTML = "//"
		hd_timeout = window.setInterval("changePic()", time_gap);
	}
}
tagBar.appendChild(obj);

// btns
for (i =0;i<picCnt;i++)
{
	obj = createBtn(i+1);
	obj.onclick = function(){
		ind = this.innerHTML;
		changePic(ind-1);
	}
	tagBar.appendChild(obj);
}
function changeBtn(ind){
	btns=tagBar.getElementsByTagName("div");
	for(i=1;i<btns.length;i++){
		if(ind+1 == i){
			btns[i].id = "tagBtn_on";
		}else{
			btns[i].id = "tagBtn_off";
		}
	}
}
function changePic(ind){
	if(ind == null){
		index += 1;
	}else{
		index = ind;
	}
	if (index >= picCnt){
		index = 0;
	}
	try{
		cvPic.filters[0].apply();
		for (i = 0;i<picArr.length;i++){
			if(i == index )
			{
				picObj = picArr[i].getElementsByTagName("img")[0];
				cvPic.src = picObj.src;
				pObj = picArr[i].getElementsByTagName("p")[0];
				cvCaption.innerHTML = pObj.innerHTML;
			}
		}
		cvPic.filters[0].play();
	}catch(e){
		for (i = 0;i<picArr.length;i++){
			if(i == index )
			{
				picObj = picArr[i].getElementsByTagName("img")[0];
				cvPic.src = picObj.src;
				pObj = picArr[i].getElementsByTagName("p")[0];
				cvCaption.innerHTML = pObj.innerHTML;
			}
		}
	}
	changeBtn(index);
	window.clearInterval(hd_timeout);
	hd_timeout = window.setInterval("changePic()", time_gap);
}
hd_timeout = window.setInterval("changePic()", time_gap);
changePic(0);