// BUILT ON TOP OF JQUERY /////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////
/*************************************************************************************************/

$(document).ready(function() {
						   
	$("ul li:first-child").addClass("first-child");
	
	///////////////////////////////////////////////////////////////////////////////////////////////
	// setup gradients
	
	$('.subcol .current-assignments h2').gradient({ from: 'CCCCCC', to: 'f1f1f1' });
	$('.xcol .current-assignments h2').gradient({ from: 'CCCCCC', to: 'f1f1f1' });
	$('.col-SMX .subcol').gradient({ from: 'CCCCCC', to: 'f1f1f1' });
	$('.current-assignments .maincol li.assignment').gradient({ from: 'f1f1f1', to: 'FFFFFF' });
	$('.current-assignments .postHeader').gradient({ from: 'f1f1f1', to: 'FFFFFF' });
	//$('.about-us .maincol ul.news li').gradient({ from: 'f1f1f1', to: 'FFFFFF' });
	//$('.current-assignments .maincol li.assignment .apply').gradient({ from: 'CCCCCC', to: 'f1f1f1' });
	
	// jQuery's document.ready function fires before images are loaded. Use window.load instead here...
	$(window).load(function() {
		// if there is an image...
		if ($('.hero-image img').height() > 0) {
			// then perform this, which helps to properly set the background gradient of the div who's height is determined by images of variable height
			if ($('.hero-image img').height() > 100) {
				$('.hero-image').gradient({ from: 'CCCCCC', to: 'FFFFFF' });
			} else {
				$('.hero-image').gradient({ from: 'CCCCCC', to: 'FFFFFF', length: $('.hero-image img').height() });
			}
		}
	});
	
	///////////////////////////////////////////////////////////////////////////////////////////////
	// append 
	
	/*$(".current-assignments .subcol ul a span.text").each(function() {
		$(this).append('x');
	})*/
	//$(".current-assignments .subcol ul a").append('<?php echo 'xyz' ?>');
	
});