roniit

new-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');

	// -----------------------------------------------------
	// NEWS GRID
	// -----------------------------------------------------
	var $container = $('#news');

	// Wait for images to load
	$container.imagesLoaded( function() {

		// Initialize Masonry grid
		$container.masonry({
			columnWidth: 230,
			itemSelector: '.item',
			gutter: 25
		});

		// Set dark hover effect to be the same height as an image itself
		var elems = $container.masonry('getItemElements');
		$(elems).find('img').each(function(index, item) {
			$(item).siblings('.overlay').height(item.height);
		});
	});

});