$(document).ready(function () {
	//Scrolling Stories Panel
	if($('div#scrollpanel').length) {
		//Hide all none active panels
		$('div.panel:not(.active)').hide();
		
		//Show panel navigation only when Javascript is enabled
		$('div#scrollpanel ul').show();
		
		$('div#scrollpanel ul li a').click(function() {
			clearInterval(int);
		
			int = setInterval(function() {
				nextStory();
			}, 10000 );
		
			$('div#scrollpanel ul li').removeClass('active');
			$(this).parent('li').addClass('active');
			
			var thisID = $(this).parent('li').attr('id');
			$('div#scrollpanel div.panel.active').fadeOut(100, function() {
				$('div#'+thisID+'-box').fadeIn(100).addClass('active');
			}).removeClass('active');
			return false;
		});
	}
	
	var int;
	
	//Next story function
	if($('div#scrollpanel').length) {
		int = setInterval(function() {
			nextStory();
		}, 10000 );
	}
	
	//Function to switch to next story
	function nextStory() {
		clearInterval(int);
		
		int = setInterval(function() {
			nextStory();
		}, 10000 );
		
		//Check if there is another story, if not show the first story
		if($('div#scrollpanel ul li.active').next('li').length) {
			var next = $('div#scrollpanel ul li.active').next('li').attr('id');
		} else {
			var next = $('div#scrollpanel ul li').first().attr('id');
		}
		
		$('div#scrollpanel ul li').removeClass('active');
		$('li#'+next).addClass('active');
		
		$('div#scrollpanel div.panel.active').fadeOut(100, function() {
			$('div#'+next+'-box').fadeIn(100).addClass('active');
		}).removeClass('active');
	}
	
	//Default Action
	$(".tabcontent").hide(); //Hide all content
	$("#tabpanel ul li:first a").addClass("active").show(); //Activate first tab
	$(".tabcontent:first").show(); //Show first tab content
	
	//On Click Event
	$("#tabpanel ul li a").click(function() {
		$("#tabpanel ul li a").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tabcontent").hide(); //Hide all tab content
		var activeTab = $(this).attr("href"); //Find the rel attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active content
		return false;
	});
});