Adding second theater filter

masks/index.html

@@ -27,6 +27,7 @@
 		<div class="title"><time id="date"></time></div>
 	</header>
 	<div id="buffer"><i class="fa fa-spinner fa-spin"></i></div>
+	<nav></nav>
 	<main></main>
 	<div id="feedback">
 		<h2><i class="fa inline fa-feedback"></i>Filtered films</h2>

script/ugc.js

@@ -150,7 +150,7 @@ function Film(oSettings)
 			else if(sLang=='VFSTF') self.feedback('Hiding hearing-impaired version ('+sLang+') of "'+self.name()+'" @'+sCinema)
 			else
 			{
-				var $CinemaBox = $('<div>');
+				var $CinemaBox = $('<div>', {'class':'cinema_timetable_'+iCinemaId});
 				$('<p>', {'class':'cinema_lang'})
 					.append($('<a>', {'class':'cinema', 'target':'_blank', 'href':self.consts.ugc_url+'cinemaAction!execute.action?page=7&id='+iCinemaId})
 						.append($('<i>', {'class':'fa fa-fw inline fa-cinema'}))
@@ -193,6 +193,7 @@ function Ugc()
 	this._wip = 0;
 
 	this.$Header = $('header');
+	this.$Nav = $('nav');
 	this.$Main = $('main');
 	this.$Footer = $('footer');
 	this.$Feedback = $('#feedback');
@@ -257,11 +258,26 @@ function Ugc()
 		buffer(false);
 	};
 	
+	this.addCineNav = function(iCinemaId)
+	{
+		var sCinema = self.settings.cinemas(iCinemaId);
+		var sFirstLetter = sCinema/*.replace(/^L(e|a|es)\s/g, '').charAt(0)*/;
+		this.$Nav.append($('<a>', {title:'Show / Hide '+sCinema+' screenings'})
+							.data('id', iCinemaId)
+							.click(function(){
+								var $This = $(this);
+								$('.cinema_timetable_'+$This.data('id')).toggle();
+								$This.toggleClass('hidden');
+							})
+							.text(sFirstLetter));
+	}
+	
 	this.addCinema = function(iCinemaId, hDom)
 	{
 		var $Page = $(hDom);
 		var $Films = $Page.find('.FilmDiv');
 		this.wip($Films.length);
+		this.addCineNav(iCinemaId);
 		$Films.each(function()
 		{
 			var $Film = $(this);
@@ -596,8 +612,9 @@ function getUgcPage(sPath, asData, fOnSuccess, fOnFail, sType)
 
 function buffer(bActive)
 {
-	if(bActive) $('main').add('header').fadeTo(0, 0);
-	else $('main').add($('.film').not('.banned')).add('header').fadeTo('slow', 1);
+	var $Block = $('main').add('header').add('nav');
+	if(bActive) $Block.fadeTo(0, 0);
+	else $Block.add($('.film').not('.banned')).fadeTo('slow', 1);
 	$('#buffer').toggle(bActive);
 	$('footer').add('#feedback').toggle(!bActive);
 }

style/_big_screen.scss

@@ -19,4 +19,28 @@
 		margin-right:0;
 		margin-left:0.5em;
 	}
+	
+	/* Nav */
+	
+	nav {
+		position: fixed;
+		left:1em;
+		margin-top: 1em;
+	
+		a {
+		    display: block;
+		    cursor: pointer;
+		    color: #08288B;
+		    padding:0 0.3em 0.3em 0;
+		    margin-bottom: 0.3em;
+		    
+		    &.hidden {
+		    	color:#666;
+		    }
+		    
+		    &.hidden:hover {
+			    color: #08288B;
+		    }
+		}
+	}
 }

style/_small_screen.scss

@@ -25,6 +25,12 @@
 		display:none;
 	}
 	
+	/* Nav */
+	
+	nav {
+		display:none;
+	}
+	
 	/* Main */
 	
 	main {