num_of_previews = 5;
preview_width = 150;
ln = "option5";
lb = "option1";
bar_move = null;
jb = null;

bar_jolt_speed = 20; // For easing.
bar_jolt_left_pos = 0;

function clone() {
	ul = document.getElementById('preview_bar');
	
	for(i = num_of_previews; i > 0; i--) {
		lastnode = document.getElementById(lb);
		srcNode = document.getElementById('option' + i);
		clone = srcNode.cloneNode(true);
		//clone.innerHTML = "Option " + i;
		clone.id = "pre_option" + i;
		ul.insertBefore(clone,lastnode);
		lb = "pre_option" + i;
	}
	
	for(i = 1; i <= num_of_previews; i++) {
		lastnode = document.getElementById(ln);
		srcNode = document.getElementById('option' + i);
		clone = srcNode.cloneNode(true);
		//clone.innerHTML = "Option " + i;
		clone.id = "option" + (i+num_of_previews);
		insertAfter(ul,clone,lastnode);
		ln = "option" + (i+num_of_previews);
	}

	ul.style.width = ((num_of_previews * 5) * preview_width)+2 + "px";
	ul.style.left = (num_of_previews * preview_width) * -1 + "px";
}

function mb() {	
	ul = document.getElementById('preview_bar');
	ulLeft = ul.style.left == "" ? 0 : parseInt(ul.style.left);
	newLeft = ulLeft - 1;
		
	if(newLeft < ((num_of_previews*preview_width)*2)*-1) {
		newLeft = (num_of_previews * preview_width) * -1;
	}
			
	ul.style.left = newLeft + "px";
	
	// Re-Occur
	if(bar_move == null) {
		bar_move = window.setInterval('mb()',35);
	}
	
	wait(50);
}

function jolt_r() {
	ul = document.getElementById('preview_bar');
	ulLeft = (ul.style.left == null) ? 0 : parseInt(ul.style.left);

	if(jb == null) {
		bar_destination = ulLeft + 100;
		clearInterval(bar_move);
		jb = window.setInterval('jolt_loop_r()',10);
	}
}

function jolt_loop_r() {
	ul = document.getElementById('preview_bar');
	ulLeft = ul.style.left == null ? 0 : parseInt(ul.style.left);
	
	o = document.getElementById('output');
	newPos = Math.ceil(ulLeft + ((bar_destination - ulLeft)/bar_jolt_speed));
	ul.style.left = newPos + "px";
	
	if(newPos == bar_destination) {
		clearInterval(jb);
		jb = null;
		bar_destination = 0;
		bar_move = window.setInterval('mb()',20);
	}
	else if(newPos > 0) {
		clearInterval(jb);
		jb = null;
		bar_destination = 0;
		ul.style.left = ((num_of_previews * preview_width) * -1) + "px";
		bar_move = window.setInterval('mb()',20);
	}

	//o.innerHTML += bar_destination + ":" + newPos + "<br />";
}

function jolt_l() {
	ul = document.getElementById('preview_bar');
	ulLeft = ul.style.left == "" ? 0 : parseInt(ul.style.left);

	if(jb == null) {
		bar_destination = ulLeft - 100;
		//document.getElementById('output').innerHTML += "Bar Destination : " + bar_destination + "<br />";
		clearInterval(bar_move);
		jb = window.setInterval('jolt_loop_l()',10);
	}
}

function jolt_loop_l() {
	ul = document.getElementById('preview_bar');
	ulLeft = ul.style.left == "" ? 0 : parseInt(ul.style.left);
	o = document.getElementById('output');
	newPos = ulLeft - Math.ceil((ulLeft - bar_destination)/bar_jolt_speed);
//	o.innerHTML += bar_destination + ":" +((ulLeft - bar_destination)/bar_jolt_speed) + "<br />";
	ul.style.left = newPos + "px";
	
	if(newPos == bar_destination) {
		clearInterval(jb);
		jb = null;
		bar_destination = 0;
		bar_move = window.setInterval('mb()',20);
	}
	else if(newPos < (num_of_previews * preview_width) * 2 * -1) {
		clearInterval(jb);
		jb = null;
		bar_destination = 0;
		ul.style.left = ((num_of_previews * preview_width) * -1) + "px";
		bar_move = window.setInterval('mb()',20);
	}
}

addLoadEvent(clone);
addLoadEvent(mb);