$(document).ready(function() {
	
	var speed = 1500; //pane transitioning speed. (milliseconds)
		
	/*automated transitioning slides.*/
	transition = function() {
		play = setInterval(function() {
			/*TOGGLE / CONTROLS*/
			var curBtn = $('#controls .active'); //current, active anchor button from control set.
			var curBtnParent = $('#controls .active').parents('li'); //active anchors parent.
		
			curBtn.removeClass('active'); //removes active class.
			curBtnParent.next().children('a').addClass('active'); //targets anchor element child and add class of 'active'
			
			if (curBtnParent.next().length == 0) { //if the next element in sequence is unapparent, (null) -
			curBtn = $('#controls li:first-child a').addClass('active'); //set variable 'curBtn' to first child of controls.
			}		
			
			/*PANES*/
			var panes = $('#slider .pane');
			var activePane = $('#slider .pane.active'); // 1.
			var nextPane = activePane.next();
			
			if (nextPane.is('ul')) {
			nextPane = $('#slider .pane:first-child');
			}
			
			activePane.fadeOut(speed, function() {
			$(this).removeClass('active');
			});
			
			nextPane.fadeIn(speed).addClass('active');
	
		}, 5000); //set to 7 sec.
	} //END transition();
	
	transition(); //initiate function on page load.
	
	
	/*onclick, override 
	automated transition
	when necessary.*/
	$('#controls a').click(function() {
		$('#controls li a').removeClass('active'); //remove class active from all other elements.
		$(this).addClass('active'); //targets selected element and adds class 'active'.
		
		var panes = $('#slider .pane');
		var activePaneIndex = $('#slider .pane.active').index()+1;
		var activePane = $('#slider .pane.active');
		var curEl = $(this).parents('li').index()+1; //let's check which element clicked.
		
		//console.log('current toggle element clicked: '+curEl);
		//console.log('current active pane: '+activePaneIndex);
		
		panes.fadeOut(speed, function() {
		$(this).removeClass('active'); //1. hide all panes. (display:none)
		})
		
		if (curEl == 1) {panes.eq(0).fadeIn(speed).addClass('active');}
		if (curEl == 2) {panes.eq(1).fadeIn(speed).addClass('active');}
		if (curEl == 3) {panes.eq(2).fadeIn(speed).addClass('active');}
		if (curEl == 4) {panes.eq(3).fadeIn(speed).addClass('active');}
		
		clearInterval(play); //stop the automating process.
		transition(); //restart transitioning.
	}); //END click()	
	
	
	$('#slider .pane').hover(function() {
	clearInterval(play); //stop automated transition while user viewing / showing interest to pane.
	}, function() {
	transition(); //when hover away from focal element, restart transition.
	}); //END hover()
	
});