var CycubeFilmList = Class.extend(FilmList, {

	ROW_SIZE: 6,
	ROWS: 3,

	initialize: function(id, sortedByName, sortType, sortDirection, filterType, filterValue) {
		FilmList.prototype.initialize.call(this, id, sortedByName, sortType, sortDirection, filterType, filterValue);
		//Set the menu item (in cycubeSortForm in file cycube-film-list.jsp) to the one 
		//that was selected the last time (or bokstavsordning if no cookie exits)
		alterselected(); 
		this.pages = 0;
		this.page = 0; //which page we are on
		//holds parameter(0 or 1) to set if we are in mode showAllMode 
		//(all posts are shown in the same page, parameter = 1) or not (parameter = 0).
		this.showAllMode = 0; 
		this.posters = new Hash();
		//Check if cookie showAllMode exits. If it does (it is not equal to null) set this.showAllMode from cookie
		if (!(Cycube.Cookie.read("showAllMode") == null)) {
			this.showAllMode =  parseInt(Cycube.Cookie.read("showAllMode"));
			
		}
		//Check if cookie page exits. If it does (it is not equal to null) set this.page from cookie
		if (!(Cycube.Cookie.read("page") == null)) {
			this.page = parseInt(Cycube.Cookie.read("page"));
			
		}
		//Create cookies
		Cycube.Cookie.create("showAllMode", this.showAllMode);
		Cycube.Cookie.create("page", this.page);
	},
	
	write: function(container) {
		$(container).update(this.toString());
		this.filter({ forceFilter: true, forceSort: true });
	},

	update: function() {
		
		//Create cookies
		Cycube.Cookie.create("showAllMode", this.showAllMode);
		Cycube.Cookie.create("page", this.page);
		
			
		//if showAllMode == 0 we will show pages	
		if(this.showAllMode == 0) {
	
		var tBody = $("cflTable").down();

		var numRows = tBody.rows.length;
		for (var i = 0; i < numRows; i++)
			tBody.deleteRow(0);

		var tr = null;

		var f = function(film, index) {
			var pageSize = this.ROWS * this.ROW_SIZE;
			if ((index < this.page * pageSize) || (index >= ((this.page + 1) * pageSize)))
				return;
			if (index % 6 == 0) {
				if (tr != null)
					tBody.appendChild(tr);
				tr = document.createElement("tr");
			}
			
			var td = $(document.createElement("td"));
			td.setAttribute("title", film.name);
			td.observe("click", film.select.bindAsEventListener(film));
			tr.appendChild(td);
			
			var poster = this.posters[film.id];
			if (!poster)
				poster = this.posters[film.id] = SF.Image.create(85, 121, "/sfmedia/external/mediafiles/bilder/filmer/"+ film.id +"/"+ film.id +"_85_121.jpg");
			
			var img = $(document.createElement("img"));
			img.src = poster.src;
			td.appendChild(img);
			
			

			var spanTitle = $(document.createElement("span"));
			spanTitle.setAttribute("class", "title");
			spanTitle.setAttribute("className", "title");
			spanTitle.appendChild(document.createTextNode(film.name));
			if(film.shortTimeLeft == "J") {
				spanTitle.innerHTML = film.name + "&nbsp;<img src='/bio/gfx/sv/sistachansen2.gif' onmouseover='Hover.showMarkup(\"lastChance" + film.id + index + "\", \"<h3>Kort tid kvar</h3>Den här filmen kommer inom kort att sluta visas på bio. Boka din biljett omgående för att inte missa den.\", event, 320);' style='display:inline;vertical-align:middle;width:9px;height:12px'/>";	
				spanTitle.appendChild(document.createTextNode(String.fromCharCode(160)));
			}
			td.appendChild(spanTitle);

			if (this.sortType != SortTypes.NAME) {
				var spanExtra = $(document.createElement("span"));
				spanExtra.setAttribute("class", "extra");
				spanExtra.setAttribute("className", "extra");
				if (this.sortType == SortTypes.LENGTH) {
					spanExtra.update(film.getFormattedLength());
				} else if (this.sortType == SortTypes.PREMIERE) {
					spanExtra.update(film.getFormattedPremiereDate());
				} else if (this.sortType == SortTypes.RATING) {
					spanExtra.update(film.ratingDescription);
				} else {
					spanExtra.update("");
				}
				td.appendChild(spanExtra);
			}
		};
		
		var filmArray = $A(this.films);
		/*var filmArrayAll = $A(this.filmsAll);
		
		// Add all films to the select box..
		var filmOptions = $("cycubeQuickSelect").options;
		filmOptions.length = 1;
		filmArrayAll.each(function(film) { filmOptions[filmOptions.length] = new Option(film.name, film.id); });*/

		// Display the films for the current page..
		filmArray.each(f.bind(this));
		if (tr != null)
			tBody.appendChild(tr);
		
		this.pages = Math.ceil(this.films.length / (this.ROW_SIZE * this.ROWS));

		$("cflNav")[this.pages > 1 ? "show" : "hide"](); //If there are more than one page, show navigation (arrows and numbers)
		$("cflNav2")[1 < 1 ? "show" : "hide"](); //Never show visa sidor if we are in page mode (we are already showing pages)
		$("cflNav3")[this.pages > 1 ? "show" : "hide"](); //Show navigation visa alla if we have more than one page

		if (this.pages == 1)
			return;
			
		var divPages = $("cflPages");
		divPages.update("");
		for (var i = 0; i < this.pages; i++) {
			var p = null;
			if (i == this.page) {
				p = $(document.createElement("span"));
			} else {
				p = $(document.createElement("a"));
				p.setAttribute("href", "javascript:FilmLists['"+ this.id +"'].gotoPage("+ i +");");
			}
			p.appendChild(document.createTextNode(i + 1));
			divPages.appendChild(p);
		}
		var width = $("cflPages").getDimensions().width + 100;
		$("cflNav").style.width = width +"px";

		SF.Button[this.page > 0 ? "enable" : "disable"]("cflPrevPage");
		SF.Button[this.page < this.pages - 1 ? "enable" : "disable"]("cflNextPage");
		}
		//if showAllMode != 0 we will show all posters on the same side
		else {
		
		var tBody = $("cflTable").down();

		var numRows = tBody.rows.length;
		for (var i = 0; i < numRows; i++)
			tBody.deleteRow(0);

		var tr = null;

		var f = function(film, index) {
			var pageSize = this.ROWS * this.ROW_SIZE;
			
			if (index % 6 == 0) {
				if (tr != null)
					tBody.appendChild(tr);
				tr = document.createElement("tr");
			}
			
			var td = $(document.createElement("td"));
			td.setAttribute("title", film.name);
			td.observe("click", film.select.bindAsEventListener(film));
			tr.appendChild(td);
			


			var poster = this.posters[film.id];
			if (!poster)
				poster = this.posters[film.id] = SF.Image.create(85, 121, "/sfmedia/external/mediafiles/bilder/filmer/"+ film.id +"/"+ film.id +"_85_121.jpg");
			
			var img = $(document.createElement("img"));
			img.src = poster.src;
			td.appendChild(img);

			var spanTitle = $(document.createElement("span"));
			spanTitle.setAttribute("class", "title");
			spanTitle.setAttribute("className", "title");
			spanTitle.appendChild(document.createTextNode(film.name));
			if(film.shortTimeLeft == "J") {
				spanTitle.innerHTML = film.name + "&nbsp;<img src='/bio/gfx/sv/sistachansen2.gif' onmouseover='Hover.showMarkup(\"lastChance" + film.id + index + "\", \"<h3>Kort tid kvar</h3>Den här filmen kommer inom kort att sluta visas på bio. Boka din biljett omgående för att inte missa den.\", event, 320);' style='display:inline;vertical-align:middle;width:9px;height:12px'/>";	
				spanTitle.appendChild(document.createTextNode(String.fromCharCode(160)));
			}
			td.appendChild(spanTitle);

			if (this.sortType != SortTypes.NAME) {
				var spanExtra = $(document.createElement("span"));
				spanExtra.setAttribute("class", "extra");
				spanExtra.setAttribute("className", "extra");
				if (this.sortType == SortTypes.LENGTH) {
					spanExtra.update(film.getFormattedLength());
				} else if (this.sortType == SortTypes.PREMIERE) {
					spanExtra.update(film.getFormattedPremiereDate());
				} else if (this.sortType == SortTypes.RATING) {
					spanExtra.update(film.ratingDescription);
				} else {
					spanExtra.update("");
				}
				td.appendChild(spanExtra);
			}
		};
		
		var filmArray = $A(this.films);
		/*var filmArrayAll = $A(this.filmsAll);
		
		// Add all films to the select box..
		var filmOptions = $("cycubeQuickSelect").options;
		filmOptions.length = 1;
		filmArrayAll.each(function(film) { filmOptions[filmOptions.length] = new Option(film.name, film.id); });*/

		// Display the films for the current page..
		filmArray.each(f.bind(this));
		if (tr != null)
			tBody.appendChild(tr);
			
		this.pages = Math.ceil(this.films.length / (this.ROW_SIZE * this.ROWS));

		$("cflNav")[1 > 1 ? "show" : "hide"](); //Never show the page information when we are in showAllMode
		$("cflNav2")[this.pages > 1 ? "show" : "hide"](); //If there are more than one page show link visa sidor
		$("cflNav3")[1 > 1 ? "show" : "hide"](); // Never show link visa alla when we are in showAllMode 
		}
	},	

	getSelectURL: function() {
		return "/filmer/film/";
//		return "/filmer/film?filmid=";
	},	
	prevPage: function() {
		if (this.page <= 0)
			return;
		this.page--;
		this.update();
	},
	
	nextPage: function() {
		if (this.page >= this.pages - 1)
			return;
		this.page++;
		this.update();
	},
	
	gotoPage: function(page) {
		if (page < 0 && page >= this.pages)
			return;
		this.page = page;
		this.update();
	},
	//Now we are in show all mode and showAllMode is set to 1
	showAllPage: function() {
		this.page = this.pages + 1;
		this.showAllMode = 1;
		this.update();
	},
	//Now we are in show pages mode and showAllMode is set to 0
	showPages: function() {
		this.page = 0;
		this.showAllMode = 0;
		this.update();
	}
	
});

CycubeFilmList.prototype.toString = function() {
	var html = '';
	
	html += '<table cellspacing="10" id="cflTable">\n';
	html += '    <tbody></tbody>\n';
	html += '</table>\n';
	
	html += '<div id="cflNav" style="display:none">\n';
	html += '    <a id="cflPrevPage" href="javascript:FilmLists[\''+ this.id +'\'].prevPage();"><img src="/sf/gfx/button-arrow-gold-left.gif" /></a>\n';
	html += '    <div id="cflPages"></div>\n';
	html += '    <a id="cflNextPage" href="javascript:FilmLists[\''+ this.id +'\'].nextPage();"><img src="/sf/gfx/button-arrow-gold-right.gif" /></a>\n';
	html += '</div>\n';
	
	html += '<div id="cflNav2" style="display:none" align="right">\n';
	html += '    <a class="icon arrow light" id="cflShowPages" href="#TOP" onclick="javascript:FilmLists[\''+ this.id +'\'].showPages();">Tillbaka till sidvisning</a>\n';
	html += '</div>\n';
	
	html += '<div id="cflNav3" style="display:none" align="right">\n';
	html += '    <a class="icon arrow light" id="cflShowAll" href="javascript:FilmLists[\''+ this.id +'\'].showAllPage();">Visa alla</a>\n';
	html += '</div>\n';
	
	return html;
}