var current_tab = null;
var ytplayer = null;

var video_num = 1;
var max_vid = 5; // should this be 3 or 4?

$(document).ready(
	function() {
		initDivs();
		initTabs();
	}
);

function initDivs() {
	$('.tab_section').hide();
	current_tab = 1;
	showTab(current_tab);
}

function initTabs() {
	$('.tab').click(swapToTab);
}

function swapToTab(tab) {
	tab_num = this.id.substr('tab'.length);
	$('#tab'+current_tab).removeClass('active');
	//hideTab(current_tab);
	$('#tab_'+current_tab).fadeOut(
		0,
		function(){
			showTab(tab_num);
		}
	);
	//showTab(tab_num);
	current_tab = tab_num;
	return false;
}

function showTab(tab_num) { // id= tab_<num> is the tab content div and id= tab<num> is the tab button
	$('#tab_'+tab_num).fadeIn(0);//show();
	$('#tab'+tab_num).addClass('active');
}

function hideTab(tab_num) {
	$('#tab_'+tab_num).hide();
}

var params = { allowScriptAccess: "always", wmode: "opaque" };
    var atts = { id: "myytplayer", onmouseup: "clickYtFrame();"};
swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1", 
                       "ytapiplayer", "521", "293", "8", null, null, params, atts);

function onYouTubePlayerReady(playerId) {
      
	  var ytplayerJQ = $("#myytplayer");
	  //ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
	  ytplayerJQ.bind("onStateChange", "onytplayerStateChange");
	  ytplayer = ytplayerJQ.get(0); // this will be a 1 element array of the dom object that matches id #myytplayer
	  // alert(ytplayer);
	  switch_video(video_num);
	  //$("#play_button1").show();//.style.display = "block";
	  
}



function clicktab(id){
	if(id!=current_tab){

		$(current_tab).className = "tab_hover";
		$(current_tab+'_page').style.display = "none";
		$(current_tab).src = 'images/'+current_tab+'.png';
		current_tab = id;
		$(current_tab).className = "tab_nohover";
		$(current_tab+'_page').style.display = "block";
		$(current_tab).src = 'images/'+current_tab+'_top.png';


	}
}

function next_video(){	
	if(video_num < max_vid ){
		switch_video(video_num+1);
	}
}

function prev_video(){

	if(video_num > 1 ){
		switch_video(video_num - 1);
	}

}

function switch_video(new_num){
	if( new_num == 1 )
		disable_btn('prev');
	else
		enable_btn('prev');
	if( new_num == max_vid )
		disable_btn('next');
	else
		enable_btn('next');
	
	stop_v();				
	$("#thumb"+video_num).hide();
	$("#play_button"+video_num).hide();
	$("#thumb"+new_num).show();
	$("#play_button"+new_num).show();
	change_vid_info( new_num, video_num );
	video_num=new_num;
}

function change_vid_info(num, oldnum) {
	$('#video_copy_' + oldnum ).removeClass('vid_copy_active');
	$('#video_copy_' + num).addClass('vid_copy_active');
}

function disable_btn(prevNext) {
	$('#'+prevNext+'_btn').hide();
	$('#'+prevNext+'_pop').removeClass('vid_nav_pop'); //IE7 does something weird with the hover state when it re-enables the button, this works around it
}
function enable_btn(prevNext) {
	$('#'+prevNext+'_btn').show();
	$('#'+prevNext+'_pop').addClass('vid_nav_pop'); //IE7 does something weird with the hover state when it re-enables the button, this works around it
}
function disable_next() {
	$('#next_btn').hide();
	$('#prev_pop').removeClass('vid_nav_pop');
}

function clickPlayBtn(id){
	$('#'+id).hide();
	var vid_num = id.substr('play_button'.length);
	state = getPlayerState();
	if (ytplayer){
		if(state==-1||state==5)
		{
			var vid='';
			switch(vid_num){
			case '1':
				vid="a81LYb7Bw-Q";
				break;
			case '2':
				vid="buTLzymdjmk";
				break;
			case '3':
				vid="myIuKwLYxZ4";
				break;
			case '4':
				vid="IayUmwwDynA";
				break;
			}
			loadNewVideo(vid, "0");
		}
		else if(state==2||state==0)
		{
			play();	
		}
	}
	$("#thumb"+vid_num).hide();
	
}


function loadNewVideo(id, startSeconds) {
          if (ytplayer) {
            ytplayer.loadVideoById(id, parseInt(startSeconds));
          }
}


function play() {
  if (ytplayer) {
    ytplayer.playVideo();
  } 
}

function stop_v() {
          if (ytplayer) {
            ytplayer.stopVideo();
          }
}

function pause() {
          if (ytplayer) {
            ytplayer.pauseVideo();
          }
}

function clearVideo() {
          if (ytplayer) {
            ytplayer.clearVideo();
          }
}

function getPlayerState() {
          if (ytplayer) {
          	  return ytplayer.getPlayerState();
          }
}

function clickYtFrame(){
		state = getPlayerState();
		
		if(state==1){
			pause();
			$("#play_button"+video_num).show();
		}
		else if(state==2)
		{
			//when it's pausing, only use button to replay
		}
		else if(state==0)
		{
			play();	
		}
}

function onytplayerStateChange(newState) {
   if(newState==0){
		$("#play_button"+video_num).show();
   }
}