$('#obsScenes').empty();
$('#obsSources').empty();
$('#OBSConnecting').show();
$('#OBSNotConnected').hide();
obs.connect(url = 'ws://127.0.0.1:4455', obsStudioToken, identificationParams = {})
 .then(() => {
 obsStudioConnected = true;
 $('#OBSConnecting').hide();
 $('#OBSNotConnected').hide();
 $("#obs-connect-btn").removeClass("btn-info");
 $("#obs-connect-btn").addClass("btn-transparent-info");
 $("#obs-connect-btn").removeClass("spinner");
 $("#obs-connect-btn").addClass("pulse");
 $("#obs-connect-btn").prop("disabled", false);
 $("#obs-connect-btn").prop('title', 'connected to <br> OBS Studio');
 $('#obs-connect-btn').tooltip('dispose');
 $('#obs-connect-btn').tooltip();
 })
 .then(() => {
 return obs.call('GetSceneList');
 })
 .then(data => {
 var index = 0;
 var currentSceneIndex = 0;
 data.scenes.forEach(scene => {
 if (data.currentProgramSceneName == scene.sceneName) {
 currentSceneIndex = index;
 }
 $('#obsScenes').prepend(`<li class="nav-item mb-2" style="margin:0 !important;padding:0 !important;">
 <a id="scene_` + index + `" class="nav-link obstab btn btn-hover-transparent-info text-left sceneSwitch ` + ((data.currentProgramSceneName == scene.sceneName) ? 'active' : '') + `" data-scene="scene_` + index + `" data-toggle="tab" href="#sourcetab_` + index + `">
 <span class="nav-icon"></span>
 <span class="nav-text text-muted"><i class="la la-files-o"></i> ` + scene.sceneName + `</span>
 </a>
 </li>`);
 $('#obsSources').prepend(`<div id="sourcetab_` + index + `" class="tab-pane fade ` + ((data.currentProgramSceneName == scene.sceneName) ? 'active show' : '') + ` scene_` + index + ` obstabpane" role="tabpanel" aria-labelledby="scene_` + index + `">
 <div class="row">
 <div id="source_` + index + `" class="col-6 scroll undeadbot-scroll obsSourceScroll" data-height="500">
 <div class="card card-custom sources">
 <div id="sources_` + index + `" class="card-body sourcelist" style="padding-top:0 !important;">
 
 </div>
 </div>
 </div>
 <div id="device_` + index + `" class="col-6 scroll undeadbot-scroll obsDeviceScroll" data-height="500">
 <div class="card card-custom sources">
 <div id="devices_` + index + `" class="card-body devicelist" style="padding-top:0 !important;">
 
 </div>
 </div>
 </div>
 </div>
 </div>`);
 index += 1;
 });
 obs.call('GetSceneItemList', { sceneName: data.currentProgramSceneName }).then(data => {
 index = 0;
 data.sceneItems.forEach(source => {
 if (source.sceneItemEnabled) {
 $('#sources_' + currentSceneIndex).prepend(`<div class="d-flex align-items-center pt-3 pb-3">
 <div class="d-flex flex-column flex-grow-1 m-0 mx-4">
 <span class="text-muted mb-1"><i class="text-info la la-file-o"></i> ` + source.sourceName + `</span>
 </div>
 <button id="visable_` + source.sceneItemId + `" type="button" class="btn btn-icon btn-hover-transparent-info" data-resourceid='` + source.sceneItemId + `' style="min-width:38px;">
 <i class="font-size-h1 la la-eye visable` + source.sceneItemId + `"></i>
 </button>
 </div>`);
 } else {
 $('#sources_' + currentSceneIndex).prepend(`<div class="d-flex align-items-center pt-3 pb-3">
 <div class="d-flex flex-column flex-grow-1 m-0 mx-4">
 <span class="text-muted mb-1"><i class="text-info la la-file-o"></i> ` + source.sourceName + `</span>
 </div>
 <button id="visable_` + source.sceneItemId + `" type="button" class="btn btn-icon btn-hover-transparent-info" data-resourceid='` + source.sceneItemId + `' style="min-width:38px;">
 <i class="font-size-h1 la la-eye-slash visable` + source.sceneItemId + `"></i>
 </button>
 </div>`);
 }
 index += 1;
 });
 })
 obs.call('GetInputList', {}).then(data => {
 index = 0;
 data.inputs.forEach(input => {
 $('#devices_' + currentSceneIndex).append(`<div class="d-flex align-items-center">
 <div class="d-flex flex-column flex-grow-1 m-0 mx-4">
 <span class="text-muted mb-1"><i class="text-info la la-volume-up"></i> ` + input.inputName + `</span>
 </div>
 <button id="mute` + 0 + `" type="button" class="btn btn-icon btn-hover-transparent-info" data-id="` + index + `" style="min-width:38px;">
 <i class="font-size-h1 la la-volume-up mute` + index + `"></i>
 </button>
 </div>`);
 index += 1;
 });
 })
 })
 .catch(err => { // Promise convention dicates you have a catch on every chain.
 console.log(err);
 $("#obs-connect-btn").removeClass("btn-info");
 $("#obs-connect-btn").addClass("btn-transparent-info");
 $("#obs-connect-btn").removeClass("spinner");
 $("#obs-connect-btn").prop("disabled", false);
 $("#obs-connect-btn").prop('title', 'cannot connect to <br> OBS Studio <br>' + err.error);
 $('#obs-connect-btn').tooltip('dispose');
 $('#obs-connect-btn').tooltip();
 });
obs.on('SwitchScenes', data => {
 console.log(data);
});
// You must add this handler to avoid uncaught exceptions.
obs.on('error', err => {
 console.error('socket error:', err);
});