/*

Site:				storymatters.com
File:				global_js.js
Author:				Jon Dale, Journey Group, inc
Description:		For use as a global javascript file across all content.


Notes: 				

/////////////////////////////////////////////////////////////////////*/

$(document).ready(function() {
	
	// BANNER
	setTimeout(collapseBanner,1500);
	
	function collapseBanner() {
		$('#smBanner #banner-mag').animate({'opacity':'0'}, 100, function() {
			$('#smBanner #banner-sm').animate({'opacity':'1'}, 200);
			$('#smBanner').animate({'height':'180px'}, 200);
			$('#smBanner #banner-bottom').animate({'top':'120px'}, 200);
			$('#smBanner').removeClass('expanded');
		});
	}
	
	function expandBanner() {$('#smBanner').animate({'height':'250px'}, 200);
		$('#smBanner #banner-bottom').animate({'top':'190px'}, 200);
		$('#smBanner #banner-sm').animate({'opacity':'0'}, 200, function() {
			$('#smBanner #banner-mag').animate({'opacity':'1'}, 100);
			$('#smBanner').addClass('expanded');
		});
	}
	
	$('#smBanner').hover(function() {
		if(!$('#smBanner').is(':animated') && !$('#smBanner').hasClass('expanded')) {expandBanner();}
	}, function() {
		if(!$('#smBanner').is(':animated') && $('#smBanner').hasClass('expanded')) {collapseBanner();}
	});
	
	
	/* Primary navigation events */
	
	var lock = false;
	
	$('#nav > li > a:not(.nav-icon)').click(function(ev) {
		ev.preventDefault();
		
		if (!lock) {
			if($(this).hasClass('active')) {
				$(this).removeClass('active');
				showOrHideMenu("hide", $(this).attr('title'));
				addOrRemoveOverlay("remove");
			} else {
				$(this).addClass('active');
				addOrRemoveOverlay("add");
				
				if($(this).parent().siblings().find('a.active').attr('title') != null) {
					/* hide previously selected menu */
					showOrHideMenu("hide", $(this).parent().siblings().find('a.active').attr('title'));
				}
				
				/* remove active css state on button */
				$(this).parent().siblings().find('a.active').removeClass('active');
				
				/* show the relevent menu */
				showOrHideMenu("show", $(this).attr('title'));
			}
		}
		
		return false;
	});
	
		var closeMenuTimer;
		
		$('#nav').bind('mouseleave', function() {
			closeMenuTimer = setTimeout(closeMenuTimeout, 1000);
		}).bind('mouseenter', function() {clearTimeout(closeMenuTimer);});
		
		function closeMenuTimeout() {
			var active = $('#nav > li > a.active');
			active.removeClass('active');
			
			showOrHideMenu("hide", active.attr('title'));
			addOrRemoveOverlay("remove");
		}
	
	
	/* Close things on #overlay click */
	
	$('#overlay').click(function() {
		$('ul#nav a.active').removeClass('active');
		showOrHideMenu("hide");
		addOrRemoveOverlay("remove");
	});
	
	
	/* Photo picture hover */
	
	$('#photoMenu a').mouseenter(function(){
		$(this).find('.title').stop().fadeTo(500, 0.8);
	}).mouseleave(function(){
		$(this).find('.title').stop().fadeTo(500, 0);
	});
	
	
	
	/************************************************
	 * showOrHideMenu()
	 
	 * @param action: 'show' or 'hide'
	 * @param menu: the menu to show or hide
	 *******************************/
	
	function showOrHideMenu(action, menu) {
		var menuAction = action,
			menuToShow = null;
			
		
		switch(menu) {
			case "Showcase":
			menuToShow = $('#showcaseMenu');
			break;
			
			case "Regulars":
			menuToShow = $('#regularsMenu');
			break;
			
			case "Columns":
			menuToShow = $('#columnsMenu');
			break;
			
			case "Album":
			menuToShow = $('#photoMenu');
			break;
			
			default:
			menuToShow = $('.openMenu');
		}
		
		if(action == "show") {menuToShow.fadeIn(400).addClass('openMenu');} else {menuToShow.fadeOut(200).removeClass('openMenu');}
		
	}
	
	/************************************************
	 * addOrRemoveOverlay()
	 
	 * @param action: 'add' or 'remove' [default]
	 * @param [withTint]: 'true' or 'false' [default]
	 *******************************/
	
	function addOrRemoveOverlay(action,withTint) {
		if(withTint == null) {
			withTint = false;
		}
		
		if(action == 'add') {$('#overlay').css({'display':'block'})
			
			// .tint added if overlay needs to be tinted
			if(withTint) {$('#overlay').addClass('tint').animate({'opacity':'1'}, 400, function() {
					lock = false;
				});
			} else { // else tint is removed
				$('#overlay').animate({'opacity':'0'}, 400, function() {
					lock = false;
				});
			}
		} else {$('#overlay').animate({'opacity':'0'}, 400, function() {$(this).css({'display':'none'}).removeClass('tint');
				lock = false;
			});
		}
	}
	
		
});