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(<