$(function(){
	initVideos();
});

function initVideos(){
	var holder = $('div.video-holder');
	if (!holder.length) return;
	holder.show();
	var channels = $('div.video-channels > div > .video-url',holder);
	var channelsName = $('div.video-channels > div > .name',holder);
	var video = $('<div class="video"></div>').appendTo(holder);
	var thumbsHolder = $('<div class="video-review"></div>').appendTo(holder);
	var thumbnails = $('');
	
	loadVideos();
	
	function loadVideos(){
		var active = 0;
		getData(channels.eq(active));
		
		function getData(){
			var chName = channelsName.eq(active).text();
			var url = channels.eq(active).text();
			var param = 'watch?v=';
			var index = url.indexOf(param);
			if (index != -1) {
				var videoId = url.substr(index+param.length);
				index = videoId.indexOf('&');
				if (index != -1) videoId = videoId.slice(0,index);
				
				$.ajax({
					url:'http://gdata.youtube.com/feeds/api/videos/'+videoId+'?v=2&alt=json-in-script',
					crossdomain:true,
					dataType:'jsonp',
					error:function(){
						alert('ajax error');
						loadNext();
					},
					success:function(data){
						addVideo(data,chName);
						loadNext();
					}
				});
			} else loadNext();
		}
		
		
		function loadNext(){
			active++;
			if (active < channels.length) getData();
		};
	}
	
	function addVideo(data,chName){
		var entry = data.entry;
		var mediaGroup = entry.media$group;
		var imageUrl = mediaGroup.media$thumbnail[0].url;
		var duration = mediaGroup.yt$duration.seconds;
			duration = Math.floor(duration/60) + ":" + duration % 60;
		var title = entry.title.$t;
		var chName = chName?chName:title;
		var id = entry.id.$t.substr(entry.id.$t.indexOf('video:')+6);
		var html = '<div class="box">'+
					'<a href="#">'+
						'<span class="video"><img src="'+imageUrl+'" alt="image description" /></span>'+
						'<span class="text">'+       
							'<strong>'+ chName +'</strong>'+
							'<em>'+ duration +'</em>'+
						'</span>'+
					'</a>'+
				'</div>';
		var thumbnail = $(html).appendTo(thumbsHolder);
			thumbnails = thumbnails.add(thumbnail);
			thumbnail.bind('click',function(){
				if (!thumbnail.hasClass('active')) {
					thumbnails.removeClass('active');
					thumbnail.addClass('active');
					play(id,true);
				}
				return false;
			});
		if (thumbnails.length == 1) {
			play(id,false);
			thumbnail.addClass('active');
		}
	}
	
	function play(id,autoplay){
		if (autoplay) {
			video.html('<iframe width="640" height="390" src="http://www.youtube.com/embed/'+id+'?autoplay=1" frameborder="0" allowfullscreen></iframe>')
		} else {
			video.html('<iframe width="640" height="390" src="http://www.youtube.com/embed/'+id+'" frameborder="0" allowfullscreen></iframe>')
		}
	}
}