$(function() {
	$(".shoppersTab").click(function() {
		var selectedOverview = $('#selectedOverview').attr('value');
		
		if(selectedOverview == 'GROUPS') {
			$('#selectedOverview').val('SHOPPERS');
			
			toggleOverviewTabs();

			$("#overview .overviewTabBar .navTabSpacer.shoppersTab").css("display", "block");
			$("#overview .overviewTabBar .navTabSpacer.groupsTab").css("display", "none");
			
			 $('#groupsOverview').fadeOut('slow', function(){
				 $('#shoppersOverview').fadeIn('slow');
			 });
		}
	})
	
	$(".groupsTab").click(function() {
		var selectedOverview = $('#selectedOverview').attr('value');

		if(selectedOverview == 'SHOPPERS') {
			$('#selectedOverview').val('GROUPS');

			toggleOverviewTabs();
			
			$("#overview .overviewTabBar .navTabSpacer.shoppersTab").css("display", "none");
			$("#overview .overviewTabBar .navTabSpacer.groupsTab").css("display", "block");
			
			 $('#shoppersOverview').fadeOut('slow', function(){
				 $('#groupsOverview').fadeIn('slow');
			 });
		}
	})
})

function toggleOverviewTabs() {
	$('#overview .overviewTabBar .navTabLeft.groupsTab').toggleClass("selected");
	$('#overview .overviewTabBar .navTabMiddle.groupsTab').toggleClass("selected");
	$('#overview .overviewTabBar .navTabRight.groupsTab').toggleClass("selected");

	$('#overview .overviewTabBar .navTabLeft.shoppersTab').toggleClass("selected");
	$('#overview .overviewTabBar .navTabMiddle.shoppersTab').toggleClass("selected");
	$('#overview .overviewTabBar .navTabRight.shoppersTab').toggleClass("selected");
			
	$('#overview .overviewTabBar .navTabLeft.groupsTab').toggleClass("whiteLeft");
	$('#overview .overviewTabBar .navTabMiddle.groupsTab').toggleClass("whiteMiddle");
	$('#overview .overviewTabBar .navTabRight.groupsTab').toggleClass("whiteRight");
	
	$('#overview .overviewTabBar .navTabLeft.shoppersTab').toggleClass("whiteLeft");
	$('#overview .overviewTabBar .navTabMiddle.shoppersTab').toggleClass("whiteMiddle");
	$('#overview .overviewTabBar .navTabRight.shoppersTab').toggleClass("whiteRight");

	$('#overview .overviewTabBar .navTabLeft.groupsTab').toggleClass("greyLeft");
	$('#overview .overviewTabBar .navTabMiddle.groupsTab').toggleClass("greyMiddle");
	$('#overview .overviewTabBar .navTabRight.groupsTab').toggleClass("greyRight");
	
	$('#overview .overviewTabBar .navTabLeft.shoppersTab').toggleClass("greyLeft");
	$('#overview .overviewTabBar .navTabMiddle.shoppersTab').toggleClass("greyMiddle");
	$('#overview .overviewTabBar .navTabRight.shoppersTab').toggleClass("greyRight");
}