$(document).ready(function() {

	//------------------- Quote box ------------------------------
	// overwrite css settings (in case javascript is disabled)
	$('.quote').css('visibility','visible');
	$('.quote').hide();
	$('.quote.active').show();
	var qbInt;
	    
	nextQuote = function(){
	    $activeQuote = $('.quote.active').next();
        if ( $activeQuote.length === 0) {	// if reached last comment
            $activeQuote = $('.quote:first');
        }
		$('.quote.active').fadeOut(500);
		$('.quote.active').removeClass('active');
		$activeQuote.addClass('active');
		$activeQuote.fadeIn(500);
	};
	
	qbInt = setInterval(function(){ //Quote timer
		nextQuote();
    }, 10000); //Timer speed in milliseconds
    
	$('.quote').hover(function() {
		qbInt = clearInterval(qbInt);
		}, function() {
		qbInt = setInterval(nextQuote(), 10000);
	});

    
    
    //------------------ Before/After ---------------------------
    $('#beforeafter img').css('visibility','visible');
	$('#beforeafter img').hide();
	$('#beforeafter img.active').show();
	var baInt;
	togglepic = function(){
		$activePic = $('#pics .active').next();
        if ( $activePic.length === 0) {	// if reached last comment
            $activePic = $('#pics img:first');
        }
		$('#pics .active').fadeOut(1000);
		$('#pics .active').removeClass('active');
		$activePic.addClass('active');
		$activePic.fadeIn(1000);
       
		$activeFrame = $('#frame .active').next();
        if ( $activeFrame.length === 0) {	// if reached last comment
            $activeFrame = $('#frame img:first');
        }
		$('#frame .active').hide();
		$('#frame .active').removeClass('active');
		$activeFrame.addClass('active');
		$activeFrame.show();
	    };
	
	$('#beforeafter').click(function(){
		clearInterval(baInt);
		togglepic();
		play();
		return false});
	
	play = function(){
		baInt = setInterval(function(){ // timer
    	    togglepic();}, 8000); //Timer speed in milliseconds
		};
	play();
});