/*
 * Ytplayer - jQuery Plugin
 * Custom XML playlist and play youtube movies by clicking the thumbnail
 *
 * Version:		1.2 (2012/02/19)
 * Requires:	jQuery v1.4.2+
 * 				swfobject v2.2
 *
 */
(function($){

	//載入swfobject2.2
	if(typeof swfobject == 'undefined'){
		var script = document.createElement('script');
		script.type = "text/javascript";
        //script.src = "/lib/jquery/ytplayer/swfobject.js";
        script.src = "/js/swfobject.js";
        document.getElementsByTagName('head')[0].appendChild(script);
	}
	
	//外掛主題
	$.fn.ytplayer = function(settings){
		var defaults = {playlist:'channel.xml',width:480,height:385,random:true}; //youtube default 4:3 (480:360) 25px height is playerbar
		var settings = $.extend(defaults,settings);
		return this.each(function(){
			var container = this;
			$.get(settings.playlist,function(xml){
											 
				//產生影片清單(todo:可增加驗證網址格式是否正確)
				var movielist = [];
				$("movie",xml).each(function(i){
					var vid = $(this).attr('url').substr(31,11);
					movielist.push(vid);
				});
				
				//嵌入隨機影片			 
				var rand = settings.random?Math.floor(Math.random()*movielist.length):0;
				var vid = movielist[rand];
				var playerID = vid.replace(/[^a-z0-9]/ig,'');//取代特殊字元
				var thumbnail = "http://img.youtube.com/vi/"+vid+"/0.jpg";
				//var embed = '<embed id="ytplayer_'+playerID+'" src="http://www.youtube.com/v/'+vid+'?enablejsapi=1&amp;playerapiid='+playerID+'&amp;rel=0&amp;hl=zh_TW&amp;fs=1&amp;color1=0xffffff&amp;color2=0xffffff&amp;border=0&amp;autoplay=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" wmode="opaque" width="'+settings.width+'" height="'+settings.height+'" />'; 
				var embed = '<div id="ytplayer_'+playerID+'"></div>';
				$(container).html(embed).css({position:'relative',overflow:'hidden'});
				
				swfobject.embedSWF('http://www.youtube.com/v/'+vid+'?enablejsapi=1&amp;playerapiid='+playerID+'&amp;rel=0&amp;hl=zh_TW&amp;fs=1&amp;color1=0xffffff&amp;color2=0xffffff&amp;border=0&amp;autoplay=0','ytplayer_'+playerID,settings.width,settings.height,"9",false,{},{allowScriptAccess:"always",allowfullscreen:true,wmode:'opaque'},{});

				//產生相關結構
				var yt_player = $('#ytplayer_'+playerID)[0];
				var yt_relative = $('<div class="ytplayer-relative">').css({position:'absolute',top:0,left:0,width:settings.width,height:settings.height,background:'#000'}).appendTo(container);
				var yt_prev = $('<div class="ytplayer-prev"></div>').css({position:'absolute','z-index':99,left:0}).appendTo(yt_relative);
				var yt_next = $('<div class="ytplayer-next"></div>').css({position:'absolute','z-index':99,right:0}).appendTo(yt_relative);
				var yt_thumbs = $('<div class="ytplayer-thumbs">').css({position:'absolute'}).appendTo(yt_relative);
				var yt_btn = $('<div class="ytplayer-btn"></div>').css({position:'absolute','z-index':99}).appendTo(yt_thumbs);
				
				//按鈕位置改寫成動態定位
				yt_prev.css({top:(settings.height-yt_prev.height())/2});
				yt_next.css({top:(settings.height-yt_next.height())/2});
				yt_btn.css({top:(settings.height-yt_btn.height())/2,left:(settings.width-yt_btn.width())/2});
				
				//修正1.4.2無法顯示父層隱藏要素寬高
				yt_relative.hide();
				yt_btn.hide();
				
				var initialized = false;//定義初始化狀態，防止按鈕重覆綁定
				window['onYouTubePlayerReady'] = function(playerID){
					//if(window.console){console.log('ytplayer start', ytplayer, 'onStateChangeHandler_'+playerID);}
					ytplayer = document.getElementById('ytplayer_'+playerID);
					ytplayer.addEventListener('onStateChange','onStateChangeHandler');
					ytplayer.addEventListener('onError','onErrorHandler');
				}
				window['onStateChangeHandler'] = function(playerState){
					//if(window.console){console.log('ytplayer change', playerState);}
					if(playerState == 0 && movielist.length>=3){//影片播放完畢且總影片數需有三片以上才顯示相關清單
						$('img',yt_thumbs).remove();//清空相關影片清單
						for(i=0;i<movielist.length;i++){//產生相關影片清單
							if(movielist[i]!=vid){
								var thumbnail = "http://img.youtube.com/vi/"+movielist[i]+"/0.jpg";
								$('<img src="'+thumbnail+'" width="'+settings.width+'" height="'+settings.height+'" style="position:absolute;display:none;" />').appendTo(yt_thumbs);
							}
						}
						yt_relative.fadeIn();//顯示相關清單
						yt_btn.hide();
						$('img:first',yt_thumbs).show();//顯示第一張
						if(initialized == false){
							initialized = true;//防止按鈕重覆觸發

							yt_thumbs.hover(
								function(){
									yt_btn.stop(true,true).fadeIn();
								},
								function(){
									yt_btn.stop(true,true).fadeOut();
								}
							).click(function(){
								vid = $('img:eq(0)',yt_thumbs).attr('src').substr(26,11);
								yt_player.loadVideoById(vid);
								yt_relative.hide();
							});

							//切換上下張圖片
							yt_next.click(function(){
								$('img:visible',yt_thumbs).fadeOut(400,function(){
									$(this).appendTo(yt_thumbs);
								});
								$('img:hidden:first',yt_thumbs).fadeIn();
							});
							yt_prev.click(function(){
								$('img:visible',yt_thumbs).fadeOut(400,function(){
									$(this).prependTo(yt_thumbs);
								});
								$('img:hidden:last',yt_thumbs).fadeIn();
							});
						}
					}
				}
				window['onErrorHandler'] = function(playerError){if(window.console){console.log('ytplayer error');}}
			});//get
		});//return this.each
	}//fn.ytplayer
})(jQuery);

$(function(){
	$('div.ytplayer').ytplayer({playlist:'js/channel.xml',width:283,height:185,random:false});
});