Merge pull request #24 from AAMasters/develop

Coss

Animation.js

@@ -108,6 +108,10 @@ function newAnimation () {
 
         clearBrowserCanvas()
 
+                /* Let reset the current chart that is on focus */
+
+        window.CHART_ON_FOCUS = ''
+
                 /* We loop through the callback functions collections and execute them all. */
 
         callBackFunctions.forEach(function (callBackFunction) {

Canvas.js

@@ -159,6 +159,7 @@ function newCanvas () {
 
                    /* Here we add all the functions that will be called during the animation cycle. */
 
+          animation.addCallBackFunction('Chart Space Background', thisObject.chartSpace.drawBackground, onFunctionAdded)
           animation.addCallBackFunction('Chart Space', thisObject.chartSpace.draw, onFunctionAdded)
           animation.addCallBackFunction('Floating Space', thisObject.floatingSpace.floatingLayer.physicsLoop, onFunctionAdded)
           animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded)

Globals.js

@@ -94,8 +94,14 @@ function convertTimePeriodToName(pTimePeriod) {
 
 window.AT_BREAKPOINT = false;
 
-const INITIAL_DEFAULT_MARKET = 2;       // This is the market that will be shown when loading the site for the first time.
-const DEFAULT_EXCHANGE = "Poloniex";
+const SUPPORTED_EXCHANGES = ["Poloniex", "Coss"];
+const SUPPORTED_MARKETS = [
+  {
+      assetA: "USDT",
+      assetB: "BTC",
+  }
+];
+const DEFAULT_EXCHANGE = "Coss";
 const DEFAULT_MARKET = {
     assetA: "USDT",
     assetB: "BTC",

Panels/ProductsPanel.js

@@ -11,14 +11,12 @@
 
    var container = newContainer()
 
-   container.name = 'Indicators and Algobots Product Panel'
    container.initialize()
 
    container.isDraggeable = true
    container.isWheelable = true
 
    thisObject.container = container
-   thisObject.container.frame.containerName = "Indicators and Algobots's Products"
 
    let isInitialized = false
    let productCards = []
@@ -31,9 +29,17 @@
    let lastY = 5
    let panelTabButton
 
+   let exchange
+   let market
+
    return thisObject
 
-   function initialize () {
+   function initialize (pExchange, pMarket) {
+     exchange = pExchange
+     market = pMarket
+
+     thisObject.container.name = exchange + ' ' + market.assetB + '/' + market.assetA + ' ' + 'Indicators'
+     thisObject.container.frame.containerName = thisObject.container.name
      thisObject.container.frame.width = UI_PANEL.WIDTH.LARGE
      thisObject.container.frame.height = viewPort.visibleArea.bottomLeft.y - viewPort.visibleArea.topLeft.y // UI_PANEL.HEIGHT.LARGE;
 
@@ -73,7 +79,7 @@
              productCard.bot = bot
              productCard.product = product
 
-             productCard.code = devTeam.codeName + '-' + bot.codeName + '-' + product.codeName
+             productCard.code = exchange + '-' + market.assetB + '/' + market.assetA + '-' + devTeam.codeName + '-' + bot.codeName + '-' + product.codeName
 
                         /* Initialize it */
 

PlottersManager.js

@@ -33,6 +33,8 @@ function newPlottersManager () {
   let initializationReady = false
 
   let productsPanel
+  let exchange
+  let market
 
   return thisObject
 
@@ -97,13 +99,15 @@ function newPlottersManager () {
     }
   }
 
-  function initialize (pProductsPanel, callBackFunction) {
+  function initialize (pProductsPanel, pExchange, pMarket, callBackFunction) {
     try {
       if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') }
 
             /* Remember the Products Panel */
 
       productsPanel = pProductsPanel
+      exchange = pExchange
+      market = pMarket
 
             /* Listen to the event of change of status */
 
@@ -222,7 +226,7 @@ function newPlottersManager () {
       let host = ecosystem.getHost(COMPETITION_HOST)
       let competition = ecosystem.getCompetition(host, COMPETITION)
 
-      storage.initialize(host, competition, DEFAULT_EXCHANGE, DEFAULT_MARKET, onCompetitionStorageInitialized)
+      storage.initialize(host, competition, exchange, market, onCompetitionStorageInitialized)
 
       function onCompetitionStorageInitialized (err) {
         try {
@@ -361,6 +365,11 @@ function newPlottersManager () {
       let okCounter = 0
       let failCounter = 0
 
+      if (loadingProductCards.length === 0) {
+        callBack(GLOBAL.DEFAULT_OK_RESPONSE)
+        return
+      }
+
       for (let i = 0; i < loadingProductCards.length; i++) {
                 /* For each one, we will initialize the associated plotter. */
 
@@ -461,7 +470,7 @@ function newPlottersManager () {
         }
       }
 
-      storage.initialize(pProductCard.devTeam, pProductCard.bot, pProductCard.product, DEFAULT_EXCHANGE, DEFAULT_MARKET, datetime, timePeriod, onProductStorageInitialized)
+      storage.initialize(pProductCard.devTeam, pProductCard.bot, pProductCard.product, exchange, market, datetime, timePeriod, onProductStorageInitialized)
 
       function onProductStorageInitialized (err) {
         try {
@@ -505,7 +514,7 @@ function newPlottersManager () {
           plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2
           plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2
 
-          plotter.initialize(storage, DEFAULT_EXCHANGE, DEFAULT_MARKET, datetime, timePeriod, onPlotterInizialized)
+          plotter.initialize(storage, exchange, market, datetime, timePeriod, onPlotterInizialized)
 
           function onPlotterInizialized () {
             try {
@@ -544,8 +553,9 @@ function newPlottersManager () {
                   panelCodeName: panelConfig.codeName
                 }
 
-                let plotterPanelHandle = canvas.panelsSpace.createNewPanel('Plotter Panel', parameters)
-                let plotterPanel = canvas.panelsSpace.getPanel(plotterPanelHandle)
+                let panelOwner = exchange + ' ' + market.assetB + '/' + market.assetA
+                let plotterPanelHandle = canvas.panelsSpace.createNewPanel('Plotter Panel', parameters, panelOwner)
+                let plotterPanel = canvas.panelsSpace.getPanel(plotterPanelHandle, panelOwner)
 
                                 /* Connect Panel to the Plotter via an Event. */
 

ProductCard.js

@@ -1,6 +1,13 @@
  function newProductCard () {
    const CONSOLE_LOG = false
 
+   const MODULE_NAME = 'Product Card'
+   const INFO_LOG = false
+   const ERROR_LOG = true
+   const INTENSIVE_LOG = false
+   const logger = newWebDebugLog()
+   logger.fileName = MODULE_NAME
+
    var thisObject = {
      container: undefined,
      draw: draw,
@@ -101,45 +108,47 @@
 
    function initialize () {
         /* Create this objects continer */
+     try {
+       if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') }
 
-     var container = newContainer()
-     container.name = 'Product Card ' + thisObject.code
-     container.initialize()
-     container.isDraggeable = false
-     container.isClickeable = true
-     thisObject.container = container
+       var container = newContainer()
+       container.name = 'Product Card ' + thisObject.code
+       container.initialize()
+       container.isDraggeable = false
+       container.isClickeable = true
+       thisObject.container = container
 
         /* Add information that will later be needed. */
 
-     let team = ecosystem.getTeam(thisObject.product.plotter.devTeam)
-     let plotter = ecosystem.getPlotter(team, thisObject.product.plotter.codeName)
-     let plotterModule = ecosystem.getPlotterModule(plotter, thisObject.product.plotter.moduleName)
+       let team = ecosystem.getTeam(thisObject.product.plotter.devTeam)
+       let plotter = ecosystem.getPlotter(team, thisObject.product.plotter.codeName)
+       let plotterModule = ecosystem.getPlotterModule(plotter, thisObject.product.plotter.moduleName)
 
-     thisObject.product.plotter.profilePicture = plotterModule.profilePicture
-     thisObject.product.plotter.module = plotterModule
+       thisObject.product.plotter.profilePicture = plotterModule.profilePicture
+       thisObject.product.plotter.module = plotterModule
 
         /* Lets set the basic dimensions of this thisObject. */
 
-     var position = {
-       x: 0,
-       y: 0
-     }
+       var position = {
+         x: 0,
+         y: 0
+       }
 
-     this.container.frame.position = position
-     this.container.frame.width = 330
-     this.container.frame.height = 100
+       this.container.frame.position = position
+       this.container.frame.width = 330
+       this.container.frame.height = 100
 
         /* We retrieve the locally stored status of the Product */
 
-     let storedValue = window.localStorage.getItem(thisObject.code)
+       let storedValue = window.localStorage.getItem(thisObject.code)
 
-     if (storedValue !== null) {
-       thisObject.status = storedValue
+       if (storedValue !== null) {
+         thisObject.status = storedValue
 
-       if (thisObject.status === PRODUCT_CARD_STATUS.ON) {
-         changeStatusTo(PRODUCT_CARD_STATUS.LOADING)
-       }
-     } else {
+         if (thisObject.status === PRODUCT_CARD_STATUS.ON) {
+           changeStatusTo(PRODUCT_CARD_STATUS.LOADING)
+         }
+       } else {
             /*
 
             This happens the first time the app is run on a new browser.
@@ -151,95 +160,98 @@
 
             */
 
-       const DEFAULT_ON_PRODUCT = 'AAMasters-AAOlivia-Candles'
+         const DEFAULT_ON_PRODUCT = 'AAMasters-AAOlivia-Candles'
 
-       if (thisObject.code === DEFAULT_ON_PRODUCT) {
-         changeStatusTo(PRODUCT_CARD_STATUS.LOADING)
-       } else {
-         changeStatusTo(PRODUCT_CARD_STATUS.OFF)
+         if (thisObject.code === DEFAULT_ON_PRODUCT) {
+           changeStatusTo(PRODUCT_CARD_STATUS.LOADING)
+         } else {
+           changeStatusTo(PRODUCT_CARD_STATUS.OFF)
+         }
        }
-     }
 
         /* Lets listen to our own events to react when we have a Mouse Click */
 
-     thisObject.container.eventHandler.listenToEvent('onMouseClick', buttonPressed)
+       thisObject.container.eventHandler.listenToEvent('onMouseClick', buttonPressed)
 
         /* WARNING THIS IS TEMPORARY CODE */
 
-     const LEGACY_TEAM = thisObject.devTeam.codeName
-     const REPO = thisObject.bot.repo
-     const PROFILE_PIC = thisObject.bot.profilePicture
+       const LEGACY_TEAM = thisObject.devTeam.codeName
+       const REPO = thisObject.bot.repo
+       const PROFILE_PIC = thisObject.bot.profilePicture
 
         /* The plotter banner, comes from the Legacy Location so far, no matter if the Team is at the Teams Modules or not. */
 
-     const PLOTTER_TEAM = thisObject.product.plotter.devTeam
-     const PLOTTER_REPO = thisObject.product.plotter.codeName
-     const PLOTTER_PROFILE_PIC = thisObject.product.plotter.profilePicture
+       const PLOTTER_TEAM = thisObject.product.plotter.devTeam
+       const PLOTTER_REPO = thisObject.product.plotter.codeName
+       const PLOTTER_PROFILE_PIC = thisObject.product.plotter.profilePicture
 
-     legacyPlotterBanner = new Image()
-     legacyPlotterBanner.onload = onLegacyPlotterBanner
+       legacyPlotterBanner = new Image()
+       legacyPlotterBanner.onload = onLegacyPlotterBanner
 
-     function onLegacyPlotterBanner () {
-       legacyPlotterBannerLoaded = true
-     }
+       function onLegacyPlotterBanner () {
+         legacyPlotterBannerLoaded = true
+       }
 
-     legacyPlotterBanner.src = window.canvasApp.urlPrefix + 'Images/' + PLOTTER_TEAM + '/' + PLOTTER_REPO + '/' + PLOTTER_PROFILE_PIC
+       legacyPlotterBanner.src = window.canvasApp.urlPrefix + 'Images/' + PLOTTER_TEAM + '/' + PLOTTER_REPO + '/' + PLOTTER_PROFILE_PIC
 
-     const TEAM = thisObject.devTeam.codeName.toLowerCase()
-     const BOT = thisObject.bot.codeName.toLowerCase()
+       const TEAM = thisObject.devTeam.codeName.toLowerCase()
+       const BOT = thisObject.bot.codeName.toLowerCase()
 
-     if (window.canvasApp.context.teamProfileImages.get(TEAM) === undefined) {
- // This means this Team is a Lecay Team, still not at any Module.
+       if (window.canvasApp.context.teamProfileImages.get(TEAM) === undefined) {
+         // This means this Team is a Lecay Team, still not at any Module.
 
             /*
             Here we will download the images still at the legacy storage.
             */
 
-       legacyTeamAvatar = new Image()
+         legacyTeamAvatar = new Image()
 
-       legacyTeamAvatar.onload = onLegacyImageLoad
+         legacyTeamAvatar.onload = onLegacyImageLoad
 
-       function onLegacyImageLoad () {
-         legacyTeamAvatarLoaded = true
-       }
+         function onLegacyImageLoad () {
+           legacyTeamAvatarLoaded = true
+         }
 
-       legacyTeamAvatar.src = window.canvasApp.urlPrefix + 'Images/' + LEGACY_TEAM + '/' + LEGACY_TEAM + '.png'
+         legacyTeamAvatar.src = window.canvasApp.urlPrefix + 'Images/' + LEGACY_TEAM + '/' + LEGACY_TEAM + '.png'
 
-       legacyBotAvatar = new Image()
-       legacyBotAvatar.onload = onLegacyImageLoadBot
+         legacyBotAvatar = new Image()
+         legacyBotAvatar.onload = onLegacyImageLoadBot
 
-       function onLegacyImageLoadBot () {
-         legacyBotAvatarLoaded = true
-         thisObject.bot.avatar = legacyBotAvatar
-       }
+         function onLegacyImageLoadBot () {
+           legacyBotAvatarLoaded = true
+           thisObject.bot.avatar = legacyBotAvatar
+         }
 
-       legacyBotAvatar.src = window.canvasApp.urlPrefix + 'Images/' + LEGACY_TEAM + '/' + REPO + '/' + PROFILE_PIC
-     } else {
+         legacyBotAvatar.src = window.canvasApp.urlPrefix + 'Images/' + LEGACY_TEAM + '/' + REPO + '/' + PROFILE_PIC
+       } else {
             /*
                Here we will download the images of teams uploaded at the Teams Module.
                There might be Product Cards of bots beloging to teams not present currently at the Teams Module, in those cases
                nothing should happen.
            */
 
-       teamAvatar = new Image()
+         teamAvatar = new Image()
 
-       teamAvatar.onload = onImageLoad
+         teamAvatar.onload = onImageLoad
 
-       function onImageLoad () {
-         teamAvatarLoaded = true
+         function onImageLoad () {
+           teamAvatarLoaded = true
+         }
+
+         teamAvatar.src = window.canvasApp.context.teamProfileImages.get(TEAM)
+
+         botAvatar = new Image()
+         botAvatar.onload = onImageLoadBot
+
+         function onImageLoadBot () {
+           botAvatarLoaded = true
+           thisObject.bot.avatar = botAvatar
+         }
+
+         botAvatar.src = window.canvasApp.context.fbProfileImages.get(TEAM + '-' + BOT)
        }
-
-       teamAvatar.src = window.canvasApp.context.teamProfileImages.get(TEAM)
-
-       botAvatar = new Image()
-       botAvatar.onload = onImageLoadBot
-
-       function onImageLoadBot () {
-         botAvatarLoaded = true
-         thisObject.bot.avatar = botAvatar
-       }
-
-       botAvatar.src = window.canvasApp.context.fbProfileImages.get(TEAM + '-' + BOT)
+     } catch (err) {
+       if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) }
      }
    }
 

Scales/topScale.js

@@ -0,0 +1,56 @@
+function newRigthScale () {
+  let thisObject = {
+    container: undefined,
+    draw: draw,
+    getContainer: getContainer,
+    initialize: initialize
+  }
+
+  const RIGHT_MARGIN = 50
+
+  let container = newContainer()
+  container.initialize()
+  thisObject.container = container
+
+  thisObject.container.frame.width = RIGHT_MARGIN
+  thisObject.container.frame.height = viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y
+
+  container.frame.position.x = viewPort.visibleArea.bottomRight.x
+  container.frame.position.y = TOP_SPACE_HEIGHT
+
+  container.isDraggeable = false
+  container.isClickeable = false
+  container.isWheeleable = true
+
+  return thisObject
+
+  function initialize () {
+    thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel)
+  }
+
+  function onMouseWheel (pDelta) {
+    if (pDelta < 0) {
+      pDelta = -0.1
+    } else {
+      pDelta = 0.1
+    }
+  }
+
+  function getContainer (point) {
+    let container
+
+       /* First we check if this point is inside this object UI. */
+
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      return this.container
+    } else {
+           /* This point does not belong to this space. */
+
+      return undefined
+    }
+  }
+
+  function draw () {
+
+  }
+}

Spaces/ChartSpace.js

@@ -15,6 +15,7 @@ function newChartSpace () {
 
   var thisObject = {
     container: undefined,
+    drawBackground: drawBackground,
     draw: draw,
     timeMachines: [],
     getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
@@ -97,11 +98,16 @@ function newChartSpace () {
     }
   }
 
+  function drawBackground () {
+    for (var i = 0; i < thisObject.timeMachines.length; i++) {
+      var timeMachine = thisObject.timeMachines[i]
+      timeMachine.drawBackground()
+    }
+  }
+
   function draw () {
     thisObject.container.frame.draw(false, false)
 
-        /* When we draw the chart space, that means we draw all the time machines in it. */
-
     for (var i = 0; i < thisObject.timeMachines.length; i++) {
       var timeMachine = thisObject.timeMachines[i]
       timeMachine.draw()

Spaces/PanelsSpace.js

@@ -24,6 +24,7 @@ function newPanelsSpace () {
   container.displacement.containerName = 'Panels Space'
   container.frame.containerName = 'Panels Space'
 
+  panelsMap = new Map()
   return thisObject
 
   function initialize () {
@@ -32,7 +33,7 @@ function newPanelsSpace () {
 
   }
 
-  function createNewPanel (pType, pParameters) {
+  function createNewPanel (pType, pParameters, pOwner) {
     let panel
 
     switch (pType) {
@@ -47,7 +48,6 @@ function newPanelsSpace () {
       case 'Products Panel':
         {
           panel = newProductsPanel()
-          panel.initialize()
           break
         }
       case 'Plotter Panel':
@@ -58,7 +58,13 @@ function newPanelsSpace () {
         }
     }
 
-    thisObject.panels.push(panel)
+    let panelArray = panelsMap.get(pOwner)
+    if (panelArray === undefined) {
+      panelArray = []
+      panelsMap.set(pOwner, panelArray)
+    }
+
+    panelArray.push(panel)
 
     panel.handle = Math.floor((Math.random() * 10000000) + 1)
 
@@ -76,12 +82,15 @@ function newPanelsSpace () {
     }
   }
 
-  function getPanel (pPanelHandle) {
-    for (let i = 0; i < thisObject.panels.length; i++) {
-      let panel = thisObject.panels[i]
+  function getPanel (pPanelHandle, pOwner) {
+    thisObject.panels = panelsMap.get(pOwner)
+    if (thisObject.panels != undefined) {
+      for (let i = 0; i < thisObject.panels.length; i++) {
+        let panel = thisObject.panels[i]
 
-      if (panel.handle === pPanelHandle) {
-        return panel
+        if (panel.handle === pPanelHandle) {
+          return panel
+        }
       }
     }
   }
@@ -91,9 +100,20 @@ function newPanelsSpace () {
 
         /* When we draw a time machine, that means also to draw all the charts in it. */
 
-    for (var i = 0; i < thisObject.panels.length; i++) {
-      let panel = thisObject.panels[i]
-      panel.draw()
+    thisObject.panels = panelsMap.get('Global')
+    if (thisObject.panels != undefined) {
+      for (var i = 0; i < thisObject.panels.length; i++) {
+        let panel = thisObject.panels[i]
+        panel.draw()
+      }
+    }
+
+    thisObject.panels = panelsMap.get(window.CHART_ON_FOCUS)
+    if (thisObject.panels !== undefined) {
+      for (var i = 0; i < thisObject.panels.length; i++) {
+        let panel = thisObject.panels[i]
+        panel.draw()
+      }
     }
   }
 

Spaces/TopSpace.js

@@ -48,9 +48,6 @@ function newTopSpace () {
     let container
     return
 
-    container = thisObject.endUser.getContainer(point)
-    if (container !== undefined) { return container }
-
     container = thisObject.currentEvent.getContainer(point)
     if (container !== undefined) { return container }
 

SplashScreen.js

@@ -100,7 +100,7 @@ function newSplashScreen () {
         /* Second the % of Advance. */
 
     let label = '' + Math.trunc(stepsInitializationCounter) + ' %'
-    stepsInitializationCounter = stepsInitializationCounter + 0.5
+    stepsInitializationCounter = stepsInitializationCounter + 0.1
 
     if (stepsInitializationCounter > 99) {
       splashScreenNeeded = false

TimeMachine.js

@@ -17,6 +17,7 @@ function newTimeMachine () {
 
   let thisObject = {
     container: undefined,
+    drawBackground: drawBackground,
     draw: draw,
     charts: [],
     getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
@@ -33,7 +34,8 @@ function newTimeMachine () {
   container.frame.containerName = 'Time Machine'
 
   let controlPanelHandle             // We need this to destroy the Panel when this object is itself destroyed or no longer needs it...
-  let productsPanelHandle            // ... also to request a reference to the object for the cases we need it.
+          // ... also to request a reference to the object for the cases we need it.
+  const SEPARATION_BETWEEN_TIMELINE_CHARTS = 1.5
 
   return thisObject
 
@@ -55,16 +57,14 @@ function newTimeMachine () {
 
         /* Each Time Machine has a Control Panel. */
 
-    controlPanelHandle = canvas.panelsSpace.createNewPanel('Time Control Panel')
-    let controlPanel = canvas.panelsSpace.getPanel(controlPanelHandle)
-
-    productsPanelHandle = canvas.panelsSpace.createNewPanel('Products Panel')
-    let productsPanel = canvas.panelsSpace.getPanel(productsPanelHandle)
-
-    let iteration = 0
+    let panelOwner = 'Global'
+    controlPanelHandle = canvas.panelsSpace.createNewPanel('Time Control Panel', undefined, panelOwner)
+    let controlPanel = canvas.panelsSpace.getPanel(controlPanelHandle, panelOwner)
 
         /* First, we initialize the market that we are going to show first on screen. Later all the other markets will be initialized on the background. */
 
+    let position = 0 // This defines the position of each chart respect to each other.
+
     let timelineChart = newTimelineChart()
 
     timelineChart.container.displacement.parentDisplacement = thisObject.container.displacement
@@ -76,17 +76,17 @@ function newTimeMachine () {
     timelineChart.container.frame.height = thisObject.container.frame.height * 1 * canvas.bottomSpace.chartAspectRatio.aspectRatio.y
 
     timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2
-    timelineChart.container.frame.position.y = timelineChart.container.frame.height * 1.5 * iteration
+    timelineChart.container.frame.position.y = timelineChart.container.frame.height * SEPARATION_BETWEEN_TIMELINE_CHARTS * position
 
-    timelineChart.initialize(productsPanel, onDefaultMarketInitialized)
+    position++
 
-    iteration++
+    timelineChart.initialize(DEFAULT_EXCHANGE, DEFAULT_MARKET, onDefaultInitialized)
 
-    function onDefaultMarketInitialized (err) {
-      if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDefaultMarketInitialized -> Entering function.') }
+    function onDefaultInitialized (err) {
+      if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDefaultInitialized -> Entering function.') }
 
       if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
-        if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDefaultMarketInitialized -> Initialization of the only market failed.') }
+        if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDefaultInitialized -> Initialization of the only market failed.') }
 
         callBackFunction(err)
         return
@@ -97,24 +97,32 @@ function newTimeMachine () {
       controlPanel.container.eventHandler.listenToEvent('Datetime Changed', timelineChart.setDatetime, undefined)
       timelineChart.container.eventHandler.listenToEvent('Datetime Changed', controlPanel.setDatetime)
 
-      callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
-
-            // initializeTheRestOfTheMarkets();
+      initializeTheRest()
     }
 
-    function initializeTheRestOfTheMarkets () {
-      if (INFO_LOG === true) { logger.write('[INFO] initialize -> initializeTheRestOfTheMarkets -> Entering function.') }
+    function initializeTheRest () {
+      if (INFO_LOG === true) { logger.write('[INFO] initialize -> initializeTheRest -> Entering function.') }
 
-      markets.forEach(initializeTimelineChart)
+      let leftToInitialize = SUPPORTED_EXCHANGES.length * SUPPORTED_MARKETS.length - 1 // The default exchange and market was already initialized.
+      let alreadyInitialized = 0
 
-      function initializeTimelineChart (item, key, mapObj) {
-        if (INFO_LOG === true) { logger.write('[INFO] initialize -> initializeTheRestOfTheMarkets -> initializeTimelineChart -> Entering function.') }
+      for (let i = 0; i < SUPPORTED_EXCHANGES.length; i++) {
+        for (let j = 0; j < SUPPORTED_MARKETS.length; j++) {
+          let exchange = SUPPORTED_EXCHANGES[i]
+          let market = SUPPORTED_MARKETS[j]
 
-        if (key === INITIAL_DEFAULT_MARKET) {
- // We skip this market since it has already been initialized.
+          if (
+            exchange === DEFAULT_EXCHANGE &&
+            market.assetA === DEFAULT_MARKET.assetA &&
+            market.assetB === DEFAULT_MARKET.assetB
+          ) { continue }
 
-          return
+          initializeTimelineChart(exchange, market)
         }
+      }
+
+      function initializeTimelineChart (exchange, market) {
+        if (INFO_LOG === true) { logger.write('[INFO] initialize -> initializeTheRest -> initializeTimelineChart -> Entering function.') }
 
         let timelineChart = newTimelineChart()
 
@@ -127,29 +135,40 @@ function newTimeMachine () {
         timelineChart.container.frame.height = thisObject.container.frame.height * 1 * canvas.bottomSpace.chartAspectRatio.aspectRatio.y
 
         timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2
-        timelineChart.container.frame.position.y = timelineChart.container.frame.height * 1.5 * iteration
+        timelineChart.container.frame.position.y = timelineChart.container.frame.height * SEPARATION_BETWEEN_TIMELINE_CHARTS * position
 
-        timelineChart.initialize(productsPanel, finalSteps)
+        position++
 
-        iteration++
+        timelineChart.initialize(exchange, market, finalSteps)
 
         function finalSteps () {
-          if (INFO_LOG === true) { logger.write('[INFO] initialize -> initializeTheRestOfTheMarkets -> initializeTimelineChart -> finalSteps -> Entering function.') }
+          if (INFO_LOG === true) { logger.write('[INFO] initialize -> initializeTheRest -> initializeTimelineChart -> finalSteps -> Entering function.') }
 
           thisObject.charts.push(timelineChart)
 
           controlPanel.container.eventHandler.listenToEvent('Datetime Changed', timelineChart.setDatetime, undefined)
           timelineChart.container.eventHandler.listenToEvent('Datetime Changed', controlPanel.setDatetime)
+
+          alreadyInitialized++
+
+          if (alreadyInitialized === leftToInitialize) {
+            callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
+          }
         }
       }
     }
   }
 
+  function drawBackground () {
+    for (let i = 0; i < this.charts.length; i++) {
+      let chart = this.charts[i]
+      chart.drawBackground()
+    }
+  }
+
   function draw () {
     this.container.frame.draw(false, false)
 
-        /* When we draw a time machine, that means also to draw all the charts in it. */
-
     for (let i = 0; i < this.charts.length; i++) {
       let chart = this.charts[i]
       chart.draw()

TimelineChart.js

@@ -14,6 +14,7 @@
    let thisObject = {
      setDatetime: setDatetime,
      container: undefined,
+     drawBackground: drawBackground,
      draw: draw,
      getContainer: getContainer,
      initialize: initialize,
@@ -45,6 +46,10 @@
    let canDrawLogoAA = false
 
    let plotterManager
+   let exchange
+   let market
+
+   let productsPanelHandle
 
    return thisObject
 
@@ -58,11 +63,18 @@
      }
    }
 
-   function initialize (pProductsPanel, callBackFunction) {
+   function initialize (pExchange, pMarket, callBackFunction) {
      try {
        if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') }
 
             /* We load the logow we will need for the background. */
+       exchange = pExchange
+       market = pMarket
+
+       let panelOwner = exchange + ' ' + market.assetB + '/' + market.assetA
+       productsPanelHandle = canvas.panelsSpace.createNewPanel('Products Panel', undefined, panelOwner)
+       let productsPanel = canvas.panelsSpace.getPanel(productsPanelHandle, panelOwner)
+       productsPanel.initialize(exchange, market)
 
        logoA = new Image()
        logoB = new Image()
@@ -95,13 +107,9 @@
 
        logoA.src = window.canvasApp.urlPrefix + 'Images/tether-logo-background.png'
        logoB.src = window.canvasApp.urlPrefix + 'Images/bitcoin-logo-background.png'
-       logoExchange.src = window.canvasApp.urlPrefix + 'Images/poloniex-logo-background.png'
+       logoExchange.src = window.canvasApp.urlPrefix + 'Images/' + exchange + '-logo-background.png'
        logoAA.src = window.canvasApp.urlPrefix + 'Images/sa-logo-background.png'
 
-            /* Remember the Products Panel */
-
-       productsPanel = pProductsPanel
-
        chartGrid = newChartGrid()
        chartGrid.initialize()
 
@@ -132,10 +140,10 @@
        plotterManager.container.frame.width = thisObject.container.frame.width
        plotterManager.container.frame.height = thisObject.container.frame.height
 
-       plotterManager.container.frame.position.x = thisObject.container.frame.position.x
-       plotterManager.container.frame.position.y = thisObject.container.frame.position.y
+       plotterManager.container.frame.position.x = 0
+       plotterManager.container.frame.position.y = 0
 
-       plotterManager.initialize(pProductsPanel, onPlotterManagerReady)
+       plotterManager.initialize(productsPanel, pExchange, pMarket, onPlotterManagerReady)
 
        function onPlotterManagerReady (err) {
          if (INFO_LOG === true) { logger.write('[INFO] initialize -> onPlotterManagerReady -> Entering function.') }
@@ -294,13 +302,25 @@
      }
    }
 
+   function drawBackground () {
+     if (INTENSIVE_LOG === true) { logger.write('[INFO] drawBackground -> Entering function.') }
+
+     if (thisObject.container.frame.isInViewPort()) {
+       if (window.CHART_ON_FOCUS === '') {
+         window.CHART_ON_FOCUS = exchange + ' ' + market.assetB + '/' + market.assetA
+
+         this.container.frame.draw()
+
+         drawChartsBackgroundImages()
+       }
+     }
+   }
+
    function draw () {
      if (INTENSIVE_LOG === true) { logger.write('[INFO] draw -> Entering function.') }
 
      if (thisObject.container.frame.isInViewPort()) {
-       this.container.frame.draw()
-
-       drawBackground()
+       drawChartsBackground()
 
        chartGrid.draw(thisObject.container, timeLineCoordinateSystem)
 
@@ -310,8 +330,36 @@
      }
    }
 
-   function drawBackground () {
-     if (INTENSIVE_LOG === true) { logger.write('[INFO] drawBackground -> Entering function.') }
+   function drawChartsBackground () {
+        /* We will paint some transparent background here. */
+
+     let opacity = '0.9'
+
+     let fromPoint = {
+       x: 0,
+       y: 0
+     }
+
+     let toPoint = {
+       x: 0,
+       y: thisObject.container.frame.height
+     }
+
+     fromPoint = transformThisPoint(fromPoint, thisObject.container)
+     toPoint = transformThisPoint(toPoint, thisObject.container)
+
+     browserCanvasContext.beginPath()
+
+     browserCanvasContext.rect(viewPort.visibleArea.topLeft.x, fromPoint.y, viewPort.visibleArea.topRight.x - viewPort.visibleArea.topLeft.x, toPoint.y - fromPoint.y)
+     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')'
+
+     browserCanvasContext.closePath()
+
+     browserCanvasContext.fill()
+   }
+
+   function drawChartsBackgroundImages () {
+     if (INTENSIVE_LOG === true) { logger.write('[INFO] drawChartsBackground -> Entering function.') }
 
      if (canDrawLogoA === false || canDrawLogoB === false || canDrawLogoExchange === false || canDrawLogoAA === false) { return }
 
@@ -420,32 +468,6 @@
          browserCanvasContext.drawImage(logo, imagePoint.x + i * imageWidth * 2 + offSet, imagePoint.y + j * rowHight + Y_TOP_MARGIN, imageWidth, imageHeight)
        }
      }
-
-        /* We will paint some transparent background here. */
-
-     let opacity = '0.9'
-
-     let fromPoint = {
-       x: 0,
-       y: 0
-     }
-
-     let toPoint = {
-       x: 0,
-       y: thisObject.container.frame.height
-     }
-
-     fromPoint = transformThisPoint(fromPoint, thisObject.container)
-     toPoint = transformThisPoint(toPoint, thisObject.container)
-
-     browserCanvasContext.beginPath()
-
-     browserCanvasContext.rect(viewPort.visibleArea.topLeft.x, fromPoint.y, viewPort.visibleArea.topRight.x - viewPort.visibleArea.topLeft.x, toPoint.y - fromPoint.y)
-     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')'
-
-     browserCanvasContext.closePath()
-
-     browserCanvasContext.fill()
    }
 
    function moveViewPortToCurrentDatetime () {