function highlight(li) {
	if (li) {
		li.style.borderColor = "#E5E5E5";
	}	
}

function unhighlight(li) {
	if (li) {
		li.style.borderColor = "";
	}	
}

// execute your scripts when the DOM is ready. this is mostly a good habit
$(function() {

	// initialize scrollable
	$('.scrollable').scrollable({circular: true, keyboard: false}).autoscroll({autoscroll: true, interval: 8000}).bind('onSeek',function() {
		var index = $('.scrollable').scrollable().getIndex();	
		
		// deselect all
		$('.banner-item').removeClass('selected').css("backgroundColor","");
		$('#banner-item-' + index).addClass('selected');
		
		
	});
	
	
	// initialize scrollable nav boxes click action
	$('.banner-item').click(function() {
		
		// deselect all
		$('.banner-item').removeClass('selected').css("backgroundColor","");
		
		// select clicked item
		$(this).addClass('selected');
		
		// get the selected item's id and parse the index out of it
		var itemId = $(this).attr('id');
		var index = itemId.substr(itemId.lastIndexOf('-') + 1);
		
		// scroll to the selected index
		$('.scrollable').scrollable().seekTo(index);
	});
	
	// scrollable nav boxes mouseover action
	$('.banner-item').mouseover(function() {
		if (!$(this).hasClass('selected')) {
			$(this).css('backgroundColor','#999');	
		}
	});

	// scrollable nav boxes mouseout action
	$('.banner-item').mouseout(function() {
		if ($(this).hasClass('selected')) {
			$(this).css('backgroundColor','');			
		}
		else {
			$(this).css('backgroundColor','#EEE');		
		}
	});
	
	

});