/* –– Client settings ––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

var masterServerAddress = 'localhost';
var masterServerPort = 1337;
var masterServerName = 'Magic Planet';
var searchForOtherServers = true;
var searchForOtherServersAtStart = false;

/* –– End ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* –– Client callback functions ––––––––––––––––––––––––––––––––––––––––––––– */

function serverListUpdated() {
  // Add code here to update client UI when new servers are found
  document.getElementById('serversDropdownList').innerHTML = '';
  for(var i = 0; i < getNumberOfServers(); i++) {
    document.getElementById('serversDropdownList').innerHTML += ('<li><a href="#" onclick="setSelectedServerIndex(' + i + ')">' + getServerName(i) + '</a></li>');
  }
}

function errorMessageReceived(messageText) {
  // Add code here to display error messages in your client UI
  // Supplied argument messageText will be a String
}

function refreshUI() {
  // Add code here to be executed when the body HTML has finished loading
  // Can also be called by client code
  serverListUpdated();
}

/* –– End ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */




/* –– DO NOT EDIT BELOW THIS LINE ––––––––––––––––––––––––––––––––––––––––––– */

// Client version
var VERSION = '0.7.5';

// Instantiate server array
var availableServers = [{ serverName: masterServerName, serverAddress: getMasterServerAddress() }];
var selectedServerIndex = 0;
if(searchForOtherServersAtStart) {
  refreshServersAsync();
}

// Helper function to insert new server information into server array
function addServer(newServerName, newServerAddress) {
  availableServers.push({ serverName: newServerName, serverAddress: newServerAddress });
}

// Helper function that returns the number a available servers
function getNumberOfServers() {
  return availableServers.length;
}

// Helper function that returns the name of the server at the provided index
function getServerName(index) {
  return availableServers[index].serverName;
}

// Helper function that returns the address of the server at the provided index
function getServerAddress(index) {
  return availableServers[index].serverAddress;
}

// Helper function to set the selected server to the provided index
function setSelectedServerIndex(index) {
  selectedServerIndex = index;
}

// Helper function that returns the currently selected server address and port
function getSelectedServerAddress() {
  return availableServers[selectedServerIndex].serverAddress;
}

// Function (synchronous) to request a list of peers from the master server
function refreshServers() {
  availableServers = [];
  addServer(masterServerName, getMasterServerAddress());
  selectedServerIndex = 0;
  if(searchForOtherServers) {
    var fetchedServerInfo = postJSONToSJAXServer(JSON.stringify({ requestType: 'GET' }), (getSelectedServerAddress() + '/api/json/servers'));
    if(fetchedServerInfo.responseType != 'FAIL') {
      availableServers[0].serverName = fetchedServerInfo.serverName;
      for(var i = 0; i < fetchedServerInfo.servicePeers.length; i++) {
        addServer(fetchedServerInfo.servicePeers[i].serverName, fetchedServerInfo.servicePeers[i].serverAddress);
      }
    }
  }
  serverListUpdated();
}

// Function (asynchronous) to request a list of peers from the master server
function refreshServersAsync() {
  availableServers = [];
  addServer(masterServerName, getMasterServerAddress());
  selectedServerIndex = 0;
  if(searchForOtherServers) {
    postJSONToAJAXServer(JSON.stringify({ requestType: 'GET' }), (getSelectedServerAddress() + '/api/json/servers'), refreshServersAsyncCallback);
  }
}

// Callback function for asynchronous response from refreshServersAsync()
function refreshServersAsyncCallback(fetchedServerInfo) {
  if(fetchedServerInfo.responseType != 'FAIL') {
    availableServers[0].serverName = fetchedServerInfo.serverName;
    for(var i = 0; i < fetchedServerInfo.servicePeers.length; i++) {
      addServer(fetchedServerInfo.servicePeers[i].serverName, fetchedServerInfo.servicePeers[i].serverAddress);
    }
  }
  serverListUpdated();
}

// Instantiate StoryTeller pseudo object
var StoryTeller = new storyControlWebObject();

// Define properties with getter/setter functions for StoryTeller pseudo object
Object.defineProperty(StoryTeller, 'AutoAdvance', { set: function(newValue) {
  postJSONToSJAXServer(JSON.stringify({ requestType: 'SET', requestValue: newValue }), (getSelectedServerAddress() + '/api/json/storyteller/autoadvance'));
}, get: function() {
  return (postJSONToSJAXServer(JSON.stringify({ requestType: 'GET' }), (getSelectedServerAddress() + '/api/json/storyteller/autoadvance'))).responseValue;
} });
Object.defineProperty(StoryTeller, 'Chapter', { set: function(newValue) {
  postJSONToSJAXServer(JSON.stringify({ requestType: 'SET', requestValue: newValue }), (getSelectedServerAddress() + '/api/json/storyteller/chapter'));
}, get: function() {
  return (postJSONToSJAXServer(JSON.stringify({ requestType: 'GET' }), (getSelectedServerAddress() + '/api/json/storyteller/chapter'))).responseValue;
} });
Object.defineProperty(StoryTeller, 'ChapterName', { set: function(newValue) {
  postJSONToSJAXServer(JSON.stringify({ requestType: 'SET', requestValue: newValue }), (getSelectedServerAddress() + '/api/json/storyteller/chaptername'));
}, get: function() {
  return (postJSONToSJAXServer(JSON.stringify({ requestType: 'GET' }), (getSelectedServerAddress() + '/api/json/storyteller/chaptername'))).responseValue;
} });
Object.defineProperty(StoryTeller, 'FlipPoles', { set: function(newValue) {
  postJSONToSJAXServer(JSON.stringify({ requestType: 'SET', requestValue: newValue }), (getSelectedServerAddress() + '/api/json/storyteller/flippoles'));
}, get: function() {
  return (postJSONToSJAXServer(JSON.stringify({ requestType: 'GET' }), (getSelectedServerAddress() + '/api/json/storyteller/flippoles'))).responseValue;
} });
Object.defineProperty(StoryTeller, 'Frame', { set: function(newValue) {
  postJSONToSJAXServer(JSON.stringify({ requestType: 'SET', requestValue: newValue }), (getSelectedServerAddress() + '/api/json/storyteller/frame'));
}, get: function() {
  return (postJSONToSJAXServer(JSON.stringify({ requestType: 'GET' }), (getSelectedServerAddress() + '/api/json/storyteller/frame'))).responseValue;
} });

Object.defineProperty(StoryTeller, 'FrameRate', { set: function(newValue) {
  postJSONToSJAXServer(JSON.stringify({ requestType: 'SET', requestValue: newValue }), (getSelectedServerAddress() + '/api/json/storyteller/framerate'));
}, get: function() {
  return (postJSONToSJAXServer(JSON.stringify({ requestType: 'GET' }), (getSelectedServerAddress() + '/api/json/storyteller/framerate'))).responseValue;
} });
Object.defineProperty(StoryTeller, 'Page', { set: function(newValue) {
  postJSONToSJAXServer(JSON.stringify({ requestType: 'SET', requestValue: newValue }), (getSelectedServerAddress() + '/api/json/storyteller/page'));
}, get: function() {
  return (postJSONToSJAXServer(JSON.stringify({ requestType: 'GET' }), (getSelectedServerAddress() + '/api/json/storyteller/page'))).responseValue;
} });
Object.defineProperty(StoryTeller, 'PageLatitudeOfInterest', { set: function(newValue) {
  postJSONToSJAXServer(JSON.stringify({ requestType: 'SET', requestValue: newValue }), (getSelectedServerAddress() + '/api/json/storyteller/pagelatitudeofinterest'));
}, get: function() {
  return (postJSONToSJAXServer(JSON.stringify({ requestType: 'GET' }), (getSelectedServerAddress() + '/api/json/storyteller/pagelatitudeofinterest'))).responseValue;
} });
Object.defineProperty(StoryTeller, 'PageLongitudeOfInterest', { set: function(newValue) {
  postJSONToSJAXServer(JSON.stringify({ requestType: 'SET', requestValue: newValue }), (getSelectedServerAddress() + '/api/json/storyteller/pagelongitudeofinterest'));
}, get: function() {
  return (postJSONToSJAXServer(JSON.stringify({ requestType: 'GET' }), (getSelectedServerAddress() + '/api/json/storyteller/pagelongitudeofinterest'))).responseValue;
} });
Object.defineProperty(StoryTeller, 'PageName', { set: function(newValue) {
  postJSONToSJAXServer(JSON.stringify({ requestType: 'SET', requestValue: newValue }), (getSelectedServerAddress() + '/api/json/storyteller/pagename'));
}, get: function() {
  return (postJSONToSJAXServer(JSON.stringify({ requestType: 'GET' }), (getSelectedServerAddress() + '/api/json/storyteller/pagename'))).responseValue;
} });
Object.defineProperty(StoryTeller, 'PlayAudio', { set: function(newValue) {
  postJSONToSJAXServer(JSON.stringify({ requestType: 'SET', requestValue: newValue }), (getSelectedServerAddress() + '/api/json/storyteller/playaudio'));
}, get: function() {
  return (postJSONToSJAXServer(JSON.stringify({ requestType: 'GET' }), (getSelectedServerAddress() + '/api/json/storyteller/playaudio'))).responseValue;
} });
Object.defineProperty(StoryTeller, 'PoleLatitude', { set: function(newValue) {
  postJSONToSJAXServer(JSON.stringify({ requestType: 'SET', requestValue: newValue }), (getSelectedServerAddress() + '/api/json/storyteller/polelatitude'));
}, get: function() {
  return (postJSONToSJAXServer(JSON.stringify({ requestType: 'GET' }), (getSelectedServerAddress() + '/api/json/storyteller/polelatitude'))).responseValue;
} });
Object.defineProperty(StoryTeller, 'PoleLongitude', { set: function(newValue) {
  postJSONToSJAXServer(JSON.stringify({ requestType: 'SET', requestValue: newValue }), (getSelectedServerAddress() + '/api/json/storyteller/polelongitude'));
}, get: function() {
  return (postJSONToSJAXServer(JSON.stringify({ requestType: 'GET' }), (getSelectedServerAddress() + '/api/json/storyteller/polelongitude'))).responseValue;
} });
Object.defineProperty(StoryTeller, 'RotateClockwise', { set: function(newValue) {
  postJSONToSJAXServer(JSON.stringify({ requestType: 'SET', requestValue: newValue }), (getSelectedServerAddress() + '/api/json/storyteller/rotateclockwise'));
}, get: function() {
  return (postJSONToSJAXServer(JSON.stringify({ requestType: 'GET' }), (getSelectedServerAddress() + '/api/json/storyteller/rotateclockwise'))).responseValue;
} });
Object.defineProperty(StoryTeller, 'Rotating', { set: function(newValue) {
  postJSONToSJAXServer(JSON.stringify({ requestType: 'SET', requestValue: newValue }), (getSelectedServerAddress() + '/api/json/storyteller/rotating'));
}, get: function() {
  return (postJSONToSJAXServer(JSON.stringify({ requestType: 'GET' }), (getSelectedServerAddress() + '/api/json/storyteller/rotating'))).responseValue;
} });
Object.defineProperty(StoryTeller, 'RotationAngle', { set: function(newValue) {
  postJSONToSJAXServer(JSON.stringify({ requestType: 'SET', requestValue: newValue }), (getSelectedServerAddress() + '/api/json/storyteller/rotationangle'));
}, get: function() {
  return (postJSONToSJAXServer(JSON.stringify({ requestType: 'GET' }), (getSelectedServerAddress() + '/api/json/storyteller/rotationangle'))).responseValue;
} });
Object.defineProperty(StoryTeller, 'RotationRate', { set: function(newValue) {
  postJSONToSJAXServer(JSON.stringify({ requestType: 'SET', requestValue: newValue }), (getSelectedServerAddress() + '/api/json/storyteller/rotationrate'));
}, get: function() {
  return (postJSONToSJAXServer(JSON.stringify({ requestType: 'GET' }), (getSelectedServerAddress() + '/api/json/storyteller/rotationrate'))).responseValue;
} });
Object.defineProperty(StoryTeller, 'ShowContent', { set: function(newValue) {
  postJSONToSJAXServer(JSON.stringify({ requestType: 'SET', requestValue: newValue }), (getSelectedServerAddress() + '/api/json/storyteller/showcontent'));
}, get: function() {
  return (postJSONToSJAXServer(JSON.stringify({ requestType: 'GET' }), (getSelectedServerAddress() + '/api/json/storyteller/showcontent'))).responseValue;
} });
Object.defineProperty(StoryTeller, 'Story', { set: function(newValue) {
  postJSONToSJAXServer(JSON.stringify({ requestType: 'SET', requestValue: newValue }), (getSelectedServerAddress() + '/api/json/storyteller/story'));
}, get: function() {
  return (postJSONToSJAXServer(JSON.stringify({ requestType: 'GET' }), (getSelectedServerAddress() + '/api/json/storyteller/story'))).responseValue;
} });

// Constructor method for StoryTeller pseudo object
function storyControlWebObject() {
  this.ChapterAndPage = function(newValue1, newValue2) {
    postJSONToSJAXServer(JSON.stringify({ requestType: 'RMI', requestValue1: newValue1, requestValue2: newValue2 }), (getSelectedServerAddress() + '/api/json/storyteller/chapterandpage'));
	}
	this.ChapterAndPageNames = function(newValue1, newValue2) {
    postJSONToSJAXServer(JSON.stringify({ requestType: 'RMI', requestValue1: newValue1, requestValue2: newValue2 }), (getSelectedServerAddress() + '/api/json/storyteller/chapterandpagenames'));
	}
	this.FirstFrame = function() {
    postJSONToSJAXServer(JSON.stringify({ requestType: 'RMI' }), (getSelectedServerAddress() + '/api/json/storyteller/firstframe'));
	}
	this.LastFrame = function() {
    postJSONToSJAXServer(JSON.stringify({ requestType: 'RMI' }), (getSelectedServerAddress() + '/api/json/storyteller/lastframe'));
	}
	this.NextPage = function() {
    postJSONToSJAXServer(JSON.stringify({ requestType: 'RMI' }), (getSelectedServerAddress() + '/api/json/storyteller/nextpage'));
	}
	this.Pause = function() {
    postJSONToSJAXServer(JSON.stringify({ requestType: 'RMI' }), (getSelectedServerAddress() + '/api/json/storyteller/pause'));
	}
	this.Play = function() {
    postJSONToSJAXServer(JSON.stringify({ requestType: 'RMI' }), (getSelectedServerAddress() + '/api/json/storyteller/play'));
	}
	this.PreviousPage = function() {
    postJSONToSJAXServer(JSON.stringify({ requestType: 'RMI' }), (getSelectedServerAddress() + '/api/json/storyteller/previouspage'));
	}
	this.ReloadCurrentChapter = function() {
    postJSONToSJAXServer(JSON.stringify({ requestType: 'RMI' }), (getSelectedServerAddress() + '/api/json/storyteller/reloadcurrentchapter'));
	}
	this.ReloadCurrentPage = function() {
    postJSONToSJAXServer(JSON.stringify({ requestType: 'RMI' }), (getSelectedServerAddress() + '/api/json/storyteller/reloadcurrentpage'));
	}
	this.RotateToViewer = function() {
    postJSONToSJAXServer(JSON.stringify({ requestType: 'RMI' }), (getSelectedServerAddress() + '/api/json/storyteller/rotatetoviewer'));
	}
	this.SingleStep = function() {
    postJSONToSJAXServer(JSON.stringify({ requestType: 'RMI' }), (getSelectedServerAddress() + '/api/json/storyteller/singlestep'));
	}
}

// Function to create a synchronous JSON transaction
function postJSONToSJAXServer(messageJSON, serverURI) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', checkProtocol(serverURI), false);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.send(messageJSON);
  var xhrResponse = JSON.parse(xhr.responseText);
  if(xhrResponse.responseType == 'SUCCESS') {
    return xhrResponse;
  }
  else {
    errorMessageReceived('Cannot connect to the selected server');
    return { responseType: 'FAIL', responseValue: '' };
  }
}

// Function to create an asynchronous JSON transaction
function postJSONToAJAXServer(messageJSON, serverURI, callbackFunction) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
      var xhrResponse = JSON.parse(xhr.responseText);
      if(xhrResponse.responseType == 'SUCCESS') {
        callbackFunction(xhrResponse);
      }
      else {
        errorMessageReceived('Cannot connect to the selected server');
        callbackFunction({ responseType: 'FAIL', responseValue: '' });
      }
    }
    else {
      errorMessageReceived('Cannot connect to the selected server');
      callbackFunction({ responseType: 'FAIL', responseValue: '' });
    }
  }
  xhr.open('POST', checkProtocol(serverURI), true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.send(messageJSON);
}

// Function to build master server address
function getMasterServerAddress() {
  return (masterServerAddress + ':' + masterServerPort)
}

// Function to check and prepend URI protocol
function checkProtocol(testURI) {
  if(testURI.slice(0, 6) != 'http://') {
    return ('http://' + testURI);
  }
  else {
    return testURI;
  }
}

/* –– End ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
 this is my MagicPlanetWebClient.js now the error is this : OST http://localhost:1337/api/json/storyteller/rotating net::ERR_CONNECTION_REFUSED
MagicPlanetWebClient.js:264 Uncaught (in promise) NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'http://localhost:1337/api/json/storyteller/rotating'.
    at postJSONToSJAXServer (MagicPlanetWebClient.js:264:7)
    at storyControlWebObject.set (MagicPlanetWebClient.js:194:3)
    at executeSelection (videoPlayer.js:112:24)
    at videoButton.onclick (videoPlayer.js:189:33)
postJSONToSJAXServer	@	MagicPlanetWebClient.js:264
set	@	MagicPlanetWebClient.js:194
executeSelection	@	videoPlayer.js:112
videoButton.onclick	@	videoPlayer.js:189 how to fix this