Product Panel Working Well

Container.js

@@ -11,6 +11,7 @@ function newContainer() {
         isDraggeable: true,
         isZoomeable: true,
         isClickeable: false,
+        name: undefined,
         initialize: initialize
     };
 
@@ -25,6 +26,7 @@ function newContainer() {
 
         var eventHandler = newEventHandler();
         eventHandler.initialize();
+        eventHandler.name = container.name;
         this.eventHandler = eventHandler;
 
         var displacement = newDisplacement();

EventHandler.js

@@ -1,9 +1,11 @@
 
 function newEventHandler() {
 
-    let eventHandler = {
-        containerName: "",                  // This is for debugging purposes only.
-        parentEventHandler: undefined,             // Here we store the parent cointainer zoom object. 
+    const CONSOLE_LOG = true;
+
+    let thisObject = {
+        name: undefined,                            // This is for debugging purposes only.
+        parentEventHandler: undefined,              // Here we store the parent cointainer zoom object. 
         listenToEvent: listenToEvent,
         raiseEvent: raiseEvent,
         initialize: initialize
@@ -11,7 +13,7 @@ function newEventHandler() {
 
     var eventHandlers = [];        // Here we store all the functions we will call when an event is comming.
 
-    return eventHandler;
+    return thisObject;
 
     function initialize() {
 
@@ -22,10 +24,22 @@ function newEventHandler() {
 
         eventHandlers.push([eventType, handler, extraData]);
 
+        if (thisObject.name !== undefined && CONSOLE_LOG === true) {
+
+            console.log("Event Handler named " + thisObject.name + " received a request to listenToEvent " + eventType + " and call " + (handler.toString()).substring(0, 50));
+
+        }
+
     }
 
     function raiseEvent(eventType, event) {
 
+        if (thisObject.name !== undefined && CONSOLE_LOG === true) {
+
+            console.log("Event Handler named " + thisObject.name + " received a request to raiseEvent " + eventType + " with this date " + (event.toString()).substring(0, 50));
+
+        }
+
         for (var i = 0; i < eventHandlers.length; i++) {
 
             /* We will execute all the functions listening to this event type. */
@@ -35,6 +49,12 @@ function newEventHandler() {
                 var handler = eventHandlers[i][1];
                 var extraData = eventHandlers[i][2];
 
+                if (thisObject.name !== undefined && CONSOLE_LOG === true) {
+
+                    console.log("Event Handler named " + thisObject.name + " received a request to raiseEvent " + eventType + " and will call this handler: " + (handler.toString()).substring(0,50));
+
+                }
+
                 handler(event, extraData);
 
             }

Panels/ProductsPanel.js

@@ -11,10 +11,16 @@ function newProductsPanel() {
         initialize: initialize
     };
 
+    /* Cointainer stuff */
+
     var container = newContainer();
+
+    container.name = "Bots Product Panel";
     container.initialize();
+
     container.isDraggeable = true;
     container.isZoomeable = false;
+
     thisObject.container = container;
     thisObject.container.frame.containerName = "Bot's Products";
 
@@ -65,6 +71,11 @@ function newProductsPanel() {
 
                     productCard.code = devTeam.codeName + '-' + bot.codeName + '-' + product.codeName;
 
+                    /* Initialize it */
+
+                    productCard.initialize();
+
+
                     /* Container Stuff */
 
                     productCard.container.displacement.parentDisplacement = this.container.displacement;
@@ -72,10 +83,6 @@ function newProductsPanel() {
                     productCard.container.frame.parentFrame = this.container.frame;
                     productCard.container.parentContainer = this.container;
 
-                    /* Initialize it */
-
-                    productCard.initialize();
-
                     /* Positioning within this Panel */
 
                     let position = { 
@@ -91,6 +98,10 @@ function newProductsPanel() {
 
                     productCards.push(productCard);
 
+                    /* Listen to Status Changes Events */
+
+                    productCard.container.eventHandler.listenToEvent('Status Changed', onProductCardStatusChanged);
+
                 }
             }
         }
@@ -99,6 +110,12 @@ function newProductsPanel() {
 
     }
 
+    function onProductCardStatusChanged(pProductCard) {
+
+        thisObject.container.eventHandler.raiseEvent('Product Card Status Changed', pProductCard);
+
+    }
+
     function getOnProductCards() {
 
         /* Returns all productCards which status is ON */

ProductCard.js

@@ -12,17 +12,20 @@
         initialize: initialize
     };
 
-    var container = newContainer();
-    container.initialize();
-    container.isDraggeable = false;
-    container.isZoomeable = false;
-    container.isClickeable = true;
-    thisObject.container = container;
-
     return thisObject;
 
     function initialize() {
 
+        /* Create this objects continer */
+
+        var container = newContainer();
+        container.name = "Product Card " + thisObject.code;
+        container.initialize();
+        container.isDraggeable = false;
+        container.isZoomeable = false;
+        container.isClickeable = true;
+        thisObject.container = container;
+
         /* Lets set the basic dimensions of this thisObject. */
 
         var position = {

TimelineChart.js

@@ -44,12 +44,20 @@ function newTimelineChart() {
 
     function initialize(exchange, market, currentCandlePanelToUse, currentVolumePanelToUse, pProductsPanel, orderBookPanelToUse, callBackFunction) {
 
+        /* Remember the Products Panel */
+
+        productsPanel = pProductsPanel;
+
+        /* Listen to the event of change of status */
+
+        productsPanel.container.eventHandler.listenToEvent("Product Card Status Changed", onProductCardStatusChanged);
+
+        /* Legacy code to clean */
+
         currentCandlePanel = currentCandlePanelToUse;
         currentVolumePanel = currentVolumePanelToUse;
         orderBookPanel = orderBookPanelToUse;
 
-        productsPanel = pProductsPanel;
-
         marketId = market;
         exchangeId = exchange;
 
@@ -137,10 +145,6 @@ function newTimelineChart() {
                 plotter: plotter
             };
 
-            /* Listen to the event of change of status */
-
-            pProductCard.container.eventHandler.listenToEvent("Status Changed", onProductCardStatusChanged);
-
             /* Add the new Active Protter to the Array */
 
             activePlotters.push(activePlotter);