/**
 * bam.media.vpp.browse adds functionality for rendering/updating video clips
 * in the browsable content component.
 * 
 * @author Aleksandar Kolundzija
 * @version 1.1
 *
 * @TODO use $.bindable()
 * @TODO need a better way of only binding some events on VPP
 */
 
if (typeof bam.media.vpp === "undefined"){ bam.media.vpp = {}; } // for video landing page which doesn't require vpp logic
 
bam.media.vpp.browse = (function(){

	var _cfg = {
				baseUrl   : "/video/play.jsp",
				club      : "mlb",
				contentId : "",
				topicId   : "",
				debugMode : false
			},
			_isPlaybackPage = null,
			_$event         = $({}); // for custom events
			
	
	// private method for logging messages to console
	function _log(msg){
		if (typeof console!=="undefined" && _cfg.debugMode){ console.log("bam.media.vpp.browse: " + msg); }
	}	
	
	
	var _self = {
		
		// event support
		bind   : function(/* eventName, dataOrFn, fnOrUndefined */){ _$event.bind.apply(_$event, arguments); },
		unbind : function(/* eventName, fn */){ _$event.unbind.apply(_$event, arguments); },		
		one    : function(/* eventName, dataOrFn, fnOrUndefined */){ _$event.one.apply(_$event, arguments); },
		
		
		/**
		 * 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);
			_isPlaybackPage = !!$("#vpp").length;
			_$event.trigger("init:success");
		},
		
		
		/**
		 * 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){
			_log("loadContent");			
			$.extend(_cfg, cfg);
			var $indexUl      = $("ul#vppIndexBrowse"),
					isPlayerTopic = false;
			$("#videoIndexBrowseHead").text("");
			$("#videoIndexBrowseWrap").css("background-image", "");
			$indexUl.html("<li class='msg loading'>Loading...</li>");
			isPlayerTopic = (_cfg.topicId.indexOf('player')!==-1);
			bam.media.relatedContent.load({
				topicId          : (isPlayerTopic) ? "" : _cfg.topicId,
				searchQuery      : _cfg.searchQuery,
				ignoreContentIds : [_cfg.contentId || ""],					
				success          : function(index, topicConfig){
					var html          = "",
							topicImg      = bam.object.getDeepValue(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;
						html += ''+
							'<li index="'+i+'">'+
								'<a href="'+_cfg.baseUrl+'?content_id='+curItem.content_id+topicOrQuery+'&c_id='+_cfg.club+'" rel="'+curItem.content_id+'">'+
									'<img src="'+curItem.thumb+'"/>'+
									'<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);
					_$event.trigger("loadContent:success");
				},
				error : function(){
					$indexUl.html("<li class='msg'>Unable to load video content at the moment. Please try again later.</li>");
				}
			});
		},
		
		
		/**
		 * Loads roster from service and renders players dropdown with 
		 * change handler assigned.
		 * @param $ul {jquery} jQuery object representing player UL container
		 */
		loadPlayers: function($ul){
			_log("loadPlayers");
			$.ajax({
				url      : "/lookup/json/named.roster_active_mlb.bam?status='A'&status='D15'&file_code='"+_cfg.club+"'",
				dataType : "json",
				success  : function(playerData){
					_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(){ 
						_log("player selector value changed. loading player content...");
						if ($(this).find("option:selected").hasClass("playing")){
							$("#videoIndexBrowseWrap").hide();
							$("#videoIndexPlaylistWrap").show();
							$("#playerTopicSelector").val($(this).attr("value"));
						}
						else {
							_self.loadPlayerContent($(this).val());
						}
					});
					_$event.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){
			_log("loadPlayerContent: " + playerId);
			if (playerId==="" || $("ul#vppIndexBrowse").attr("topicId")==="player"+playerId){
				_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";			
			$("#videoIndexPlaylistWrap").hide();			
			$("#videoIndexBrowseWrap").show();		
			_self.loadContent({topicId:"player"+playerId, searchQuery:searchQuery, club:_cfg.club});
			_$event.trigger("loadPlayerContent:success");
		},
		
		
		/**
		 * Assigns handlers to DOM elements for "browsing"
		 */
		assignHandlers: function(){
			_log("assigning handlers");
			// assign handler for CATEGORY expanding/collapsing
			$("#videoBrowseNav ul li.category a").live("click", function(evt){
				if (evt.button!==0){
					return true; // ignore right-click (firefox bug)
				}
				evt.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)
					}
				}
				else {
//					// Reset only do this unless player topic is playing
//					if (!$("#playerTopicSelector option.playing").length){
//						$("#playerTopicSelector").val(""); // reset players dropdown
//					}
				}
			});
			
			// assign handler for TOPIC content loading and display
			$("#videoBrowseNav ul li.topic a, #videoBrowseNav ul li.category ul li a").live("click", function(evt){
				if (evt.button!==0){
					return true; // ignore right-click (firefox bug)
				}
				evt.preventDefault();
				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");
//					if ($("#videoPlaylistNav a.playing").attr("rel")!=="players"){
//						$("#playerTopicSelector").val(""); // reset players 
//					}
				}
				$this.addClass("selected");
				if ($this.hasClass("playing")){
					$("#videoIndexBrowseWrap").hide();			
					$("#videoIndexPlaylistWrap").show();			
				}
				else {
					$("#videoIndexPlaylistWrap").hide();			
					$("#videoIndexBrowseWrap").show();
					var topicId     = $this.attr("rel"),
							searchQuery = "";
					if ($("ul#vppIndexBrowse").attr("topicId")===topicId){
						return; // topic is already loaded. exiting
					}
					_self.loadContent({contentId:_cfg.contentId, topicId:topicId, searchQuery:searchQuery, club:_cfg.club});
				}
				// track click
				bam.tracking.track({
					async: {
						isDynamic    : true,
						compName     : "Video " + (_isPlaybackPage?"Playback":"Landing") + " Page Topic Panel", 
						compActivity : (_isPlaybackPage?"VPP":"VLP") + ": Topic Panel: " + $this.text(),
						actionGen    : true
					}
				});
			});
		}
	};
	
	
	//////////////////////// event bondage //////////////////////////

	// assign browse handlers
	_$event.bind("init:success", _self.assignHandlers);	

	// highlight current category topic (from URL) in browse nav
	// @TODO need better way of only binding this in VPP
	_$event.bind("init:success", function(){
		if (_isPlaybackPage){
			_log("checking if topic: " + _cfg.topicId + " should be set to playing");
			if (_cfg.topicId){ // if topic was passed, highlight it
				$("#videoBrowseNav ul")
					.find("li a[rel='"+_cfg.topicId+"']")
					.addClass("selected playing")
					.parents("li.category")
					.addClass("selected");
			}
			else { // if no topic id was passed (default is used)
				if (!_cfg.contentId){ // if no content id was passed, select first topic in nav
					$("#videoBrowseNav ul li:first a:first")
						.addClass("selected playing")
						.parents("li.category")
						.addClass("selected");
				}
				// otherwise "Now Playing" pseudo topic is displayed and pre-selected
			}
			// if topic has no bottom bg image, use topic name
			if ($("#videoIndexPlaylistWrap").attr("style")===""){
				$("#videoIndexPlaylistHead").text( $("#videoBrowseNav a.selected").text() );
			}
			// if topic is not in the browse nav, show its headline inject it atop the browse nav
			if ($("#videoIndexPlaylistHead").text()===""){
				if ($("#videoIndexPlaylistWrap").attr("style")===""){
					$("#videoIndexPlaylistHead").text( _cfg.topicName );
				}
				if (!$("#videoBrowseNav a[rel="+_cfg.topicId+"]").length){
					$("#videoBrowseNav > ul").prepend("<li class='topic selected'><a href='"+_cfg.baseUrl+"?topic_id="+_cfg.topicId+"' rel='"+_cfg.topicId+"'class='selected playing'>" + _cfg.topicName + "</a></li>");
				}
			}
		}
	});
	
	// special handler for loading page with request for PLAYER's content
	// @TODO need better way of only binding this in VPP	
	_$event.bind("init:success", function(){
		if (_isPlaybackPage){
			_log("checking if topic: " + _cfg.topicId + " is PLAYERS and handling that case");																				
			if (_cfg.topicId==="players"){
				// clear topic branding
				$("#videoIndexPlaylistHead").text("");
				$("#videoIndexPlaylistWrap").css("background-image", "");		
				_log("topic is 'players', so loading roster...");
				var $playersLink = $("#videoBrowseNav ul li.category a[rel='players']"),
						$playersUl   = $playersLink.parent().find("ul");
				_$event.bind("loadPlayers:success", function(){
					bam.loadSync("/shared/scripts/bam/packed/bam.url.js");
					var url      = bam.url.parseQueryParameters(),
							query    = bam.url.parseQueryParameters(url.query),
							playerId = query.player_id;
					$("#playerTopicSelector").val(playerId).find("option:selected").addClass("selected playing");
					$("#videoIndexPlaylistHead").text($("#playerTopicSelector option:selected").text());
				});
				_self.loadPlayers($playersUl);
				$playersLink.addClass("selected playing").parent().addClass("selected");				
			}
		}
	});
		
	return _self;
	
})();

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