(function(){

var circle = document.createElement("img");
	circle.src = "images/circle.gif";
	circle.style.cssText = "position:absolute; top:0; left:0; display:none";
var circlePos = new Array(
	[170, 95,130, 15],
	[170,145,130,115],
	[140,125, 20,115],
	[160,290,150, 20],
	[160,320,150, 20],
	[ 20, 95, 40,175],
	[150, 65,170, 35],
	[380, 60, 20,280]
)

var jsTarget = null;
var jsControl = null;
var spans = null;
var jsScroll = null;
var unit0 = null;
var uheight = 400;
var position = 0;

var eventCtl = function(flg){
	for(var n=0,l=spans.length; n<l; n++){
		if(flg){
			ExObj.addEvent(spans[n],"click",moveCtl,false);
		}else{
			ExObj.removeEvent(spans[n],"click",moveCtl,false);
		}
	}
}
var showCircle = function(idx){
	if(!circlePos[idx]){
		circle.style.display = "none";
		return;
	}
	circle.alt = idx;
	circle.style.display = "inline";
	circle.style.left = circlePos[idx][0]+"px";
	circle.style.top = circlePos[idx][1]+"px";
	circle.width = circlePos[idx][2];
	circle.height = circlePos[idx][3];
}
var scroll = function(idx){
	var n = 0;
	var timer = window.setInterval(function(){
		var vol = (position - idx)*uheight;
		var h = position*uheight*-1+Math.sin(Math.PI/180*n)*vol;
		unit0.style.marginTop = h+"px";
		n++;
		if(n>90){
			window.clearInterval(timer);
			position = idx;
			eventCtl(true);
		}
	},1);	
}
var moveCtl = function(e){
	eventCtl(false);
	var idx = window.event.srcElement.id || e.target.id;
	idx = parseInt(idx.replace("c",""));
	scroll(idx);
}
var shover = function(e){
	var o = window.event.srcElement || e.target;
	o.style.color = "red";
	o.style.textDecoration = "underline";
	var idx = parseInt(o.id.replace("c",""));
	showCircle(idx);
}
var sout = function(e){
	var o = window.event.srcElement || e.target;
	o.style.color = "#05c";
	o.style.textDecoration = "none";
}


var loaded = function(){
	jsTarget = document.getElementById("jsScrollTarget");
	jsTarget.appendChild(circle);

	jsScroll = document.getElementById("jsScroll");
	unit0 = jsScroll.getElementsByTagName("div")[0];
	jsControl = document.getElementById("jsScrollControl");
	ExObj.cancelSelect(jsControl);
	spans = jsControl.getElementsByTagName("span");
	for(var n=0,l=spans.length; n<l; n++){
		ExObj.addEvent(spans[n],"click",moveCtl,false);
		ExObj.addEvent(spans[n],"mouseover",shover,false);
		ExObj.addEvent(spans[n],"mouseout",sout,false);
	}
}
document.ready(loaded);
})();