$(document).ready(function() {
	// scrollable
	
	$('.scrollable').each(function() {
		var thescrollable = $(this);
		
		// thescrollable.find('li').bind('click', function() {
		// 			var href = $(this).find('a').get();
		// 			if(href.length > 0)
		// 				document.location = href[0].href;
		// 		});
				
		var navi = 	'<div style="overflow:auto;margin-bottom:10px;">' +
					'<a href="javascript:" class="up"><img class="rollover" src="/img/slider_up.gif" alt="Up" /></a>' +
					'<a href="javascript:" class="down"><img class="rollover" src="/img/slider_down.gif" alt="down" /></a>' +
					'</div>';
		
		var navi2 = '<div style="overflow:auto;margin-top:10px;">' +
					'<a href="javascript:" class="up"><img class="rollover" src="/img/slider_up2.gif" alt="Up" /></a>' +
					'<a href="javascript:" class="down"><img class="rollover" src="/img/slider_down2.gif" alt="down" /></a>' +
					'</div>';
		
		thescrollable.prepend(navi);
		thescrollable.append(navi2);
		
		var tsc = thescrollable.find('li');
		var selectedIdx = 0;
		for(var i = 0; i < tsc.length; i++) {
			if($(tsc[i]).hasClass('selected'))
				selectedIdx = i;
		}
		
		if(selectedIdx > (thescrollable.find('li').length - 3))
			selectedIdx = thescrollable.find('li').length - 3;
		
		thescrollable.attr("visible", selectedIdx);
		thescrollable.find('ul').scrollTo('.selected');
		
		thescrollable.find('.up').bind('click', function() {
			var visible = parseInt(thescrollable.attr('visible'), 10);
			if(visible <= 0)
				return;
				
			visible -= 1;
			
			var target = thescrollable.find('li:eq(' + visible + ')');
			thescrollable.find('ul').scrollTo(target, 500);
			
			thescrollable.attr('visible', visible);
		});
		
		thescrollable.find('.down').bind('click', function() {
			var visible = parseInt(thescrollable.attr('visible'), 10);
			if(visible >= (thescrollable.find('li').length - 3))
				return;
				
			visible += 1;
			
			var target = thescrollable.find('li:eq(' + visible + ')');
			thescrollable.find('ul').scrollTo(target, 400);
			
			thescrollable.attr('visible', visible);
		});
	});
	
	// rollover
	$(".rollover").live('mouseover', function() {
		this.src = this.src.replace(/\.(.{3})$/, "_over\.$1");
	});
	
	$(".rollover").live('mouseout', function() {
		this.src = this.src.replace(/_over\.(.{3})$/, ".$1");
	});
	
});