function onTemplateLoaded(id) {
	if(id == "UniversalVideoPage"){ BC.init(id); }
}
var BC = {
	init: function(id){
		BC.main = brightcove.getExperience(id);		
		BC.content = BC.main.getModule(APIModules.CONTENT);
		BC.content.addEventListener(BCContentEvent.VIDEO_LOAD, BC.onVideoLoad);		
		BC.player = BC.main.getModule(APIModules.VIDEO_PLAYER);		
		BC.exp = BC.main.getModule(APIModules.EXPERIENCE);
		BC.exp.addEventListener(BCExperienceEvent.CONTENT_LOAD, BC.onContentLoad);
	},
	onContentLoad: function(e){
		//var list4 = new VideoList({ tags: "live", heading: "Live" }).inject($("div.brightcove"), "after");
		var list3 = new VideoList({ tags: "goodies", heading: "Godis" }).inject($("div.brightcove"), "after");
		var list2 = new VideoList({ tags: "acoustic", heading: "Akustiskt" }).inject($("div.brightcove"), "after");
		var list1 = new VideoList({ tags: "official+video", heading: "Musikvideor" }).inject($("div.brightcove"), "after");
	},
	onVideoLoad: function(e){
		BC.player.loadVideo(e.video.id);
	}
}
var VideoList = function(options){
	this.options = options;
	this.init();
}
VideoList.prototype = {
	defaultOptions: {
		tags: "goodies",
		heading: "Goodies",
		paging: true,
		itemsperpage: 5
	},
	option: function(param){
		return this.options[param] ? this.options[param] : this.defaultOptions[param];
	},
	init: function(){
		this.wrapper = $("<div class=\"videos module\" />");
		this.heading = $("<h2>" + this.option("heading") + "</h2>").appendTo(this.wrapper);
		this.list = $("<ul class=\"videos clearfix\" />").appendTo(this.wrapper);
		var bind = this;
		$.getJSON("http://api.brightcove.com/services/library?command=find_videos_by_tags&sort_by=publish_date&sort_order=DESC&or_tags=" + this.option("tags") + "&token=3z06c7vamqJuNN4LwpbFYSAGaZTimnlXYl8sm3ftWq-vK-9A_eWo3A..&callback=?", function(data){ bind.complete(data) });
	},
	complete: function(data){
		this.items = $(data.items);
		this.populate(0, this.option("itemsperpage"));
		if(this.option("paging")){ this.paging(); }
	},
	populate: function(start, end){
		var bind = this;
		this.list.fadeOut(500, function(){
			var fn = function(){
				this.list.empty();
				this.items.loop(function(video, i){
					if(i < end && i >= start){
						this.list.append(
							$("<li videoId=\"" + video.id + "\" />").click(this.play).append(
								$("<a href=\"#play" + video.id + "\" title=\"Se videon\" />").click(this.click).append($("<span class=\"bc-fix\"><img src=\"" + video.thumbnailURL + "\" alt=\"\" /></span>")),
								$("<h3 />").append($("<a href=\"#play" + video.id + "\">" + video.name + "</a>").click(this.click))
							)
						);
					}
				}, this);
			};
			fn.call(bind);
		}).fadeIn(500);
	},
	paging: function(){
		var pages = Math.ceil(this.items.length / this.option("itemsperpage"));
		var list = $("<ul class=\"paging\" />")
		var footer = $("<div class=\"footer clearfix\" />").append(list);
		$(pages).times(function(i){
			var page = i + 1;
			list.append($("<li />").append( $("<a title=\"Gå till sida " + page + "\" href=\"#page"+ page + "\">" + page + "</a>").addEvent("click", this.page, this) ) );
		}, this);
		this.list.after(footer);
		
	},
	page: function(e){
		e.preventDefault();
		var page = e.target.innerHTML;
		var itemsperpage = this.option("itemsperpage");
		var end = page * itemsperpage;
		var start = end - itemsperpage;
		this.populate(start, end);
	},
	inject: function(el, where){
		switch(where){
			case "after":
				el.after(this.wrapper);
				break;
			case "before":
				el.before(this.wrapper);
				break;
			case "top":
				this.wrapper.prependTo(el);
				break;
			default:
				this.wrapper.appendTo(el);
				break;
			
		}
		sIFR.customReplace(this.heading);
	},
	play: function(e){
		document.location.hash = "UniversalVideoPage";
		BC.content.getMediaAsynch($(this).attr("videoId"));
	},
	click: function(e){
		e.preventDefault();
	}
}