// Global variable
var active_article_id = '';

/**
 * 
 */
function show_headline_image(article_id) {
	if (!article_id || typeof article_id == 'object') {
		article = $(this);
		article_id = article.attr('id').replace('headline_article_', '');
	}
	
	var image = $('#headline_image_' + article_id);
	
	// If the article we are showing is the currently active article, we don't need to do anything
	if (active_article_id == article_id) {
		return;
	}
	
	// Hide all other images first
	$('.headline_image').hide();
	$('.headline_article').removeClass('headline_article_active');
	$('.headline_article').removeClass('headline_marker');
	
	
	// Show the current image
	image.show();
	$('#headline_article_' + article_id).addClass('headline_article_active');
	
	
	// Set the article we've just moused over as the currently active article
	active_article_id = article_id;
}

// When the page first loads
$(document).ready(function () {
	// Setting the initially active article id by getting the first headline article, taking its id attribute and stripping out "headline_article_" to get the article id
	active_article_id = $('.headline_article').first().attr('id');
	
	if(active_article_id) // If the ID is undefined, this will become NULL and therefore not fire the the .replace function, which would fail and cause any further JS on the page to also fail
	{	
		active_article_id = active_article_id.replace('headline_article_', '');
		
		// When the user mouses over the headline article (text bit), show the associated headline image
		$('.headline_article').mouseover(show_headline_image);
	}
});