//buttonElement = $('<input  class="segmentationButton" type="button" name="speakers" value="speakers" ></input>');
//buttonElement.click(function() { $(".segmentation").show(); $(".segmentationList1").show();  $(".segmentation2").show();   });



  console.log("STARTING language versions");

 //function playDifferentLanguage(newLanguageLink, newLanguage) {
 function playDifferentLanguage() {
	var cList = document.getElementById("languageList");
	var newLanguageLink = cList.options[cList.selectedIndex].value;
	var newLanguage = cList.options[cList.selectedIndex].text;


	console.log("BEWL")
	console.log(newLanguageLink);
	console.log(newLanguage);	
	
	var currentVideo =  document.getElementById("video");
	//$('#video');
	
	var currentTime = currentVideo.currentTime; 
	console.log("Current time: " + currentTime);

	$("#video").attr('src', newLanguageLink); 
	currentVideo.load();
	currentVideo.currentTime = currentTime;
	currentVideo.play();
	

 }

 var myDocId = docid.split('.').slice(0, -1).join('.').split('_').slice(0, -1).join('_');
 console.log("Local doc id: " + myDocId);

 function loadLanguageSelectionJSON(callback) {

    var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
    xobj.open('GET', myDocId + '.languageVersions.json', true); // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
		callback(xobj.responseText);
           //$(".segmentationButton").show();
          } else {
                console.log("There was a problem getting language selection JSON data");
          }
    };
    xobj.send(null);
 }

 function addLanguageVersion(item, index) {
	console.log("Add language version");
	console.log(item.language);
	console.log(item.videoUrl);
	console.log(index);
	
	optionElement = $('<option value="' + item.videoUrl + '">' + item.language + '</option>');
	//optionElement.click(function() { playDifferentLanguage(item.videoUrl, item.language)   });

	//buttonElement = $('<input  class="languageButton" type="button" name="'+ item.language +'" value="' + item.language + '" ></input>');
	//buttonElement.click(function() { playDifferentLanguage(item.videoUrl, item.language)   });
	//$("#video").next().append(buttonElement);
	//
	$("#languageList").append(optionElement);
	 //buttonElement = $('<input  class="segmentationButton" type="button" name="' + + '" value="speakers" ></input>');

 }

 loadLanguageSelectionJSON(function(response) {
	
	var originalSource =  $("#video").attr('src');
	console.log("Soruce: " + originalSource);	
	var meeting_JSON = JSON.parse(response);

	// add general placeholder first
	var listElement = $('<span class="languageListLabel">audio</span><select onchange="playDifferentLanguage()" tooltip="Select language"  id="languageList" class="languageList" type="button" name="language"></select>');
	
	// TODO: get current HTML value
	var defaultSelect = $('<option value="' + originalSource + '">en</option>')
	listElement.last().append(defaultSelect);

	$("#video").next().append(listElement);

	meeting_JSON.languageVersions.forEach(addLanguageVersion ); 
		
});	

