Event.observe(window, "load", function() {
	var $ctrls = $$(".sgl-2-ctrl")[0];
	var $imgs = $$(".sgl-2-img");
	var idx = 0;
	var btnStyle = {
		display: 'block',
		cursor: 'pointer'
	};
		
	var $linkList = new Element("ul");
	$imgs.each(function($elem, idx) {
		$linkList.insert(
			new Element("li").update(idx + 1)
		)
	});
	$ctrls.insert($linkList, { position: "top" });
	var $links = $$(".sgl-2-ctrl li");
	
	function showOne() {
		$imgs.each(function($elem, idx) {
			$elem.hide();
			$links[idx].removeClassName("active");
		});
		$imgs[idx].show();
		$links[idx].addClassName("active");
	}
	
	function stepTo() {
		idx = this.idx;
		showOne();
	}
	function stepForward() {
		idx = (idx < $imgs.length - 1) ? idx + 1 : 0;
		showOne();
	}
	function stepBack() {
		idx = (idx > 0) ? idx - 1 : $imgs.length - 1;
		showOne();
	}
	
	$links.each(function($elem, _idx) {
		$elem.idx = _idx;
		$elem.observe("click", stepTo).setStyle({ display: 'inline', cursor: 'pointer' });
	});
	$$('.sgl-forward').each(function($elem) {
		$elem.observe("click", stepForward).setStyle(btnStyle);
	});
	$$('.sgl-back').each(function($elem) {
		$elem.observe("click", stepBack).setStyle(btnStyle);
	});
	
	showOne();
});