// broadband.js
// For use with the Broadband Video application
// Created by Filemobile
//
// version 1.2
// last edited: March 9th 2010

// Resizes the playlist so it fills the right side column depending on its siblings
function resizePlaylist() {
	// set the variables
	var parent = $$('div.rightside')[0];
	var c = parent.childElements();
	var height = 0;
	var margins = 0;
	// for each sibling, add thier height and 10px for spacing
	for (i=0;i<c.length;i++) {
		if (c[i].getStyle('display') != 'none' && c[i].id != 'playlist') {
			height += c[i].getHeight();
			margins += 10;
		}
	}
	// create the final height of the playlist
	var finalHeight = 501-height-margins;
	// if the height is too small, make it a good size
	if (finalHeight < 60) {
		finalHeight = '60';
	}
	// set the playlist height
	$('scrollbar_playlist').setStyle({'height' : finalHeight+'px'});
}
// the flash videoplayer calls this function to find the next item to play
function getNextItem() {
	// only send an item if there is a playlist
	if (window.playlist) {
		// set the vars
		var playlist = window.playlist;
		var mid = window.mid;
		var p = playlist.position(mid);
		
		if ( typeof playlist [ p + 1 ] == "undefined" )
			return;
			
		var nextItem = playlist[p+1].toString();
		// remove the old now playing label and add it to the new playlist item
		if ($('nowplaying')) {
			$('nowplaying').remove();
			if (window.nowPlaying && $('playlist-'+window.nowPlaying)) {
				var t = $('playlist-'+window.nowPlaying).next(0).down(0).next(0).down(0).innerHTML;		
				var nowPlayingCode = '<span id="nowplaying">'+window.nowPlayingMessage+'</span> ';		
				t = nowPlayingCode+t;
				$('playlist-'+window.nowPlaying).next(0).down(0).next(0).down(0).innerHTML = t;
			}
		}
		// remove the old gallery now playing label and add it to the tiem
		if ($('nowplayingGallery')) {
			$('nowplayingGallery').remove();
			// add the now playing label to the gallery item if the gallery has that media item currently displaying
			if ($('gallery-'+nextItem)) {
				$('gallery-'+nextItem).down(0).next(0).down(0).innerHTML = '<span id="nowplayingGallery">'+window.nowPlayingMessage+' </span>'+$('gallery-'+nextItem).down(0).next(0).down(0).innerHTML;
			}
		}
		//
		var params = {
			"id" : nextItem
		}
		jsonRequest('media.getFileInfo', params,
			function(result)     { getFileInfoResult(result); recalcDesc(); },
			function(exception)  { getException(exception); }
		);
		//console.log("nextItem:"+nextItem);
		return nextItem;
	}
	// return nothing if there is nothing to be played
}

// converts the video length in seconds to timecode
function lengthToTime(x) {
	// set the vars, d is the duration, t is for time, m is for minutes, s is for seconds. easy eh?
	var d = x;
	var t = 0;
	var m = 0;
	var s = 0;
	// t is for time
	t = d/60;
	// if the video is longer then 60 minutes, add the hours
	if (t >= 60) {
		var h = parseInt(t/60);
		t = (t/60 - h) *60;
		var hOut = h+":";
	} else {
		var hOut = "";
	}
	// set the number of minutes
	m = t.toString();
	if (m != "" && parseInt(m) > 0) {
		m = m.substr(0,m.lastIndexOf("."));
	} else {
		m = "00";
	}
	// set the number of seconds
	s = t.toString();		
	s = s.substr(s.lastIndexOf("."),s.length);
	s = parseInt(s*60);
	// make the seconds and minutes into numbers
	s = parseFloat(s);
	m = parseFloat(m);
	// add a leading zero to minutes if the video is longer then an hour
	if (m < 10 && hOut) {
		m = "0"+m;
	}
	// add a leading zero to the seconds
	if (s < 10) {
		s = "0"+s;
	}
	// return the duration
	return hOut+m+":"+s;
}
// this is used by the video player to find what video to play. It listens for this function to be called on object or embed element;
// for example: document.getElementById('vp').newVideo(mid);
function newVideo(mid) {
	return mid;
}
// after requesting a video, this function places the all the video's info into the top left of the player
function getFileInfoResult(result) {
	// set the vars
	var mid = result.id;
	window.nowPlaying = mid;
	window.mid = mid;
	var title = result.title;
	// if the file is an image, it won't have a duration	
	if (result.filetype == "1") {
		var dur = ""
	} else {
		var dur = lengthToTime(result.length);
	}
	//
	if (result.channel_name) {
		var catTime = result.channel_name+" / "+dur;
	} else {
		var catTime = dur;
	}
	//
	var ugc = '';
	//
	if (result.metadata.ugc == 'true') {
		if (result.user_name.substr(0,8) != 'userless') {
			ugc = ' / uploaded by: '+result.user_name;
		} else {
			ugc = ' / uploaded by: '+result.user_firstname+' '+result.user_lastname;
		}
	}
	// these might be used later so we better make them easier to write
	var desc = result.message;
	var thumb = result.publicUrl;
	var vote = result.votecount;
	var baseurl = window.location.href.substr(0,window.location.href.lastIndexOf('#')-1);
	// place the results into their respective place
	$('videotitle').innerHTML = title;
	$('videocat').innerHTML = catTime + ugc;
	$('scrollbar_desc').innerHTML = desc;
	$('clipurl').value = window.location;
	// adds the video name to the title bar
	if(window.location.hash){
		var clip = ((window.location.hash).slice(1));
		clip = clip.substr(4,clip.length);
		var pipe = document.title.lastIndexOf("|");
		if (pipe>0) {
			document.title = document.title.substr(0,pipe)+"| "+title;	
		} else {
			document.title = document.title+" | "+title;
		}
	}
	//
	// send the mid to the video player
	try {
		document.getElementById('vp').newVideo(mid.toString())
	} catch (ex) {
		console.log('error');
		console.log(ex);
	}
	//
	if ($('nowplayingGallery')) {
		$('nowplayingGallery').remove();
	}
	//
	if ($('gallery-'+mid)) {
		$('gallery-'+mid).down(0).next(0).down(0).innerHTML = '<span id="nowplayingGallery">'+window.nowPlayingMessage+' </span>'+$('gallery-'+mid).down(0).next(0).down(0).innerHTML;
	}
	// set the various links and onclicks for the sharelizer
	//
	//$('s_facebook').href = 'http://www.facebook.com/share.php?u='+baseurl+'/view/'+mid+'&t='+title;
	$('s_facebook').observe('click',function(event){
		//console.log(window.location);
		//console.log(baseurl);
		Sharer.fbShare(mid,title,baseurl+'/view/'+mid);
		return false;
	});
	//
	$('s_digg').href = 'http://digg.com/submit?phase=2&url='+baseurl+'/view/'+mid+'&title='+title;
	$('s_facebook').observe('click',function(event){
		Sharer.click(this,'digg',mid); 
		return false;
	});
	//
	$('s_delicious').href = 'http://del.icio.us/post?url='+baseurl+'/view/'+mid+'&title='+title;
	$('s_delicious').observe('click',function(event){
		Sharer.click(this,'delicious',mid); 
		return false;
	});
	//
	$('s_twitter').href = 'http://twitter.com/?status=Watching: '+escape(title)+' - '+escape(window.location);
	$('s_twitter').observe('click',function(event){
		Sharer.click(this,'twitter',mid); 
		return false;
	});
	//
	document.getElementById('friendmid').value = mid;
}

// used by the video player to load the video in the hash tag
function getHash() {
	window.gotHash = true;	
	if(window.location.hash){
		var clip = ((window.location.hash).slice(1));
		clip = parseInt(clip.substr(4,clip.length));
		window.mid = clip;
		clip = clip.toString();
		return clip;
	} else {
		return null;
	}
}

document.observe('dom:loaded',function(){

function retryGetHash() {
	if(window.location.hash){
		var clip = ((window.location.hash).slice(1));
		clip = parseInt(clip.substr(4,clip.length));
		window.mid = clip;
		window.gotHash = true;
		clip = clip.toString();
		loadVideo(clip);
	}
}

retryGetHash();

// the onclick function for "add to playlist" icon
function setGallery() {
	$$('#gallery div.media').each(function(s) {
		var x = $(s).down(0).next(1).descendants();
		var y = x[x.length-1];
		y.observe('click',function(event){
			var mid = $(s).id.substr($(s).id.lastIndexOf("-")+1);
			var t = s.innerHTML;
			y.hide();
			addToPlaylist(t,mid);
		});
	});
}

// if there is hash tag in the URL when the user first visits the page (getting a link to a specific video) load that video

function loadVideo(mid) {
	if (window.nowPlaying == mid) {
		// the user is trying to play the video that's already playing
	} else {	
		window.nowPlaying = mid;
		getFileInfo(mid);		
		if ($('playlist-'+mid)) {
			createPlaylist();
		}
	}	
}

// used for the playlist cookie. om nom nom
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function eraseCookie(name) {
	createCookie(name,"",-1);
}
// requests media for the playlist
function getPlaylistMedia( id, uid, returnComments ) {
	var params = {
		"id" : id,
		"uid" : uid,
		"returnComments" : returnComments
	}
	
	jsonRequest('media.getFileInfo', params,
		function(result)     { getPlaylistMediaResult(result); },
		function(exception)  { getException(exception); }
	);
}
// used to create the display the playlist
function getPlaylistMediaResult(r) {	
	var out = "";
	out = '<div class="media clearfix" id="playlist-'+r.id+'">'+
				'<a href="#clip'+r.id+'" class="left"><img src="'+r.thumbUrl+'/13" alt="thumbnail" class="thumbimg"/><div class="thumbcorner"></div></a>'+
				'<div class="info clearfix">'+
					'<a href="#clip'+r.id+'" class="title">'+r.title+'</a>'+
					'<span class="category">'+r.channel_name+'</span>'+
					'<span class="duration">'+lengthToTime(r.length)+'</span>'+
				'</div>'+
				'<div class="action">'+
					'<span class="icon"></span>'+
				'</div>'+
			'</div>';	
	$('addbefore').insert( { before: out });
	createPlaylist(false);
	setPlaylist();
	//
	if($('gallery-'+r.id)) {
		$('gallery-'+r.id).down(0).next(1).down(0).hide();
	}
}

if (readCookie('playlist')) {	
	var pArray = readCookie('playlist').split(',');	
	for(i=0;i<pArray.length;i++) {
		getPlaylistMedia(pArray[i]);
	}
	window.playlist = pArray;
}

// the onclick function to load the video and all it's infomation
function getGalleryVideos() {
	$$('#scrollbar_content a').each(function(s) {
		$(s).observe('click',function(event){
			var vidid = $(s).href.substr($(s).href.lastIndexOf("#")+5);
			if ($('nowplaying')) {
				$('nowplaying').remove();
			}
			if ($('nowplayingGallery')) {
				$('nowplayingGallery').remove();
			}
			scroll(0,0);
			//
			loadVideo(vidid);
		}); 
	});
	scrollbar.recalculateLayout();
}

function fadeOutOverlay() {
	$('light').toggleClassName('toggle');
	// start return the video player to its original position
	new Effect.Move($('videoplayer').down(0), { x: 0, y: 0, duration:0.5, mode: 'absolute' });
	// end return video player to its original position
	new Effect.Fade ( $('dialog_overlay'), { duration: 0.5, from: 0.8, to: 0,
		'afterFinish': function () {
			$('dialog_overlay').remove();
		}
	});	
}

// used for theater mode to add the lightbox effect
function addOverlay() {
	if (!$('dialog_overlay')) {
		$('light').toggleClassName('toggle');
		//var h = document.body.getHeight();
		var h = document.body.clientHeight;
		// For some reason, the overlay doesn't always reach the bottom. Change this number so it does.
		var offset = 20;
		// create the overlay
		var overlay = document.createElement('div');
	    overlay.id = 'dialog_overlay';
	    //document.body.insert(overlay, document.body);
	    document.getElementsByTagName('body')[0].appendChild(overlay);
	    //
	    $('dialog_overlay').setStyle({ position: 'absolute', top: 0, left: 0, zIndex: 900, width: '100%', backgroundColor: '#000', display: 'block', height: h+offset+"px", opacity: '0' });
		$(overlay).fade({ duration: 0.5, from: 0, to: 0.9 });
		$(overlay).observe('click', function(event) { fadeOutOverlay() });
		// start move video player
		var v = $('videoplayer');
		var vW = $('videoplayer').getWidth();
		var vH = $('videoplayer').getHeight();
		if (typeof window.innerWidth != 'undefined') {
			var wH = window.innerHeight
		} else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
			var wH = document.documentElement.clientHeight
		} else {
			var wH = document.getElementsByTagName('body')[0].clientHeight
		}
		//
		var dW = (960-vW)/2;
		var dH = (wH-vH)/2-30-$('header').getHeight(); // We subtact 30 beacuse of the padding between the top of the page, the header and the wrapper
		new Effect.Move($('videoplayer').down(0), { x: dW, y: dH, duration:0.5, mode: 'absolute' });
		// end move video player
	} else {
		fadeOutOverlay();
	}
}	

// json call used by loadvideo() to get the video's info
function getFileInfo ( id, uid, returnComments ) {
	var params = {
		"id" : id,
		"uid" : uid,
		"returnComments" : returnComments
	}
	jsonRequest('media.getFileInfo', params,
		function(result)     { getFileInfoResult(result); recalcDesc(); },
		function(exception)  { getException(exception); }
	);
}
// used to find the position of a value in an array
Array.prototype.position = function (s) {
	var i = 0;
	while (i < this.length && this [i] != s) {i++};
	return i < this.length ? i : undefined;
}
// 
function getPlaylistFileResult(result,mid) {
	var newItem = '<div class="media" id="playlist-'+mid+'">'+result+'</div>';
	$('addbefore').insert( { before: newItem });	
	setPlaylist();
	createPlaylist();
}

// if an error has occered during the ajax calls, log it
function getException(exception) { console.log(exception); }

// adds click functions to media items in the playlist
function setPlaylist() {
	$$('#playlist div.media').each(function(s) {
		var x = $(s).down(0).next(1).descendants();
		var y = x[x.length-1];
		y.observe('click',function(event){
			var mid = $(s).id.substr($(s).id.lastIndexOf("-")+1);
			if ($('gallery-'+mid)) {
				var a = $('gallery-'+mid).down(0).next(1).descendants();
				var b = a[a.length-1];
				b.show();
				$('gallery-'+mid).down(0).next(1).show().fade({ duration: 0.5, from: 0, to: 1 });
			}
			this.hide();
			$(s).remove();
		 	createPlaylist();
		 	recalcP();
		 	recalcP();
		});
		$(s).down(0).observe('click',function(event){
			var clip = this.href;
			clip = clip.substr(clip.lastIndexOf("#")+5,clip.length);
			loadVideo(clip);
		});
		$(s).down(0).next(0).down(0).observe('click',function(event){
			var clip = this.href;
			clip = clip.substr(clip.lastIndexOf("#")+5,clip.length);
			loadVideo(clip);
		});
		
	});		
}

// copies the media items to the playlist
function createPlaylist(updatePlaylist) {
	var playlist = [];
	$$('#playlist div.media').each(function(s) {
		playlist = playlist.concat($(s).id.substr($(s).id.lastIndexOf("-")+1));
	});	
	
	window.playlist = playlist;

	if (playlist.length <= 0) {
		$('noplaylist').show();
	} else {
		$('noplaylist').hide();
	}
		
	if ($('nowplaying')) {
		$('nowplaying').remove();
	}	
			
	if (window.nowPlaying && $('playlist-'+window.nowPlaying)) {
		var t = $('playlist-'+window.nowPlaying).down(0).next(0).down(0).innerHTML;		
		var nowPlayingCode = '<span id="nowplaying">'+window.nowPlayingMessage+'</span> ';		
		t = nowPlayingCode+t;
		$('playlist-'+window.nowPlaying).down(0).next(0).down(0).innerHTML = t;
	}
	
	// if the item in the gallery is currently playing, we have to remove it's "nowplayingGallery" element
	// or it will double up "'+window.nowPlayingMessage+'" in the playlist.
	if($$('#playlist #nowplayingGallery')[0]) {
		//console.log($$('#playlist #nowplayingGallery')[0]);
		$$('#playlist #nowplayingGallery')[0].remove();
	}
	
	recalcP();

	if (!updatePlaylist) {
		createCookie('playlist',playlist,3);
	}

}

function addToPlaylist(s,mid) {
	getPlaylistFileResult(s,mid);
	//num = $('playlist').down(0).next(0).down(1).nextSiblings().length;
}

function showLoader(divid) {
	var out = '<img src="'+window.loadingPath+'" id="loading" alt="Loading..." />';
	$(divid).innerHTML = out;
}


// create all the scrollbars
var scrollbar = new Control.ScrollBar('scrollbar_content','scrollbar_track');
var scrollbarPlaylist = new Control.ScrollBar('scrollbar_playlist','scrollbar_track_playlist');
var scrollbarCategories = new Control.ScrollBar('scrollbar_categories','scrollbar_track_categories');
var scrollbarSeasons = new Control.ScrollBar('scrollbar_seasons','scrollbar_track_seasons');
var scrollbarEpisodes = new Control.ScrollBar('scrollbar_episodes','scrollbar_track_episodes');
var scrollbarDesc = new Control.ScrollBar('scrollbar_desc','scrollbar_track_desc');

// reset the size of the scrollbars
scrollbar.recalculateLayout();
scrollbarPlaylist.recalculateLayout();
scrollbarCategories.recalculateLayout();
scrollbarSeasons.recalculateLayout();
scrollbarEpisodes.recalculateLayout();
scrollbarDesc.recalculateLayout();

function recalcC() {
	scrollbarCategories.recalculateLayout();
	scrollbarCategories.recalculateLayout();
}

function recalcS() {
	scrollbarSeasons.recalculateLayout();
	scrollbarSeasons.recalculateLayout();
}

function recalcE() {
	scrollbarEpisodes.recalculateLayout();
	scrollbarEpisodes.recalculateLayout();
}

function recalcP() {
	scrollbarPlaylist.recalculateLayout();
	scrollbarPlaylist.recalculateLayout();
}

function recalcClips() {
	scrollbar.recalculateLayout();
	scrollbar.recalculateLayout();
}

function recalcCat() {
	scrollbarCategories.recalculateLayout();
	scrollbarCategories.recalculateLayout();
}

function recalcDesc() {
	scrollbarDesc.recalculateLayout();
	scrollbarDesc.recalculateLayout();
}



// make sure the content at the top of the box is being displayed.
scrollbar.scrollTo('top');
scrollbarPlaylist.scrollTo('top');
scrollbarCategories.scrollTo('top');
scrollbarSeasons.scrollTo('top');
scrollbarEpisodes.scrollTo('top');
scrollbarDesc.scrollTo('top');

$('clearplaylist').observe('click', function(event){
	var j = $('addbefore').previousSiblings().length;
	
	for (i=0;i<j;i++) {
		var mid = $('addbefore').previous(0).id.substr($('addbefore').previous(0).id.lastIndexOf("-")+1);
		$('addbefore').previous(0).remove();
		if ($('gallery-'+mid)) {
	 		$('gallery-'+mid).down(0).next(1).down(0).show();
	 	}
	}
	
	eraseCookie('playlist');
	
	createPlaylist();		
	scrollbarPlaylist.recalculateLayout();
	scrollbarPlaylist.recalculateLayout();		
});



// controls the classes reponsibe for changing the layout of the gallery and playlist
$('p-list').observe('click',function(event){
	$('p-detailed').className = "";
	$('p-tile').className = "";
	$('p-list').className = "active";
	//
	$('playlist_container').className = $('playlist_container').className.replace('detailed','list').replace('tile','list');
	//
	scrollbarPlaylist.recalculateLayout();
	scrollbarPlaylist.recalculateLayout();
	scrollbarPlaylist.scrollTo('top');
}); 

$('p-detailed').observe('click',function(event){ 
	$('p-list').className = "";
	$('p-tile').className = "";
	$('p-detailed').className = "active";
	//
	$('playlist_container').className = $('playlist_container').className.replace('list','detailed').replace('tile','detailed');
	//
	scrollbarPlaylist.recalculateLayout();
	scrollbarPlaylist.recalculateLayout();
	scrollbarPlaylist.scrollTo('top');
}); 

$('p-tile').observe('click',function(event){ 
	$('p-list').className = "";
	$('p-detailed').className = "";
	$('p-tile').className = "active";
	//
	$('playlist_container').className = $('playlist_container').className.replace('list','tile').replace('detailed','tile');
	//
	scrollbarPlaylist.recalculateLayout();
	scrollbarPlaylist.recalculateLayout();
	scrollbarPlaylist.scrollTo('top');
});

$('g-list').observe('click',function(event){
	scrollbar.scrollTo('top');
	$('g-detailed').removeClassName('active');
	$('g-tile').removeClassName('active');
	$('g-list').className = "active";
	//
	$('gallery_container').className = $('gallery_container').className.replace('detailed','list').replace('tile','list');
	//
	scrollbar.recalculateLayout();
	scrollbar.recalculateLayout();
	scrollbar.scrollTo('top');
}); 

$('g-detailed').observe('click',function(event){
	scrollbar.scrollTo('top');
	$('g-list').removeClassName('active');
	$('g-tile').removeClassName('active');
	$('g-detailed').className = "active";
	//
	$('gallery_container').className = $('gallery_container').className.replace('list','detailed').replace('tile','detailed');
	//
	scrollbar.recalculateLayout();
	scrollbar.recalculateLayout();
	scrollbar.scrollTo('top');
}); 

$('g-tile').observe('click',function(event){
	scrollbar.scrollTo('top');
	$('g-list').removeClassName('active');
	$('g-detailed').removeClassName('active');
	$('g-tile').className = "active";
	//
	$('gallery_container').className = $('gallery_container').className.replace('list','tile').replace('detailed','tile');
	//
	scrollbar.recalculateLayout();
	scrollbar.recalculateLayout();
	scrollbar.scrollTo('top');
});  

$('light').observe('click', function(event){
	addOverlay();
});	

getGalleryVideos();

createPlaylist();

recalcP();

setPlaylist();

setGallery();

function getChannelTreeResult(result) {
	// json the results
	var json = { "result" : result };
	// make the channel varialbe global so we can use it elsewhere
	window.channels = json;
	// start the output
	var out = "<ul>";
	// if the seasons and episodes columns exist, display them
	if ($('scrollbar_seasons') && $('scrollbar_episodes')) {
		$('scrollbar_seasons').innerHTML = "";
		$('scrollbar_episodes').innerHTML = "";
		recalcS();
		recalcE();
	}
	// find out what level each channel sits
	for (i=0;i<result.length;i++) {
		for (j=0;j<hideChannel.length;j++) {
			if (result[i].id === hideChannel[j]) {
				result.splice(i,1);
			}			
			for (k=0;k<result[i].children.length;k++) {	
				if (result[i].children[k].id === hideChannel[j]) {
					result[i].children.splice(k,1);
				}
				for (l=0;l<result[i].children[k].children.length;l++) {	
					if (result[i].children[k].children[l].id === hideChannel[j]) {
						result[i].children[k].children.splice(l,1);
					}
				}
			}
		}
	}
	// add most recent and mosst viewed sorting options to the top of the left menu
	out += '<li class="selected"><a id="c_recent">Most Recent</a></li>';
	out += '<li><a id="c_hits">Most Viewed</a></li>';
	//
	recalcClips();
	// add the list of channels to the output
	for (i=0;i<result.length;i++) {
		// send getSubChannel(); the position of this subchannel in the json
		out += '<li><a id="a_'+i+'">'+result[i].name+'</a></li>';
	}
	// finish the output
	out += "</ul>";
	// print the output
	$('scrollbar_categories').innerHTML = out;
	scrollbarCategories.recalculateLayout();
	// add the click functions
	$$('#scrollbar_categories a').each(function(s) {
		$(s).observe('click',function(event){
			// if its the most recent link, add the select class and get the sorted media 
			if (s.id == "c_recent") {
				$$('#scrollbar_categories li.selected').each(function(s) { $(s).removeClassName("selected"); });	 $('scrollbar_seasons').hide(); $('scrollbar_episodes').hide(); $('scrollbar_container').setStyle({width: '80%'}); recalcE(); recalcClips(); recalcCat();
				getChannelMedia(0,'Most Recent','recent','upload DESC');
			// if its the most viewed link, add the select class and get the sorted media
			} else if (s.id == "c_hits") {
				$$('#scrollbar_categories li.selected').each(function(s) { $(s).removeClassName("selected"); });	 $('scrollbar_seasons').hide(); $('scrollbar_episodes').hide(); $('scrollbar_container').setStyle({width: '80%'}); recalcE(); recalcClips(); recalcCat();
				getChannelMedia(0,'Most Viewed','hits','hits DESC');
			// get the subchannels
			} else {
				var i = $(s).id.substr($(s).id.lastIndexOf("_")+1);
				getSubChannel(i);
			}
		}); 
	});
	
	recalcCat();
}

function channelTree() {
	var params = { "vhost" : selectedVHost };
	jsonRequest('channels.getChannelTree', params,
		function(result)     { getChannelTreeResult(result); },
		function(exception)  { getException(exception); }
	);	
}

channelTree();

function getFilesResult(result,b) {
	// if we have media in this channel, display them
	if (result.data.length > 0) {
		// set the output
		var out = "";
		var dur = "";
		// loop for all the media items returned
		for(i=0;i<result.data.length;i++) {
			// set vars
			var r = result.data[i];			
			var showHideIcon = "";
			// if the media item is in the playlist, hide the "add to playlist" button
			if (window.playlist.join().indexOf(r.id)>=0) {
				showHideIcon = ' hide"';
			} else {
				showHideIcon = "";
			}
			// if the duration is 0.00, such as an image or text, do nothing, otherwise, format it using lengthToTime();					
			if (r.duration == "0.00") {
				dur = "";
			} else {
				dur = lengthToTime(r.length);
			}
			//
			var nowplaying = "";		
			if (r.id == window.nowPlaying) {
				nowplaying = '<span id="nowplayingGallery">'+window.nowPlayingMessage+' </span>';
			}
			//
			// set the output				
			out += '<div class="media clearfix" id="gallery-'+r.id+'">'+
				'<a href="#clip'+r.id+'" class="left"><img src="'+r.publicUrl+'/13" alt="thumbnail" class="thumbimg"/><div class="thumbcorner"></div></a>'+
				'<div class="info clearfix">'+
					'<a href="#clip'+r.id+'" class="title">'+nowplaying+r.title+'</a>'+
					'<span class="category">'+b+'</span>'+
					'<span class="duration">'+dur+'</span>'+
				'</div>'+
				'<div class="action'+showHideIcon+'">'+
					'<span class="icon"></span>'+
				'</div>'+
			'</div>';
						
		}
		// after all the media has been processed, output the result	
		$('scrollbar_content').innerHTML = out;
		// add the onclick function for the "add to playlist" button
		setGallery();
		// add the onclick function for to load the video into the player
		getGalleryVideos();
	// if there is no media directly in this channel, say so
	} else {
		$('scrollbar_content').innerHTML = window.noMediaMessage;  
	}
	recalcClips();
	
}

function getChannelMedia(channelid,channelname,elementid,sortby) {
	// set the vars
	if (!channelname || channelname === "") {
		channelname = " ";
	}
	if (!sortby || sortby === "") {
		sortby = "upload DESC";
	}
	// remove the selected highlight from the last column
	$$('#scrollbar_episodes li.selected').each(function(s) {
		$(s).removeClassName("selected");
	});	
	// add the selected highlight to the correct list item in the last column
	if ($("c_"+elementid)) {
		$("c_"+elementid).up(0).addClassName("selected");
	}
	// set the json parameters
	var params = {
		"vhost" :       selectedVHost,
		"filters" :     {"channel" : channelid, "includeChildren": 1, "moderationStatus": 1, "filetype": "2" },
		"start" :       0,
		"limit" :       100,
		"fields" :      ["id","title","publicUrl","thumbUrl","duration","length","channel"],
		"sort" :        sortby
	};
	// place the loading animation
	$('scrollbar_content').innerHTML = '<div class="loading"><img src="'+window.loadingPath+'" id="loading" alt="Loading..." /></div>';
	// get the media
	jsonRequest('media.getFiles', params,
		function(result)     { getFilesResult(result,channelname); },
		function(exception)  { getFilesException(exception); },
		true
	);
}

function getMost() {
	b = " ";
	// set the json parameters
	var params = {
		"vhost" :       selectedVHost,
		"filters" :     {"includeChildren": 1, "moderationStatus": 1, "filetype": "2" },
		"sort"  :       "upload DESC",
		"start" :       0,
		"limit" :       25,
		"fields" :      ["id","title","publicUrl","thumbUrl","duration","length"]
	};
	// place the loading animation
	$('scrollbar_content').innerHTML = '<div class="loading"><img src="'+window.loadingPath+'" id="loading" alt="Loading..." /></div>';
	// get the media
	jsonRequest('media.getFiles', params,
		function(result)     { getFilesResult(result,b); },
		function(exception)  { getFilesException(exception); },
		true
	);
}


function getSubChannel(a) {
	// set the vars
	var c = window.channels.result[a].children;
	var out = "";
	// clear the selected highlight from the list
	$$('#scrollbar_categories li.selected').each(function(s) {
		$(s).removeClassName("selected");
	});	
	// add the selected highlight to the currently selected channel list item
	$("a_"+a).up(0).addClassName("selected");
	// clear the seasons and episodes columns if they exist
	if ($('scrollbar_seasons') && $('scrollbar_episodes')) {
		$('scrollbar_episodes').innerHTML = "";
		$('scrollbar_content').innerHTML = "";
		recalcE();
		recalcClips();
	}
	//
	if ($('scrollbar_seasons') && $('scrollbar_episodes')) {
		$('scrollbar_seasons').hide();
		$('scrollbar_episodes').hide();
		$('scrollbar_container').setStyle({width: '80%'});
		recalcE();
		recalcClips();
	}
	// if there are no sub channels or there are no seasons and episodes colmuns, load the thumbsnails
	if (!c || c == "" || !$('scrollbar_seasons') && !$('scrollbar_episodes')) {
		getChannelMedia(window.channels.result[a].id,window.channels.result[a].name);
	// if there are sub channels, load the next column's list
	} else {
		if ($('scrollbar_seasons')) {
			$('scrollbar_seasons').show();
		}
		// start the output
		out = "<ul>";
		// add the list items to the output
		for (i=0;i<c.length;i++) {
			// send getLastChanne;(); the position of this subchannel and it's parent's position in the json
			out += '<li><a id="b_'+i+'" title="'+a+'">'+c[i].name+'</a></li>';
						
		}
		// end the output
		out += "</ul>";
		getChannelMedia(window.channels.result[a].id,window.channels.result[a].name);
		
			
		if ($('scrollbar_episodes')) {
			$('scrollbar_episodes').hide();
			$('scrollbar_container').setStyle({width: '60%'});
		}
			
	}
	
	// if the seasons column exists, print the output
	if ($('scrollbar_seasons')) {
		$('scrollbar_seasons').innerHTML = out;
		recalcS();
			//
		$$('#scrollbar_seasons a').each(function(s) {
			$(s).observe('click',function(event){
				var i = $(s).id.substr($(s).id.lastIndexOf("_")+1);
				getLastChannel($(s).title,i);
			}); 
		});	
	}
	
}

function getLastChannel(a,b) {
	// set the vars
	var c = window.channels.result[a].children[b].children;
	var out = "";
	// clear the selected highlight from the list
	$$('#scrollbar_seasons li.selected').each(function(s) {
		$(s).removeClassName("selected");
	});	

	if ($('scrollbar_episodes')) {
		$('scrollbar_episodes').hide();
		$('scrollbar_container').setStyle({width: '60%'});
	}

	// add the selected highlight to the currently selected channel list item
	$("b_"+b).up(0).addClassName("selected");
	// clear the media content column
	$('scrollbar_content').innerHTML = "";
	// if there are no subchannels, display the media
		//console.log(window.channels.result[a].children[b].id);
	//
	if (!c || c == "") {
		getChannelMedia(window.channels.result[a].children[b].id,window.channels.result[a].children[b].name,'');
	// if there are subchannels, display final list
	} else {
									
		if ($('scrollbar_episodes')) {
			$('scrollbar_episodes').show();
			$('scrollbar_container').setStyle({width: '40%'});
		}
		
		// start the output
		out = "<ul>";
		for (i=0;i<c.length;i++) {
			// send the function to display the media this channel id, the channel name and the list item id number
			out += '<li><a title="'+c[i].id+' | '+c[i].name+'" id="c_'+i+'">'+c[i].name+'</a></li>';
						
		}
		// close the list
		out += "</ul>";
		
		getChannelMedia(window.channels.result[a].children[b].id,window.channels.result[a].children[b].name,'');
		
	}
	// output it all
	$('scrollbar_episodes').innerHTML = out;
	// set the onclick
	$$('#scrollbar_episodes a').each(function(s) {
		$(s).observe('click',function(event){
			var i = $(s).id.substr($(s).id.lastIndexOf("_")+1);
			var id = $(s).title.substr(0,$(s).title.indexOf(" | "));
			var name = $(s).title.substr($(s).title.indexOf(" | ")+3);
			getChannelMedia(id,name,i);
		}); 
	});
}

// set the default gallery to only show the categories and media columns
$('scrollbar_seasons').hide();
$('scrollbar_episodes').hide();
$('scrollbar_container').setStyle({width: '80%'});

});

/* validating send to a friend */

AppInit.addEvent (
	function() {
		// grab the default colour for all the labels
	    $$( 'label' ).each ( function ( label ) {
	        label.defaultColor = label.getStyle ( 'color' );
	     });
	}
);

// handles validation on the 'Email to a friend' form
function handleValidation(element,message) {
	// get all the labels		
	var labels = element.form.getElementsByTagName('label');
	// find out which label is the one with incorrect field value	
	for(var i=0;i<labels.length;i++) {
		// if this is the correct label, make it red and grab its contents
		if (labels[i].htmlFor==element.id) {
			labels[i].style.color = '#cc0000';
			var lab = labels[i].innerHTML;
		// if this is not the label, make sure its the correct colour
		// if someone had a validation error, fixes it, then has another, this will revert the label to the correct colour
		} else if (labels[i].defaultColor) {
			labels[i].style.color = labels[i].defaultColor;
		// if this is not the label and a default colour wasn't found, use black.
		} else {
			labels[i].style.color = '#000';
		}
	}
	// set the message to have the label value in quotes before the error
	message = "'"+lab+"'"+message.substr(message.indexOf(" "));
	// output the error
	$$('div.validationmessage')[1].innerHTML = message;
}
// clear the label colour
function clearError(e) {
	// if you want to have the labels return to normal after the user selects form element that has a validation error on it
	// add onfocus="clearError(this)" or onchange="clearError(this)" to each of these elements.
	// this only works when the formtype is set to default or table
	//
	// find the label
	var d = e.up(0).previous(0).down(0);
	// is the label red?
	if (d.style.color == "#cc0000" || d.style.color == "rgb(204, 0, 0)") {
		// yeah it is? ok, make it black
		d.style.color = "#000";
	}
}
// ajaxing the send to a friend form
function ajaxform(x,y) {
	x = $(x).up(y);
	// set the vars
	var vars  = Form.serializeElements($(x).getElements());
	// send the from using ajax
	var url = '/action/tellafriend';
	//
	new Ajax.Request(url, {
		method: 'post',
		postBody: vars,
		onSuccess: function(transport) {
			// hide the form and show the message that the email was sent
			x.hide();
			x.next(0).show();
		}
	});
}