//////////////////////////////////////////////////////////////////////////////////////////////////////
//
// Filmstrip.js
//
// Create a filmstrip thumbnail browser of a Maven playlist
//
// Requires: /tvarts/includes/prototype.js
// Requires: /tvarts/includes/scriptaculous/scriptaculous.js?load=effects,slider,builder
// Requires: /tvarts/includes/brwsniffer.js
// Requires: /tvarts/templates/js/template.js
// Requires: /tvarts/includes/Filmstrip/css/filmstrip.css
//
//
//////////////////////////////////////////////////////////////////////////////////////////////////////

var Filmstrip = Class.create({
	initialize : function(obj, options) {
		this.browser = getBrowser();
		this.obj = Element.extend(document.getElementById(obj));
		this.name = this.obj.id; //name set for testing scope and binding
		
		this.options = {
			//default settings; override when creating a new Filmstrip object
			width: 580,
			height: 120,
			thumbWidth: 90,
			thumbHeight: 68,
			thumbsPerSlide: 5, 		  // n, or {x, y}
			thumbBorder: '#000', 
			thumbBorderHover: '#fff',
			duration: 0.5,            //0-n seconds
			keyword: null,        	  //keyword search parameter
			target: null,            //div id, or url
			mavenSettings: null,     //{templateName, playerName, playerVersion}
			mode: 'horizontal',       //horizontal, vertical, grid
			source: null
		};
		
		this.settings = {
			baseTemplate : {
				horizontal : '<div class="fsNav"><img src="/tvarts/includes/Filmstrip/images/arrow_left.gif" class="fsArrow" /></div><div class="fsContainer"><div class="fsInner"></div><div class="fsOverlay"><div class="fsOverlayInner"></div></div></div><div class="fsNav"><img src="/tvarts/includes/Filmstrip/images/arrow_right.gif" class="fsArrow" /></div>',
				vertical   : '<div class="fsContainer"><div class="fsInner"></div><div class="fsOverlay"><div class="fsOverlayInner"></div></div></div><div class="fsNavVerticalContainer"><div class="fsNavVerticalContainerInner"><div class="fsNav"><img src="/tvarts/includes/Filmstrip/images/arrow_left.gif" class="fsArrow" /></div><div class="fsPagination">&nbsp;</div><div class="fsNav"><img src="/tvarts/includes/Filmstrip/images/arrow_right.gif" class="fsArrow" /></div></div></div>',
				grid       : '<div class="fsContainer"><div class="fsInner"></div><div class="fsOverlay"><div class="fsOverlayInner"></div></div></div><div class="fsNavVerticalContainer"><div class="fsNavVerticalContainerInner"><div class="fsNav"><img src="/tvarts/includes/Filmstrip/images/arrow_left.gif" class="fsArrow" /></div><div class="fsPagination">&nbsp;</div><div class="fsNav"><img src="/tvarts/includes/Filmstrip/images/arrow_right.gif" class="fsArrow" /></div></div></div>'
			},
			thumb : {
				padding : {}
			}
		}
		
		Object.extend(this.options, options || {});
		this.start();
	},
	
	start : function() {
		var buildFilmstrip = this.buildFilmstrip.bind(this);
		var _o = this.options;
		var _s = this.settings;
		this.obj.innerHTML = _s.baseTemplate[_o.mode];
		switch(_o.mode) {
			case 'horizontal' :
				$A(this.obj.getElementsByClassName('fsNav')).each(function(s) {s.addClassName('fsNavHorizontal');});
				$A(this.obj.getElementsByClassName('fsArrow')).each(function(s) {s.addClassName('fsArrowHorizontal');});
				_s.containerWidth = _o.width - (this.obj.getElementsByClassName('fsNav')[0].getWidth())*2;
				_s.thumb.spacing = _s.containerWidth/_o.thumbsPerSlide - _o.thumbWidth;
				this.obj.setStyle({width: _o.width + 'px', height: _o.height  + 'px'});
				this.obj.getElementsByClassName('fsContainer')[0].setStyle({width: _s.containerWidth + 'px', height: this.obj.getStyle('height')});	
				break;
			case 'vertical' :
				$A(this.obj.getElementsByClassName('fsNav')).each(function(s) {s.addClassName('fsNavVertical');});
				$A(this.obj.getElementsByClassName('fsArrow')).each(function(s) {s.addClassName('fsArrowVertical');});
				_s.containerWidth = _o.width;
				_s.thumb.spacing = _s.containerWidth - _o.thumbWidth;
				this.obj.getElementsByClassName('fsNavVerticalContainer')[0].setStyle({width: _o.width + 'px'});
				this.obj.setStyle({width: _o.width + 'px'});
				this.obj.getElementsByClassName('fsContainer')[0].setStyle({width: _s.containerWidth + 'px', height: _o.height});
				break;
			case 'grid' :
				$A(this.obj.getElementsByClassName('fsNav')).each(function(s) {s.addClassName('fsNavVertical');});
				$A(this.obj.getElementsByClassName('fsArrow')).each(function(s) {s.addClassName('fsArrowVertical');});
				_s.containerWidth = _o.width;
				_s.thumb.spacing = _s.containerWidth/_o.thumbsPerSlide.x - _o.thumbWidth;
				this.obj.getElementsByClassName('fsNavVerticalContainer')[0].setStyle({width: _o.width + 'px'});
				this.obj.setStyle({width: _o.width + 'px', height: _o.height + this.obj.getElementsByClassName('fsNavVerticalContainer')[0].getHeight()  + 'px'});
				this.obj.getElementsByClassName('fsContainer')[0].setStyle({width: _s.containerWidth + 'px', height: _o.height + 'px'});
				break;
		}
		
		fsOverlay = this.obj.getElementsByClassName('fsOverlay')[0];
		fsOverlay.setStyle({width:_o.thumbWidth+'px', height:_o.thumbHeight+'px', display:'none'});
		
		
		if(this.browser[0] == 'msie') {
			_s.thumb.padding.left = Math.floor(_s.thumb.spacing/2) - 1;
			_s.thumb.padding.right = Math.round(_s.thumb.spacing/2) - 1;
		}
		else {
			_s.thumb.padding.left = Math.floor(_s.thumb.spacing/2);
			_s.thumb.padding.right = Math.round(_s.thumb.spacing/2);
		}
		
		if(_o.source == null) {
			new Ajax.Request('/tvarts/includes/Filmstrip/getPlaylist.php', {				
				parameters: 'data='+escape('http://feeds.theplatform.com/ps/JSON/PortalService/1.0/getReleaseList?PID=6Zrum_sVvVFjfg2ZEZoC_J1VFToub0-T&query=UsagePlans|Open,CBC+Live+CBC+Arts+and+Entertainment&query=EncodingProfiles|flv&query=KeywordsSearch|'+_o.keyword+'&field=added&field=approved&field=airDate&field=assetType&field=assetTypeID&field=author&field=bitrate&field=categories&field=categoryIDs&field=content&field=contentCustomData&field=contentID&field=contentOwner&field=contentType&field=copyright&field=delivery&field=encodingProfile&field=encodingProfileID&field=expirationDate&field=format&field=ID&field=keywords&field=language&field=lastModified&field=length&field=transcript&field=owner&field=PID&field=requestCount&field=server&field=serverID&field=description&field=size&field=thumbnailURL&field=title&field=transcriptURL&field=trueFormat&field=unapproveDate&field=URL&contentCustomField=hasBeenDistributed&contentCustomField=mitvAudioOnly&contentCustomField=mitvLiveURL&contentCustomField=mitvRecallReason&contentCustomField=mitvRecallTime&contentCustomField=mitvVideoLink0&contentCustomField=mitvVideoLink1&contentCustomField=mitvVideoLink2&contentCustomField=publishGroup&startIndex=1&endIndex=100&sortField=title&sortDescending=true'),
				onSuccess: function(request) {
					buildFilmstrip(eval('('+request.responseText+')'));
				}
			});
		}
		else {
			buildFilmstrip(_o.source.data);
		}
	},
	
	buildFilmstrip : function(d) {
		var _o = this.options;
		var _s = this.settings;
		(this.browser[0] == 'msie') ? compensation = 2 : compensation = 0;
		if(_o.mode == 'horizontal') {
			this.innerWidth = (d.listInfo.itemCount*_o.thumbWidth) + (d.listInfo.itemCount*(_s.thumb.padding.left+_s.thumb.padding.right+compensation));
		}
		else if (_o.mode == 'vertical') {
			this.innerWidth = _o.width * Math.ceil(d.listInfo.itemCount/_o.thumbsPerSlide);
		}
		else if (_o.mode == 'grid') {
			this.innerWidth = _o.width * Math.ceil(d.listInfo.itemCount/(_o.thumbsPerSlide.x * _o.thumbsPerSlide.y));
		}
		
		this.slides = {};
		this.slides.current = 1;
		
		/*
		if(_o.mode == 'grid')
			(this.innerWidth < _s.containerWidth) ? this.slides.total = 1 : this.slides.total = Math.round(this.innerWidth / _s.containerWidth);
		else
			(this.innerWidth < _s.containerWidth) ? this.slides.total = 1 : this.slides.total = Math.ceil(d.listInfo.itemCount / _o.thumbsPerSlide);
		*/
		
		(_o.mode == 'grid') ? tps = (_o.thumbsPerSlide.x*_o.thumbsPerSlide.y) : tps = _o.thumbsPerSlide;
		(this.innerWidth < _s.containerWidth) ? this.slides.total = 1 : this.slides.total = Math.ceil(d.listInfo.itemCount / tps);
		
		if(_o.mode == 'horizontal') {
			this.slides.width = (_o.thumbWidth + _s.thumb.padding.left + _s.thumb.padding.right + compensation) * _o.thumbsPerSlide;
		}
		else if(_o.mode == 'vertical') {
			this.slides.width = _o.width;
			this.obj.getElementsByClassName('fsPagination')[0].innerHTML = this.slides.current + ' of ' + this.slides.total;
		}
		else if(_o.mode == 'grid') {
			this.slides.width = _o.width;
			this.obj.getElementsByClassName('fsPagination')[0].innerHTML = this.slides.current + ' of ' + this.slides.total;
		}
		//if(this.browser[0] == 'msie') {(_o.mode == 'grid') ? this.slides.width+=(2*_o.thumbsPerSlide.x) : this.slides.width+=(2*_o.thumbsPerSlide);}
		fsInner = this.obj.getElementsByClassName('fsInner')[0];
		fsInner.setStyle({width: this.innerWidth + 'px'});
	
		
		//insert thumbs that target a player on the same page
		for(i=0;i<d.listInfo.itemCount;i++) {
			var padding = '10px '+_s.thumb.padding.right+'px '+'0px '+_s.thumb.padding.left+'px';
			(_o.target.indexOf(".html") != -1 || _o.target.indexOf(".htm") != -1 || _o.target.indexOf(".php") != -1) ?	linkSelectors = {href: _o.target+'?clipId='+d.items[i].contentID} : linkSelectors = {href: '?clipId='+d.items[i].contentID, onclick: 'return false;'};
			
			thumb = Builder.node('div', {className: 'videoLink', style: 'width:'+_o.thumbWidth+'px; padding:'+padding+';'},[
					Builder.node('div', {className: 'videoThumb', style: 'width:'+_o.thumbWidth+'px; height:'+_o.thumbHeight+'px;'},[
						Builder.node('a', linkSelectors,[
							Builder.node('img', {src: d.items[i].thumbnailURL, width: _o.thumbWidth, height: _o.thumbHeight, style: 'border: 1px solid '+_o.thumbBorder})
						])
					]),
					Builder.node('div',{className: 'videoDesc', style: 'width:'+_o.thumbWidth+'px'},[
						Builder.node('strong',d.items[i].title)
					])
				]);
			
			Event.observe(thumb, 'mouseover', ((function(thumb,description) {return function(){
													Element.extend(thumb);
													Element.extend(thumb.getElementsByTagName('img')[0]);
													thumb.getElementsByTagName('img')[0].setStyle({border: '1px solid '+_o.thumbBorderHover});
													//thumb.getElementsByClassName('videoDesc')[0].setStyle({color: _o.thumbBorderHover});
													//thumb.getElementsByClassName('videoThumb')[0].appendChild($('fsOverlay'));
													//$('fsOverlayInner').appendChild(document.createTextNode(description));
													//$('fsOverlay').setStyle({display: 'block', left: 1+'px', top: 1+'px'});
												};})(thumb,d.items[i].description)).bind(this));
			
			Event.observe(thumb, 'mouseout', ((function(thumb) {return function(){
													Element.extend(thumb);
													Element.extend(thumb.getElementsByTagName('img')[0]);
													Element.extend(document.body);
													thumb.getElementsByTagName('img')[0].setStyle({border: '1px solid '+_o.thumbBorder});
													//thumb.getElementsByClassName('videoDesc')[0].setStyle({color: document.body.getStyle('color')});
													//$('fsOverlayInner').innerHTML = '';
													//$('fsOverlay').setStyle({display: 'none'});
												};})(thumb)).bind(this));
			
			if (_o.target.indexOf(".html") == -1 && _o.target.indexOf(".htm") == -1 && _o.target.indexOf(".php") == -1) {
				Event.observe(thumb, 'mouseup', ((function(clipInfo) {return function(){
														if($('socialcomments')) {
															$('socialcomments').innerHTML = "&nbsp;";
															CBC.APP.PLUCK.Comments.getDataFromId('maven-'+clipInfo.contentID, {update_article:false});
															if(_o.source && $('socialcommentsNarrow')) {_o.source.updateCatalogViewComments();}	
														}
														loadVideoPlayer(_o.mavenSettings.templateName, _o.mavenSettings.playerName, clipInfo.contentID, "#eeeeee", _o.mavenSettings.playerVersion, _o.target);
														swapAd();
														if($('clipTitle')) $$('#clipTitle h2')[0].innerHTML = clipInfo.title;
														if($('clipDescription')) $('clipDescription').innerHTML = clipInfo.description;
														if($('directLink')) $('directLink').value = "http://" + QueryString.fullurl() + "#clipId=" + clipInfo.contentID;
														document.location.hash = "clipId=" + clipInfo.contentID;
														
														//
														_o.source.clipId = clipInfo.contentID;
													};})(d.items[i])).bind(this));
			}
			
			if(_o.mode == 'vertical') {
				cnt = i%_o.thumbsPerSlide;
				if(cnt == 0) {fsColumn = Builder.node('div', {style: 'width:'+_o.width+'px; height:'+_o.height+'px; float: left;'}); Element.extend(fsColumn); fsInner.insert(fsColumn); fsColumn.insert(thumb);}
				else fsColumn.insert(thumb);
			}
			else if(_o.mode == 'grid') {
				cnt = i%(_o.thumbsPerSlide.x*_o.thumbsPerSlide.y);
				if(cnt == 0) {fsColumn = Builder.node('div', {style: 'width:'+_o.width+'px; height:'+_o.height+'px; float: left;'}); Element.extend(fsColumn); fsInner.insert(fsColumn); fsColumn.insert(thumb);}
				else {fsColumn.insert(thumb);}
			}
			else {fsInner.insert(thumb);}
		}
		
		Event.observe(this.obj.getElementsByClassName('fsArrow')[0],'mouseup', this.slideBack.bind(this));
		Event.observe(this.obj.getElementsByClassName('fsArrow')[1],'mouseup', this.slideForward.bind(this));
	},
	
	slideBack : function(e) {
		_o = this.options;
		if(this.slides.current > 1) {
			new Effect.Move(this.obj.getElementsByClassName('fsInner')[0],  {x:this.slides.width, y:0, mode: 'relative', duration: _o.duration, queue: {position:'end', scope: this.name}});
			--this.slides.current;
		}
		
		else {
			new Effect.Move(this.obj.getElementsByClassName('fsInner')[0],  {x:-this.slides.width*(this.slides.total-1), y:0, mode: 'relative', duration: _o.duration, queue: {position:'end', scope: this.name}});
			this.slides.current = this.slides.total;
		}
		if(_o.mode != 'horizontal') {this.obj.getElementsByClassName('fsPagination')[0].innerHTML = this.slides.current + ' of ' + this.slides.total;}
		
	},
	
	slideForward : function(e) {
		_o = this.options;
		if(this.slides.current < this.slides.total) {
			new Effect.Move(this.obj.getElementsByClassName('fsInner')[0],  {x:-this.slides.width, y:0, mode: 'relative', duration: _o.duration, queue: {position:'end', scope:  this.name}});
			++this.slides.current;
		}
		else {
			new Effect.Move(this.obj.getElementsByClassName('fsInner')[0],  {x:this.slides.width*(this.slides.total-1), y:0, mode: 'relative', duration: _o.duration, queue: {position:'end', scope: this.name}});
			this.slides.current = 1;
		}
		if(_o.mode != 'horizontal') {this.obj.getElementsByClassName('fsPagination')[0].innerHTML = this.slides.current + ' of ' + this.slides.total;}
	}
});