// This script refers to the relevant information boxes (the two boxes above the footer).
// It basically:
// 1. Gets the values of the two boxes, href, image path, alt tags, and title
// 2. Strip out the whole thing
// 3. Re-render the HTML to be sIFR compliant, so that I can assign sIFR to the <span> and not <a>
// 4. sIFR is assigned
// 5. Javascript is used again to enable hovering of background colours.

$('.siteFeatures div').each(function(){
	// get info
	var href = $('a', this).attr('href');
	var imagePath = $('a img', this).attr('src');
	var imageAlt = $('a img', this).attr('alt');
	var title = $('a', this).text().replace(/^\s+|\s+$/g, ''); // uses regexp to trim - otherwise sIFR renders a space at the beginning
	
	// remove them
	$(this).children().remove();
	
	// pump it out
	$(this).append('<strong class="title"><a href="' + href + '">'+title+'</a></strong><a class="image" href="' + href + '"><img src="' + imagePath + '" alt="' + imageAlt + '" /></a>');
});		


// might as well use javascript to make the background hover
$('.siteFeatures div').hover(function(){
	$(this).css({'background':'#666666'});
}, function(){
	$(this).css({'background':'#b2b2b2'});
});