AWS

gistfile1.css

#tiernav-wrapper {
	font-family: arial;
	position: relative;
	width: 970px;
	height: auto;
}

ul, li {
    list-style-type: none;
}

ul#category_nav {
	width: 914px;
}

	ul#category_nav li a{
		background: #ffffff;
		float: left;
		padding: 10px;
		width: auto;
		margin-bottom: 15px;
		text-decoration: none;
		text-align: center;
		border-bottom: 1px solid #cccccc;
		color: #626264;
		font-size: 15px;
	}	
	ul#category_nav li a:hover, ul#category_nav li a.active{
		border-bottom: 4px solid #faae36;
		text-align: center;
		color: black;
		padding-bottom: 7px;
	}

#flag_nav {
	clear: both;
	width: 960px;
	padding-left: 0px;
	overflow: hidden;
}

#flag_nav ul{
	display: block;
	overflow: hidden;
	height: 190px;
	width: 10000px;
	left: 5px;
	padding-left:40px;
}

#flag_nav li.thumbData {
	float: left;
	margin-right: 20px;
	margin-top: 20px;
	width: 200px;
	height: 120px;
	font-size: 10px;
}

#flag_nav li.thumbData a {
	display: block;
	padding: 0px 5px;
	text-decoration: none;
}

#flag_nav li.thumbData a div.thumbOverlay {
	display: block;
	margin-top: -60px;
	height: 60px;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0px 5px;
	background: #000000;
	opacity: 0.7;
	color: #ffffff;
	overflow: hidden;
	width: 190px;
	display: none;
}

#flag_nav li.thumbData a:hover div.thumbOverlay {
	display: block;
	height: 60px;
}

#flag_nav li.thumbData a div.thumbOverlay span.overlayTitle {
	font-weight: bold;
	font-size: 11px;
	white-space: normal;
}

#flag_nav li.thumbData img {
	width: 200px;
	height: 150px;
}


#tier1, #tier2, #tier3, #tier4 {
	position: absolute;
	left: 0px;
}

#flag_nav .thumb_nav {
	display: block;
	width: 958px;
	height: 225px;
	margin-bottom: 20px;
	clear: both;
	overflow: none;
	border: 1px solid #cccccc;
	position: relative;
	background:#ffffff;
}

#flag_nav .thumb_nav #title {
	color: #343434;
	font-weight: bold;
	font-size: 15px;
	padding-left: 20px;
	padding-top: 15px;
}

.left_arrow {
	background-color: white;
	background-image: url('https://thismoment-a.akamaihd.net/other/1383930134-8455821.png');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	position: absolute;
	display: block;
	top: 40px;
	left: -1px;
	width: 40px;
	height: 170px;
	border-left: 1px solid #cccccc;
	cursor: pointer;
}

.left_arrow:hover {
	background-image: url('https://thismoment-a.akamaihd.net/other/1383930130-7049821.png');
}

.right_arrow {
	background-color: white;
	background-image: url('https://thismoment-a.akamaihd.net/other/1383930126-6187821.png');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	position: absolute;
	display: block;
	top: 40px;
	left: 918px;
	width: 40px;
	height: 170px;
	border-right: 1px solid #cccccc;
	cursor: pointer;
}

.right_arrow:hover {
	background-image: url('https://thismoment-a.akamaihd.net/other/1383930121-1026821.png');
}

.hidden_arrow {
	display: none;
}

.empty_message {
	padding-top: 50px;
	padding-left: 50px;
	font-size: 20px;
}

#theater-wrap {
	width: 970px !important;
	height: 600px !important;
}

gistfile2.js

$(document).ready(function () {
//Getting category titles from API	
	$.get( "/v4/api/gallery/get_categories.json?gallery_id=1", function( data ) {
//For each category, append a onClick function that pulls from function 'TIERSTACK.loadCategory''
	   $.each(data.results,function(index,category){
		$('#category_nav').append('<li><a href="#" id="cat_'+category.category_id+'" onclick="TIERSTACK.loadCategory('+category.category_id+');return false;">'+category.category_name+'</a></li>');
	    });
	   //load category 1 on page load
	   var category_to_load = data.results[0].category_id;

	   //look for deeplink
	   var urlParts = window.location.search.split('?').join('').split('&');
	   //['category_id=123','content_id=222','region_id=1']
	   for (var i=0;i<urlParts.length;i++) {
	   	var subParts = urlParts[i].split('=')
	   	//['category_id','123']

	   	if (subParts[0] == 'tab_id' || subParts[0] == 'category_id') {
	   		category_to_load = parseInt(subParts[1],10);
	   	}
	   }
	   TIERSTACK.loadCategory(category_to_load);
	});

});

function tmStripHTML(s) {
	$("<div/>").text($("<div/>").html(s).text()).html();
}

function tmEncodeEntities(s){
	return $("<div/>").text(s).html();
}
function tmDencodeEntities(s){
	return $("<div/>").html(s).text();
}

var TIERSTACK = {
	//Defining function getContentForTier - needs two inputs (flag & category iD)
	getContentForTier: function(flag_id, cat_id, div_id){
		var right_arrow = $("#"+div_id).parent().find('.right_arrow');
		var left_arrow = $("#"+div_id).parent().find('.left_arrow');
		$("#"+div_id).html('');
		$("#"+div_id).css('left', '0px');
		left_arrow.addClass("hidden_arrow");
		right_arrow.removeClass("hidden_arrow");
	//Get relevant API data when inputting category ID (from click), gallery ID (in the URL), and flag ID (from function loadCategory BELOW)
		$.get( "/v4/api/gallery/get.json?environment=1&category_id="+cat_id+"&gallery_id=1&flag="+flag_id, function(data){
			//if there are no videos
			if (data.results.length == 0){
				//show html
				$("#"+div_id).html('<div class="empty_message">There are no videos for this level</div>');
				//hide arrows
				right_arrow.addClass("hidden_arrow");
			//else if there are less than 5 videos
			}  else if (data.results.length < 5){
				//hide arrows
				$.each(data.results,function(index,content){
					var large_image = (content.media[0].alt_large) ? content.media[0].alt_large : content.media[0].large;
					$("#"+div_id).append('<li class="thumbData"><a href="/us-en/base/reinventbrand?x=us-en_reinventbrand_'+content.content_id+'_'+cat_id+'"><img src="'+large_image+'"><div class="thumbOverlay">'+'<span class="overlayTitle">'+content.title+'</span></div></a></li>');
					right_arrow.addClass("hidden_arrow");
				});
			} else {
				//show thumbs
				$.each(data.results,function(index,content){
					var large_image = (content.media[0].alt_large) ? content.media[0].alt_large : content.media[0].large;
					$("#"+div_id).append('<li class="thumbData"><a href="/us-en/base/reinventbrand?x=us-en_reinventbrand_'+content.content_id+'_'+cat_id+'"><img src="'+large_image+'"><div class="thumbOverlay">'+'<span class="overlayTitle">'+content.title+'</span></div></a></li>');
				});
			};

		});
	},

//information that gets passed to getContentForTier
	loadCategory: function (cat_id) {

		if (cat_id == 47) {
			//hide tier2containers
			$('#tier2container, #tier3container, #tier4container').hide();
			$('#flag_nav .thumb_nav #title').css('color', 'transparent');
		} else {
			$('#tier2container, #tier3container, #tier4container').show();
			$('#flag_nav .thumb_nav #title').css('color', '#343434');
		}
		//remove any active classes from the rest of the cat links upon new click
		$('#category_nav li a').removeClass('active');
		//set an active class on the selected category link
		$('#cat_'+cat_id).addClass('active');

		//fetch data, passing in flag ids, the category id selected, and the div it is being put in
		TIERSTACK.getContentForTier(1, cat_id, 'tier1'); 
		TIERSTACK.getContentForTier(2, cat_id, 'tier2');
		TIERSTACK.getContentForTier(3, cat_id, 'tier3');
		TIERSTACK.getContentForTier(4, cat_id, 'tier4');
	}
}
//arrow scrolling functionality
$('#tier1right').click(function(e){ scrollRight('#tier1'); });
$('#tier2right').click(function(e){ scrollRight('#tier2'); });
$('#tier3right').click(function(e){ scrollRight('#tier3'); });
$('#tier4right').click(function(e){ scrollRight('#tier4'); });

//creating 'animating' variable in case animating is slower than user clicking
var animating = false;

function scrollRight(tierid) {
	//setting tt variable equal to what is being passed through (tier selected)
	var right_arrow = $(tierid).parent().find('.right_arrow');
	var left_arrow = $(tierid).parent().find('.left_arrow');
	var tt = $(tierid);
	var ttli = $(tierid+' li');
	//figuring out length of ttli
	var size = ttli.size();
	var w = tt.width();
	var left = parseInt(tt.css('left').split('px').join(''),10);
	//creating a 'stop' function when you're at the end of the available video thumbs
	if((-1 * left/220) < size-4 && animating == false) {
		animating = true;
		tt.animate({
		    left: "-=220"
		  }, 100, function() {
		    // Animation complete.
		    animating = false;
		  });
		left_arrow.removeClass("hidden_arrow");
		if ( (-1 * left/220) >= size-5) {
			right_arrow.addClass("hidden_arrow");
		}
		else {
			right_arrow.removeClass("hidden_arrow");
		}
	}
}

$('#tier1left').click(function(e){ scrollLeft('#tier1'); });
$('#tier2left').click(function(e){ scrollLeft('#tier2'); });
$('#tier3left').click(function(e){ scrollLeft('#tier3'); });
$('#tier4left').click(function(e){ scrollLeft('#tier4'); });
  
function scrollLeft(tierid) {
	var right_arrow = $(tierid).parent().find('.right_arrow');
	var left_arrow = $(tierid).parent().find('.left_arrow')
	var tt = $(tierid);
	//if #tierX css property == 0px, then do nothing
	if(tt.css('left') == '0px'){
		return;
	}
	var w = tt.width();
	var left = parseInt(tt.css('left').split('px').join(''),10);
	if (left < w-800 && animating == false) {
		animating = true;
		tt.animate ({
		    left: "+=220"
			}, 100, function() {
		    // Animation complete.
		    animating = false;
		  });
		right_arrow.removeClass("hidden_arrow");
		if ( left >= -220) {
			left_arrow.addClass("hidden_arrow");
		}
		else {
			left_arrow.removeClass("hidden_arrow");
		}
	}
}

index

<div id="tiernav-wrapper">
		<ul id="category_nav">
		</ul>	
		<ul id="flag_nav">
			<li class="thumb_nav" id="tier1container">
				<div id="title">Level 100 sessions</div>
				<ul id="tier1"></ul>
				<div id="tier1left" class="left_arrow"></div>
				<div id="tier1right" class="right_arrow"></div>
			</li>
			<li class="thumb_nav" id="tier2container">
				<div id="title">Level 200 sessions</div>
				<ul id="tier2"></ul>
				<div id="tier2left" class="left_arrow"></div>
				<div id="tier2right" class="right_arrow"></div>
			</li>
			<li class="thumb_nav" id="tier3container">
				<div id="title">Level 300 sessions</div>
				<ul id="tier3"></ul>
				<div id="tier3left" class="left_arrow"></div>
				<div id="tier3right" class="right_arrow"></div>
			</li>
			<li class="thumb_nav" id="tier4container">	
				<div id="title">Level 400 sessions</div>
				<ul id="tier4"></ul>
				<div id="tier4left" class="left_arrow"></div>
				<div id="tier4right" class="right_arrow"></div>
			</li>
		</ul>
	</div>