GazeTK

/*

 * Copyright 2015 Thies Pfeiffer and Dimitri Heil

 * Blinker is distributed under the terms of the GNU General Public License

 * 

 * This file is part of Blinker.

 * 

 * Blinker is free software: you can redistribute it and/or modify

 * it under the terms of the GNU General Public License as published by

 * the Free Software Foundation, either version 3 of the License, or

 * (at your option) any later version.

 * 

 * Blinker is distributed in the hope that it will be useful,

 * but WITHOUT ANY WARRANTY; without even the implied warranty of

 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

 * GNU General Public License for more details.

 * 

 * You should have received a copy of the GNU General Public License

 * along with Blinker. If not, see <http://www.gnu.org/licenses/>.

 */

//do not execute pagemod in iframes

if (window.location == window.parent.location) {

        /*

        *        Append the DOM Observer to listen for new elements that are being attached

        */

        var observer = new MutationObserver(function (mutations) {

            mutations.forEach(function (mutation) {

              if (mutation.type == "childList"){                      

                      for (var c = 0;c< mutation.addedNodes.length;c++){                                      

                              if ($(mutation.addedNodes.item(c)).data("gaze") !== undefined){

                                      /*

                                      *        if a dom change is observed and the change is of type 'childlist'

                                      *        send all the new nodes to the gazeEvent appender

                                      */

                                      appendGazeEvents(mutation.addedNodes.item(c));

                              }

                        }

              }

              //console.log("MutationType: "+mutation.type);

                });

        });

        /*

        *        Set some observer options

        */  

        observer.observe(document.body, {

            attributes: true,

            childList:true,

            characterData: true,

            characterDataOldValue: true,

            subtree: true

        });

                /*

                *        Append gaze-gesture divs to the body (4 point gaze)

                */        

                var gesturedata = "{\"gazeEnter\": {\"funcType\":\"dynamic\",\"func\":\" $(\\\"#gestureTopLeft\\\").css(\\\"backgroundColor\\\",\\\"#053e46\\\"); gestureTimer = Date.now(); if (lastGesture != \\\"1\\\" ) {gestureString += \\\"1\\\"; lastGesture=\\\"1\\\"; }  \"},\"gazeLeave\": {\"funcType\":\"dynamic\",\"func\":\"  $(\\\"#gestureTopLeft\\\").css(\\\"backgroundColor\\\",\\\"#13D1EB\\\");  \"}}";

                $("body").prepend("<div data-gaze='" + gesturedata + "' id='gestureTopLeft'         class='gazeGestures'></div>");

                gesturedata = "{\"gazeEnter\": {\"funcType\":\"dynamic\",\"func\":\" $(\\\"#gestureTopRight\\\").css(\\\"backgroundColor\\\",\\\"#053e46\\\"); gestureTimer = Date.now(); if (lastGesture != \\\"2\\\" ) {gestureString += \\\"2\\\"; lastGesture=\\\"2\\\";}  \"},\"gazeLeave\": {\"funcType\":\"dynamic\",\"func\":\"  $(\\\"#gestureTopRight\\\").css(\\\"backgroundColor\\\",\\\"#13D1EB\\\");  \"}}";

                $("body").prepend("<div data-gaze='" + gesturedata + "' id='gestureTopRight'         class='gazeGestures'></div>");

                gesturedata = "{\"gazeEnter\": {\"funcType\":\"dynamic\",\"func\":\" $(\\\"#gestureBottomLeft\\\").css(\\\"backgroundColor\\\",\\\"#053e46\\\"); gestureTimer = Date.now(); if (lastGesture != \\\"3\\\" ) {gestureString += \\\"3\\\"; lastGesture=\\\"3\\\";}   \"},\"gazeLeave\": {\"funcType\":\"dynamic\",\"func\":\"  $(\\\"#gestureBottomLeft\\\").css(\\\"backgroundColor\\\",\\\"#13D1EB\\\");  \"}}";

                $("body").prepend("<div data-gaze='" + gesturedata + "' id='gestureBottomLeft'         class='gazeGestures'></div>");

                gesturedata = "{\"gazeEnter\": {\"funcType\":\"dynamic\",\"func\":\" $(\\\"#gestureBottomRight\\\").css(\\\"backgroundColor\\\",\\\"#053e46\\\"); gestureTimer = Date.now(); if (lastGesture != \\\"4\\\" ) {gestureString += \\\"4\\\"; lastGesture=\\\"4\\\";}  \"},\"gazeLeave\": {\"funcType\":\"dynamic\",\"func\":\"  $(\\\"#gestureBottomRight\\\").css(\\\"backgroundColor\\\",\\\"#13D1EB\\\");  \"}}";

                $("body").prepend("<div data-gaze='" + gesturedata + "'  id='gestureBottomRight' class='gazeGestures'></div>");

                /*

                *        Append gazeLinks Div to the body links that are found by a linkFinding algorithm are put into this div

                */        

                $("body").prepend("<div id='gazeLinks'></div>");

                /*

                *        Append the wheelselector to the body

                */        

                $("body").prepend("<div id='wheelSelector'></div>");

                /*

                *        Append the calibration_blackout div to the body to darken the background in calibration mode

                */

                $("body").prepend("<div id='calibration_blackout'></div>");

                /*

                *        Needed for calibration checking when adjusting gaze position offset

                */

                $("body").prepend("<div id='calibration_check'></div>");                

                /*

                *        Needed for BlickBrowser's own Notification

                */

                var dstr = "{\"gazeEnter\": {\"funcType\":\"dynamic\",\"func\":\" $(\\\"#notification\\\").stop();$(\\\"#notification\\\").fadeIn(10);  \"},\"gazeLeave\": {\"funcType\":\"dynamic\",\"func\":\" $(\\\"#notification\\\").fadeOut(3000);  \"}}";

                $("body").prepend("<div id='notification' data-gaze='" + dstr + "' ></div>");

                /*

                *        Needed for the progress circle

                */

                $("body").prepend('<div id="gazeProgress"><input type="text" class="dial"></div>');

                $("body").prepend("<div id='status'></div>");

                //$("body").prepend("<div id='fixatedA'></div>");

                $("body").prepend("<div id='controlBar' class='controlBar'></div>");

                $("body").prepend("<canvas id='findLinkArea'>Your browser does not support the HTML5 canvas tag.</canvas>");

                /*

                *        Needed for the crosshair

                */

                $("body").prepend("<canvas id='crosshairTop' width='1' height='15'>Your browser does not support the HTML5 canvas tag.</canvas>");

                $("body").prepend("<canvas id='crosshairBottom' width='1' height='15'>Your browser does not support the HTML5 canvas tag.</canvas>");

                $("body").prepend("<canvas id='crosshairLeft' width='15' height='1'>Your browser does not support the HTML5 canvas tag.</canvas>");

                $("body").prepend("<canvas id='crosshairRight' width='15' height='1'>Your browser does not support the HTML5 canvas tag.</canvas>");

                /*

                * Hide browser screen when it's not active

                */

                $("body").prepend("<div id='noFocusHider' ></div>");

                /*

                *        Styling the newly appended elements

                */

                $("#fixatedA").css("backgroundColor", "#FFFFFF");

                $("#fixatedA").css("display", "none");

                $("#fixatedA").css("position", "fixed");

                $("#fixatedA").css("padding", "10");

                $("#fixatedA").css("border", "2px solid");

                $("#fixatedA").css("border-bottom-color", "#000000");

                $("#fixatedA").css("border-top-color", "#000000");

                $("#fixatedA").css("border-left-color", "#000000");

                $("#fixatedA").css("border-right-color", "#000000");

                $("#fixatedA").css("border-radius", "10px");

                $("#fixatedA").css("box-shadow", "5px 5px 2px");

                $("#fixatedA").css("zIndex", 100000);

                $("#wheelSelector").css("display", "none");

                $("#wheelSelector").css("backgroundColor", "#13D1EB");

                $("#wheelSelector").css("position", "absolute");

                $("#wheelSelector").css("left", ((window.innerWidth / 2) - 250) + "px");

                $("#wheelSelector").css("zIndex", 120000);

                $("#wheelSelector").css("width", "500px");

                $("#wheelSelector").css("height", "500px");

                $("#wheelSelector").css("top", "10%");

                $("#wheelSelector").css("border", "2px solid #FFFFFF");

                $("#wheelSelector").css("border-radius", "250px");

                $("#gazeLinks").css("display", "none");

                $("#gazeLinks").css("position", "absolute");

                $("#gazeLinks").css("zIndex", 100000);

                $("#noFocusHider").css("display", "none");

                $("#controlBar").css("display", "none");

                $("#status").css("position", "absolute");

                $("#status").css("left", "0px");

                $("#status").css("top", "0px");

                $("#status").css("zIndex", 16777269);

                $("#calibration_blackout").css("backgroundColor", "#000000");

                $("#calibration_blackout").css("width", "100%");

                $("#calibration_blackout").css("height", "100%");

                $("#calibration_blackout").css("overflow", "hidden");

                $("#calibration_blackout").css("zIndex", 2147483640);

                $("#calibration_blackout").css("display", "none");

                $("#calibration_blackout").css("position", "fixed");

                $("#calibration_blackout").css("left", "0px");

                $("#calibration_blackout").css("top", "0px");

                $("#calibration_check").css("backgroundColor", "#000000");

                $("#calibration_check").css("width", "100%");

                $("#calibration_check").css("height", "100%");

                $("#calibration_check").css("overflow", "hidden");

                $("#calibration_check").css("zIndex", 2147483646);

                $("#calibration_check").css("display", "none");

                $("#calibration_check").css("position", "fixed");

                $("#calibration_check").css("left", "0px");

                $("#calibration_check").css("top", "0px");

                //activate indicator

                $("#gazeProgress").css("position", "absolute");

                $("#gazeProgress").css("display", "none");

                $("#gazeProgress").css("zIndex", 2147483645);

                $("#findLinkArea").css("width", "300px");

                $("#findLinkArea").css("height", "300px");

                $("#findLinkArea").css("display", "none");

                $("#findLinkArea").css("position", "absolute");

                $("#findLinkArea").css("zIndex", 160000);

                /*

                *        Creating and positioning the crosshair

                */

                var ctx = $("#crosshairTop")[0].getContext('2d');

                ctx.rect(0, 0, 1, 15);

                ctx.fillStyle = "black";

                ctx.fill();

                ctx = $("#crosshairBottom")[0].getContext('2d');

                ctx.rect(0, 0, 1, 15);

                ctx.fillStyle = "black";

                ctx.fill();

                ctx = $("#crosshairLeft")[0].getContext('2d');

                ctx.rect(0, 0, 15, 1);

                ctx.fillStyle = "black";

                ctx.fill();

                ctx = $("#crosshairRight")[0].getContext('2d');

                ctx.rect(0, 0, 15, 1);

                ctx.fillStyle = "black";

                ctx.fill();

                $("#crosshairTop").css("left", (100) + "px");

                $("#crosshairTop").css("top", (100 - 16) + "px");

                $("#crosshairTop").css("position", "absolute");

                $("#crosshairTop").css("zIndex", 16777270);

                $("#crosshairBottom").css("left", (100) + "px");

                $("#crosshairBottom").css("top", (100 + 1) + "px");

                $("#crosshairBottom").css("position", "absolute");

                $("#crosshairBottom").css("zIndex", 16777270);

                $("#crosshairLeft").css("left", (100 - 16) + "px");

                $("#crosshairLeft").css("top", (100) + "px");

                $("#crosshairLeft").css("position", "absolute");

                $("#crosshairLeft").css("zIndex", 16777270);

                $("#crosshairRight").css("left", (100 + 1) + "px");

                $("#crosshairRight").css("top", (100) + "px");

                $("#crosshairRight").css("position", "absolute");

                $("#crosshairRight").css("zIndex", 16777270);

                ctx = $("#findLinkArea")[0].getContext('2d');

                ctx.rect(0, 0, 300, 300);

                ctx.strokeStyle = "red";

                ctx.lineWidth = "2";

                ctx.stroke();

                //################################## VARIABLES #################################

                //JQNOTIFY settings

                $.notify.defaults({position: "top center"});

                var blickBrowserSettings;

                /*

                *        Needed for gazeCorrection offset

                */

                var recordGazeData = false;

                var recordedGazeData = [];

                var gazeCorrectionMode = false;

                var gazeCorrectionData = [];

                var gazeCorrection = { x: 0, y: 0 };

                var gazeCorrectionTimerStart;

                var gazeCorrectionDuration = 1000;

                var gazeCorrectionValues = [];

                var gazeCorrectionPointNr = 0;

                var gazeCorrectionQuantity = 4;

                var gazeCorrectionPoints = [];

                var gazeCorrectionX = 0;

                var gazeCorrectionY = 0;

                var gc_left, gc_right, gc_top, gc_bottom = 0;

                /*

                *        Notify the user, that the browser has to be in full screen mode to start calibrating

                */

            var showFullscreenMessageForCalibration = true;

            /*

            *        Prevent sending multiple calibration requests when waiting for the first one

            */

            var calibrationRequestSent = false;

            /*

            *        The calibration results are saved here when requesting the EYETRIBE status on page load / activate

            */

                var calibrationResult;

                /*

                *        point counter in calibration array 

                */

                var calibrationStart = 0;

                /*

                *        4 point gaze gesture variables

                */

                var gestureTimer = Date.now();

                var gestureString = "";

                var gestureMode = false;

                var lastGesture = "";

                /*

                *        prevents toggling reading / browsing mode more than 1 time per second

                */

                var modeToggleCounter = 0;

                //wheter gazeLinks are showing

                var gazeLinksShowing = false;

                var gazeLinkOptionsShowing = false;

                //wheter controlBar is showing

                var controlBarShowing = false;

                //wheter wheelselector is showing

                var wheelSelectorShowing = false;

                //whether eyetracker has been set up while initializing - False if it's set up.

                var firstRun = true;

                //if a message has been sent to the tracker and a request is awaited

                var waitingForResponse = false;

                //show the follow me message when calibration is run and the crosshair is shown

                var showFollowMeMessageAtCalibration = true;

                //take average values from EYETRIBE eyetracking data?

                var average = true;

                //####################### INSIDE WINDOW OFFSET CALCULATION #####################

                var xOffset = 0;

                var yOffset = 0;

                var browserDecorationThickness = (window.outerWidth - window.innerWidth) / 2;

                console.log("browserDecorationThickness: "+browserDecorationThickness);

                var browserTopBarsHeight = window.outerHeight - browserDecorationThickness - window.innerHeight;

                console.log("browserTopBarsHeight: "+browserTopBarsHeight);

                //################################# SMI #####################################

                var iViewXAPI = null;

                //##################### CALIBRATION VARIABLES #####################

                //the array where the recalibration points will be put

                var calibrationArray = [];

                var overflowXBeforeCalibration;

                var overflowYBeforeCalibration;

                //32 is half of calibrationImage

                var calibrationIconSizeHalf = 32;

                //distance of calibrationImage from borders (in pixel)

                var distanceFromBorder = 100;

                //the calibration grid for 3 x 3 calibration

                var topRow, midRow, bottomRow = 0;

                var leftCol, midCol, rightCol = 0;

                var recalibrationArray = [];

                var calibrationPointNumber = 1;

                var gazeTimer = 0;

                var linkCheckRunning = false;

                eyeTribe.setCalibrationParameters();

                //initiate calibration timer

                var calibrationTimer = "null";

                //variable for checking what should be parsed from the eyetracking frame data

                var calibrationRunning = false;

                var eyeTrackerIsCalibrated = false;

                var eyeTrackerIsCalibrating = false;

                var pushMode = "notSet";

                /*

                *        Asynchronous toggling of the linkFinding algorithms every 1000ms 

                *        (or more if algorithm is still running after 1000ms)

                */

                var checkForLinksInterval;                

                checkForLinksInterval = setInterval(function() {                

                        if (document.hasFocus()) {

                                gazeFunctions.checkForLinks();

                        }

                }, 1000);

                //move the status div with the mouse

                window.onmousemove = mousemoved;

                //needed for collecting gazePositions for smoothing

                var gazeCollection = [];

                //###################### GAZE INFORMATION JSON VARIABLE ###################

                var gazeInformation = {

                        "x": 0, //the actual x value

                        "y": 0, //the actual y value

                        "previousX": 0, //last x value

                        "previousY": 0, //last y value

                        "isFixation": false, //eyetribe built in fixation algorithm

                        "fixationStart": 0, //unix time when actual fixation started

                        "fixationPositionAtStart": { 

                                x: 0,

                                y: 0

                        }, // x|y of gaze position when fixation started

                        "elementBelow": null, //actual element under gaze at x/y

                        "fixatedElement": null, //actually fixated object

                        "lastElementBelow": null, //last fixated object

                        "currentElementFixatedAt": Date.now(), //unix time when fixation started

                        "fixatedOptionsDialogPosition": {

                                x: 0,

                                y: 0

                        }, //for calculating the distance of mouse - optionsDiv

                        "gazeLinksPosition": {

                                x: 0,

                                y: 0

                        }, //position of link list

                        "gazeLinks": [], //array of all links

                        "gazeLinkName": null,

                        "gazeLinkSource": null,

                        "selectedGazeLink": null,

                        "gazeMoveStartPoint": {"x": 0,"y":0}, // auto readingmode reference point

                        "gazeMoveStartTime": Date.now(), // auto readingmode duration

                };

                //##################### EVENT CREATION AND APPENDING #####################

                var gazeEnter = new Event('gazeEnter');

                var gazeLeave = new Event('gazeLeave');

                var gazeOver = new Event('gazeOver');

                var isFixated = new Event('isFixated');

                //################### COMMUNICATION WITH ADDON ###################

                /*

                *        Listen for the calibrationImage being transmitted

                */

                self.port.on("calibrationImage", function(imgurl) {

                        $("body").prepend("<img id='calibrationImage' src='" + imgurl + "' />");

                        $("#calibrationImage").css("position", "absolute");

                        $("#calibrationImage").css("left", "50%");

                        $("#calibrationImage").css("top", "50%");

                        $("#calibrationImage").css("display", "none");

                        $("#calibrationImage").css("zIndex", 2147483647); //1 level above calibration_blackout

                });

                /*

                *        Listen for the privateMode image being transmitted

                */

                self.port.on("holeImage", function(imgurl) {                        

                        $("body").prepend("<img id='holeImageFile' src='" + imgurl + "' />");

                        $("#holeImageFile").hide();

                        $("body").prepend("<div id='holeImage'></div>");

                        $("#holeImage").css("display", "none");

                        $("#holeImage").css("background-image", "url(" + $("#holeImageFile").attr('src') + ")");

                        $("#holeImage").css("position", "fixed");

                        $("#holeImage").css("width", "100%");

                        $("#holeImage").css("height", "100%");

                        $("#holeImage").css("zIndex", 16777272); //2 level above calibration_blackout

                });

                /*

                *        Listen for external calibration initialization

                */

                self.port.on("startCalibration", function(message) {

                        //console.log("initiate calibration");

                        eyeTribe.initiateCalibration();

                });

                /*

                *        Listen for external gaze offset calibration initialization

                */

                self.port.on("checkCalibration", function(message) {

                        //console.log("initiate calibration");

                        checkCalibration();

                });

                /*

                *        initialize eyetribe calibration parameters

                */

                self.port.on("initializeEyeTribe", function(message) {

                        //console.log("abort running calibration");

                        //abortRunningCalibration();

                        //console.log("get tracker status");

                        //initializeEyeTracker();

                        eyeTribe.getTrackerStatus();

                });

                /*

                *        ##########################################################################################

                *        Listen for gazeData Messages and call the proper handler accordingly to current eyetracker

                *        ##########################################################################################

                */

                /*

                *        If eyetracker is eyetribe - send gazeData to eyetribe handler

                */

                self.port.on("eyeTrackerData", function(message) {

                        var messages;

                        // for debugging the gaze history can be set to 12345 to stop listening to the gazedata and stop 

                        if (blickBrowserSettings.gazeSmoothingHistory !== 12345) {

                                if (message.search(/}\n{/) > -1) {

                                        //split multiple messages from eyetribe server and send them on by one at a time

                                        messages = message.split(/\n/);

                                        for (var v = 0; v < messages.length; v++) {

                                                if (messages[v].length > 5) {

                                                        eyeTribe.parseMessage(messages[v]);

                                                }

                                        }

                                } else {

                                        eyeTribe.parseMessage(message);

                                }

                        }

                        if (!document.hasFocus()) {

                                //console.log("no focus.");

                                if (blickBrowserSettings.hideOnFocusLost === true) {

                                        $("#noFocusHider").css("display", "block");

                                }

                        } else {

                                $("#noFocusHider").css("display", "none");

                        }

                });

                /*

                *        if message comes from REDm, route it directly to gazeCalculation

                */

                self.port.on("smiData", function(message) {

                        calcGazePosition(message);

                });

                /*

                *        if message comes from MyGaze, route it directly to gazeCalculation

                */

                self.port.on("myGazeData", function(message) {                        

                        calcGazePosition(message);

                });

                /*

                *        Listen for external settings changes

                */

                self.port.on("blickBrowserSettings", function(settings) {

                        blickBrowserSettings = eval(settings);

                        $(function() {

                                $(".dial").knob({

                                        'min': 0,

                                        'max': blickBrowserSettings.fixationThreshold,

                                        'readOnly': true,

                                        'displayInput': false,

                                        'fgColor': '#13D1EB',

                                        'bgColor': '#000000',

                                        'width': 30

                                });

                        });

                        $.notify("Settings updated","success");

                        if (blickBrowserSettings.eyeTracker === "eyetribe"){

                                window.onresize = eyeTribe.setCalibrationParameters();

                        }        

                        //show all settings in console

                        console.log(JSON.stringify(blickBrowserSettings, undefined, 4));

                });

                /*

                *        Put all '<a>' Elements into an array to parse it

                */

                var aArray = [];

                var allAs = document.getElementsByTagName("a");

                //console.log("Found "+ allAs.length +" Links");

                for (var b = 0; b < allAs.length; b++) {

                        var pos = getPosition(allAs[b]);

                        aArray[b] = [];

                        aArray[b].url = allAs[b].getAttribute("href");

                        aArray[b].text = allAs[b].innerHTML;

                        aArray[b].x = $(allAs[b]).offset().left;

                        aArray[b].y = $(allAs[b]).offset().top;

                }

                /*

                *        Calculate the size of the linkparsing grid

                */

/*

        DOCUMENT Grid:

                                 __ __ __ __

                                |__|__|__|__|

                                |__|__|__|__|

                                |__|__|__|__|

                                |__|__|__|__|

                                |__|__|__|__|

                                |__|__|__|__|

                                |__|__|__|__|

*/

                var documentHeight = $(document).height();

                var documentWidth = $(document).height();

                var colCount = 4;

                var fieldWidth = documentWidth / colCount;

                var fieldHeight = fieldWidth;

                var rowCount = Math.ceil(documentHeight / fieldHeight);

                /*console.log("colcount: "+colCount);

                console.log("fieldWidth: "+fieldWidth);

                console.log("fieldHeight: "+fieldHeight);

                console.log("rowCount: "+rowCount);*/

                var fields = [];

                //console.log("Found "+ allAs.length +" Links");

                for (var b = 0; b < allAs.length; b++) {

                        var foundPoint = [];

                        foundPoint.url = allAs[b].getAttribute("href");

                        foundPoint.text = allAs[b].innerHTML;

                        foundPoint.x = $(allAs[b]).offset().left;

                        //console.log("FIRSTX: "+foundPoint.x);

                        foundPoint.y = $(allAs[b]).offset().top;

                        var fieldX = Math.floor(foundPoint.x / fieldWidth);

                        //console.log("1_FieldX: "+fieldX);

                        var fieldY = Math.floor(foundPoint.y / fieldHeight);

                        //console.log("1_FieldY: "+fieldY);

                        if (fields[fieldX] !== undefined) {

                                if (fields[fieldX][fieldY] !== undefined) {

                                        fields[fieldX][fieldY].push(foundPoint);

                                        //console.log("addpoint_1");

                                } else {

                                        fields[fieldX][fieldY] = [];

                                        fields[fieldX][fieldY].push(foundPoint);

                                        //console.log("addpoint_2");

                                }

                        } else {

                                fields[fieldX] = [];

                                if (fields[fieldX][fieldY] !== undefined) {

                                        fields[fieldX][fieldY].push(foundPoint);

                                        //console.log("addpoint_3");

                                } else {

                                        fields[fieldX][fieldY] = [];

                                        fields[fieldX][fieldY].push(foundPoint);

                                        //console.log("addpoint_4");

                                }

                        }

                }

        }

        /*

        *        Run appendGazeEvents over all elements on page load

        */

        var allGazeObjects = document.querySelectorAll('[data-gaze]');

                for (var g = 0; g < allGazeObjects.length; g++) {

                        appendGazeEvents(allGazeObjects[g]);

                }

        /*

        *        Append gazeEvents to a given element (if it has any appended)

        *        

        *        @sourceElement : HTML Node Element to parse for gazeEvents

        */

        function appendGazeEvents(sourceElement) {

                //console.log("myscript.js :: " + "appendGazeEvents()" );

                        var gazeObject = $(sourceElement);

                        var jsonob = gazeObject.data("gaze");

                        /*        

                        *        if element has an event bound to it, first check for function type, 

                        *        then append the event with that function to the 'sourceElement'

                        *

                        */

                        //if element has 'isFixated' event bound to it

                        if (jsonob.hasOwnProperty("isFixated")) {

                                //console.log("myscript.js :: " + "appendGazeEvents()" + " :: found isFixated data-gaze field in JSON: "+ JSON.stringify(jsonob));

                                if (jsonob.isFixated.funcType == "dynamic") {

                                        if (jsonob.isFixated.hasOwnProperty("func")) {

                                                gazeObject.off("isFixated");

                                                gazeObject.on("isFixated", new Function(jsonob.isFixated.func));

                                        } else {

                                                //console.log("myscript.js :: " + "appendGazeEvents()" + " :: function code is missing in JSON: " + JSON.stringify(jsonob));

                                                //console.log("function code is missing");

                                        }

                                } else if (jsonob.isFixated.funcType == "fixed") {

                                        if (jsonob.isFixated.hasOwnProperty("func")) {

                                                gazeObject.off("isFixated");

                                                gazeObject.on("isFixated", gazeFunctions[jsonob.isFixated.func]);

                                        } else {

                                                //console.log("myscript.js :: " + "appendGazeEvents()" + " :: function name is missing in JSON: " + JSON.stringify(jsonob));

                                                //console.log("function is missing");

                                        }