var overviewNum;
var tag1 = '<div class="overviewBtn" id="overviewBtn';
var tag2 = '"><div class="playIcon"></div><div class="overviewBtnText" id="overviewBtnText';
var overviewMovieFile;
var ov_videoObj;
var ov_currentVideo;
var ov_currentStatus;
var ov_videoTag;
var ov_videoTag1 ="<video id='overviewTarget' class='video-js vjs-default-skin vjs-big-play-centered'><track kind='captions' src='";
var ov_videoTag2 ="' srclang='en' label='" + movieLang + "' default></video>";
var ov_options = {'controls': true, 'autoplay': true, 'preload': 'auto', 'width': '1280', 'height': '720', 'controlBar': {'fullscreenToggle': false}};

window.onload = init;

function init(){
	comScaler();
    dataWrite(varsArr,dataArr);
	menuBuild();
	$('#overviewCloseBtn').html(movieClose);
	overviewBtnBuild();
}

function overviewBtnBuild(){
	overviewNum = overviewBtnText.length;
	for (var i=0; i<overviewNum; i++){
		var tag = tag1 + (i+1) + tag2 + (i+1) + '">' + overviewBtnText[i] + '</div>';
		$('.overview').append(tag);
	}
	
	//overViewMovieFile
	$(".overviewBtn").on("click", function(){
		var target = $(this).attr('id');
		var targetNum = parseInt(target.replace("overviewBtn",""));
		overviewMovieFile = overViewMovieFiles[targetNum-1];
		console.log("targetNum"+targetNum);
		if (overViewLocalFlag){
			ov_init();
		} else {
			ov_initYT();
		}
	});
}

function ov_init(){
    $('#overviewCloseBtn').on("click", function(){
        ov_videoObj.dispose();
		$('#overviewVideo').empty();
        $('#videoWrapper').css({'display':'none'});
    });
    
    $('#videoWrapper').css({'display':'flex'});
	ov_videoTag = ov_videoTag1 + "videos/overview/" + overviewMovieFile + ".vtt" + ov_videoTag2;
    $('#overviewVideo').append(ov_videoTag);
    ov_videoObj = videojs('overviewTarget', ov_options, function(){
        ov_currentVideo = this;
		ov_currentVideo.src('videos/overview/' + overviewMovieFile + '.mp4');
        ov_currentVideo.on('play', function(){
			ov_currentStatus = 'play';
		});
		ov_currentVideo.on('ended', function(){
			ov_currentStatus = 'ended';
			ov_videoObj.dispose();
			$('#overviewVideo').empty();
        	$('#videoWrapper').css({'display':'none'});
		});
		ov_currentVideo.on('pause', function(){
			ov_currentStatus = 'pause';
		});
    });
}

//Youtube
var ov_videoTagYT;
var ov_videoTagYT1 ="<video id='overviewTarget' class='video-js vjs-default-skin vjs-big-play-centered'></video>";
var ov_optionsYT = {'controls': false, 'autoplay': true, 'preload': 'auto', 'width': '1280', 'height': '720', 'liveui': false, 'techOrder': ['youtube'], 'sources': [{ 'type': 'video/youtube', 'src': ''}], "youtube": { "ytControls": 2 }};

function ov_initYT(){
	$('#overviewCloseBtn').on("click", function(){
        ov_videoObj.dispose();
		$('#overviewVideo').empty();
        $('#videoWrapper').css({'display':'none'});
    });
	
	$('#videoWrapper').css({'display':'flex'});
    ov_videoTagYT = ov_videoTagYT1;
	//youtube
	var opData = ov_optionsYT;
	opData['sources'][0]['src'] = 'https://www.youtube.com/embed/' + overviewMovieFile;
	
    $('#overviewVideo').append(ov_videoTagYT);
    ov_videoObj = videojs('overviewTarget', opData, function(){
        ov_currentVideo = this;
        ov_currentVideo.on('play', function(){
			ov_currentStatus = 'play';
		});
		ov_currentVideo.on('ended', function(){
			ov_currentStatus = 'ended';
			ov_videoObj.dispose();
			$('#overviewVideo').empty();
        	$('#videoWrapper').css({'display':'none'});
		});
		ov_currentVideo.on('pause', function(){
			ov_currentStatus = 'pause';
		});
    });
}