$(function() {
	$('#live .col').addClass('row').removeClass('col');
	
	$('.row li:first-child').addClass('active');
	$('.row').append('<div class="controls"><a href="#" class="scrollLeft">&#8249;-</a><div class="slider-wrapper"><div class="slider"></div></div><a href="#" class="scrollRight">-&#8250;</a></div>');
	$('.row ul').wrap('<div class="scroller"></div>');
	// I know... Added markup used for styling is bad...
	$('.scroller').append('<div class="overlayLeft"></div>')
		.append('<div class="overlayRight"></div>');
	
	$.each($('.row'), function(i, val) {
		var $ul		= $('.scroller ul', val);
		var $last	= $('li:last-child', $ul);
		var width	= $last.position().left + $last.outerWidth(true);
		
		$ul.width(width);
		$('.slider', val).slider({
			animate: true,
			min: 0,
			max: width - ($('.scroller', val).width() - 20),
			change: function(event, ui) {
				$ul.animate({left: ui.value * -1}, {duration: 400}, 'swing');
			},
			slide: function(event, ui) {
				$ul.css('left', ui.value * -1);
			}
		});
		
		$('.scrollLeft, .scrollRight', val).click(function(event) {
			event.preventDefault();
		
			$slider = $('.slider', val);
			if ($(this).hasClass('.scrollRight'))
				$slider.slider('value', $slider.slider('value') + 480);
			if ($(this).hasClass('.scrollLeft'))
				$slider.slider('value', $slider.slider('value') - 480);
		});
	});
	
	$('.ui-slider-handle').html('&#171; &#187;');
});