AddCss('/main.css');

let content, remoteVideoEl;
var getConferenceID = function() {
	return 'DDD'.replace(/D/g, ()=>1+(Math.random()*9|0));
};
const store = window.store = new Store({
	conference_id: getConferenceID(), // LUCID
	connection: false,
	webcamtypes: [
		{text: 'Left', value: 'Left', filter: 'RemoteUser'},
		{text: 'Center', value: 'Center', filter: 'OfficeUserLeft'},
		{text: 'Right', value: 'Right', filter: 'RemoteUser'},
	],

	guestPositions: [
		{text: '1', value: '1', left: '15%'},
		{text: '2', value: '2', left: '85%'}
	],

	userRoles: [
		{text: 'Remote Guest', value: 'RemoteUser', realValue: 'RemoteUser'},
		{text: 'Office Guest', value: 'OfficeUserLeft', realValue: 'OfficeUser'},
		/*{text: 'Office User Right', value: 'OfficeUserRight'},
		{text: 'Office User Left', value: 'OfficseUserLeft'},*/
	],

  tableComponentHeadlineText: 'Choose your role and seat'
});


const isConnected = new Store.Value.Boolean(false);
store.sub('connection', function(val) {
	isConnected.set(val);
});

var params = location.hash.replace('#/','')
	.split('&')
	.map((key, i)=>{
		var tokens = key.split('=')
		if(i === 0)
			tokens = ['id', tokens[0]];
		return tokens;
	})
	.reduce((store, [key, val])=>{
		store[decodeURIComponent(key)] = decodeURIComponent(val);
		return store;
	}, {});

if(params.id){
	store.set('conference_id', params.id);
	Screen.show( 'Conference', true );
}else{
	Screen.show( 'Main' );
}



/*
		canvasCtx.save();
		canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
		canvasCtx.drawImage(results.segmentationMask, 0, 0,
			canvasElement.width, canvasElement.height);

		// Only overwrite existing pixels.
		canvasCtx.globalCompositeOperation = 'source-in';
		canvasCtx.fillStyle = '#ffffff';
		canvasCtx.fillRect(0, 0, canvasElement.width, canvasElement.height);

		// Only overwrite missing pixels.
		canvasCtx.globalCompositeOperation = 'destination-atop';
		canvasCtx.drawImage(
			results.image, 0, 0, canvasElement.width, canvasElement.height);

		canvasCtx.restore();
	}
*/

