/**
 * bam.media.browseModule provides functionality for the video (topic) browse module 
 * displayed on video Landing and Playback pages.
 * 
 * @author Aleksandar Kolundzija
 * @version 2.0
 */
 
bam.media.browseModule = (function(){

	var _cfg = {
				baseUrl      : "/video/play.jsp",
				club         : "mlb",
                skinParam    : null,
				topicId      : "",
				maxClips     : 100,
				clipsPerPage : 20,
				debugMode    : false
			},
			_curPage    = 1,
			_totalPages = 1,
			_$pWrap; // pagination container


	var _self = {
		
		log: function(){},


		/**
		 * Configures browse module and adds event handlers. 
		 * Must be called on dom-ready.
		 * @param cfg {object} Hash containing topicId, searchQuery, etc.
		 */
		init: function(cfg){
			$.extend(_cfg, cfg);
			
			_$pWrap = $("#videoIndexPagination");
			
			// assign handler for CATEGORY expanding/collapsing
			$("#videoBrowseNav ul li.category a").live("click", function(e){
				if (e.button!==0){ // ignore right-click (firefox bug)
					return true;
				} 
				e.preventDefault();
				if ($(this).hasClass("selected")){ // ignore additional clicks on already selected topic
					return true;
				}				
				var $parent = $(this).parent(),
						$ul     = $parent.find("ul");
				$parent.siblings().removeClass("selected").find("a.selected").removeClass("selected");
				$parent.toggleClass("selected");
				// if players pseudo-topic was selected, load players (only once)
				if ($parent.hasClass("selected") && $(this).attr("rel")==="players"){
					if ($ul.children("li:not(.msg)").size()===0){
						_self.loadPlayers($ul); // load players (only the first time)
					}
				}
			});
			
			// assign handler for TOPIC content loading and display
			$("#videoBrowseNav ul li.topic a, #videoBrowseNav ul li.category ul li a").live("click", function(e){
				if (e.button!==0){   // ignore right-click (firefox bug)
					return true;
				} 
				e.preventDefault();				
				_self.selectTopic.apply(this, arguments);
//				if ($(this).hasClass("selected")){ // ignore other clicks on selected topic
//					return true;
//				}
//				var $this = $(this);
//				if ($this.parent("li.topic").length){
//					$("#videoBrowseNav .selected").removeClass("selected");
//				}
//				$this.addClass("selected");
//				var topicId     = $this.attr("rel"),
//						searchQuery = "";
//				if ($("ul#vppIndexBrowse").attr("topicId")===topicId){
//					return; // topic is already loaded. exiting
//				}
//				_self.loadContent({topicId:topicId, searchQuery:searchQuery, club:_cfg.club});
//				_self.trigger("topicSelected", [$this.text()]);
			});
			
		 	$("#videoIndexPagination button.num").live("click", function(){
				if ($(this).hasClass("current")) return;
				var p = $(this).attr("data-page");
				_self.showPage(p);
				_self.updatePagination();
				_self.trigger("pageNumberClick", [p]);
			});
			
			 $("#videoIndexPagination button.dir").live("click", function(){
				if ($(this).hasClass("disabled")) return;
				var isPrev    = $(this).hasClass("page-prev"),
						p         = isPrev ? _curPage-1 : _curPage+1
						direction = isPrev ? "Previous" : "Next";
				_self.showPage(p);
				_self.updatePagination();
				_self.trigger("pageDirectionClick", [direction, p]);
			});
			
			_self.trigger("init.success");
			_self.log("initialized");
		},
		
		
		/**
		 * Highlights clicked topic and loads its content.
		 */
		selectTopic: function(){
			_self.log("selectTopic");
			var $this = $(this),
				topicText = $this.text();
			if ($this.hasClass("selected")){ // ignore other clicks on selected topic
				return true;
			}
			_self.resetPagination();
			if ($this.parent("li.topic").length){
				$("#videoBrowseNav .selected").removeClass("selected");
			}
			$this
				.addClass("selected")
				.parent("li").addClass("selected")
				.parents("li.category").addClass("selected");
			var topicId     = $this.attr("rel"),
					searchQuery = "";
			if ($("ul#vppIndexBrowse").attr("topicId")===topicId){
				return; // topic is already loaded. exiting
			}
			_self.loadContent({topicId:topicId, searchQuery:searchQuery, club:_cfg.club});
			_self.trigger("topicSelected", [topicText]);			
		},
		
		
		/**
		 * Loads content from external data source and displays it in
		 * browse component by replacing currently loaded DOM elements
		 * with newly created ones.
		 * @param cfg {object} Config object
		 * @TODO the already-loaded check at the top is busted when topic==players
		 */
		loadContent: function(cfg){
			_self.log("loadContent");
			var $indexUl        = $("ul#vppIndexBrowse"),
					isPlayerTopic   = false,
					playerNameParam = "";
			$.extend(_cfg, cfg);
			// reset
			$("#videoIndexBrowseHead").text("");
//			$("#videoIndexBrowseWrap").css("background-image", "");
			_self.resetPagination();
			$indexUl.html("<li class='msg loading'>Loading...</li>");
			isPlayerTopic   = (_cfg.topicId.indexOf('player')!==-1);
			playerNameParam = _cfg.playerName ? "&playerName="+_cfg.playerName : "";
			bam.media.relatedContent.load({
				topicId          : (isPlayerTopic) ? "" : _cfg.topicId,
				searchQuery      : _cfg.searchQuery,
				ignoreContentIds : [],
				success          : function(index, topicConfig){
				
					var html          = "",
//							topicImg      = $.deep(topicConfig, "images.bottom") || "",
							topicHeadline = topicConfig.headline || 
															$("#videoBrowseNav li.selected #playerTopicSelector option:selected").text() ||
															$("#videoBrowseNav a.selected").text() || "",
							topicOrQuery  = "";
					$indexUl.attr("topicId", _cfg.topicId);
//					if (topicImg){
//						$("#videoIndexBrowseWrap").css("background-image", "url("+topicImg+")");
//					}
//					else {
//						$("#videoIndexBrowseHead").text(topicHeadline);
//					}
					if (!index || index.constructor!==Array || !index.length){
						$indexUl.html("<li class='msg'>We found no content for that selection.</li>");
						return;
					}							
					$.each(index, function(i, curItem){
						topicOrQuery = isPlayerTopic ? "&topic_id=players&query="+escape(_cfg.searchQuery) : "&topic_id="+_cfg.topicId;
						isCollapsed  = (i >= _cfg.clipsPerPage);
						html += ''+
							'<li data-index="'+i+'" ' + (isCollapsed ? 'class="collapsed"' : '' ) + '>'+
								'<a href="'+_cfg.baseUrl+'?content_id='+curItem.content_id+topicOrQuery+'&c_id='+_cfg.club+playerNameParam+ (_cfg.skinParam ? _cfg.skinParam : "") + '" rel="'+curItem.content_id+'">'+
									'<img src="'+(!isCollapsed?curItem.thumb:'/images/nothing.gif')+'"' + (!isCollapsed?'':' data-src="'+curItem.thumb+'" class="lazy"') + ' />' +
									'<div class="playBtn"></div>'+
									'<p>'+curItem.headline+'</p>'+
									'<div class="dateAdded">Added: '+curItem.date_added+'</div>'+
									'<div class="duration">Duration: '+curItem.duration+'</div>'+
								'</a>'+
							'</li>';
					});
					$indexUl.empty().append(html);
					_totalPages = Math.ceil(index.length/_cfg.clipsPerPage);
					_self.renderPagination();
					_self.trigger("loadContent.success");
				},
				error : function(){
					$indexUl.html("<li class='msg'>Unable to load video content at the moment. Please try again later.</li>");
				}
			});
		},
		
		
		/**
		 * Builds and displays pagination for current data set.
		 */
		renderPagination: function(){
			var html = "";
			if (_totalPages > 1){
				html += "<button class='dir disabled page-prev'>&laquo; prev</button>";
				for (var p=1; p<=_totalPages; p++){
					html += "<button data-page='"+p+"' class='num " + ((p===1)?"current":"") + "'>"+p+"</button>";
				}
				html += "<button class='dir page-next'>next &raquo;</button>";
				_$pWrap.append(html);
			}
		},
		
		
		/**
		 * Updates dispay of pagination.
		 */
		updatePagination: function(){
			_self.log("update pagination: " + _curPage);
			var $dirButtons = _$pWrap.find("button.dir"),
					$numButtons = _$pWrap.find("button.num");
			// update prev/next buttons					
			$dirButtons.addClass("disabled");
			if (_curPage > 1){
				$dirButtons.filter(".page-prev").removeClass("disabled");
			}
			if (_curPage < _totalPages){
				$dirButtons.filter(".page-next").removeClass("disabled");
			}
			// update number nav
			$numButtons
				.removeClass("current")
				.filter(":eq("+(_curPage-1)+")")
					.addClass("current");
		},
				
		
		/**
		 * Empties pagination
		 */
		resetPagination: function(){
			_curPage = _totalPages = 1;
			_$pWrap.empty();
		},
		
		
		/**
		 * Reveals the selected page (n) of clips
		 * @param n {Number} Selected page
		 * @TODO Add error detection/handling
		 */
		showPage: function(p){
			p = parseInt(p,10);
			if (p<0 || p>_totalPages){
				return;
			}
			$("ul#vppIndexBrowse")
				// hide current page
				.find("li:not(.collapsed)")
					.addClass("collapsed")
					.end()
				.find( (p>1) ? "li:gt(" + ((p-1)*_cfg.clipsPerPage-1) + ")" : "*")
				.filter("li:lt("+_cfg.clipsPerPage+")")
					.removeClass("collapsed")
					.find("img.lazy").each(function(){
						$(this)
							.attr("src", $(this).attr("data-src"))
							.removeClass("lazy");
					});
			_curPage = p;
		},
		
		
		/**
		 * Loads roster from service and renders players dropdown with 
		 * change handler assigned.
		 * @param $ul {jquery} jQuery object representing player UL container
		 */
		loadPlayers: function($ul){
			_self.log("loadPlayers");
			$.ajax({
				url      : "/lookup/json/named.roster_active_mlb.bam?status='A'&status='D15'&file_code='"+_cfg.club+"'",
				dataType : "json",
				success  : function(playerData){
					_self.log("loadPlayers: got data. rendering dropdown");
					var playersHtml = "<select id='playerTopicSelector'>";
					playersHtml    += "<option value=''>Select a Player</option>";
					$.each(playerData.roster_active_mlb.queryResults.row, function(i, curPlayer){
						playersHtml += "<option value='"+curPlayer.player_id+"'>" + curPlayer.name_display_first_last + "</option>";					
					});
					playersHtml += "</select>";
					$ul.empty().append("<li>"+playersHtml+"</li>");
					// assign handler for player selector
					$("#playerTopicSelector").change(function(){ 
						_self.log("player selector value changed. loading player content...");
						var $this           = $(this),
								$selectedOption = $this.find("option:selected");
						if ($selectedOption.hasClass("playing")){
							$("#playerTopicSelector").val($this.attr("value"));
						}
						else {
							_self.loadPlayerContent($this.val(), $selectedOption.text());
						}
					});
					_self.trigger("loadPlayers.success");					
				},
				error : function(){				
					$ul.empty().append("<li class='msg'>Unable to load players. Try again.</li>");
				}
			});
		},
		
		
		/**
		 * Loads player video content
		 * @param playerId {String}
		 */
		loadPlayerContent: function(playerId, playerName){
			_self.log("loadPlayerContent: " + playerId);
			if (playerId==="" || $("ul#vppIndexBrowse").attr("topicId")==="player"+playerId){
				_self.log("loadPlayerContent: already loaded, exiting");
				return; // already loaded or no player selected
			}
			var searchQuery = "type=json&player_id="+playerId+"&start=0&src=vpp&sort=desc&sort_type=custom&hitsPerPage=60";
			_self.loadContent({topicId:"player"+playerId, searchQuery:searchQuery, club:_cfg.club, playerName:playerName});
			_self.trigger("loadPlayerContent.success");
		}
		
	};
	
	return $.bindable(_self);
	
})();

/**
 * Change search box text and behavior on video landing and playback pages
 */
$(function(){
	$("#query_text1").val("Search Video");
	$("#hdr_search").attr("action","/search/media.jsp");	
});