// JavaScript Document
const audioStorage = "Peaks_English_3_ch1";
const courseName = "PeaksEnglish-1";

var audioList = [];
var audioCount = 0;
var aListCont = null;
var iRecordFrame;
var MAX_REC_TIME = 120000;
var showRecording = document.querySelector('#showIframe')

function addAppRecorder(){
	var _main = document.getElementById("main");
	
	iRecordFrame = document.createElement("div");
	iRecordFrame.setAttribute("id", "iRecorder");
	_main.appendChild(iRecordFrame);

	var btnGroup = document.createElement("div");
	btnGroup.id = "btnGroup";
	btnGroup.className = "btnGroup";
	btnGroup.style.width = "100%";
	btnGroup.style.marginTop = "8px";
	btnGroup.style.display = "flex";
	btnGroup.style.justifyContent = "space-around";

	var recordTime;

	iRecordFrame.appendChild(btnGroup);
	var startR = document.createElement("div");
	startR.id = "startR";
	startR.innerHTML = "Record";
	startR.className = "startR";
	var stopR = document.createElement("div");
	stopR.id = "stopR";
	stopR.innerHTML = "Stop";
	stopR.className = "stopR";
	stopR.classList.add("disableBtn");
	btnGroup.appendChild(startR);
	btnGroup.appendChild(stopR);

	$(startR).click(function (e){
		app.recordAudio(audioStorage+audioCount);
		startR.classList.add("disableBtn");
		stopR.classList.remove("disableBtn");

		recordTime = setTimeout(function(){
			app.stopRecord();
			clearTimeout(recordTime);
			alert("Record time limit reched.");
		},MAX_REC_TIME);
	});
	
	$(stopR).click(function (e){
		clearTimeout(recordTime);
		app.stopRecord();
		startR.classList.remove("disableBtn");
		stopR.classList.add("disableBtn");
								
		createAudioList();
		iRecordFrame.appendChild(refreshAudioList());
	});

	iRecordFrame.appendChild(refreshAudioList());
}

function cleanup(_cDiv){
	while(_cDiv.hasChildNodes()){
		_cDiv.removeChild(_cDiv.lastChild);
	}	
}

function createAudioList(){
	var obj = new Object();
	obj["pth"] = audioStorage+audioCount;
	obj["id"] = "a"+audioCount;
	obj["val"] = audioCount;
	
	audioList.push(obj);
	localStorage.setItem(audioStorage, JSON.stringify(audioList));
}

function refreshAudioList(){
	var jsonData = JSON.parse(localStorage.getItem(audioStorage));
	audioList = jsonData || audioList;
	
	if(audioList.length){
		var cnt = audioList[audioList.length-1]["val"];
		cnt++;
	}
	audioCount = cnt || 0;
	
	if(aListCont==null)aListCont = document.createElement("div");
	cleanup(aListCont);
	
	for(var i=0; i<audioList.length; i++){
		var audcont = document.createElement("div");
		audcont.setAttribute("id", "audcont");
		audcont.style.width = "100%";
		audcont.style.display = "flex";
		audcont.style.alignItems = "center";
		audcont.style.justifyContent = "space-between";
		audcont.style.marginBottom = "5px";
		
		var delBtn = document.createElement("div");
		delBtn.className = "audDelbtn";
		delBtn.style.width = "15%";
		delBtn.style.padding = "5px";
		delBtn.style.backgroundColor = "#fff";
		delBtn.style.color = "#fb0d0d";
		delBtn.style.fontSize = "25px";
		delBtn.style.marginRight = "2px";
		delBtn.style.textAlign = "center";
		//delBtn.innerHTML = "Delete";
		delBtn.innerHTML = "&#x2718;";
		delBtn.id = jsonData[i].id;
		delBtn.obj = jsonData[i];
		delBtn.addEventListener("click", ondeleteClicked);
		
		var audDiv = document.createElement("audio");
		audDiv.style.width = "80%";
		/*audDiv.style.webkitTransform = "scale(0.8)";
		audDiv.style.webkitTransformOrigin = "0";*/
		audDiv.controls = true;
		var pre = "file:///storage/emulated/0/"+courseName+"/"
		audDiv.src = pre+jsonData[i].pth+".aac";
		audcont.appendChild(audDiv);
		audcont.appendChild(delBtn);
		
		aListCont.appendChild(audcont);
	}
	
	aListCont.style.margin = "10px 0 0 5px";
	aListCont.style.height = "377px";
	aListCont.style.width = "321px";
	aListCont.style.overflow = "auto";
	aListCont.classList.add("flexcroll");
	return aListCont;
}

function ondeleteClicked(e){
	var _obj = e.target.obj;
	
	audioList.splice(audioList.indexOf(_obj), 1);
	console.log("  ",audioList);
	localStorage.setItem(audioStorage, JSON.stringify(audioList));
	refreshAudioList();
	app.deleteAudio(_obj["pth"]);
}