$(document).ready(function(){
/*	
	THIS IS FOR HOMEPAGE BANNER FUNCTIONALITY: 
	1. ON HOVER OF THE SCROLL MODULE ITS CHILD ELEMENTS CHANGE COLOUR OF THE IMAGE BORDER AND THE HEADER LINK 
	   COLOUR.
	2. ON CLICK OF THE SCROLL MODULE THE EVENT FINDS AND SHOWS THE CORRESPONDING BANNER IN THE SAME INDEX 
	   POSITION 
*/
	//Add class to the first list item only
	$("#banner-left li:first").addClass("default");
	
	$("div.scroll-module").each(function(index) {
		$(this).click(function () { 
			$("#banner-left li:first").removeClass("default");
			$("div#scroller div.active-state").removeClass("active-state");								   
		  	$(this).addClass("active-state"); 
			//Hides the previous list banner
		  	$("#banner-left li:visible").hide();
		  	//Show the specified list with the same index position as the event handler
		  	$("#banner-left li:eq("+index+")").show();
		});
		//Hover effect on scroll module
		$(this).hover(function () {
		  	$(this).addClass("hover-state");
		}, function () {
		  	$(this).removeClass("hover-state");
		});
		
	});
	
});