chamilo-lms2/main/inc/lib/wami-recorder/gui.js

var Wami = window.Wami || {};

// Upon a creation of a new Wami.GUI(options), we assume that a WAMI recorder
// has been initialized.
Wami.GUI = function(options) {
	var RECORD_BUTTON = 1;
	var PLAY_BUTTON = 2;

	setOptions(options);
	setupDOM();

	var recordButton, playButton;
	var recordInterval, playInterval;

	function createDiv(id, style) {
		var div = document.createElement("div");
		if (id) {
			div.setAttribute('id', id);
		}
		if (style) {
			div.style.cssText = style;
		}
		return div;
	}

	function setOptions(options) {
		if (!options.buttonUrl) {
			options.buttonUrl = "buttons.png";
		}

		if (typeof options.listen == 'undefined' || options.listen) {
			listen();
		}
	}

	function setupDOM() {
        var guidiv = createDiv(
            null,
            'position:absolute;width:214px;height:144px;padding-left:79px;padding-top:45px;left:50%;margin-left: -107px'
        );
		document.getElementById(options.id).appendChild(guidiv);

		var rid = Wami.createID();
        var recordDiv = createDiv(rid, '');
		guidiv.appendChild(recordDiv);

		recordButton = new Button(rid, RECORD_BUTTON, options.buttonUrl);
		recordButton.onstart = startRecording;
		recordButton.onstop = stopRecording;

		recordButton.setEnabled(true);
		
//Chamilo hack single button
		var pid = Wami.createID();
		var playDiv = createDiv(pid, '');
			guidiv.appendChild(playDiv);
		if (!options.singleButton) {
			playButton = new Button(pid, PLAY_BUTTON, options.buttonUrl);
		} else {
			playButton = new Button(pid, PLAY_BUTTON, options.buttonNoUrl);
		}
		
			playButton.onstart = startPlaying;
			playButton.onstop = stopPlaying;
	}
//end hack single button

	/**
	 * These methods are called on clicks from the GUI.
	 */
	function startRecording() {
		if (!options.recordUrl) {
			alert("No record Url specified!");
		}
		recordButton.setActivity(0);
		playButton.setEnabled(false);
		Wami.startRecording(options.recordUrl,
				Wami.nameCallback(onRecordStart), Wami
						.nameCallback(onRecordFinish), Wami
						.nameCallback(onError));
	}

	function stopRecording() {
		Wami.stopRecording();
		clearInterval(recordInterval);
		recordButton.setEnabled(true);
	}

	function startPlaying() {
		if (!options.playUrl) {
			alert('No play URL specified!');
		}

		playButton.setActivity(0);
		recordButton.setEnabled(false);

		Wami.startPlaying(options.playUrl, Wami.nameCallback(onPlayStart), Wami
				.nameCallback(onPlayFinish), Wami.nameCallback(onError));
	}

	function stopPlaying() {
		Wami.stopPlaying();
	}

	this.setPlayUrl = function(url) {
		options.playUrl = url;
	}

	this.setRecordUrl = function(url) {
		options.recordUrl = url;
	}

	this.setPlayEnabled = function(val) {
		playButton.setEnabled(val);
	}

	this.setRecordEnabled = function(val) {
		recordButton.setEnabled(val);
	}

	/**
	 * Callbacks from the flash indicating certain events
	 */

	function onError(e) {
		alert(e);
	}

	function onRecordStart() {
		recordInterval = setInterval(function() {
			if (recordButton.isActive()) {
				var level = Wami.getRecordingLevel();
				recordButton.setActivity(level);
			}
		}, 200);
		if (options.onRecordStart) {
			options.onRecordStart();
		}
	}

	function onRecordFinish() {
		playButton.setEnabled(true);
		if (options.onRecordFinish) {
			options.onRecordFinish();
		}
	}

	function onPlayStart() {
		playInterval = setInterval(function() {
			if (playButton.isActive()) {
				var level = Wami.getPlayingLevel();
				playButton.setActivity(level);
			}
		}, 200);
		if (options.onPlayStart) {
			options.onPlayStart();
		}
	}

	function onPlayFinish() {
		clearInterval(playInterval);
		recordButton.setEnabled(true);
		playButton.setEnabled(true);
		if (options.onPlayFinish) {
			options.onPlayFinish();
		}
	}

	function listen() {
		Wami.startListening();
		// Continually listening when the window is in focus allows us to
		// buffer a little audio before the users clicks, since sometimes
		// people talk too soon. Without "listening", the audio would record
		// exactly when startRecording() is called.
		window.onfocus = function() {
			Wami.startListening();
		};

		// Note that the use of onfocus and onblur should probably be replaced
		// with a more robust solution (e.g. jQuery's $(window).focus(...)
		window.onblur = function() {
			Wami.stopListening();
		};
	}

	function Button(buttonid, type, url) {
		var self = this;
		self.active = false;
		self.type = type;

		init();

		// Get the background button image position
		// Index: 1) normal 2) pressed 3) mouse-over
		function background(index) {
			if (index == 1)
				return "-56px 0px";
			if (index == 2)
				return "0px 0px";
			if (index == 3)
				return "-112px 0";
			alert("Background not found: " + index);
		}

		// Get the type of meter and its state
		// Index: 1) enabled 2) meter 3) disabled
		function meter(index, offset) {
			var top = 5;
			if (offset)
				top += offset;
			if (self.type == RECORD_BUTTON) {
				if (index == 1)
					return "-169px " + top + "px";
				if (index == 2)
					return "-189px " + top + "px";
				if (index == 3)
					return "-249px " + top + "px";
			} else {
				if (index == 1)
					return "-269px " + top + "px";
				if (index == 2)
					return "-298px " + top + "px";
				if (index == 3)
					return "-327px " + top + "px";
			}
			alert("Meter not found: " + self.type + " " + index);
		}

		function silhouetteWidth() {
			if (self.type == RECORD_BUTTON) {
				return "20px";
			} else {
				return "29px";
			}
		}

		function mouseHandler(e) {
			var rightclick;
			if (!e)
				var e = window.event;
			if (e.which)
				rightclick = (e.which == 3);
			else if (e.button)
				rightclick = (e.button == 2);

			if (!rightclick) {
				if (self.active && self.onstop) {
					self.active = false;
					self.onstop();
				} else if (!self.active && self.onstart) {
					self.active = true;
					self.onstart();
				}
			}
		}

		function init() {
			var div = document.createElement("div");
			var elem = document.getElementById(buttonid);
			if (elem) {
				elem.appendChild(div);
			} else {
				alert('Could not find element on page named ' + buttonid);
			}

			self.guidiv = document.createElement("div");
			self.guidiv.style.width = '56px';
			self.guidiv.style.height = '63px';
			self.guidiv.style.cursor = 'pointer';
			self.guidiv.style.background = "url(" + url + ") no-repeat";
			self.guidiv.style.backgroundPosition = background(1);
			div.appendChild(self.guidiv);

			// margin auto doesn't work in IE quirks mode
			// http://stackoverflow.com/questions/816343/why-will-this-div-img-not-center-in-ie8
			// text-align is a hack to force it to work even if you forget the
			// doctype.
			self.guidiv.style.textAlign = 'center';

			self.meterDiv = document.createElement("div");
			self.meterDiv.style.width = silhouetteWidth();
			self.meterDiv.style.height = '63px';
			self.meterDiv.style.margin = 'auto';
			self.meterDiv.style.cursor = 'pointer';
			self.meterDiv.style.position = 'relative';
			self.meterDiv.style.background = "url(" + url + ") no-repeat";
			self.meterDiv.style.backgroundPosition = meter(2);
			self.guidiv.appendChild(self.meterDiv);

			self.coverDiv = document.createElement("div");
			self.coverDiv.style.width = silhouetteWidth();
			self.coverDiv.style.height = '63px';
			self.coverDiv.style.margin = 'auto';
			self.coverDiv.style.cursor = 'pointer';
			self.coverDiv.style.position = 'relative';
			self.coverDiv.style.background = "url(" + url + ") no-repeat";
			self.coverDiv.style.backgroundPosition = meter(1);
			self.meterDiv.appendChild(self.coverDiv);

			self.active = false;
			self.guidiv.onmousedown = mouseHandler;
		}

		self.isActive = function() {
			return self.active;
		}

		self.setActivity = function(level) {
			self.guidiv.onmouseout = function() {
			};
			self.guidiv.onmouseover = function() {
			};
			self.guidiv.style.backgroundPosition = background(2);
			self.coverDiv.style.backgroundPosition = meter(1, 5);
			self.meterDiv.style.backgroundPosition = meter(2, 5);

			var totalHeight = 31;
			var maxHeight = 9;

			// When volume goes up, the black image loses height,
			// creating the perception of the colored one increasing.
			var height = (maxHeight + totalHeight - Math.floor(level / 100
					* totalHeight));
			self.coverDiv.style.height = height + "px";
		}

		self.setEnabled = function(enable) {
			var guidiv = self.guidiv;
			self.active = false;
			if (enable) {
				self.coverDiv.style.backgroundPosition = meter(1);
				self.meterDiv.style.backgroundPosition = meter(1);
				guidiv.style.backgroundPosition = background(1);
				guidiv.onmousedown = mouseHandler;
				guidiv.onmouseover = function() {
					guidiv.style.backgroundPosition = background(3);
				};
				guidiv.onmouseout = function() {
					guidiv.style.backgroundPosition = background(1);
				};
			} else {
				self.coverDiv.style.backgroundPosition = meter(3);
				self.meterDiv.style.backgroundPosition = meter(3);
				guidiv.style.backgroundPosition = background(1);
				guidiv.onmousedown = null;
				guidiv.onmouseout = function() {
				};
				guidiv.onmouseover = function() {
				};
			}
		}
	}
}