var lesson;
var feedbackObject;
var PlayBack;
var responseCount;

function init() {
	if (!FlashDetect.installed || FlashDetect.major <= 8) {
		$('#flashwarning').css('display','block');
	}
	
	swfobject.embedSWF(mediaURL + 'playback.swf', 'flashplayback', 1, 1, "9.0.0", null, null, {allowscriptaccess:"always"});
	setTimeout(function() { PlayBack = new PlayBack(); }, 1000);   //give swfobject time to embed
}

function render(lid,rid,fbid){
	var feedbackJSON = $.getJSON(mediaURL + 'feedback/' + fbid + '.js', function(feedbackJSON){
		feedbackObject = eval(feedbackJSON);
		
		var lessonJSON = $.getJSON(mediaURL + 'lessons/' + lid + '.js', function(json){
			var lessonObject = eval(json);
			renderLesson(lessonObject, rid);
		});
	});
}

function renderLesson(lesson, rid){

	var responseJSON = $.getJSON(mediaURL + 'responses/' + rid + '.js', function(json){
		var response = eval(json);
		var responses = response.content;
		$('#title-input').text(lesson.title);
		
		var content = lesson.content;
		var builderContent = $('#builder-content');
		responseCount = 0;
		for (var i in content) {
			var type = content[i].type;
			var value = content[i].value;
			
			switch (type) {
			
				case 'textinput':
					builderContent.append(renderTextInput(value));
					break;
					
				case 'videoinput':
					builderContent.append(renderVideoInput(value));
					
					var videoURL = 'http://www.youtube.com/v/' + value + '&rel=0&fs=0&border=0';
					var params = {
						allowFullScreen: "false",
						allowScriptAccess: "always",
						wmode: "transparent",
						vid: value
					}
					var width = "480";
					var height = "295";
					swfobject.embedSWF(videoURL, value, width, height, "9.0.0", null, null, params);
					break;
					
				case 'voiceinput':
					if ("mp3mode" in content[i]){
						var mp3mode = "true";
					} else {
						var mp3mode = "false";
					}
					builderContent.append(renderVoiceInput(value));
					var swf = mediaURL + 'recordbubble.swf';
					var params = {
						allowScriptAccess: "always",
						wmode: "transparent"
					};
					var flashvars = {
						fid: value,
						playback: "true",
						instantiate: "true",
						mp3mode: mp3mode
					};
					var width = "95";
					var height = "85";
					swfobject.embedSWF(swf, value, width, height, "9.0.0", null, flashvars, params);
					break;
					
				case 'imageinput':
					builderContent.append(renderImageInput(value));
					break;
					
				case 'textprompt':
					builderContent.append(renderTextPrompt(responses[responseCount].value));
					builderContent.append(renderFeedback());
					responseCount += 1;
					break;
					
				case 'voiceprompt':
					var responseValue = responses[responseCount].value;
					builderContent.append(renderVoicePrompt(responseValue));
					
					var swf = mediaURL + 'recordbubble.swf';
					var flashvars = {
						fid: responseValue,
						respond: "true",
						playback: "true",
						instantiate: "true"
					};
					var params = {
						allowScriptAccess: "always",
						wmode: "transparent"
					}
					var width = "95";
					var height = "85";
					swfobject.embedSWF(swf, responseValue, width, height, "9.0.0", null, flashvars, params);
					builderContent.append(renderFeedback());
					responseCount += 1;
					break;
					
				case 'pairedprompt':
					if ("mp3mode" in content[i]){
						var mp3mode = "true";
					} else {
						var mp3mode = "false";
					}
					responseValue = responses[responseCount].value;
					builderContent.append(renderPairedPrompt(value, responseValue));
					
					var swf = mediaURL + 'recordbubble.swf';
					var flashvars1 = {
						fid: value,
						instantiate: "true",
						playback: "true",
						mp3mode: mp3mode
					};
					var params = {
						allowScriptAccess: "always",
						wmode: "transparent"
					}
					var width = "95";
					var height = "85";
					swfobject.embedSWF(swf, value, width, height, "9.0.0", null, flashvars1, params);
					
					var flashvars2 = {
						fid: responseValue,
						respond: "true",
						playback: "true",
						instantiate: "true",
						reverse: "true"
					};
					
					swfobject.embedSWF(swf, responseValue, width, height, "9.0.0", null, flashvars2, params);
					builderContent.append(renderFeedback());
					responseCount += 1;
					break;
					
				case 'pairedinput':
					if ("mp3mode" in content[i]){
						var mp3mode = "true";
					} else {
						var mp3mode = "false";
					}
					responseValue = responses[responseCount].value;
					builderContent.append(renderPairedInput(value, responseValue));
					
					var swf = mediaURL + 'recordbubble.swf';
					var flashvars1 = {
						fid: value,
						instantiate: "true",
						playback: "true",
						reverse: "true",
						mp3mode: mp3mode
					};
					var params = {
						allowScriptAccess: "always",
						wmode: "transparent"
					};
					var width = "95";
					var height = "85";
					swfobject.embedSWF(swf, value, width, height, "9.0.0", null, flashvars1, params);
					
					var flashvars2 = {
						fid: responseValue,
						respond: "true",
						instantiate: "true",
						playback: "true"
					};
					
					swfobject.embedSWF(swf, responseValue, width, height, "9.0.0", null, flashvars2, params);
					builderContent.append(renderFeedback());
					responseCount += 1;
					break;
			}
		}
	});
}

function renderFeedback(){
	var feedbackType = feedbackObject.content[responseCount].type;
	
	if (feedbackType == 'none') {
		return ""
	}
	else {
		var feedbackContainer = $('<div style="margin-top:-45px;width:470px;text-align:left;margin-left:auto;margin-right:auto;margin-bottom:50px;"></div>');
		var teacherHeader = '<h2 style="font-size:14px;">' + feedbackObject.teacher + '</h2>';
		
		if (feedbackType == 'voice') {
			var feedback = '<img src="' + mediaURL + 'images/playback.png" class="playback" onclick="PlayBack.play(' + feedbackObject.content[responseCount].value + ',this)" />';
		}
		else if (feedbackType == 'text') {
			var feedback = '<div style="color:#e8972e;font-weight:bold;font-size:12px;">' + feedbackObject.content[responseCount].value + '</div>';
		}
		
		feedbackContainer.append(teacherHeader + feedback);
		
		return feedbackContainer;
	}	
}

function renderPairedInput(playbackID, recordID){
	var pairedInput = $('<div class="paired-prompt" style="width:250px;"><div id="'+recordID+'"></div><div id="'+playbackID+'"></div></div>');
	return WrapInResponseContainer(pairedInput);
}

function renderPairedPrompt(playbackID, recordID){
	var pairedPrompt = $('<div class="paired-prompt" style="width:250px;"><div id="'+playbackID+'"></div><div id="'+recordID+'"></div></div>');
	return WrapInResponseContainer(pairedPrompt);
}

function renderVoicePrompt(value){
	var voicePrompt = $('<div class="voice-input"><div id="'+value+'"></div></div>');
	return WrapInResponseContainer(voicePrompt);
}

function renderVoiceInput(value){
	var voiceInput = $('<div class="voice-input"><div id="'+value+'"></div></div>')
	return WrapInContainer(voiceInput);
}

function renderTextPrompt(value){
	var textInput = $('<div class="text-input" style="font-size:14px;color:#d2821b"></div>');
	textInput.append($('<span></span>').html(replaceNewLines(value)));
	return WrapInContainer(textInput).css('margin-top','-45px').css('margin-bottom','50px').css('padding-bottom','20px');
}

//takes an image file with extension.
function renderImageInput(value){
	var imageFile = mediaURL + 'upload/' + value;
	var imageInput = $('<div class="image-input"></div>');
	imageInput.append($('<img />').attr('src', imageFile));
	return WrapInContainer(imageInput);
}

function renderVideoInput(value){
	var videoInput = $('<div class="video-input"><div id="'+value+'"></div></div>');
	return WrapInContainer(videoInput);
}

function renderTextInput(value){
	var textInput = $('<div class="text-input"></div>');
	textInput.append($('<span></span>').html(replaceNewLines(value)));
	return WrapInContainer(textInput);
}

function WrapInResponseContainer(input){
	var container = $(document.createElement('div')).attr('class','lesson-box-response').css('display','block').css('position','relative');
	
	return container.append(input);
}

function WrapInContainer(input){
		var container = $(document.createElement('div')).attr('class','lesson-box').css('display','block').css('position','relative');
		
		return container.append(input);
}

function replaceNewLines(string){
	return string.replace(/\n/g,'<br />');
}

var timestamp = new Date();
timestamp = new String(timestamp.getTime());
//Eleven digits will suffice to create a unique identifier for the next thirty years.
timestamp = timestamp.substring(1,12);
function GetIdentifier(){
	timestamp = parseInt(timestamp)+1;  //must increment in this way since prompts are rendered too quickly to generate unique timestamp each time.
	return uid+''+timestamp;
}

function PlayBack(){
	var flashPlayer = document.getElementById('flashplayback');
	var state = "idle";
	var playbackDiv = false;
	
	this.play = function(id, div){
		if (state!="idle" && playbackDiv && (div != playbackDiv.get(0))){
			state = "switching";	
			playbackDiv.css('opacity','1.0');
			$(div).css('opacity', '0.5');
			playbackDiv = $(div);
			
			flashPlayer.startPlayback(id);
				
		}
		
		else if (state == "idle") {
			state = "playing";
			playbackDiv = $(div);
			playbackDiv.css('opacity', '0.5');
			
			flashPlayer.startPlayback(id);
		}
		
		else if (state == "playing"){
			state = "paused";
			flashPlayer.pausePlayback();
		}
		
		else if (state == "paused"){
			state = "playing";
			flashPlayer.unpausePlayback();
		}
	}
	
	this.stop = function(){
		if (state == "switching") {
			state = "playing";
		}
		else {
			state = "idle";
			playbackDiv.css('opacity', '1.0');
		}
	}
}

//called from Flash
function playbackComplete(){
	PlayBack.stop();
}