var eyex = null;
var latestGazePoint;
var _isUserPresent = false;
var numberOfLooks = 0;

/** Initializes hotkeys and the eyex object which gives access to the Tobii EyeX API for Overwolf. */
function init() {
        setWindowSize();
        setWindowPosition();
    }

function setWindowSize(){
    overwolf.windows.changeSize ("map", 350, 261);
    overwolf.windows.changeSize ("cooldowns", 420, 150);
    overwolf.windows.changeSize ("health", 220, 150);
    overwolf.windows.changeSize ("time", 500, 150);
}

function setWindowPosition(){
   overwolf.windows.changePosition("time", 693, 0);
   overwolf.windows.changePosition("MainWindow", 0, 0);
}

function openMap(){
    overwolf.windows.obtainDeclaredWindow("map",
        function(result) {
            if (result.status == "success") {
                overwolf.windows.restore(result.window.id,
                    function(result) {}
                );
            }
        }
    );
}

function openCooldowns(){
    overwolf.windows.obtainDeclaredWindow("cooldowns",
        function(result) {
            if (result.status == "success") {
                overwolf.windows.restore(result.window.id,
                    function(result) {}
                );
            }
        }
    );
}


function openHealth(){
    overwolf.windows.obtainDeclaredWindow("health",
        function(result) {
            if (result.status == "success") {
                overwolf.windows.restore(result.window.id,
                    function(result) {}
                );
            }
        }
    );
}

function openTime(){
    overwolf.windows.obtainDeclaredWindow("time",
        function(result) {
            if (result.status == "success") {
                overwolf.windows.restore(result.window.id,
                    function(result) {}
                );
            }
        }
    );
}

function closeTime(){
    overwolf.windows.obtainDeclaredWindow("time",
        function(result){
        if (result.status=="success"){
            overwolf.windows.close(result.window.id);
        }
    });
};

function closeHealth(){
    overwolf.windows.obtainDeclaredWindow("health",
        function(result){
        if (result.status=="success"){
            overwolf.windows.close(result.window.id);
        }
    });
};

function closeCooldowns(){
    overwolf.windows.obtainDeclaredWindow("cooldowns",
        function(result){
        if (result.status=="success"){
            overwolf.windows.close(result.window.id);
        }
    });
};

function closeMap(){
    overwolf.windows.obtainDeclaredWindow("map",
        function(result){
        if (result.status=="success"){
            overwolf.windows.close(result.window.id);
        }
    });
};

function openWindows(){
    openMap();
    openCooldowns();
    openHealth();
    openTime();
}

function closeWindows(){
    closeMap();
    closeTime();
    closeCooldowns();
    closeHealth();
}

window.addEventListener("load", init);

var eyex = null;
var latestGazePoint;
var _isUserPresent = false;
var numberOfLooks = 0;
var maplooks = 1;
var cooldownslooks = 1;
var healthlooks = 1;
var timelooks = 1;
var isGazePointinHotspot = false;

function init() {
    overwolf.extensions.current.getExtraObject("eyex", function(result) {
        if (result.status == "success") {
            eyex = result.object;
            eyex.onGazePoint.addListener(onGazePoint);
            eyex.init();
        }
    });
};

var status = 0; //0:stop 1:running
var time = 0;

function start() {
    status = 1;
    timer();
}

function stop() {
    status = 0;
}

function reset() {
    status = 0;
    time = 0;
    document.getElementById('timerLabel').innerHTML = '00:00:00';
}

function timer() {
    if (status == 1) {
    setTimeout(function() {
        time++;
        var min = Math.floor(time / 100 / 60);
        var sec = Math.floor(time / 100);
        var mSec = time % 100;

        if (min < 10) {
            min = "0" + min;
        }
        if (sec >= 60) {
            sec = sec % 60;
        }
        if (sec < 10) {
            sec = "0" + sec;
        }

        document.getElementById('timerLabel').innerHTML = min + ":" + sec +   ":" + mSec;
            timer();
        }, 10);
    }
}

function onGazePoint(gazePoint) {
    latestGazePoint = gazePoint;

overwolf.windows.getCurrentWindow(function(result) {
    if (result.status == "success") {
        if (isGazePointWithinWindow(result.window, gazePoint)) {
            var hotspotNum =   document.getElementById('content').getAttribute('data-value');
            var hotspot = 0;
            switch (hotspotNum) {
                case '1':
                    if (isGazePointinHotspot == false) {
                        document.getElementById("numberOfLooks").innerHTML = maplooks++;
                        isGazePointinHotspot = true;
                        document.getElementById("content").style.opacity = "0.2";
                        start();
                    }
                    break;
                case '2':
                    if (isGazePointinHotspot == false) {
                        document.getElementById("numberOfLooks").innerHTML = healthlooks++;
                        document.getElementById("content").style.opacity = "0.2";
                        isGazePointinHotspot = true;
                        start();
                    }
                    break;
                case '3':
                    if (isGazePointinHotspot == false) {
                        document.getElementById("numberOfLooks").innerHTML = cooldownslooks++;
                        isGazePointinHotspot = true;
                        document.getElementById("content").style.opacity = "0.2";
                        start();
                    }
                    break;
                case '4':
                    if (isGazePointinHotspot == false) {
                        document.getElementById("numberOfLooks").innerHTML = timelooks++;
                        isGazePointinHotspot = true;
                        document.getElementById("content").style.opacity = "0.2";
                        start();
                    }
                    break;
            }
        } else {
            document.getElementById("content").style.opacity = "0.7";
            isGazePointinHotspot = false;
            stop();
        };
    }
});
}

function numberOfLooks(gazePoint) {
    latestGazePoint = gazePoint;
    var hotspot = document.getElementById('content');
    overwolf.windows.getCurrentWindow(function(result) {
        if (result.status == "success") {
            if (isGazePointWithinWindow(result.window, gazePoint)) {

            } else {

            };
        }
    });
}



function isGazePointWithinWindow(window, gazePoint) {
    if ((gazePoint.X > window.left) && (gazePoint.X < (window.left + window.width)) && (gazePoint.Y > window.top) && (gazePoint.Y < (window.top + window.height))) {
    return true;
} else {
    return false;

}
}

window.addEventListener("load", init);

<head>
<link rel="stylesheet" href="css/style.css" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Tobii EyeX Interaction Demo</title>
<script type="text/javascript" src="js/main.js"></script>


</script>
</head>

<body>
<div id="main">
    <img class="logo" src="../hots.png" alt="hotslogo">
    <input type="image" src="../play.png" alt="Start" width="40" height="auto" onclick="openWindows()">
    <input type="image" src="../stop.png" alt="Stop" width="40" height="auto" onclick="closeWindows()">
</div>
</body>

<head>
    <link rel="stylesheet" href="../css/style.css" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Tobii EyeX Interaction Demo</title>
    <script type="text/javascript" src="../js/hotspot.js"></script>
</head>

<body>
    <div id="content" class="hotspot" data-value="1">
        <h1>Map</h1>
        <p>Number of looks: <span id="numberOfLooks"> </span> </p>
        <p>Time: <span id="timerLabel">00:00:00</span></p>

    </div>
 </body>

{
"manifest_version":1,
"type":"WebApp",
"meta":{
    "name":"xxxx",
    "version":"1.0.1",
    "minimum-overwolf-version":"0.81.14",
    "author":"xxxx",
    "icon":"xxxx",
    "icon_gray":"xxxx",
    "description":"xxxx"
},
 "permissions": [
    "Extensions"
],
"data": {
    "start_window":"MainWindow",
    "windows":{
        "MainWindow":{
                "file":"Files/index.html",
                "transparent":true,
                "resizable":false,
                "show_in_taskbar":true,
                "start_position":{"top":0, "left":0},
                "size":{"width":440, "height":330},
                "min_size":{"width":200, "height":200},
                "max_size":{"width":1000, "height":1000}
            },
            "map":{
                "file":"Files/html/map.html",
                "transparent":true,
                "resizable":false,
                "show_in_taskbar":false,
                /*"clickthrough":true,
                "start_position":{"top":806, "left":1550}, */
                "size":{"width":350, "height":261}
            },
            "cooldowns":{
                "file":"Files/html/cooldowns.html",
                "transparent":true,
                "resizable":false,
                "show_in_taskbar":false,
                /*"clickthrough":true,
                "start_position":{"top":984, "left":747}, */
                "size":{"width":420, "height":50}
            },
            "health":{
                "file":"Files/html/health.html",
                "transparent":true,
                "resizable":false,
                "show_in_taskbar":false,
                /*"clickthrough":true,
                "start_position":{"top":971, "left":196}, */
                "size":{"width":220, "height":100}
            },
            "time":{
                "file":"Files/html/time.html",
                "transparent":true,
                "resizable":false,
                "show_in_taskbar":false,
                /*"clickthrough":true,
                "start_position":{"top":0, "left":693}, */
                "size":{"width":500, "height":40}
            }
    },
    "extra-objects":{
        "eyex": {
            "file" : "plugins/OverwolfTobii.dll",
            "class" : "Overwolf.Tobii.TobiiHelper"
        }
    }
}
}