// 			<article id="recommended">
// 			<p><b></b>May I recommend...</p>
// 			
// 			<ol>
// 				<li id="rec_wciu"><a href="/caniuse/"><b></b>When Can I Use...Browser Compatibility Tables</a> <span>- Interactive Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies</span></li>
// 				
// 				<li id="rec_csstpl"><a href="/?p=236"><b></b>CSS3 Template Layout Script</a> <span>- jQuery plugin that provides support for the CSS3 Template Layout Module</span></li>
// 				
// 				<li id="rec_radius"><a href="/?p=205"><b></b>Border-radius Generator</a> <span>- Tool to generate CSS-only rounded corners for multiple browsers</span></li>
// 			</ol>
// 			
// 			</article>


(function() {
	// "rec" is a recommended list item
	document.write('<style>p.intro, .to_fade {visibility:hidden;}</style>');

	var recs, rec_total, cur_rec = 1;
	var rec_height, rec_top = 10, rec_list;
	
	function go_rec(dir) {

		var cur_el = recs.eq(cur_rec-1);

		// Find next element
		cur_rec += dir;
		
		cur_rec = cur_rec > rec_total?1:cur_rec;
		cur_rec = cur_rec < 1?rec_total:cur_rec;
		
		var next_el = recs.eq(cur_rec-1);
		
		cur_el.animate({ 
			top: (rec_top + rec_height)
		  }, 500, function() {
		  
		  	rec_list.prepend(cur_el);
		  	
			cur_el.animate({ 
				top: (rec_top)
			  }, 500 );
		  	
		  });
	}
	
	function start() {

		rec_list = $('#recommended ol');
		recs = rec_list.find('li');
		rec_total = recs.length;
		rec_height = recs.eq(cur_rec-1).height();

		//Reverse
		recs.each(function() {
			$(this).css('z-index',5);
			$(this).prependTo( $(this).parent() );
		});

		recs.css({top:rec_top, left:181 });
		
		var next = $('<a id="next_rec" class="to_fade" href="#">></a>');
		next.click(function() { go_rec(1);return false; });
		
		$('#recommended ol').after(next)
		
		var switch_vis = {visibility:'visible',display:'none'};
		
		var first_done = false;
		
		$('#recommended p.intro').css(switch_vis).fadeIn(1000,function() {
			first_done = true;
		});
		
		$(window).load(function() {
				$('#recommended .to_fade').css(switch_vis).fadeIn(1500);
		});
		
		
		// For single
		
		
	}

	
	$(start);

})();