var offset = 380;
var cur = 1;
var total = 0;
var skiptrace;
var play; 

function slidereel(go) {
	var dist = (go+1) * offset;
	//alert(go + ":" + dist);
	$('#marker_'+cur).removeClass('current');
	$('#marker_'+go).addClass('current');
	$('#reel').animate({top:-dist},500, 'easeOutBack');
	cur = go;
}

function resetslide() {
	return setInterval(function() {  if(cur == total) { next = 0; } else { next = cur+1 } slidereel(next); }, 10000);
}

$(function() {

  
  $('#reel li').each(function(i, el) {
					var index = i;
					 var data = $(this).attr('data');
					 var args = $(this).attr('args');
					 var first = '';
					 if(data) {					 
					total = index;
					 if(args == 'twoline') { twoline = ' class="twoline"'; } else { twoline = ''; }
					 if(index == 1) { first = ' first'; } else { first = ''; }
					 $('#markerlist').append('<li id="marker_'+(index-1)+'" class="marker'+first+'"><a href=""'+twoline+'>'+data+'</a></li>');
				//	alert(index + ":" + data + ":" + args);
					 }
//					$(this).attr('id','marker_'+index);
					});
  total-=1;
  $("#marker_"+total).addClass("last");
  $('#reel').css('height', total*offset)
  $('.marker').click(function() {
					 var go = parseInt($(this).attr('id').replace(/[^0-9]+/,''));
					 slidereel(go);
					 clearInterval(play);
					 play = resetslide();
					 clearTimeout(skiptrace);
					 return false;
					 });
  skiptrace = setTimeout(function() { slidereel(0); }, 2000);
  play = resetslide(); 
  });