settings: cinemas picker

script/film.js

@@ -35,15 +35,23 @@ function Film()
 
 	this.poster = function(sPoster)
 	{
-		if(sPoster) //Set
-		{
-			var sExt = sPoster.substr(sPoster.lastIndexOf('.')+1).toLowerCase();
-			if(sExt=='jpg') sExt = 'jpeg';
-			var sPoster = this.consts.process_url+'?a=get_poster&type='+sExt+'&data[id]='+this.id()+'&data[url]='+encodeURIComponent(sPoster);
-		}
+		if(sPoster) sPoster = this.getPosterUrl(sPoster, 'small');
 		return this.attr('poster', sPoster);
 	};
 
+	this.backgroundPoster = function(sPoster)
+	{
+		if(sPoster) sPoster = this.getPosterUrl(sPoster, 'medium');
+		return this.attr('poster_bg', sPoster);
+	};
+	
+	this.getPosterUrl = function(sUrl, sSize)
+	{
+		var sExt = sUrl.substr(sUrl.lastIndexOf('.')+1).toLowerCase();
+		if(sExt=='jpg') sExt = 'jpeg';
+		return this.consts.process_url+'?a=get_poster&type='+sExt+'&data[id]='+this.id()+'&data[url]='+encodeURIComponent(sUrl)+'&data[size]='+sSize;
+	};
+
 	this.edito = function(sEdito)
 	{
 		return this.attr('edito', sEdito);
@@ -90,7 +98,7 @@ function Film()
 			this._anchor = $('<div>', {'class':'film', 'id':'film_'+this.getRank()})
 				.data('rank', this.getRank())
 				.data('id', this.id())
-				.append($('<img>', {'class':'bg', 'src':this.poster()}))
+				.append($('<img>', {'class':'bg', 'src':this.backgroundPoster()}))
 				.append($('<img>', {'class':'poster', 'src':this.poster()}))
 				.append($('<div>', {'class':'info'})
 					.append($('<p>', {'class':'title'})
@@ -142,7 +150,7 @@ function Film()
 				if(!test) console.log('cinema '+iCinemaId+' lang '+sLang+' film '+self.id());
 				$.each(self.timetable(iCinemaId, sLang).sort(self.timeCompare), function(iKey, oTime){
 					$Timetable
-						.append($('<a>', {'class':'time', 'href':oTime.booking, 'target':'_blank', 'title':'Book screening'}).text(oTime.time))
+						.append($('<a>', {'class':'button', 'href':oTime.booking, 'target':'_blank', 'title':'Book screening'}).text(oTime.time))
 						.append(' '); //for line break
 				});
 			}
@@ -173,6 +181,7 @@ function Affiche(oDate)
 	this.date.today = new Date(this.date.now.getFullYear(), this.date.now.getMonth(), this.date.now.getDate());
 	this.date.timestamp = this.date.today / 1;
 	
+	this._cinemasList = {};
 	this._films = {};
 	this._wip = 0;
 	this.consts = {	days:["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
@@ -182,6 +191,7 @@ function Affiche(oDate)
 	this.$Main = $('main');
 	this.$Footer = $('footer');
 	this.$Feedback = $('#feedback');
+	this.$Settings = $('#settings');
 	
 	this.wip = function(iProgress)
 	{
@@ -224,7 +234,6 @@ function Affiche(oDate)
 	
 	this.loadCinemas = function()
 	{
-		//Today timestamp
 		this.setHeader();
 		
 		$.each(asCinemas, function(iCinemaId, sCinemaName){
@@ -262,8 +271,10 @@ function Affiche(oDate)
 				oFilm.name($Film.find('.FilmTitle').text());
 				
 				//Poster
-				oFilm.poster($Film.find('.FilmThumbnail img').attr('src'));
-			
+				var sPosterUrl = $Film.find('.FilmThumbnail img').attr('src');
+				oFilm.poster(sPosterUrl);
+				oFilm.backgroundPoster(sPosterUrl.replace('152x217/FFFFFF', '274x410/EEEEE8'));
+				
 				//Trailer
 				oFilm.trailer($Film.find('.FilmIntroLink a').attr('href'));
 				
@@ -332,13 +343,90 @@ function Affiche(oDate)
 	
 	this.setHeader = function()
 	{
+		//Date on top
 		var iDay = this.date.today.getDate();
 		$('#date')
 			.attr('datetime', this.date.today.getFullYear()+'-'+(("0" + (this.date.today.getMonth() + 1)).slice(-2))+'-'+(("0" + iDay).slice(-2)))
 			.append(this.consts.days[this.date.today.getDay()]+', '+this.consts.months[this.date.today.getMonth()]+' '+iDay)
 			.append($('<sup>').text((iDay%10==1)?'st':((iDay%10==2)?'nd':((iDay%10==3)?'rd':'th'))));
+		
+		//Load Settings
+		this.setSettings();
 	}
 	
+	this.setSettings = function()
+	{
+		//Date
+		this.setDates();
+		
+		//Cinemas
+		this.cinemas();
+		
+		//Event
+		this.$Header.find('#btn_settings').click(function(){
+			self.$Settings.show();
+		});
+		this.$Main.click(function(){self.$Settings.hide();});
+		$(window).keyup(function(e){if(e.keyCode == 27) self.$Settings.hide();});
+		
+		//Validattion
+		this.$Settings.find('#ok_settings').click(function(){
+
+			//Cinemas
+			var asCines = {};
+			self.$Settings.find('.include').each(function(iKey, oCinema){
+				$Cine = $(oCinema);
+				asCines[$Cine.data('id')] = $Cine.text();
+			});
+			self.cinemas(asCines);
+			
+			//Day
+			
+			location.reload();
+		});
+	};
+	
+	this.setDates = function()
+	{
+		
+	};
+	
+	this.cinemas = function(asSetCinemas)
+	{
+		if(!asSetCinemas) //Set cookie/default cinemas and get list
+		{
+			var asCookieCinemas = Cookies.getJSON('cinemas');
+			if(!asCookieCinemas) asCinemas = {'10':'Les Halles', '12':'Bercy', '20':'La Défense'};
+			else asCinemas = asCookieCinemas;
+			
+			getUgcPage(	'headerReservationAction!reloadCinemasList.action', 
+						{'regionsAndCinemasBean.region':'', 'regionsAndCinemasBean.cinema':'', '_':Date.now()},
+						self.displaySettingsCinemas,
+						function(){self.error('Error: Could not load cinema list');},
+						'json');
+		}
+		else //Set new cinemas as cookie
+		{
+			Cookies.set('cinemas', asSetCinemas);
+			asCinemas = asSetCinemas;
+		}
+	};
+	
+	this.displaySettingsCinemas = function(jData)
+	{
+		this._cinemasList = jData.cinemas;
+		var $Cinemas = self.$Settings.find('.cinemas');
+		$.each(this._cinemasList, function(iKey, sCinemaName){
+			var iCinemaId = $.trim(iKey);
+			$Cinemas.append($('<li>', {'class':'cinema'})
+				.attr('id', '_'+iCinemaId)
+				.data('id', iCinemaId)
+				.toggleClass('include', (iCinemaId in asCinemas))
+				.click(function(){$(this).toggleClass('include')})
+				.text(sCinemaName));
+		});
+	};
+	
 	this.film = function(iFilmId, oFilm)
 	{
 		if(!iFilmId) return this._films;