function-of-the-beast.js

// -------------------------------------------------------
// -------------------------------------------------------
//
// Copyright © Keith Driessen.
//
// RUNNIN' WITH THE DEVIL SINCE 1985!
// http://madebygrave.com
// -------------------------------------------------------
// -------------------------------------------------------




$(document).ready(function() {
	
	
	
	
	var $doc = $(document),
			$win = $(window),
			$preloader = $('#pre-loader'),
			$cuts = $('.cuts', $preloader),
			$nav = $('nav'),
			$nav_bar = $('h1', $nav),
			$nav_link = $('.nav-link', $nav),
			$wrapper = $('#wrapper'),
			$section = $('section', $wrapper),
			$tour = $('#tour-section');
	
	
	
	
	// -----------------------------------------------------
	// APPEND DATA TO THE DOM AND SET VARS
	// -----------------------------------------------------
	// $tour.append(RA.Templates['section-tour'](RA.Data.tour));
	
	var $media = $('.media', $wrapper),
			
			$main = $('#main-section'),
			$features = $('#feature-slides', $main),
			$feature = $('.feature-slide', $features),
			$timer_strip = $('#timer-strip', $main),
			$panel = $('.panel', $timer_strip),
			$bar = $('.bar', $timer_strip),
			$play_video = $('#feature-play-btn', $main),
			$video = $('#video-screen', $main),
			
			$tour_item = $('.tour-item', $tour),
			$toggle = $('.toggle', $tour),
			$upcoming = $('#upcoming-shows'),
			$past = $('#past-shows'),
			
			$gallery = $('#photo-gallery'),
			$photo = $('.photo', $gallery),
			$dbls = $('.dbl', $gallery),
			$prev_btn = $('#prev-arrow'),
			$next_btn = $('#next-arrow'),
			
			ww,
			wh,
			old_ww = $win.width(),
			inmotion,
			timer,
			i = 0,
			ratio = 5 / 8,
			slideshow = false,
			max = $feature.length,
			total_photos = $photo.length;
	
	
	
	
	// -----------------------------------------------------
	// SET ACTIVE/CURRENT STATES
	// -----------------------------------------------------
	
	// Nav
	$main.addClass('active');
	$('ul li', $nav).first().addClass('active');
	
	// Slideshow
	$feature.first().addClass('active');
	$panel.first().addClass('current');
	
	// Gallery
	$photo.first().addClass('active').css('left', '0%');
	
	
	
	// -----------------------------------------------------
	// FEATURE SLIDESHOW
	// -----------------------------------------------------
	function _featureSlideshow() {
		i = $('.panel.current', $timer_strip).index();
		
		slideshow = true;
		
		function _nextFeatureSlide() {
			var $p = $panel.eq(i),
				$b = $('.bar', $p),
				$active = $('.active', $features);
			
			$panel.removeClass('current');
			$panel.eq(i).addClass('current');
			
			$active.removeClass('active').addClass('old-active');
			$feature.eq(i).addClass('active');
			
			$b.removeClass('reset').css('width', '0%').stop().animate({width: '100%'}, 6666, 'linear', function() {
				$(this).css('width', '0%').addClass('reset');
			});
			
			setTimeout(function() {
				$active.removeClass('old-active');
			}, 1000);
			
			i++;
			if(i === max) i = 0;
		};
		
		timer = setInterval(_nextFeatureSlide, 6666);
		_nextFeatureSlide();
	};
	
	function _stopFeatureSlideshow() {
		clearInterval(timer);
		
		slideshow = false;
		$bar.stop(true, false).css('width', '0%').addClass('reset')
	};
	
	function _toggleSlides() {
		var $t = $(this);
		
		if($t.hasClass('current')) {
			return false;
		} else {
			$panel.off('click', _toggleSlides);
			
			$panel.removeClass('current');
			$t.addClass('current');
			
			_stopFeatureSlideshow();
			_featureSlideshow();
			
			setTimeout(function() {
				$panel.on('click', _toggleSlides);
			}, 1000);
		}
	};
	
	$panel.on('click', _toggleSlides);
	
	
	
	
	// -----------------------------------------------------
	// FEATURE VIDEO
	// -----------------------------------------------------
	function _playVideo() {
		var $vid = '<div id="video-box"><iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/3rwK2dDd3rg?autoplay=1&controls=0&enablejsapi=1&rel=0&showinfo=0&autohide=1&color=white" frameborder="0" allowfullscreen></iframe></div><div id="xxx"></div>'
		
		$video.append($vid).fadeIn(666, function() {
			$('#ytplayer').css('top','0%');
		});
	};
	
	function _removeFeatureVideo() {
		$video.empty().fadeOut(666, function() {
			if($main.hasClass('active')) _featureSlideshow();
		});
	};
	
	$play_video.on('click', function() {
		_stopFeatureSlideshow();
		_playVideo();
	});
	
	$video.on('click', '#xxx', _removeFeatureVideo);
	
	
	
	
	// -----------------------------------------------------
	// MENU EXPAND / COLLAPSE
	// -----------------------------------------------------
	function _toggleMenu() {
		if(ww < 768) {
			if(!$nav.hasClass('expanded')) $nav.addClass('expanded');
			else $nav.removeClass('expanded');
		}
	};
	
	
	
	
	// -----------------------------------------------------
	// UPDATE SECTION
	// -----------------------------------------------------
	function _updateSection() {
		if(inmotion) return false;
		else inmotion = true;
		
		var $t = $(this),
				section = $t.data('section'),
				$target = $('#' + section + '-section'),
				$active = $('section.active');
		
		if(!$t.hasClass('active')) {
			if(section !== 'main' && slideshow === true) _stopFeatureSlideshow();
			
			$nav_link.removeClass('active');
			$t.addClass('active');
			
			$active.removeClass('active').addClass('old-active');
			$target.addClass('active');
			
			if(section === 'gallery') $doc.on('keyup', _keyboardControls)
			else $doc.off('keyup');
			
			setTimeout(function() {
				$active.removeClass('old-active');
				if(section !== 'main' && $('#ytplayer', $video).length > 0) _removeFeatureVideo();
				if(section === 'main' && slideshow === false) _featureSlideshow();
				inmotion = false;
			}, 1000);
		} else {
			inmotion = false;
		}
		
		if($nav.hasClass('expanded')) $nav.removeClass('expanded');
	};
	
	
	
	
	// -----------------------------------------------------
	// TOUR DATES SORTER
	// -----------------------------------------------------
	function _compareTourDates() {
		var now = new Date(),
				today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
				upcoming_arr = [],
				past_arr = [];
		
		$tour_item.each(function() {
			var $t = $(this),
					tour_date = $('.tour-date .td', $t).text(),
					parts = tour_date.split('.');
			
			tour_date = new Date(parts[2], parts[0] - 1, parts[1]);
			
			if(tour_date < today) past_arr.push($t);
			else upcoming_arr.push($t);
		});
		
		$upcoming.empty().append(upcoming_arr);
		$past.empty().append(past_arr);
		
		$past.find('.tour-details, .expand-icon').remove();
		$past.find('.toggle').removeClass('toggle');
		
		if($upcoming.children().length < 1) $upcoming.append('<p>No shows at this time...</p>');
	};
	
	_compareTourDates();
	
	
	
	
	// -----------------------------------------------------
	// TOUR INFO TOGGLE
	// -----------------------------------------------------
	function _toggleTourInfo() {
		var $t = $(this),
				$s = $t.siblings();
		
		if($s.hasClass('expanded')) {
			$s.removeClass('expanded').css('height', '0px');
		} else {
			var new_ht = $s.removeClass('expanded').css('height','auto').height();
			$s.addClass('expanded').css('height', new_ht + 'px');
		}
	};
	
	
	
	
	// -----------------------------------------------------
	// GALLERY
	// -----------------------------------------------------
	function _previousPhoto() {
		if(inmotion) return false;
		else inmotion = true;
		
		var $active_photo = $('.photo.active', $gallery),
				$prev_photo = $active_photo.prev();
		
		if($prev_photo.length === 0) {
			$gallery.stop().animate({'margin-left': '40px'}, 200, function() {
				$gallery.stop().animate({'margin-left': '0px'}, 200, function() {
					inmotion = false;
				});
			});
		} else {
			$active_photo.removeClass('active').css('left', '0%').stop().animate({left: '100%'}, 666);
			$prev_photo.addClass('active').css('left', '-100%').stop().animate({left: '0%'}, 666, function() {
				inmotion = false;
			});
		}
	};
	
	function _nextPhoto() {
		if(inmotion) return false;
		else inmotion = true;
		
		var $active_photo = $('.photo.active', $gallery),
				$next_photo = $active_photo.next();
		
		if($next_photo.length === 0) {
			$gallery.stop().animate({'margin-left': '-40px'}, 200, function() {
				$gallery.stop().animate({'margin-left': '0px'}, 200, function() {
					inmotion = false;
				});
			});
		} else {
			$active_photo.removeClass('active').css('left', '0%').stop().animate({left: '-100%'}, 666);
			$next_photo.addClass('active').css('left', '100%').stop().animate({left: '0%'}, 666, function() {
				inmotion = false;
			});
		}
	};
	
	function _keyboardControls(e) {
		if(e.keyCode === 39) _nextPhoto();
		if(e.keyCode === 37) _previousPhoto();
	}
	
	
	
	
	
	// -----------------------------------------------------
	// TOUCH EVENTS
	// -----------------------------------------------------
	
	// Nav
	$nav_bar.on('click', _toggleMenu);
	$nav_link.on('click', _updateSection);
	
	$('h1', $nav).on('click', function() {
		if(ww >= 768) $nav_link.first().trigger('click');
	});
	
	$wrapper.on('click', function() {
		if(ww < 768) {
			if($nav.hasClass('expanded')) $nav.removeClass('expanded');
		}
	});
	
	// Tour
	$toggle.on('click', _toggleTourInfo);
	
	// Gallery
	$prev_btn.on('click', _previousPhoto);
	$next_btn.on('click', _nextPhoto);
	
	
	
	
	// -----------------------------------------------------
	// WINDOW EVENTS
	// -----------------------------------------------------
	function _resizeMedia() {
		if ((wh / ww) > ratio) {
			$media.height(wh);
			$media.width(wh / ratio);
		} else {
			$media.width(ww);
			$media.height(ww * ratio);
		};
		
		$media.css('left', (ww - $media.width()) / 2);
		$media.css('top', (wh - $media.height()) / 2);
	};
	
	function _totallyLoaded() {
		$('#spinner-wrapper').addClass('loaded');
		$cuts.addClass('slice');
		
		setTimeout(function() {
			$preloader.remove();
			$nav.css('top', '0px');
			$('.callout', $main).addClass('called');
			$play_video.removeClass('hidden');
			
			_featureSlideshow();
		}, 800);
	};
	
	$win.load(function() {
		setTimeout(_totallyLoaded, 2000);
	}).resize(function() {
		ww = $win.width();
		wh = $win.height();
		
		if(ww >= 768 && $nav.hasClass('expanded')) $nav.removeClass('expanded');
		
		_resizeMedia();
	}).trigger('resize');
	
	
	
	
});