var mixer = {};
var studio;

$(document).on('click', '#studio_new', function() {
	$('#studio').attr('uuid','').attr('name','');
	studioInit();
	$('#studio_song_select').val('none');
});

$(document).on('click', '#pedalboard_hamburger', function() {
	var pd = $('#pedalboard');
	var z = $('#studio_viewer').closest('.wind').css('z-index');

	if (pd.is(':visible')) {
		pd.hide();
	}
	else {
		pd.show();
		pd.css({ 'z-index': (z + 10) });
	}
});

function studioInit() {
	mixer = {
		time: { duration: 0, status: 'stop', position: 0, marks: [], interval: 0, startTime: 0 },
		buttons: { record: { obg: '', bg: 'red', interval: '' }, stop: { obg: '', bg: 'lightgreen', interval: '' }, play: { obg: '', bg: 'yellow', interval: '' } }
	};
	$('#studio_track_container').html('');

	var pd = $('#pedalboard');
	if (!$('#soundroom_sidebar_container').is(':visible')) {

		var width = $('#soundroom_sidebar_container').width();
		width = (width + 30) + 'px';
		$('#studio').find('.to_sound').each(function(i,v) {
			var channel = $(v).attr('channel') + 1;
			$('#browser').append($(v).html());


			$(v).remove();
			$('.cord[channel="' + channel + '"]').draggable({
				start: function(p,ui) {
					$('.jack').show();
					
				},
				drag: function(p,ui) {

				},
				stop: function(p,ui) {
					$('.jack').hide();
				}
			});
		});
	}
	studioRetriever();
	if ($('#studio').attr('uuid')) {
		var uuid = $('#studio').attr('uuid');
		studioLoad(uuid);
	}
}

$(document).on('click', '.studio_close_button', function() {
	$('#soundroom_sidebar_container').html('').hide();
	$('.cord').remove();
});



$(document).on('click','.knob',function() {
	var knob = $(this);
	var control = knob.attr('control');
	var channel = knob.attr('channel');
	var input = $('.knob_control[control="' + control + '"][channel="' + channel + '"]');
	var current_value = input.val();
	var vis = input.is(':visible');
	if (vis) {
		input.hide();
		$('.knob[channel="' + channel + '"]').show();
	}
	else {
		input.show();
		$('.knob[channel="' + channel + '"]').hide();
		$('.knob[control="' + control + '"][channel="' + channel + '"]').show();
	}
	studioSaver();
});

$(document).on('mousewheel', '.knob', function(e) {
	var mvmt = numeral(e.originalEvent.wheelDelta).value();

	mvmt = numeral(mvmt / 30).value() ;

	var knob = $(this);
	var control = knob.attr('control');
	var channel = knob.attr('channel');
	var input = $('.knob_control[control="' + control + '"][channel="' + channel + '"]');
	var current_value = input.val();
	input.val((numeral(current_value).value() + mvmt) );
	input.trigger('change');
	studioSaver();
});

$(document).on('change mousemove touchmove','.knob_control',function() {
	var input = $(this);
	var channel = input.attr('channel');

	var current_value = input.val();
	var control = input.attr('control');
	var knob = $('.knob[control="' + control + '"][channel="' + channel + '"]');
	var direction = knob.attr('direction');
	var flip = numeral(knob.attr('flip')).value() || 0;
	var range = numeral(knob.attr('range')).value() || .85;
	var step = numeral(input.attr('step')).value();

	var transform_value = (flip + numeral((360 / 100) * (current_value * range)).value());
	if (direction == 'counter') {
		transform_value = (flip - numeral((360 / 100) * (current_value * range)).value());
	}
	knob.css({ 'transform': 'rotate(' + transform_value + 'deg)' });
	studioSaver();
});

$(document).on('click', '.button_control', function() {
	var b = $(this);
	var control = b.attr('control');
	var colour = b.attr('colour');
	var status = b.attr('status');
	if (status == 'depressed') {
		b.attr('status', 'pressed');
		b.attr('src', '/images/studio/button_pressed_' + colour + '.png');
	}
	else {
		b.attr('status', 'depressed');
		b.attr('src', '/images/studio/button_depressed_' + colour + '.png');
	}
	studioSaver();
});

$(document).on('mousewheel', '.channel_volume', function(e) {
	var vol = $(this);
	var mvmt = numeral(e.originalEvent.wheelDelta).value() / 30;
	var newVol = (numeral(vol.val()).value() + mvmt);
	vol.val(newVol);
	studioSaver();
});

$(document).on('change', '.channel_volume', function() {
	studioSaver();
});

$(document).on('click', '#studio_loop', function() {
	var sl = $(this);
	if (sl.attr('enabled') == 'on') {
		sl.attr('enabled', 'off');
		sl.css({'background-color': sl.attr('obg') });
	}
	else {
		sl.attr('obg', sl.css('background-color'));
		sl.attr('enabled', 'on');
		sl.css({'background-color': 'red' });
	}
	studioSaver();
});

function studioSaver() {
	var studio = {};
	var name = $('#studio').attr('name');
	var uuid = $('#studio').attr('uuid');
	$('.knob_control, .channel_volume').each(function(i,v) {

		var channel = $(v).attr('channel');
		var control = $(v).attr('control');
		var value = $(v).val();

		if (control == 'pan') {
			value = (value - 0) / (100 - 0) * ( 1 - -1) + -1;
		}

		if (studio[channel] == undefined) {
			studio[channel] = {};
		}
		studio[channel][control] = value;
		if (mixer[channel]) {
			mixer[channel][control] = value;
		}
	});
	$('.armed').each(function(i,v) {
		var channel = $(v).attr('channel');
		var control = $(v).attr('control');
		var state = $(v).attr('state');
		var text = $(v).text();
		studio[channel][control] = { state: state, text: text };
	});
	var sl = $('#studio_loop').attr('enabled');
	var video_toggle = $('#studio_video_toggle').attr('toggled');
	studio['admin'] = { time: mixer['time'], name: name, uuid: uuid, loop: sl, video_toggle: video_toggle };
	studio = JSON.stringify(studio);
	localStorage.setItem('studio', studio);
}

function studioRetriever() {
	var studio = localStorage.getItem('studio') || "{}";
	studio = JSON.parse(studio);
	$.each(studio, function(i,v) {
		if (!mixer[i]) { mixer[i] = {}; }
		$.each(studio[i], function(n,w) {
			mixer[i][n] = w;
			$.each(mixer[i], function(ir,vr) {
				studio[i]['mixer'] = vr;
			});
			if (n == 'armed') {
				$('[channel="' + i + '"][control="' + n + '"]').attr('state', w.state);
				$('[channel="' + i + '"][control="' + n + '"]').text(w.text);
			}
			else {

				if (n == 'pan') {
					w = (w - -1) / (1 - -1) * ( 100 - 0) + 0;
				}
				$('[channel="' + i + '"][control="' + n + '"]').val(w).trigger('change');
			}
		});
	});
	mixer['time']['loop'] = studio['admin']['loop'];
	return studio;
}

var studio_jw_deg =  0;
var studio_last = 'out';
$(document).on('touchmove mousemove', '#studio_jog_wheel', function(e) {
	e.preventDefault();			e.preventDefault();
	var j = $(this);
	var jc = j.closest('.jog_wheel_frame').find('.jog_wheel_centre');
	if (e.which === 1 || e.originalEvent.type == 'touchmove') {
		var x = e.originalEvent.clientX;
		var y = e.originalEvent.clientY;
		if (e.originalEvent.targetTouches) {
			x = e.originalEvent.targetTouches[0].clientX;
			y = e.originalEvent.targetTouches[0].clientY;
		}
		var middle_x = numeral(jc.offset().left + (jc.width() / 2)).value();
		var middle_y = numeral(jc.offset().top + (jc.height() / 2)).value();
		var deltaX = middle_x - x;
		var deltaY = middle_y - y;
		var rad = Math.atan2(deltaY, deltaX); 
		var deg = rad * (180 / Math.PI) - 90;
		var diff = 0;
		if (studio_last == 'in') {
			diff = (deg - studio_jw_deg);
		}
		studio_jw_deg = (studio_jw_deg + diff);
		j.css({'rotate': studio_jw_deg + 'deg' });
		studio_last = 'in';
		mixer['time']['position'] = mixer['time']['position'] + diff / 10;
		studioTime();
	}
});
$(document).on('mouseout touchend mouseup', '#studio_jog_wheel', function() {
	studio_last = 'out';
});

$(document).on('mousewheel', '#studio_jog_wheel', function(e) {
	var j = $(this);
	var mvmt = numeral(e.originalEvent.wheelDelta).value();

	var diff = numeral(mvmt / 30).value() ;
	studio_jw_deg = (studio_jw_deg + diff);
	j.css({'rotate': studio_jw_deg + 'deg' });
	mixer['time']['position'] = mixer['time']['position'] + diff / 10;
	studioTime();
});

$(document).on('click', '#studio_video_toggle', function() {
	var toggle = $(this).attr('toggled');

	if (toggle == 'on') {
		toggle = 'off';
	}
	else {
		toggle = 'on';
	}
	$(this).attr('toggled', toggle);
	studioSaver();
});

$(document).on('click', '#studio_record', function() {
	if (mixer['time']['status'] != 'record' && mixer['time']['status'] != 'play') {
		studioRecord();
		mixer['time']['status'] = 'record';
	}
});

$(document).on('click', '.armed',function() {
	var armed = $(this);
	var state = armed.attr('state');
	if (state == 'off') {
		armed.attr('state', 'rec');
		armed.text('R');
	}
	else if (state == 'rec') {
		armed.attr('state', 'play');
		armed.text('P');
	}
	else if (state == 'play') {
		armed.attr('state', 'loop');
		armed.text('L');
	}
	else {
		armed.attr('state', 'off');
		armed.text('O');
	}
	studioSaver();
});

async function studioRecord() {
	var studio = studioRetriever();
	mixer['time']['status'] = 'record';
	var constraints = { 'audio': true };
	if (mixer['admin']['video_toggle'] == 'on') {
		constraints['video'] = true;
	}
	var inputStream = await navigator.mediaDevices.getUserMedia(constraints);

	studioTime('start');
	$.each(studio, function(i,v) {
		if (v.armed) {
			if (v.armed.state == 'rec') {
				if (!mixer[i]['media']) { mixer[i]['media'] = {}; }
				var rec = { startTime: mixer['time']['position'] };

				mixer[i]['media']['in'] = inputStream;
				rec['track'] = new MediaRecorder(mixer[i]['media']['in']);


				if (!mixer[i]['media']['rec']) {
					mixer[i]['media']['rec'] = [];
					mixer[i]['media']['rec'][0] = rec;
				}
				else {
					mixer[i]['media']['rec'][mixer[i]['media']['rec'].length] = rec;
				}
				var count = mixer[i]['media']['rec'].length - 1;
				if (!mixer[i]['media']['out']) { mixer[i]['media']['out'] = []; }
				if (!mixer[i]['media']['out'][count]) { mixer[i]['media']['out'][count] = {}; }
				if (!mixer[i]['media']['actx']) { mixer[i]['media']['actx'] = []; }
				if (!mixer[i]['media']['actx'][count]) { mixer[i]['media']['actx'][count] = {}; }
				if (!mixer[i]['media']['actx'][count]['ctx']) { mixer[i]['media']['actx'][count]['ctx'] = { 'state': 'uninitialized', pcmData: [] }; }
				mixer[i]['media']['actx'][count]['ctx'] = new AudioContext();
				var c = mixer[i]['media']['actx'][count]['ctx'];
				mixer[i]['media']['actx'][count]['track'] = c.createMediaStreamSource(inputStream);
		//		mixer[i]['media']['actx'][ir]['track'].connect(c.destination);
				mixer[i]['media']['actx'][count]['panner'] = new StereoPannerNode(c, { pan: mixer[i]['pan']});
				mixer[i]['media']['actx'][count]['analyser'] = c.createAnalyser();
				mixer[i]['media']['actx'][count]['track'].connect(mixer[i]['media']['actx'][count]['analyser']);//.connect(mixer[i]['media']['actx'][count]['panner']);
				const pcmData = new Float32Array(mixer[i]['media']['actx'][count]['analyser'].fftSize);
				//	console.log(pcmData);
				mixer[i]['media']['actx'][count]['pcmData'] = pcmData;

				var trackContainer = $('#studio_track_container');
				trackContainer.append('<video class="studio_video" startTime="' + mixer['time']['position'] + '" channel="' + i + '" id="studio_channel_' + i + '_' + count + '"></video>');
				if (mixer['admin']['video_toggle'] == 'on') {
					var v = document.getElementById('studio_video_monitor');
					v.srcObject = rec['track'].stream;
					v.muted = true;
				}

				mixer[i]['media']['out'][count]['track'] = document.getElementById('studio_channel_' + i + '_' + count);
				mixer[i]['media']['out'][count]['startTime'] = mixer['time']['position'];
				rec['track'].audioBitsPerSecond = 192000
				mixer[i]['media']['rec'][count]['track'].ondataavailable = (event) => { 
					var data = event.data;
					if (!mixer[i]['media']['aud']) { mixer[i]['media']['aud'] = []; }
					if (!mixer[i]['media']['aud'][count]) { mixer[i]['media']['aud'][count] = {}; }
					mixer[i]['media']['out'][count]['data'] = data;
					mixer[i]['media']['out'][count]['encoding'] = data['type'];
					mixer[i]['media']['out'][count]['size'] = data['size'];
					mixer[i]['media']['aud'][count]['track'] = new Audio;
					var audioUrl = URL.createObjectURL(data);
					mixer[i]['media']['out'][count]['track'].src = audioUrl;
					mixer[i]['media']['out'][count]['status'] = 'stop';
				};
				mixer[i]['media']['rec'][count]['track'].start();
			}
		}
	});
	studioPlay('rec');
}

$(document).on('click', '#studio_play', function() {
	if (mixer['time']['status'] != 'record' && mixer['time']['status'] != 'play') {
		studioPlay('play');
		mixer['time']['status'] = 'play';
	}
});

async function studioPlay(mode) {
	var playTracks = [];

	if (mode != 'rec') {
		studioTime('start');
	}
	var studio = studioRetriever();
	$.each(studio, function(i,v) {
		if (v.armed) {
			if ((v.armed.state == 'rec' && mode == 'play') || v.armed.state == 'play') {

				if (mixer[i]['media']) { 
					if (mixer[i]['media']['out']) {
						$.each(mixer[i]['media']['out'],function(ir,vr) {
							vr['track'].currentTime = mixer['time']['position'];
							//vr['track'].play();
							vr['track'].volume = (studio[i]['volume'] / 100);
						});
					}
				}
			}
		}
	});
}

$(document).on('click', '#studio_stop', function() {
	studioStop();
	mixer['time']['status'] = 'stop';
});

async function studioStop() {
	var playTracks = [];

	if (mixer['time']['status'] == 'stop') {
		mixer['time']['position'] = 0;
	}

	studioTime('stop');

	var studio = studioRetriever();
	$.each(studio, function(i,v) {

		if (v.armed) {
			if (mixer[i]['media']) {
				if (mixer[i]['media']['rec'] && mixer['time']['status'] == 'record') {
					$.each(mixer[i]['media']['rec'], function(ir,vr) {
						console.log(vr['track']);
						if (vr['track'].state == 'recording') {
							vr['track'].stop();
							mixer[i]['media']['in'].getTracks().forEach(function(track) { console.log(track); track.stop(); });
						}
						vr['status'] = 'stop';
						mixer[i]['media']['out'][ir]['status'] = 'stop';
						mixer[i]['media']['out'][ir]['duration'] = mixer['time']['position'] - mixer[i]['media']['out'][ir]['startTime'] ;
					});

				}
				if (mixer[i]['media']['out']) {
					$.each(mixer[i]['media']['out'], function(ir,vr) {

						vr['status'] = 'stop';
						vr['track'].pause();
					//	vr['track'].play();
						if (mixer[i]['media']['actx'][ir]) {
						//	mixer[i]['media']['actx'][ir] = null;
						}
					});
				}

			}
		}
	});
	mixer['time']['status'] = 'stop';
}

function studioTime(command) {

	if (command == 'start') {
		mixer['time']['startTime'] = Date.now();
		mixer['time']['startTime'] = (mixer['time']['startTime'] - (mixer['time']['position'] * 1000));
		var svm = document.getElementById('studio_video_monitor');
		mixer['time']['interval'] = setInterval(function() {
			var now = Date.now();
			mixer['time']['position'] = ((now - mixer['time']['startTime']) / 1000);
			
			$('#studio_time_display').html(numeral(mixer['time']['position']).format('00.000'));
			if (mixer['time']['status'] == 'record' && mixer['time']['position'] > mixer['time']['duration']) {
				mixer['time']['duration'] = mixer['time']['position'];
				$('#studio_time_duration').html(numeral(mixer['time']['duration']).format('00.000'));
			}
			else if (mixer['time']['status'] == 'play' && mixer['time']['position'] > mixer['time']['duration']) {
				studioStop();
				clearInterval(mixer['time']['interval']);
				console.log(mixer['time']['loop']);
				if (mixer['time']['loop'] == 'on') {
					mixer['time']['position'] = 0;
					studioPlay();
					mixer['time']['status'] = 'play';
				}
				else {
					clearInterval(mixer['time']['interval']);
					mixer['time']['status'] = 'stop';
					studioStop();
					return;
				}
			}
			$.each(mixer, function(i,v) {

				if (mixer[i]['media'] && mixer[i]['armed']['state'] != 'off') {
					var canvas = document.getElementById('track_view_' + i);
					var metreCanvas = document.getElementById('channel_volume_metre_' + i);
					var mctx = metreCanvas.getContext('2d');
					var ctx = canvas.getContext('2d');
					$.each(mixer[i]['media']['out'], function(ir,vr) {

						if (mixer[i]['media']['in'].active == true) {
							let sum = 0.0;
							if (eval(typeof mixer[i]['media']['actx'][ir]['analyser'].getFloatTimeDomainData == 'function')) {
								mixer[i]['media']['actx'][ir]['analyser'].getFloatTimeDomainData(mixer[i]['media']['actx'][ir]['pcmData']);
								for (const amplitude of mixer[i]['media']['actx'][ir]['pcmData']) {
									sum += amplitude * amplitude;
								}
								var metreValue = Math.sqrt(sum / mixer[i]['media']['actx'][ir]['pcmData'].length) * 3;
							//	console.log(metreValue + ' '  + ((metreValue * metreCanvas.height) - metreCanvas.height));
								mctx.beginPath();
							//	if (mixer[i]['media']['actx'][ir]['lastClear'] + 500 <= now) {
									mctx.clearRect(0,0,metreCanvas.width,metreCanvas.height);
									mctx.fill();
									mixer[i]['media']['actx'][ir]['lastClear'] = now;
							//	}
								mctx.fillStyle = "green";
								mctx.fillRect(0, Math.abs((metreValue * metreCanvas.height) - metreCanvas.height), metreCanvas.width,  metreCanvas.height);
								mctx.fill();
								if (mixer[i]['media']['actx'][ir]['panner']['pan']) {
									mixer[i]['media']['actx'][ir]['panner'].pan.value = mixer[i]['pan'];
								}
							}

						}
						else if (vr['startTime'] <= mixer['time']['position'] && (vr['status'] != 'record' && vr['status'] != 'play')) {
							

							if (!mixer[i]['media']['actx'] && vr['status']) { mixer[i]['media']['actx'] = []; console.log('new track'); }
							if (!mixer[i]['media']['actx'][ir]) { mixer[i]['media']['actx'][ir] = {}; console.log('new take'); }
							if (!mixer[i]['media']['actx'][ir]['ctx']) { mixer[i]['media']['actx'][ir]['ctx'] = { state: 'uninitialized' }; console.log('new take'); }
							if (mixer[i]['media']['actx'][ir]['ctx'].state == 'uninitialized') { console.log('new state');
								vr['init'] = true;
								mixer[i]['media']['actx'][ir]['ctx'] = new AudioContext();
								var c = mixer[i]['media']['actx'][ir]['ctx'];
								mixer[i]['media']['actx'][ir]['track'] = c.createMediaElementSource(vr['track']);
								mixer[i]['media']['actx'][ir]['track'].connect(c.destination);
								mixer[i]['media']['actx'][ir]['panner'] = new StereoPannerNode(c, { pan: mixer[i]['pan']});
								mixer[i]['media']['actx'][ir]['analyser'] = c.createAnalyser();
							//	console.log(mixer[i]['media']['actx'][ir]['analyser']);
								const pcmData = new Float32Array(mixer[i]['media']['actx'][ir]['analyser'].fftSize);
							//	console.log(pcmData);
								mixer[i]['media']['actx'][ir]['pcmData'] = pcmData;
								mixer[i]['media']['actx'][ir]['track'].connect(mixer[i]['media']['actx'][ir]['panner']).connect(mixer[i]['media']['actx'][ir]['analyser']).connect(c.destination);
								var now = Date.now();
								mixer['time']['position'] = ((now - mixer['time']['startTime']) / 1000);
								console.log('added the panning and whatnot');
								mixer[i]['media']['actx'][ir]['lastClear'] = now;
							}

							vr['track'].currentTime = mixer['time']['position'] - vr['startTime'];
							vr['track'].play();
							vr['status'] = 'play';
							svm.src = vr['track'].src;
							svm.play();
						}
					//	else { vr['init'] = false; }

						if (mixer[i]['media']['actx'][ir] && vr['status'] != 'record') {
							if (vr['init'] == true) {
								//console.log(vr['track']);
								if (vr['track']) {
									vr['track'].volume = (mixer[i]['volume'] / 100);
									
									if (mixer[i]['media']['actx'][ir]['panner']['pan']) {
										mixer[i]['media']['actx'][ir]['panner'].pan.value = mixer[i]['pan'];
									}
									let sum = 0.0;
									if (typeof mixer[i]['media']['actx'][ir]['analyser'].getFloatTimeDomainData == 'function') {
										mixer[i]['media']['actx'][ir]['analyser'].getFloatTimeDomainData(mixer[i]['media']['actx'][ir]['pcmData']);
										for (const amplitude of mixer[i]['media']['actx'][ir]['pcmData']) {
											sum += amplitude * amplitude;
										}
										var metreValue = Math.sqrt(sum / mixer[i]['media']['actx'][ir]['pcmData'].length) * 3;
									//	console.log(metreValue + ' '  + ((metreValue * metreCanvas.height) - metreCanvas.height));
										mctx.beginPath();
									//	if (mixer[i]['media']['actx'][ir]['lastClear'] + 500 <= now) {
											mctx.clearRect(0,0,metreCanvas.width,metreCanvas.height);
											mctx.fill();
											mixer[i]['media']['actx'][ir]['lastClear'] = now;
									//	}
										mctx.fillStyle = "green";
										mctx.fillRect(0, Math.abs((metreValue * metreCanvas.height) - metreCanvas.height), metreCanvas.width,  metreCanvas.height);
										mctx.fill();
									}
								}
						
							}


						}



						ctx.beginPath();

						ctx.fillStyle = 'red';
						ctx.fillRect((vr['startTime'] / mixer['time']['duration'] * canvas.width), 0, ((vr['duration'] / mixer['time']['duration'] * canvas.width )), canvas.height);
						ctx.lineWidth = 10;
						var positionLine = (mixer['time']['position'] / mixer['time']['duration'] * canvas.width);
						ctx.moveTo(positionLine, 0);
						ctx.lineTo(positionLine, canvas.height);
						ctx.strokeStyle = 'black';
						ctx.stroke();
						ctx.fill();
					});

					
				}

			});
		},10);

	}
	else if (command == 'stop') {

		clearInterval(mixer['time']['interval']);
		$('#studio_time_display').html(numeral(mixer['time']['position']).format('00.000'));
	}
	else {
		$('#studio_time_display').html(numeral(mixer['time']['position']).format('00.000'));
	}
	if (!mixer['time']['status']) { mixer['time']['status'] = 'stop'; }
	var button = $('#studio_' + mixer['time']['status'] );

	$.each(mixer['buttons'], function(i,v) {
		clearInterval(v['interval']);
		$('#studio_' + i).css({'background-color': v.obg });
	});
	mixer['buttons'][mixer['time']['status']]['interval'] = setInterval(function() {
		button.css({'background-color': mixer['buttons'][mixer['time']['status']]['bg'] });
		var obg = mixer['buttons'][mixer['time']['status']]['obg'];

		setTimeout(function() {
			button.css({'background-color': obg });

		},500);
	},1000);
}

$(document).on('click', '#studio_metronome', function() {
	var met = $(this);
	if (met.attr('armed') == 'yes') {
		met.attr('armed','no');
		met.css({'background-color': met.attr('obg')});
	}
	else {
		met.attr('armed', 'yes');
		met.attr('obg', met.css('background-color'));
		met.css({'background-color': 'red'});
	}
});


$(document).on('click', '#studio_save', function() {
	studioSave();
});


function studioSave() {
var app = 'studio';
	var now = Date.now();
	var name = $('#studio').attr('name');
	var uuid = $('#studio').attr('uuid');
	if (name) {

		var formData = new FormData();
		var studio = studioRetriever();
		formData.append('app', name);
		formData.append('name', name);
		formData.append('duration', mixer['time']['duration']);
		formData.append('timestamp', now);
		formData.append('type', 'studio');
		formData.append('uuid', uuid );

		$.each(mixer, function(i,v) {

			if (mixer[i]['media']) {
				$.each(mixer[i]['media']['out'], function(ir,vr) {
					var filename = app + '_' + now + '_' + i + '_' + ir + '.webm';

					if (vr.data && vr.data.size && vr.data.type) {
						formData.append('blob', vr.data, filename);
					}

				});
			}
		});
		var jStudio = JSON.stringify(studio);
		formData.append('studio', jStudio);
		$.ajax({
			url: '/manager/studio/save',
			type: 'POST',
			data: formData,
			success: function (response) {
				$('#studio').attr('uuid', response.uuid);
				$('#studio').attr('name', response.app);
				var studio = JSON.stringify(response.studio);
				localStorage.setItem('studio', studio);
				continent_record({'uuid':response['uuid'], 'app':response['app'],'timestamp':response['timestamp']});
				studioRetriever();
			},
			cache: false,
			contentType: false,
			processData: false
		});
	}
	else {
		$('#studio_name').attr('type','text').focus();
	}
}

$(document).on('click', '#song_delete', function() {
	var uuid = $('#studio').attr('uuid');
	var app = $('#studio').attr('name');
	var a = $(this);

	if (a.armed == 'yes') {
		$.ajax({
			url: '/manager/studio/delete',
			type: 'POST',
			data: { uuid: uuid, app: app },
			success: function(response) {
				
			}
		});
	}
	else {
		a.attr('armed', 'yes');
		var bgcolor = a.css('background-color');
		a.css({'background-color': 'red' });
		setTimeout(function() {
			a.css({'background-color': bgcolor });
			a.attr('armed', 'no');			
		},2000);
	}
});

$(document).on('change', '#studio_song_select', function() {
	var uuid = $(this).val();
	if (uuid != 'none') {
		studioLoad(uuid);
	}
});
function studioLoad(uuid) {
	var buttons = mixer['buttons'];
	studioStop();
	$.ajax({ 
		url: '/manager/studio/load',
		type: 'GET',
		data: { uuid: uuid },
		success: function(response) {
			console.log(response);
			$('#studio_song_select').val(response['uuid']);
			mixer['time'] = response.studio['admin']['time'];
			console.log(response.studio);
			console.log(mixer['time']['loop']);
			mixer['time']['status'] = 'stop';
			$('#studio_video_toggle').attr('toggled', mixer['admin']['video_toggle']);
			if (mixer['time']['loop'] == 'on') {
				$('#studio_loop').attr('enabled','on').attr('obg', 'rgb(211, 211, 211)').css({'background-color':'red'});
			}
			else {
				$('#studio_loop').attr('enabled', 'off').css({'background-color':'rgb(211, 211, 211)'});
			}
			$('#studio').attr('name', response['app']);
			$('#studio').attr('uuid', response['uuid']);
			$('#studio_time_display').html(numeral(mixer['time']['position']).format('00.000'));
			$.each(response.studio, function(i,v) {
				if (v['mixer']) {
					$('#studio_channel_container_' + i ).html('');
					if (!i.match('[a-zA-Z]')) {
						mixer[i]['media'] = v['mixer'];
					}
					$.each(v['mixer']['out'], function(ir, vr) {
						var trackContainer = $('#studio_track_container');

						trackContainer.append('<video class="studio_video" startTime="' + vr['startTime'] + '" type="' + vr['encoding'] + '" channel="' + i + '" id="studio_channel_' + i + '_' + ir + '"></video>');
						$('#studio_channel_' + i + '_' + ir).attr('src', vr['src']);
						if (!mixer[i]['media']['aud']) { mixer[i]['media']['aud'] = []; }
						if (!mixer[i]['media']['aud'][ir]) { mixer[i]['media']['aud'][ir] = {}; }
						mixer[i]['media']['actx'][ir]['ctx'] = { 'state': 'uninitialized', pcmData: [] } ; 
						mixer[i]['media']['aud'][ir]['track'] = new Audio;

						mixer[i]['media']['out'][ir]['track'] = document.getElementById('studio_channel_' + i + '_' + ir);
					});
				}
			});
			var studio = JSON.stringify(response.studio);
			localStorage.setItem('studio', studio);
			studioRetriever();
			mixer['buttons'] = buttons;
		}
	});


}

$(document).on('change', '#studio_name', function() {
	$('#studio').attr('name', $(this).val());
	$('#studio_name').hide();
});

$(document).on('blur', '#studio_name', function() {
	$('#studio_name').hide();
});

$(document).on('click', '#studio_mark', function() {
	var seen = undefined;
	for (n = 0; n <= mixer['time']['marks'].length; n++) {
		if (mixer['time']['position'] == mixer['time']['marks'][n]) {
			seen = n;
		}
	}
	if (seen == undefined) {
		mixer['time']['marks'].push(mixer['time']['position']);
		mixer['time']['marks'] = mixer['time']['marks'].sort(function(a,b) {
			return a - b;
		});
	}
	else {
		mixer['time']['marks'].splice(seen,1);
		console.log(seen);
		console.log(mixer['time']['marks']);
	}
});

$(document).on('click', '#studio_prev, #studio_next', function() {
	console.log('moving');
	var potentialPosition = 0;
	if ($(this).hasClass('prev')) {
		console.log('previous');
		for (var n = 0; n <= mixer['time']['marks'].length; n++) {
			if (mixer['time']['position'] > mixer['time']['marks'][n]) {
				potentialPosition = mixer['time']['marks'][n];
			}
		}
	}
	else {
		potentialPosition = mixer['time']['duration'];
		for (var n = mixer['time']['marks'].length; n >= 0; n--) {
			if (mixer['time']['position'] < mixer['time']['marks'][n]) {
				potentialPosition = mixer['time']['marks'][n];
			}
		}
	}
	mixer['time']['position'] = potentialPosition;
	$('#studio_time_display').html(numeral(mixer['time']['position']).format('00.000'));
});