jQuery.fn.toggleCaseBox = function(recursive) {

	var targetContentBox = $(this); //hold the content box object
	var targetContent = $(this).find(".caseContent"); //hold the actual content div (holds the text and image)

	/* --------- */
	/* this is used to close all other boxes (just add a class to every box,
	then remove the 'other' class from the one we are working with,
	this means that we can target all the boxes with 'other' and close them
	without closing the box we are operating on */
	/* this feature is NOT being used at the moment because in IE6 it creates a glitching
	when the other boxes are closing and one is opening */
	/* work in progress */
	/*if( typeof(recursive) == undefined ) recursive = true;
	if(recursive){
		$(".caseBox").addClass("other");	
		$(this).parent().parent().removeClass("other");
		$(".other").toggleCaseBox(false);
	}*/
	/* --------- */

	var operation = '';	
	var newBackgroundColour = '';
	var aniOptions = { height: 175 };
	
	if ( $(targetContentBox).find(".caseContent").is(":visible") ){
		//if its already visible, close it
		operation = 'close';
		newBackgroundColour = 'darkgrey';
		aniOptions = { height: 0 };
		
	}else{
		//if its not already visible, open it
		operation = 'open';
		newBackgroundColour = 'white';
		
	}
	
	$(targetContentBox).animate({ 
		backgroundColor: newBackgroundColour
		}, 1500, function(){;}
	);

	$(targetContent).animate( aniOptions , 1500, function(){
		if( operation == 'close' ) $(targetContent).hide();
	} );	
	
	return targetContentBox;


};