$(document).ready(function(){
	function redraw(){
			$('#link_line .marker').stop(true,true);
			$('#sub_thingy').stop(true,true);
			$('.marker.left').stop(true,true);
			$('#link_line').stop(true,true);
			
			var holderHeight = $('#thingy_holder').height();
			var fullHeight = $('#sub_thingy>ul.selected').height();
			var lastLiHight = $('#sub_thingy>ul.selected>li:last>ul').height();
			var lineHight = $('#sub_thingy>ul.selected>li:first>a').height();
		
			$('#sub_thingy').fadeIn();
			$('#sub_thingy ul.sub_list').css('marginTop',-lineHight/2);
			
			
			//$('#link_line').animate({'marginTop':lineHight/2});
			var divOffset=$('#link_line').offset();
			var holderOffeset=$('#thingy_holder').offset();
			var mainlistOffset=$('#main_list').offset();
			$('#link_line .marker').not('.left').fadeOut();
			$('#sub_thingy>ul.selected>li').each(function(i){
					var offset =$(this).offset();
					var markerOffset = offset.top-divOffset.top+lineHight/2;
					$('#link_line .marker:eq('+i+')').stop(true).fadeIn(animationSpeed).animate({'marginTop':markerOffset},animationSpeed);
				});
		
			var selectedOffset = $('#main_list li.selected').offset();
			var subPos = (selectedOffset.top-mainlistOffset.top)-($('#link_line').height()/2);
			subPos = (subPos>0)?subPos:0;
			
			subPos = (subPos+fullHeight<holderHeight)?(subPos):(holderHeight-fullHeight);
			$('#sub_thingy').animate({'marginTop':subPos},animationSpeed);
		
			var leftMarkerOffset = selectedOffset.top-mainlistOffset.top+$('#main_list li.selected').height()/2+2;
			leftMarkerOffset = leftMarkerOffset - subPos;
			$('.marker.left').fadeIn().animate({'marginTop':leftMarkerOffset},animationSpeed);
		
			var linkLineHight = fullHeight-lastLiHight-lineHight*1.5-2;
			linkLineHight = (leftMarkerOffset>linkLineHight)?leftMarkerOffset+1:linkLineHight
			
			if ($('#sub_thingy>ul.selected').length==0)
				$('#link_line').fadeOut(animationSpeed);
			else
				$('#link_line').animate({'height':linkLineHight},animationSpeed);	
			
	}
	
	var animationSpeed = 300;
	
	oldHeight=$('#sub_thingy>ul.selected>li:first>a').height();
	setInterval(function(){
			if (oldHeight != $('#sub_thingy>ul.selected>li:first>a').height())
				redraw();
		},1000);
		


	var to;
	
	$('#main_list>li').mouseenter(function(){
			$('#main_list>li').removeClass('selected');
			$(this).addClass('selected');
			var id = $(this).attr('id').substr(5);
			clearTimeout(to);
			to = setTimeout(function(){
					$('.sub_list.selected').stop(true,true).fadeOut(animationSpeed).removeClass('selected');
					$('#sub_list_'+id).stop(true,true).fadeIn(animationSpeed).addClass('selected'); 
					redraw();
				},300);	
			
		});
});