/*----------------------------------------------------------------------------------------

	Epical - Custom Javascripts

------------------------------------------------------------------------------------------

	Table of Contents:

	1	Superfish
	2	Responsive Navigation
	3	Hidden Area
	4	Related Posts
	5	Overlay Hover
	6	Portfolio Hover
	7	Animate Share Options
	8	Skills Animation
	9	To Top Button
	10	Add Last Class
	11	FitVids
	12	prettyPhoto
	13	Tabs
	14	Accordion
	15	Toggle
	16	Message Box
	17	Tipsy

----------------------------------------------------------------------------------------*/

jQuery(document).ready(function() {


/*--------------------------------------------------------------------------------------*/
/* 	1	Superfish - http://users.tpg.com.au/j_birch/plugins/superfish/					*/
/*--------------------------------------------------------------------------------------*/

	jQuery('#primary-nav ul').superfish({
		
		delay:250,
		animation:{
			opacity:'show'
		},
		speed:'fast',
		autoArrows:false
		
	});
	
	// Remove current menu class from dropdowns
	jQuery('ul.menu ul li').removeClass('current-menu-item current_page_item current-cat');


/*--------------------------------------------------------------------------------------*/
/* 	2	Responsive Navigation - http://github.com/mambows/mobilemenu					*/
/*--------------------------------------------------------------------------------------*/	

	jQuery('#primary-nav').mobileMenu();

	// Add custom SPAN underneath SELECT so we can style it
	jQuery('.select-menu').after(jQuery('<span class="mobile-select">Navigate to...</span>'));

	
/*--------------------------------------------------------------------------------------*/
/* 	3	Hidden Area																		*/
/*--------------------------------------------------------------------------------------*/
	
	jQuery('.hidden-button').click(function() {
	
		jQuery('#hidden-area .inner').slideToggle('normal', function() {
			// Animation complete
		});
		
		jQuery('#hidden-area').toggleClass('open');

	});
	
	
/*--------------------------------------------------------------------------------------*/
/* 	4	Related Posts																	*/
/*--------------------------------------------------------------------------------------*/	

	// Fix to display the related posts correctly on tablets and mobile devices
	// Every row with two items needs to be wrapped inside a div
	var related_posts = jQuery('#related-posts ul li');
	
	// If there are two items, wrap them inside a div
	for(var i = 0; i < related_posts.length; i+=2) {
		related_posts.slice(i, i+2).wrapAll('<div class="clear-row"></div>');
	}


/*--------------------------------------------------------------------------------------*/
/* 	5	Overlay Hover																	*/
/*--------------------------------------------------------------------------------------*/

	jQuery('.blog #main .hentry .post-thumb, .archive #main .hentry .post-thumb, #related-posts ul li .post-thumb, .blog-item .post-thumb, .staff-member .staff-photo.email, a.prettyPhoto').hover(function() {
		
		// Set image opacity to 5% 
		jQuery(this).find('img').stop().animate({
			opacity:0.05
		}, 300);

		// Display and animate the overlay div
		jQuery(this).find('.overlay-view').stop().animate({
			opacity:1,
			top:'49%'
		}, 300);

	},
	function() {
		
		// Set image opacity back to 100%
		jQuery(this).find('img').stop().animate({
			opacity:1
		}, 300);

		// Hide the overlay div
		jQuery(this).find('.overlay-view').stop().animate({
			opacity:0,
			top:'40%'
		}, 300);

	});


/*--------------------------------------------------------------------------------------*/
/* 	6	Portfolio Hover																	*/
/*--------------------------------------------------------------------------------------*/

	jQuery('.portfolio-container .portfolio-project').hover(function() {
		
		// Set image opacity to 5% 
		jQuery(this).find('img').stop().animate({
			opacity:0.05
		}, 300);

		// Display the overlay div
		jQuery(this).find('.project-background').stop().animate({
			opacity:1
		}, 300);
		
		// Display and animate the overlay text
		jQuery(this).find('.project-info').stop().animate({
			opacity:1,
			top:'50%'
		}, 300);
		
		// Vertically center the project info div
		var infoDiv = jQuery(this).find('.project-info');
		infoDiv.css({ marginTop:-infoDiv.outerHeight() / 2 })

	}, 
	function() {
		
		// Set image opacity back to 100%
		jQuery(this).find('img').stop().animate({
			opacity:1
		}, 300);

		// Hide the overlay div
		jQuery(this).find('.project-background').stop().animate({
			opacity:0
		}, 300);
		
		// Hide the overlay text
		jQuery(this).find('.project-info').stop().animate({
			opacity:0,
			top:'40%'
		}, 300);

	});


/*--------------------------------------------------------------------------------------*/
/* 	7	Animate Share Options															*/
/*--------------------------------------------------------------------------------------*/	

	// Hide the social media share buttons
	jQuery('.share-container').css('opacity', '0');
	
	jQuery('.share-container').each(function() {

		// When the user clicks on the share button, the share options are displayed
		var container = jQuery(this);
		container.click(function() {		

			// Find the share button
			var share_button = jQuery(this).parent().find('.share-text');

			// Find the Twitter, Facebook, Google+ and Pinterest buttons
			jQuery(this).parent().find('.share-button').each(function() {					

				var button = jQuery(this);

				// Check if the buttons have a class "hidden"
				if (button.hasClass('hidden')) {

					// Add a class "selected" to the share button, so we can style the plus/minus icon
					share_button.addClass('selected');
					button.stop();
					
					// Display the buttons
					setTimeout(function() {
						button.css('display', 'block')
					}, 20);

					// Give the buttons a width, margin-left and opacity
					button.animate({
						width:'40px',
						marginLeft:'1px',
						opacity:1
					}, { duration:300, queue:false });
					
					// Remove the class "hidden", so the function knows that the buttons are displayed
					button.removeClass('hidden');							
				
				}
				
				// If the buttons don't have the class "hidden"
				else {

					// Remove the class "selected" from the share button
					share_button.removeClass('selected');
					button.stop();
					
					// Hide the buttons by setting the width to 1px and the margin-left and opacity to 0
					button.animate({
						width:'1px', /* Prevents content flash in Chrome */
						marginLeft:'0px',
						opacity:0
					}, { duration:300, queue:false });
					
					// Hide the buttons
					setTimeout(function() {
						button.css('display', 'none')
					}, 280);
					
					// Add the class "hidden" to the buttons, so the function knows that the buttons are not being displayed
					button.addClass('hidden');
				
				}
				
			});

		});

		container.click();
		
		// Display the share container
		setTimeout(function() {
			container.css('opacity', '1');
		}, 300);

	});


/*--------------------------------------------------------------------------------------*/
/* 	8	Skills Animation																*/
/*--------------------------------------------------------------------------------------*/

	// If the class with the skills appears, execute the function
	jQuery('.skillgroup').appear(function() {
		
		jQuery('.skill').each(function() {

			// Get the width of the bars from the data attribute
			var percentage = jQuery(this).find('.skill-name').attr('data-percentage');

			// Set the width to 0%
			jQuery(this).find('.skill-name').css('width', '0%');

			// Animate the width
			jQuery(this).find('.skill-name').animate({
				width:percentage + '%'
			}, 800);

		});

	});
	

/*--------------------------------------------------------------------------------------*/
/* 	9	To Top Button																	*/
/*--------------------------------------------------------------------------------------*/

	jQuery(function() {

		// Display the button
		jQuery(window).scroll(function() {
			if (jQuery(this).scrollTop() > 100) {
				jQuery('#to-top').fadeIn();
			} else {
				jQuery('#to-top').fadeOut();
			}
		});

		// Scroll back to the top on click
		jQuery('#to-top').click(function() {
			jQuery('body, html').animate({
				scrollTop:0
			}, 600);
			return false;
		});

	});


/*--------------------------------------------------------------------------------------*/
/* 	10	Add Last Class																	*/
/*--------------------------------------------------------------------------------------*/

	// Add extra class to last item
	jQuery('.blog #main .hentry:last, .archive #main .hentry:last').addClass('last');
	

/*--------------------------------------------------------------------------------------*/
/* 	11	FitVids - http://fitvidsjs.com/													*/
/*--------------------------------------------------------------------------------------*/	
	
	// Make all the videos responsive
	jQuery('#container').fitVids();
	

/*--------------------------------------------------------------------------------------*/
/* 	12	prettyPhoto - http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ */
/*--------------------------------------------------------------------------------------*/
	
	jQuery("a[rel^='prettyPhoto']").prettyPhoto({
		animation_speed:'normal',
		show_title:false,
		theme:'pp_default', // Other options: dark_rounded / dark_square / facebook / light_rounded / light_square
		autoplay:false,
		deeplinking:false,
		social_tools:false
	});


/*--------------------------------------------------------------------------------------*/
/* 	13	Tabs - http://jqueryui.com/tabs/												*/
/*--------------------------------------------------------------------------------------*/

	// Shortcode Tabs
	jQuery('.tabgroup').tabs();


/*--------------------------------------------------------------------------------------*/
/* 	14	Accordion - http://jqueryui.com/accordion/										*/
/*--------------------------------------------------------------------------------------*/

	// Shortcode Accordion
	jQuery('.accordion-container').accordion({
		header:'> .accordion > .accordion-title',
		autoHeight:false,
		collapsible:true,
		active:false
	});
	
	
/*--------------------------------------------------------------------------------------*/
/* 	15	Toggle - http://jqueryui.com/toggle/											*/
/*--------------------------------------------------------------------------------------*/

	// Hide the shortcode content
	jQuery('.toggle .inner-content').hide();
	
	// Toggle the content
	jQuery('.toggle-title').click(function() {
		jQuery(this).toggleClass('active').next().slideToggle('normal');
	});
	

/*--------------------------------------------------------------------------------------*/
/* 	16	Message Box																		*/
/*--------------------------------------------------------------------------------------*/

	// Close the message box when the user clicks on the close button
	jQuery('.message-box .close').click(function(e) {
		e.preventDefault();
		jQuery(this).parent().slideUp();
	});
	
	
/*--------------------------------------------------------------------------------------*/
/* 	17	Tipsy - http://onehackoranother.com/projects/jquery/tipsy/						*/
/*--------------------------------------------------------------------------------------*/

	// Shortcode tooltip
	jQuery('.tooltip').tipsy({
		opacity:1,
		gravity:'s',
		fade:false,
		html:true
	});

});