Vimeo API Alloy Js World Impact

index.html

#set ($namespace = "p_p_id_" + $request.theme-display.portlet-display.id + "_")
#set ($list = $namespace + "video-list")


#set ($friendlyURL = $request.get('attributes').get('CURRENT_COMPLETE_URL'))

#set ($videoid = $httpUtil.getParameter($friendlyURL, 'v'))
#set($baseurl = $request.get('CURRENT_COMPLETE_URL'))
$videoid

<div id="$list">
	<h2>Most Recent Videos</h2>
	<div class="stats"></div>
	<div class="bio"></div>
	<div class="videos">Loading videos...</div>
</div>

<script type="text/javascript">
var test = '';


AUI().use('jsonp', 'jsonp-url', function(A) {
		// Change this to your username to load in your clips
		var vimeoUserName = 'worldimpact';
		
		// Tell Vimeo what function to call
		var userInfoCallback = 'userInfo';
		var videosCallback = 'showThumbs';
		
		// Set up the URLs
		var userInfoUrl = 'http://vimeo.com/api/v2/' + vimeoUserName + '/info.json';
		var videosUrl = 'http://vimeo.com/api/v2/' + vimeoUserName + '/videos.json';
		
		video = new A.JSONPRequest(videosUrl, showThumbs);
		function showThumbs(videos){
			var thumbs = A.one('#$list .videos');
			thumbs.html('');
			
			for (var i = 0; i < videos.length; i++) {
				var thumb = A.Node.create('<img>');
				thumb.attr('src', videos[i].thumbnail_medium);
				thumb.attr('alt', videos[i].title);
				thumb.attr('title', videos[i].title);
				
				var span = A.Node.create('<span>');
				
				var a = A.Node.create('<a>');
				a.attr('href', 'http://vimeo.com/' + videos[i].id);
				a.attr('alt', videos[i].title);
				a.attr('title', videos[i].title);
				
				thumb.appendTo(a);
				
				var li = A.Node.create('<li>');
				a.appendTo(thumbs);
				//li.appendTo(ul);
			}
		}
		video.send();
		test = video;
		
		userinfo = new A.JSONPRequest(userInfoUrl, userInfo);
		function userInfo(info){
			var stats = A.one('#$list .stats');
			var portrait = info.portrait_small;
			var img = A.Node.create('<img>');
			img.attr('id', 'portrait');
			img.attr('src', portrait);
			img.attr('alt', info.display_name);
			img.appendTo(stats);
			
			var	h2 = A.Node.create('<h2>');
			A.Node.create(info.display_name + "'s Videos").appendTo(h2);
			h2.appendTo(stats);
			A.one('#$list .bio').html(info.bio);
		}
		userinfo.send();
});


AUI().use('aui-image-viewer', 'aui-media-viewer-plugin', function(A) {
	var mediaViewer = new A.ImageViewer({
		caption: 'AlloyUI - MediaViewer mixed demo',
		delay: 1000,
		links: '#$list .videos a',
		infoTemplate: 'Video {current} of {total} <div id="social-share" style="float: right;"> Gmail</span>',
		plugins: [
			{	
				cfg: {
					providers: 'vimeo'
				},
				fn: A.MediaViewerPlugin
			}
		],
		preloadNeighborImages: true,
		on: {
			render: function(e) {
				//console.log(test);
			}
		}
	});
	mediaViewer.render();
});

</script>