$('document').ready(function()	//when the document loads
{
	$('.articlebox a').click(function(e){
		e.stopPropagation();
		});

	//get the divs containing the article information
	$articles = $('.articlebox')

	//make them grow on mouseover
	$articles.click(function(e){
		e.stopPropagation();
		//remove the old ones#
		$oldones=$('.grownboxholder');
		$oldones.fadeOut(500,function(){$oldones.remove();});

		$copy = $(this).parent().clone().appendTo('#page').hide(0);

		$copy.removeClass('boxholder');

		$copy.css('left',$(this).parent().offset().left+'px');
		$copy.css('top',$(this).parent().offset().top+'px');
		
		$copy.css('width','18em');
		$copy.css('opacity',0);

		$copy.animate({left:($(window).width()/2-250)+'px',width:'500px',opacity:1});

		$copy.click(function(){$(this).fadeOut(500,function(){$(this).remove();});});

		$copy.addClass('grownboxholder');
		
	}); 
	
	$(document).click(function(){
		$oldones=$('.grownboxholder');
		$oldones.fadeOut(500,function(){$oldones.remove();});
	});

	features_rearrange();

});

features_hover = 0;

function features_rearrange()
{
	//get holder
	$holder = $('.featuredbox');
	$holder.removeClass('featuredbox');
	$holder.addClass('featuredbox2');

	//extract articles
	$panes = $('.featurecontent');
	$panes.css('height','23em');
	
	//put them all in a tall box
	$bigpane = $('<div>');
	$bigpane.addClass('featurecontentholder');
	$bigpane.append($panes);
	

		//put labels in it
	$labels=$('<div>');
	$labels.addClass('featurelabels');

	$labellinks = $('.featuredbox2 a').clone().empty();
	$labelimages = $('.featuredbox2 img').clone();
	$labellinks.each(function(i){
		$(this).bind('mouseover',function(){features_goto(i);});
		$(this).append($labelimages.get(i));
		});
	$labels.append($labellinks);

	//empty holder
	$holder.empty();
	
	//put boxes in it
	$holder.append($bigpane);
	$holder.append($labels);

	$highlight = $('<div>');
	$highlight.addClass('featurehighlight');
	$holder.append($highlight);
	
	$holder.mouseover(function(){features_hover=2;});
	$holder.mouseout(function(){features_hover=1;});
	
	features_tick(3);
	
}

function features_goto(n)
{
	$bigplane=$('.featurecontentholder');
	$bigplane.stop().animate({marginTop:'-'+n*23+'em'},750);
	
	$('.featurehighlight').stop().animate({top:(n*5.75)+'em'},750);
}

function features_tick(n)
{
	if(n==-1)
	{
		n=parseInt($('.featurecontentholder').css('marginTop'))/-23;
	}
	if(features_hover==2)
	{
		//do nothing
	}
	else if(features_hover==1)
	{	//user has just mouse-out-ed
		features_hover=0;
	}
	else
	{
		n=(n+1)%4;
		features_goto(n);
	}
		setTimeout(function(){features_tick(-1);},3000);
}