$(function() {

	var $scrollPane = $('.scroll-pane');
	var $scrollContent = $('.scroll-content');
	var $scrollBar = $('.scroll-bar');
	
	$.ajax({ 
		url:'/feeds/draft.xml', 
		dataType:'xml', 
		success:function(data, status, xmlRequest) {
			processDraftFeed($(data));
		}
	})

	var processDraftFeed = function($draft) {
		var elms = $draft.find('pick').map(buildPickElement);

		for (var x=0; x<elms.length; x+=2) {
			var $item = $('<div />').addClass('scroll-item').append(elms[x]).append(elms[x+1]);
			$scrollContent.append($item);
		}

		var $x = $('<div />').addClass('scroll-item').append($('<img />').attr('src','/media/draft-slider/divider-round2.png'))
		$($('.scroll-item')[16]).after($x);

		var w = 0;
		$('.scroll-item').each(function(i,n){ w += $(n).width(); });
		$scrollContent.css('width', (w + 184) + 'px'); //extra pixels so the shadow png doesnt overlap the last set of picks

	};

	var buildPickElement = function(i,n) {
		var $n = $(n);
		var $p = $(n).find('player');

		var $play = ($p.attr('name')!="") ? $('<div/>', {'class':'player', text: $p.attr('name') + ' (' + $p.attr('position') + ')'}) : null;
		var $sequ = $('<div/>', {'class':'sequ'}).css('background','url(/media/draft-slider/number_' + $n.attr('seq') + '.png)');
		var $logo = $('<div/>', {'class':'logo'}).css('background','url(/media/draft-slider/team_' + $n.attr('teamcode') + '.png)');
		var $team = $('<div/>', {'class':'team', text:$n.attr('teamname')});
		var $info = $('<div/>', {'class':'info'}).append($play).append($team);
		var $slim = $('<div/>', {'class':'slim'}).append($logo, $info);
		if ($play) { $slim.addClass('mand').wrapInner($('<a />', { href:$p.attr('href')})); }

		return $('<div/>', {'class':'pick'}).append($sequ, $slim);
	};

	var onScrollContent = function(e, ui) {
		$scrollContent.css('margin-left', Math.round(ui.value / 100 * ($scrollPane.width() - $scrollContent.width())) + 'px');
	};

	var $scrollbar = $scrollBar.slider({ slide:onScrollContent, change:onScrollContent, animate:false });

	$(".scroll-nav-left, .scroll-nav-right").click(function(){
		var amt = parseInt($(this).attr('amount'));
		var val = $scrollBar.slider('value');
		$scrollBar.slider('value', val+amt);
	}).mousedown(function(){
		$(this).addClass('scroll-nav-active');
	}).mouseup(function(){
		$(this).removeClass('scroll-nav-active');
	}).hover(function(){
		$(this).toggleClass('scroll-nav-hover');
	});

});