var x = 0;
var y = 0;
var hiddenFlag = 0;
var hiddenFlagStation = 0;
var hiddenFlagKabel = 0;
var hiddenFlagSlow = 0;
var actualMouseDevice = -2;
var visibleCable;
var visibleStationItem;
var hiddenFlagFreeDevice = 0;
var hiddenFlagFreeCable = 0;

var isMobile = {
           
    Android: function () {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function () {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function () {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function () {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function () {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function () {   
                     
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};


               

function getViewboxFromCookie() {


                    if (document.cookie)
                    {
                        var temp = getCookie("zoom" + getFileName() + getUrlParam("m", "0"));

                        if (temp != null) {
                            if (temp.length > 5) {
                                values = temp.split("|");
                                if (values.length > 2) {
                                    panZoom.zoom(values[0]);
                                    panZoom.pan({ x: values[1], y: values[2] });
                                }
                            }
                        }
                    }

                }

                function setViewboxInCookie()
                {
                    var cookieValue = panZoom.getZoom() + "|" + panZoom.getPan().x + "|" + panZoom.getPan().y;
                    var idMap = getUrlParam("m", "0"); //Bereich merken ansonsten gilt Zoomfenster für alle Karten
                    setCookie("zoom" + getFileName() + idMap, cookieValue, 31); 
                }

                function getUrlParam(parameter, defaultvalue) {
                    var urlparameter = defaultvalue;
                    if (window.location.href.indexOf(parameter) > -1) {
                        urlparameter = getUrlVars()[parameter];
                    }
                    return urlparameter;
                }

                function getUrlVars() {
                    var vars = {};
                    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
                        vars[key] = value;
                    });
                    return vars;
}
                function getFileName() {
                    var dn = document.URL;
                    var ende = dn.lastIndexOf('?');
                    if(ende>0)
                        dn = dn.substring(0, ende); 
                    dn = dn.substring(dn.lastIndexOf('/') + 1, dn.length);
                    dn = dn.substring(0, dn.lastIndexOf('.')); 
                    return dn;
                }


                function setCookie(name, value, days) {
                    var expires = "";
                    if (days) {
                        var date = new Date();
                        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                        expires = "; expires=" + date.toUTCString();
                    }
                    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

                function getCookie(name) {
                    var nameEQ = name + "=";
                    var ca = document.cookie.split(';');
                    for (var i = 0; i < ca.length; i++) {
                        var c = ca[i];
                        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
                    }
                    return null;
                    }

                function eraseCookie() {

                        var idMap = getUrlParam("m", "0"); //Bereich merken ansonsten gilt Zoomfenster für alle Karten
                        var name = "zoom" + idMap;
                        document.cookie = name + '=; Max-Age=-99999999;';
                    }

              function setRecColor(objekt, strokecolor, colorfill, strokewidth, strokeblink) {
                  try{
                      var rr = document.getElementById(objekt);
                      if (rr != null) {

                          rr.style.setProperty("fill", colorfill, "");
                          rr.style.setProperty("stroke-width", strokewidth, "");           
                          rr.style.setProperty("stroke", strokecolor, "");

                          if (strokeblink == "1") {
                              rr.setAttribute("class", "blinkRec");
                          }

                          /*
                          // if (strokecolor == "#ff00ff" || strokecolor == "Red" || strokecolor == "Yellow" || strokecolor == "#33CC33" || strokecolor == "Blue" || strokecolor == "Cyan" || strokecolor == "Orange" || strokecolor == "White" || strokecolor == "#98FB98")
                          rr.style.setProperty("stroke", strokecolor, "");

                          if (strokeblink == "1") {
                              rr.setAttribute("class", "blinkRec");
                              rr.style.setProperty("stroke-width", "4", "");  //12
                          }
                          else {
                              rr.setAttribute("class", "fil0 str1");
                              if (strokecolor == "#000000")
                                  rr.style.setProperty("stroke-width", "4", "");  //12
                              else {

                                  rr.style.setProperty("stroke-width", "4", ""); //12
                              }
                          }
*/
                          if (rr.nodeName == "rect")                                              
                              rr.style.setProperty("stroke-width", strokewidth *7, "");            //*12
                          if (rr.nodeName == "circle")
                              rr.style.setProperty("stroke-width", strokewidth * 1, "");            //*12
                            
                      }




                  }
                  catch(err)
                  {
                      alert("F1");
                  }
              }

        function setLineColor(objekt, strokecolor, strokewidth, strokeblink) {
            try{
                var rr = document.getElementById(objekt);
                if (rr != null) {


                    if (strokeblink == "1") 
                        rr.setAttribute("class", "blinkLine fil0");
                    else
                        rr.setAttribute("class", "fil0");

                    rr.style.setProperty("stroke", strokecolor, "");
                    rr.style.setProperty("stroke-width", 8, "");
                   
                }
            }
            catch(err)
            {
                alert("F2");
            }


        }


        function initRec() {
            var tab = document.getElementById("ASPxGridViewMap_DXMainTable");
            var rows = tab.getElementsByTagName("tr");
            var anzahl = rows.length;
            var row;
            var text1;
            var text2;
            var text3;
            var text4;
            var imagePath;
           
            
            if (isMobile.any()) {
                //Wenn Mobile nur Klick mit Zusatzdaten
                for (i = 0; i < anzahl; i++) {
                    row = document.getElementById("ASPxGridViewMap_DXDataRow" + i);
                    if (row != null) {
                        var rr = document.getElementById(row.cells[2].innerHTML);
                        var rrT = document.getElementById(row.cells[2].innerHTML + "T");  //evtl. Textfeld
                 
                        typ = row.cells[1].textContent;

                        link = row.cells[10].textContent;
                        imagePath = row.cells[13].textContent;
                        if (rr != null) {
                            //Bei Klick Station aufrufen
                            rr.onclick = function (e) {
                                clickStation(link, typ);
                            }
                            if (rrT != null) {
                                rrT.onclick = function (e) {
                                    clickStation(link, typ);
                                };
                            }
                        }

                        var rrW = document.getElementById("Wo_"+row.cells[2].innerHTML);
                        if (rrW != null) {
                            rrW.onclick = function (e) {
                                clickStation(link, typ);
                            }

                        }

                    }
                }
            }
            else {
                
                for (i = 0; i < anzahl; i++) {
                   
                    row = document.getElementById("ASPxGridViewMap_DXDataRow" + i);
                    if (row != null) {
                        var deviceID = row.cells[0].innerHTML;
                        if (deviceID != "-1") {

                            var deviceObject = "Device_" + row.cells[0].innerHTML;
                            var avObject = "Wo_Device_" + row.cells[0].innerHTML;
                            var deviceLink = row.cells[10].innerHTML;

                            //var rrT = document.getElementById(row.cells[2].innerHTML + "T");  //evtl. Textfeld
                            /*
                            typ = row.cells[1].textContent;
                            text1 = row.cells[8].textContent;
                            text2 = row.cells[9].textContent;
                            text3 = row.cells[10].textContent;
                            text4 = row.cells[11].textContent;
                            link = row.cells[12].textContent;
                            imagePath = row.cells[13].textContent;
                            */

                            var rr = document.getElementById(deviceObject);
                            var rrT = document.getElementById(avObject); 

                            if (rr != null && deviceLink!= null) {
                                setCursorPoint(rr, true);
                                //Bei Klick Station aufrufen
                                rr.onclick = function (e) {
                                    clickStation(this);
                                }
                            }
                            if (rrT != null && deviceLink != null) {
                                setCursorPoint(rrT, true);
                                rrT.onclick = function (e) {
                                    clickStation(this);
                                };
                            }

                           //Bei Mouseover Zusatzdaten anzeigen

                            if (rr != null) {

                                rr.onmouseover = function (e) {
                                    setCursorPoint(rr, true);
                                    visibleStation(this)
                                }
                                if (rrT != null) {
                                    setCursorPoint(rrT, true);
                                    rrT.onmouseover = function (e) {
                                        setCursorPoint(rr, true);
                                        visibleStation(this)
                                    }
                                }

                                rr.onmouseout = function (e) {
                                    setCursorPoint(rr, false);
                                    hiddenStationSlow()
                                };
                                if (rrT != null) {
                                    rrT.onmouseout = function (e) {
                                        setCursorPoint(rr, false);
                                        hiddenStationSlow();
                                    };
                                }

                            }
                            
                        }
                    }                
                }
            }
            updateRec();
        }


        function initLine() {
            
            var tab = document.getElementById("ASPxGridViewCables_DXMainTable");
            var rows = tab.getElementsByTagName("tr");
            var anzahl = rows.length;
            var row;
            var text1;
            var text2;
            var text3;
		
	        if (isMobile.any()) {
                //Wenn Mobile nur Klick mit Zusatzdaten
                for (i = 0; i < anzahl; i++) {
                         row = document.getElementById("ASPxGridViewCables_DXDataRow" + i);
                    if (row != null) {
			            var rr = document.getElementById("Cable"+row.cells[0].textContent+"-"+row.cells[1].textContent);
			            link="#";
                    }
                }
            }
            else {
                for (i = 0; i < anzahl; i++) {
                         row = document.getElementById("ASPxGridViewCables_DXDataRow" + i);
                    if (row != null) {
			var rr = document.getElementById("Cable"+row.cells[0].textContent);


                        //var rr = document.getElementById(row.cells[2].textContent);
                        text1 = "++"; //row.cells[6].textContent;
                        text2 = ""; //row.cells[7].textContent;
                        text3 = ""; //row.cells[8].textContent;
			            link="#";
                        //link = row.cells[9].textContent;

                        if (rr != null) {
                            //Bei Klick Station aufrufen
                            rr.onclick = function (e) {
                                clickStation(link); 
                            };


                            //Bei Mouseover Zusatzdaten anzeigen

                            rr.onmouseover = function (e) {
                                setCursorPoint(rr, true);
                                visibleKabel(this)
                            }


                            rr.onmouseout = function (e) {                
                                setCursorPoint(rr, false); 
                                hiddenKabelSlow()
                            };


                        }

                   

                        
                    }
                }
            }
            

	}


function initAll() {
    var tab = document.getElementById("ctl00_MainContent_AllView_DXMainTable");
    var rows = tab.getElementsByTagName("tr");
    var anzahl = rows.length-4;
    var row;
    var text;
    var i, n;

    //alert(anzahl);
    for (i = 0; i < anzahl; i++) {
        row = document.getElementById("ctl00_MainContent_AllView_DXDataRow" + i);
        if (row != null) {

	    //Anzahl
            var rr = document.getElementById("text_"+row.cells[1].innerHTML);
            text = row.cells[4].textContent;
            if (rr != null) {
                if (text != null) {
                    if (rr.textContent != null) {
			if(text==0)
				rr.textContent="";
			else
                        	rr.textContent = text;
                    }
                }
            }

	    //Farbe
            var rr = document.getElementById("color_"+row.cells[1].innerHTML);
            color = row.cells[3].textContent;
            if (rr != null) {
                if (text != null) {
                    if (rr.textContent != null && color!="#ffffff") {
                         rr.style.setProperty("fill",  color, "");
                    }
                }
            }
        }

    }


}

        function updateRec() {
            try{
                var tab = document.getElementById("ASPxGridViewMap_DXMainTable");
                var rows = tab.getElementsByTagName("tr");
                var anzahl = rows.length;
                var row;
           
                for (i = 0; i < anzahl; i++)
                {
                    row = document.getElementById("ASPxGridViewMap_DXDataRow" + i);

                    if (row != null)
                    {

                        try {
                            var deviceID = row.cells[0].innerHTML;

                            //Stationssymbol
                            var colorFill = row.cells[7].textContent;
                            var colorLine = row.cells[9].textContent;
				    var blink = row.cells[8].textContent;
                            var deviceObject = "Device_" + deviceID;
					if(blink=="True")
                            		setRecColor(deviceObject, colorLine, colorFill, 1, 1);
					else
						setRecColor(deviceObject, colorLine, colorFill, 1, 0);
                            var rr = document.getElementById(deviceObject);
                            var deviceLink = row.cells[10].textContent;

                            //Arbeitsvorbereitungssysmbolfeld
                            var avText = " "; //Erstmal zum Test hier später richtiges AV Symbol
                            var avObject = "AV_" + deviceID;
                            var avBox = document.getElementById(avObject);                    

                            if (rr != null) {
                                setCursorPoint(rr, true);

                                //Bei Klick Station aufrufen
								/*
                                rr.onclick = function (e) {
                                    clickStation(deviceLink);
                                }
								*/
                                //Bei Mouseover Details anzeigen
                                /*
                                rr.onmouseover = function (e) {
                                    setCursorPoint(rr, true);
                                    visibleStation(deviceID)
                                }
                                */
                            }

                            if (avBox != null) {

                                avBox.textContent = avText;
                                setCursorPoint(avBox, true);

                                //Bei Klick Station aufrufen
								/*
                                avBox.onclick = function (e) {
                                    clickStation(deviceLink);
                                };
								*/

                                //Bei Mouseover Details anzeigen
                                /*
                                rrT.onmouseover = function (e) {
                                    setCursorPoint(avBox, true);
                                    visibleStation(deviceID)
                                }
                                */
                            }                         

                        }
                        catch (err2)
                        {  }
                        
                    }
                    row = null;
                }           
            }
            catch(err)
            {
                alert(err);
            }
            
        }

        function updateLine() {
            try
            {

                //var tab = document.getElementById("ctl00_MainContent_LineView_DXMainTable");
		    var tab = document.getElementById("ASPxGridViewCables_DXMainTable");
                var rows = tab.getElementsByTagName("tr");
                var anzahl = rows.length - 4;
                var row;
                var name;
                var strokecolor;
                var strokewidth;
                var strokeblink;
                var text;
                var link;
                var typ;
	
                for (i = 0; i < anzahl; i++) {
                    //row = document.getElementById("ctl00_MainContent_LineView_DXDataRow" + i);
	            row = document.getElementById("ASPxGridViewCables_DXDataRow" + i);

                    if (row != null) {
                        typ = "CPL";
                        name = "Cable"+row.cells[0].textContent;
	
                        strokecolor = row.cells[1].textContent;
			strokeblink="0";
			text1="";
			text2="";
			text3="";
			link="";
/*
                        strokeblink = row.cells[5].textContent;
                        text1 = row.cells[6].textContent;
                        text2 = row.cells[7].textContent;
                        text3 = row.cells[8].textContent;
                        link = row.cells[9].textContent;
*/

                        setLineColor(name, strokecolor, strokewidth, strokeblink);
                        //setNewTextLine(name, text1, text2, text3, link, typ);
                    }
                    row = null;
                }
            }
            catch(err)
            {
                alert("F4");
            }
        }


function updateVisibleObjects() {
            try
            {
		    var tab = document.getElementById("ASPxGridViewVisible_DXMainTable");
                var rows = tab.getElementsByTagName("tr");
                var anzahl = rows.length - 3;
                var row;
                var name;
                var status;

                for (i = 0; i < anzahl; i++) 
			{
	            	row = document.getElementById("ASPxGridViewVisible_DXDataRow" + i);
		
                    	if (row != null) 
				{
                       	 	name = row.cells[0].textContent;	
                      	  	status = row.cells[1].textContent;
	

            			var objectSVG = document.getElementById(name);
            			if (objectSVG != null) 
					{
                				if (status == "True")
                    				objectSVG.style.visibility = "visible";
                				else
						{
                    				objectSVG.style.visibility = "hidden";
			
						}
            			}
            			else 
					{
                				alert("Kann das Objekt " + name + " nicht finden!");
            			}
                    	}
                    	row = null;
                	}
            }
            catch(err)
            {
               // alert("F5");
            }
        }


function updateAll() {

    var tab = document.getElementById("ctl00_MainContent_AllView_DXMainTable");
    var rows = tab.getElementsByTagName("tr");
    var anzahl = rows.length - 4;
    var row;

   
    for (i = 0; i < anzahl; i++) {
        row = tab.rows[i + 1];
        if (row != null) {

            var name = row.cells[1].textContent;
            var text = row.cells[2].textContent;

	    //Anzahl
            var rr = document.getElementById("text_"+row.cells[1].innerHTML);
            text = row.cells[4].textContent;
            if (rr != null) {
                if (text != null) {
                    if (rr.textContent != null) {
			if(text==0)
				rr.textContent="";
			else
                        	rr.textContent = text;
                    }
                }
            }

	    //Farbe
            var rr = document.getElementById("color_"+row.cells[1].innerHTML);
            color = row.cells[3].textContent;
            if (rr != null) {
                if (text != null) {
                    if (rr.textContent != null && color!="#ffffff") {
                         rr.style.setProperty("fill",  color, "");
                    }
                }
            }
        }
        row = null;
    }
   
}


function setNewAllText(name, text) {
    var rr = document.getElementById(name);
    if (rr != null) {
        if (rr.textContent != null)
            rr.textContent = text;
        else
            alert("F2");
     }
}


        function setDoor(name, zustand)
        {
            var objectName = name + "_Door";
            var objectDoor = document.getElementById(objectName);
            if (objectDoor != null) {
                if (zustand == "1")
                    objectDoor.style.visibility = "visible";
                else
                    objectDoor.style.visibility = "hidden";
            }
            else {
                alert("Kann " + objectName + " nicht finden!");
            }
        }


        function clickStation(deviceObject) {
		
			var tab = document.getElementById("ASPxGridViewMap_DXMainTable");
            var rows = tab.getElementsByTagName("tr");
            var anzahl = rows.length;
            var row;
			var deviceLink ="#1";
           
		    setViewboxInCookie();
		   
			for (i = 0; i < anzahl; i++)
			{
				row = document.getElementById("ASPxGridViewMap_DXDataRow" + i);

				if (row != null)
				{
					if((deviceObject.id=="Device_" + row.cells[0].innerHTML) || (deviceObject.id=="Wo_Device_" + row.cells[0].innerHTML))				
					{
						deviceLink = row.cells[10].innerHTML;
						while(deviceLink.indexOf("&amp;")>0){
							deviceLink=deviceLink.replace("&amp;","&");}
						i=anzahl;
					}
				}
			}
            location.href = deviceLink;           
        }

        function clickStationWindow(link, typ) {          
            MeinFenster = window.open(link);
            MeinFenster.focus();
        }

        function clickStationWindowMobil(link, typ) {
            MeinFenster = window.open(link);
            MeinFenster.focus();
        }



        function visibleStation(deviceObject) {
            if (hiddenFlagFreeCable == 0 && hiddenFlagFreeDevice==0) {
                hiddenFlagFreeDevice == 1;




                //Tabelle leeren
                /*
                for (i = 0; i < GridDevices.GetVisibleRowsOnPage(); i++) {
                    GridDevices.DeleteRow(i);
                }
                */


                ModulBox.PerformCallback(deviceObject.id);
                hiddenFlagSlow = 0;


                //Aufleuchten lassen
                //deviceObject.style.setProperty("stroke-width", 24, "");

                if (visibleStationItem != null)
                    visibleStationItem.style.setProperty("animation", "aniOff 1s linear", "");

                visibleStationItem = deviceObject;

                if (deviceObject.nodeName == "rect")
                    deviceObject.style.setProperty("animation", "aniOnDeviceBig 1s linear alternate infinite", "");
                else
                    deviceObject.style.setProperty("animation", "aniOnDeviceSmall 1s linear alternate infinite", "");

                var pos = mousePos;

                document.getElementById("BoxDevice").style.opacity = 0.95;
                //alert(pos.x + " " + pos.y);
                if (pos.x < 600) {
                    document.getElementById("BoxDevice").style.top = "60px";
                    document.getElementById("BoxDevice").style.left = "600px";
                }
                else {
                    document.getElementById("BoxDevice").style.top = "60px";
                    document.getElementById("BoxDevice").style.left = "60px"; //60
                }

                hiddenKabel();
                document.getElementById("BoxDevice").style.visibility = "visible";
            }
        }

function hiddenStation() {
    if (visibleStationItem != null)
        visibleStationItem.style.setProperty("animation", "aniOff 1s linear", "");
            hiddenFlagStation = 0
            document.getElementById("BoxDevice").style.visibility = "hidden";  
        }

        function hiddenStationSlow() {
           hiddenFlagSlow=1;
            window.setTimeout("hiddenStationQuest()", 3000);   
        }

        function hiddenStationQuest() {
            if (hiddenFlagSlow == 1) {
                hiddenFlagStation = 0;
                if (visibleStationItem != null)
                    visibleStationItem.style.setProperty("animation", "aniOff 1s linear", "");
                document.getElementById("BoxDevice").style.visibility = "hidden";
                hiddenFlagSlow = 0;
                hiddenFlagFreeDevice = 0;
                hiddenFlagFreeCable = 0;
            }
}










        function visibleKabel(deviceObject) {

            if (hiddenFlagFreeCable == 0 && hiddenFlagFreeDevice==0) {
                hiddenFlagFreeCable = 1;


                //Tabelle leeren
                /*
                for (i = 0; i < GridCables.GetVisibleRowsOnPage(); i++) {
                    GridCables.DeleteRow(i);
                }
                */


                if (visibleCable != null) //Wenn noch ein Kabel hervorgehoben ist dann wieder normal
                {
                    visibleCable.style.setProperty("animation", "aniOff 1s linear", "");
                    visibleCable.style.setProperty("stroke-width", 8, "");
                }


                visibleCable = deviceObject;

                //Aufleuchten lassen
                deviceObject.style.setProperty("stroke-width", 24, "");
                deviceObject.style.setProperty("animation", "aniOn 0.8s linear alternate infinite", "");


                ModulBoxCable.PerformCallback(deviceObject.id);
                hiddenFlagSlow = 0;

                var pos = mousePos;

                document.getElementById("BoxCable").style.opacity = 0.95;

                if (pos.x < 600) {
                    document.getElementById("BoxCable").style.top = "60px";
                    document.getElementById("BoxCable").style.left = "600px";
                }
                else {
                    document.getElementById("BoxCable").style.top = "60px";
                    document.getElementById("BoxCable").style.left = "60px"; //60
                }

                hiddenStation();
                document.getElementById("BoxCable").style.visibility = "visible";
            }
        }


function hiddenKabel() {
            if (visibleCable != null) //Wenn noch ein Kabel hervorgehoben ist dann wieder normal
            {
                visibleCable.style.setProperty("animation", "aniOff 1s linear", "");
                visibleCable.style.setProperty("stroke-width", 8, "");
            }
            hiddenFlagStation = 0
            document.getElementById("BoxCable").style.visibility = "hidden";
            window.setTimeout("waitForNextCable()", 1000);  
        }

        function hiddenKabelSlow() {
            hiddenFlagSlow = 1;
            window.setTimeout("hiddenKabelQuest()", 3000);
        }

        function hiddenKabelQuest() {
            if (hiddenFlagSlow == 1) {

                //Inhalt Popup löschen
                //ModulBoxCable.PerformCallback(-1);

                if (visibleCable != null) //Wenn noch ein Kabel hervorgehoben ist dann wieder normal
                {
                    visibleCable.style.setProperty("animation", "aniOff 1s linear", "");
                    visibleCable.style.setProperty("stroke-width", 8, "");
                }
                hiddenFlagStation = 0;
                document.getElementById("BoxCable").style.visibility = "hidden";
                hiddenFlagSlow = 0;
                hiddenFlagFreeCable = 0;
                hiddenFlagFreeDevice = 0;
            }
}

function waitForNextDevice() {
    hiddenFlagFreeDevice = 0;
    hiddenFlagFreeCable = 0;
}

function waitForNextCable() {
    hiddenFlagFreeDevice = 0;
    hiddenFlagFreeCable = 0;
}






        function setCursorPoint(elem, zustand) {

            if (elem != null) {
                elem.style.cursor = "pointer";
            }

           
            
}

function handleMouseMove(event) {
    var dot, eventDoc, doc, body, pageX, pageY;

    event = event || window.event; // IE-ism

    // If pageX/Y aren't available and clientX/Y are,
    // calculate pageX/Y - logic taken from jQuery.
    // (This is to support old IE)
    if (event.pageX == null && event.clientX != null) {
        eventDoc = (event.target && event.target.ownerDocument) || document;
        doc = eventDoc.documentElement;
        body = eventDoc.body;

        event.pageX = event.clientX +
            (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
            (doc && doc.clientLeft || body && body.clientLeft || 0);
        event.pageY = event.clientY +
            (doc && doc.scrollTop || body && body.scrollTop || 0) -
            (doc && doc.clientTop || body && body.clientTop || 0);
    }

    mousePos = {
        x: event.pageX,
        y: event.pageY
    };
}

document.onmousemove = handleMouseMove;