/*-------------------------------------------------------------------- 
 * Watch Videos
 # requires: tools.scrollable-1.0.5.min.js, jquery.history.min.js
 # @95: swfobject.remove + COVE videos? is there a remove for COVE?
--------------------------------------------------------------------*/

(function($){
	
	// Declare namespace if not already defined
	if(!$.TNP){
		$.TNP = {};
	}
	
	$.TNP.Videos = function(el){
		// To avoid scope issues, use 'base' instead of 'this'
		// to reference this class from internal events and functions.
		var base = this;
		
		// cache DOM lookups
		base.$container = $('#player-container');
		base.$target = base.$container.find('.player-container-target');
		base.$thumbs = $('#clips,#deleted,#stories');
		base.scrollers = {};
		
		// Access to jQuery and DOM versions of element
		base.$el = $(el);
		//base.el = el; 
		
		// Add a reverse reference to the DOM object
		//base.$el.data("TNP.Videos", base);
		
		base.init_history = function(){
			
			/*-------------------------------------------------------------------- 
			* History
			* base.load_video is the function that goes and gets the content
			// This function is called when:
			// 1. after calling $.historyInit(); - if a hash is in the URL string (bookmark, etc)
			// 2. after calling $.historyLoad(); - clicks on the thumbs are passed to historyLoad
			// 3. after pushing "Go Back" button of a browser
			--------------------------------------------------------------------*/
			$.historyInit(base.load_video);
			
			base.$el.click(function(){
				var id = this.href.replace(/^.*#/, '');
				$.historyLoad(id);
				return false;
			});
			
			// default to first thumb if nothing specified
			// would probably be better to have the first vid hard-coded into the HTML
			if( !document.location.hash ) {
				$(base.$el.get(0)).trigger('click');
			}
			
		};
        
		//  scrollables + triggers
		base.init_scrollers = function() {
			base.$thumbs.prepend('<a class="left" href="#back"></a><a class="right" href="#next"></a>');
			// init scroller and create api reference
			base.scrollers.clips = $('#clips').scrollable({items: 'ul', clickable:false, size:6, api:true});
			base.scrollers.deleted = $('#deleted').scrollable({items: 'ul', clickable:false, size:6, api:true});
			base.scrollers.stories = $('#stories').scrollable({items: 'ul', clickable:false, size:6, api:true});
			
			$('.video-list').find('.left').click(function(){
				var scroller_id = $(this).parents('div.video-list').attr('id');					 
				base.scrollers[scroller_id].prevPage();
				return false;
			});
			$('.video-list').find('.right').click(function(){
				var scroller_id = $(this).parents('div.video-list').attr('id');	
				base.scrollers[scroller_id].nextPage();
				return false;
			});
		};

		/*-------------------------------------------------------------------- 
		 * Load Video
		 * Load the URL that contains the video into the target
		 * Then make sure that the thumb for this video is
		 * a) marked as selected;
		 * b) scrolled into view
		 * c) scroll window to top
		--------------------------------------------------------------------*/
		base.load_video = function(id){
			
			if (id === '') { return false; }

			var url = "/nationalparks/watch_video_detail/" + id + "/";
			
			// loading indicator
			base.$container.block(); 
			
			// unload the old video - better memory management
			// will this need to change for COVE videos?
			if ( $('#player-container').find('object').length ) {
				$('#player-container').find('object').each(function(){
					swfobject.removeSWF( $(this).attr('id') );
				});
			}

			// load up the new video
			base.$target.load(url,function(){	
				base.$container.unblock();
			});// #load
			
			// find trigger element by hash string 
			var $trigger = base.$thumbs.find('li>a[href$=' + id + ']');
			var $li = $trigger.parent();
			var $parent = $trigger.parents('div.video-list');
			var scroller_id = $parent.attr('id');
			
			// reset the selected thumb
			base.$thumbs.find('li.selected').removeClass('selected');
			$trigger.parent().addClass('selected');
					
			// if selected thumb isn't visible, scroll it into view		
			if (base.scrollers[scroller_id]) {
				var $visibleItems = base.scrollers[scroller_id].getVisibleItems();
				if ($visibleItems.hasClass('selected') === false) {
					// calculate where we need to scroll to
					var idx = $parent.find('li').index( $li );
					var size = base.scrollers[scroller_id].getSize();
					var ct = 6;
					if( idx > size - ct ) {
						base.scrollers[scroller_id].end();
					} else if ( idx < ct) {
						base.scrollers[scroller_id].begin();
					} else {
						base.scrollers[scroller_id].seekTo(idx);
					}// #if idx >
				}// #if visibleItems.hasClass
			}// #if scrollerObjects 
			window.scrollTo(0,0);
			return false;
		
		};
			
		// ready to go, initialize what needs to be
		base.init_scrollers();
		base.init_history();
		
	};

// unused!
//	$.fn.tnp_Videos = function(){
//		return this.each(function(){
//			(new $.TNP.Videos(this));
//		});
//	};

	
})(jQuery);

// auto-init!
$(function (){
	$.TNP.Videos('.video-list li>a'); 
});