<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
    <title>Livezilla GeoTracking</title>
    <STYLE type="text/css">
        * {
            font-family: verdana, arial;
            font-size: 11px;
            color: #616161;
        }

        DIV {
            font-size: 11px;
            color: #8d8d8d;
            vertical-align: middle;
            text-align: center;
        }

        body {
            background: #a5bfdd;
        }
    </STYLE>

    <script type="text/javascript">
        var zoomlevel = 1;
        var maptype = 0;
        var selected = null;
        var visitors = Array();
        var loaded = false;
        var preselect = null;
        var path = "./images/geo/default/";
        var imageShadow = path + "shadow.png";
        var imageVisitor = path + "visitor.png";
        var imageVisitorSelected = path + "visitor_selected.png";
        var imageVisitorChat = path + "visitor_chat.png";
        var imageVisitorSelectedChat = path + "visitor_selected_chat.png";
        var shadow = true;
        var maps = Array();
        var map_scroll = null;
        var messageOrigin, selectedMarker = null;

        maps[1] = { name: "Medium", width: 500, height: 333, file: "map_2.jpg", xcor: 68, ycor: 33 }
        maps[2] = { name: "Large", width: 999, height: 666, file: "map_3.jpg", xcor: 81, ycor: 65 }
        maps[3] = { name: "Full", width: 1998, height: 1332, file: "map_4.jpg", xcor: 114, ycor: 128 }

        var onMessageFromMainFrame = function (_event) {

            var level = 1;
            switch (_event.data.action) {
                case 'zoom':
                case 'do-zoom-to':
                    if(_event.data.in === 1)
                        DoZoomIn();
                    else
                        DoZoomOut();
                    break;
                case 'get-zoomlevel':
                    level = zoomlevel;//map.getZoom();
                    sendMessageToMainFrame('get-zoomlevel', level);
                    break;
                case 'add-visitor':
                    AddVisitor(_event.data.lat, _event.data.lon, _event.data.id);
                    break;
                case 'remove-visitor':
                    RemoveVisitor(_event.data.id);
                    break;
                case 'clear':
                    RemoveAllMarkers();
                    break;
                case 'set-selection':
                    SetSelection(_event.data.id, _event.data.center);
                    break;
                case 'get-selection':
                    GetSelectedMarkerID(_event.data.id, _event.data.center);
                    break;
                case 'set-map-type':
                    SetMapType(_event.data.type);
                    break;
                case 'reset':
                    ResetView();
                    break;
                case 'set-origin':
                    messageOrigin = _event.data.origin;
                    sendMessageToMainFrame('get-url', messageOrigin);
                    break;
                default:
                    break;
            }
        };

        var sendMessageToMainFrame = function (_function_name, _params) {
            try {
                if (messageOrigin !== null)
                    parent.postMessage({
                        function: _function_name,
                        params: _params
                    }, messageOrigin);
            }
            catch (ex) {

            }
        };

        function init() {
            window.addEventListener('message', onMessageFromMainFrame, false);
            map_scroll = new ScrollMap();
        }

        function ChangeImageSource(_imageVisitor, _imageVisitorSelected, _imageVisitorChat, _imageVisitorSelectedChat, _shadow) {
            imageVisitor = _imageVisitor;
            imageVisitorSelected = _imageVisitorSelected;
            imageVisitorChat = _imageVisitorChat;
            imageVisitorSelectedChat = _imageVisitorSelectedChat;
            shadow = _shadow;
        }

        function ResetView() {
            document.getElementById('map').style.display='block';
            zoomlevel = 1;
            DoZoomIn();
            DoZoomOut();
        }

        function DoZoomIn(){
            if (zoomlevel < 3)
                zoomlevel++;
            else
                return;
            DoZoom(true);
        }

        function DoZoomOut() {
            if (zoomlevel >= 2)
                zoomlevel--;
            else
                return;
            DoZoom(false);
        }


        function DoZoom(_in) {
            document.getElementById("map").style.backgroundImage = "url('" + path + maps[zoomlevel].file + "')";
            document.getElementById("map").style.width = maps[zoomlevel].width;
            document.getElementById("map").style.height = maps[zoomlevel].height;

            maptype = maps[zoomlevel];
            RePosition();
            if (_in)
                map_scroll.ScrollTo((document.documentElement.offsetWidth / 2) - (maptype.width / 2), (document.documentElement.offsetHeight / 2) - (maptype.height / 2));
            else
                map_scroll.ScrollTo(map_scroll.map.style.left.replace("px", "") - ((maps[zoomlevel].width - maps[zoomlevel + 1].width) / 2), map_scroll.map.style.top.replace("px", "") - ((maps[zoomlevel].height - maps[zoomlevel + 1].height) / 2));
        }

        function SetMapType(_type) {

        }

        function RePosition() {
            var visitorsold = Array();
            for (var i = 0; i < visitors.length; i++) {
                visitorsold.push(visitors[i]);
            }
            ClearAll();
            for (var i = 0; i < visitorsold.length; i++) {
                AddVisitor(visitorsold[i].m_Lat, visitorsold[i].m_Lng, visitorsold[i].m_Id);
                visitors[i].m_Selected = visitorsold[i].m_Selected;

                if (visitors[i].m_Selected)
                    SetSelection(visitorsold[i].m_Id, true);
            }
        }

        function ClearAll() {
            for (var i = 0; i < visitors.length; i++) {
                document.getElementById("map").removeChild(visitors[i].m_Marker);
                document.getElementById("map").removeChild(visitors[i].m_MarkerShadow);
            }
            visitors.length = 0;
        }

        function SetSelection(_id, _center) {
            preselect = _id;
            oldselected = selected;
            for (var i = 0; i < visitors.length; i++) {
                if (visitors[i].GetId() == _id) {
                    selected = visitors[i];
                    visitors[i].SetSelection(true);
                }
                else if (visitors[i] == oldselected)
                    visitors[i].SetSelection(false);
            }
        }

        function GetSelection(_id, _center) {
            return selected.GetId();
        }

        function SetChat(_id, _chat) {
            for (var i = 0; i < visitors.length; i++) {
                if (visitors[i].GetId() == _id) {
                    visitors[i].SetChat(_chat);
                    return;
                }
            }
        }

        function RemoveVisitor(_id) {
            var new_visitors = Array();
            for (var i = 0; i < visitors.length; i++) {
                if (visitors[i].GetId() == _id) {
                    visitors[i].SetSelection(false);
                    document.getElementById("map").removeChild(visitors[i].m_Marker);
                    document.getElementById("map").removeChild(visitors[i].m_MarkerShadow);
                }
                else
                    new_visitors.push(visitors[i]);
            }
            visitors = new_visitors;
        }

        function AddVisitor(_lat, _lng, _id) {
            var visitor = new Visitor(_id);
            visitor.m_Lat = _lat;
            visitor.m_Lng = _lng;
            visitor.GetHTML(_lat, _lng);
            visitors.push(visitor);
            visitors = visitors.sort(sortVisitors);

            var intz = 31;
            for (var i = 0; i < visitors.length; i++) {
                visitors[i].m_ZIndex =
                    visitors[i].m_Marker.style.zIndex = intz++;
            }
        }


        function sortVisitors(a, b) {
            return a.m_YPos - b.m_YPos;
        }


        function AvoidReload() {
            event.keyCode = 70;
        }

        function Visitor(_id) {
            this.m_Id = _id;
            this.m_Selected = false;
            this.m_Chat = false;
            this.m_Lat;
            this.m_Lng;
            this.m_Marker;
            this.m_MarkerShadow;
            this.m_YPos = 0;
            this.m_ZIndex = 0;
            this.GetHTML = getHTML;
            this.GetMarker = getMarker;
            this.GetId = getId;
            this.SetSelection = setSelection;
            this.SetChat = setChat;
            this.ShowImage = showImage;
            this.SetImage = setImage;

            function getMarker() {
                return this.m_Marker;
            }

            function getHTML(_lat, _lng) {
                var pos = convert(_lat, _lng);
                this.m_YPos = pos[0];
                this.m_Marker = document.createElement('img');
                this.m_Marker.id = this.m_Id;
                this.m_Marker.src = imageVisitor;
                this.m_Marker.onclick = function () { SetSelection(this.id, false);/* document.body.fireEvent("ondragover", document.createEventObject());*/ };
                this.m_Marker.style.cssText = "cursor:pointer;width:24px;height:50px;font-size:0px;padding:0px;position:absolute;top:" + pos[0] + "px;left:" + pos[1] + "px;";
                document.getElementById("map").appendChild(this.m_Marker);

                this.m_MarkerShadow = document.createElement('img');
                this.m_MarkerShadow.id = this.m_Id + "_shadow";
                this.m_MarkerShadow.src = imageShadow;
                this.m_MarkerShadow.style.cssText = "width:26px;height:50px;font-size:0px;padding:0px;position:absolute;top:" + pos[0] + "px;left:" + (pos[1] + 3) + "px;";
                document.getElementById("map").appendChild(this.m_MarkerShadow);
            }

            function getId() {
                return this.m_Id;
            }

            function showImage() {
                if (this.m_Selected && this.m_Chat)
                    this.SetImage(imageVisitorSelectedChat);
                else if (this.m_Selected && !this.m_Chat)
                    this.SetImage(imageVisitorSelected);
                else if (this.m_Chat)
                    this.SetImage(imageVisitorChat);
                else
                    this.SetImage(imageVisitor);
            }

            function setImage(_img) {
                document.getElementById(this.m_Id).src = _img;
            }

            function setSelection(_selected) {
                this.m_Selected = _selected;

                if (_selected)
                    this.m_Marker.style.zIndex = visitors.length + 35;
                else
                    this.m_Marker.style.zIndex = this.m_ZIndex;

                this.ShowImage();
            }

            function setChat(_chat) {
                this.m_Chat = _chat;
                this.ShowImage();
            }

            function convert(lat, lng) {
                var mapheight = maptype.height;
                var mapwidth = maptype.width;
                var layerheight = 50;
                var layerwidth = 20;
                var longitude_shift = 55;
                var x_pos = maptype.xcor;
                var y_pos = maptype.ycor;
                var layermiddle = Math.floor(layerwidth / 2);

                x = (mapwidth * (180 + lng) / 360) % mapwidth + longitude_shift;
                lat = lat * Math.PI / 180;
                y = Math.log(Math.tan((lat / 2) + (Math.PI / 4)));
                y = (mapheight / 2) - (mapwidth * y / (2 * Math.PI)) + y_pos;
                x -= x_pos; y += y_pos;
                return new Array(y - layerheight, x - layermiddle);
            }
        }

        window.onresize = resizeWindow;
        function resizeWindow() {
            var element = document.getElementById("frameb");

            element.style.height = document.documentElement.offsetHeight + "px";
            element.style.width = (document.body.clientWidth) + "px";
        }


        function ScrollMap() {
            function AddListener(element, event, f) { if (element.attachEvent) { element["e" + event + f] = f; element[event + f] = function () { element["e" + event + f](window.event) }; element.attachEvent("on" + event, element[event + f]) } else element.addEventListener(event, f, false) }
            function Positioning(startX, startY) { this.x = startX; this.y = startY; }
            function ScrollTo(_x, _y) { scrollmap.map.style.left = _x + "px"; scrollmap.map.style.top = _y + "px"; }

            this.ScrollTo = ScrollTo;

            var scrollmap = this;
            scrollmap.slideOut = 0;
            scrollmap.map = document.getElementById("map");
            scrollmap.width = document.body.clientWidth;
            scrollmap.height = document.documentElement.offsetHeight;
            scrollmap.scrolling = true;
            scrollmap.framediv = document.createElement("div");
            scrollmap.framediv.id = "frameb";
            scrollmap.mousePosition = new Positioning;
            scrollmap.mouseLocations = [];
            scrollmap.speed = new Positioning;
            scrollmap.mouseDown = false;
            scrollmap.timerId = -1;
            scrollmap.timerCount = 0;
            scrollmap.map.parentNode.replaceChild(scrollmap.framediv, scrollmap.map);
            scrollmap.framediv.appendChild(scrollmap.map);
            scrollmap.framediv.style.overflow = "hidden";
            scrollmap.framediv.style.width = scrollmap.width + "px";
            scrollmap.framediv.style.height = scrollmap.height + "px";
            scrollmap.framediv.style.position = "relative";
            scrollmap.map.style.position = "absolute";
            ScrollTo(-120, -120);

            var MouseMove = function (b) {
                var e = b.clientX - scrollmap.mousePosition.x + parseInt(scrollmap.map.style.left), d = b.clientY - scrollmap.mousePosition.y + parseInt(scrollmap.map.style.top);
                ScrollTo(e, d);
                scrollmap.mousePosition.x = b.clientX;
                scrollmap.mousePosition.y = b.clientY
            };

            var OnslideOutr = function () {
                if (scrollmap.mouseDown) {
                    scrollmap.mouseLocations.unshift(new Positioning(scrollmap.mousePosition.x, scrollmap.mousePosition.y));
                    if (scrollmap.mouseLocations.length > 10)
                        scrollmap.mouseLocations.pop();
                }
                else 
                {
                    var milliTotal = scrollmap.slideOut / 20;
                    var spaceUP = (milliTotal - scrollmap.timerCount) / milliTotal;
                    var xspeed = scrollmap.speed.x * spaceUP;
                    var yspeed = scrollmap.speed.y * spaceUP;

                    ScrollTo(-xspeed + parseInt(scrollmap.map.style.left), -yspeed + parseInt(scrollmap.map.style.top));

                    if (scrollmap.timerCount == milliTotal) {
                        clearInterval(scrollmap.timerId);
                        scrollmap.timerId = -1
                    }
                    ++scrollmap.timerCount;
                }
            };

            AddListener(scrollmap.framediv, "mousedown", function (e) {
                if (scrollmap.mouseDown) {
                    return false;
                }
                scrollmap.mousePosition.x = e.clientX;
                scrollmap.mousePosition.y = e.clientY;
                AddListener(document, "mousemove", MouseMove);

                scrollmap.mouseDown = true;

                if (scrollmap.scrolling) {
                    scrollmap.timerCount = 0;
                    if (scrollmap.timerId != 0) {
                        clearInterval(scrollmap.timerId);
                        scrollmap.timerId = 0;
                    }
                    scrollmap.timerId = setInterval(OnslideOutr, 20);
                }
                e.preventDefault();
            });

            AddListener(document, "mouseup", function () {
                if (scrollmap.mouseDown) {
                    var handler = MouseMove;
                    if (document.detachEvent) {
                        document.detachEvent("onmousemove", document["mousemove" + handler]);
                        document["mousemove" + handler] = null;
                    }
                    else {
                        document.removeEventListener("mousemove", handler, false);
                    }

                    scrollmap.mouseDown = false;
                    if (scrollmap.mouseLocations.length > 0) {
                        var clickCount = scrollmap.mouseLocations.length;
                        scrollmap.speed.x = (scrollmap.mouseLocations[clickCount - 1].x - scrollmap.mouseLocations[0].x) / clickCount;
                        scrollmap.speed.y = (scrollmap.mouseLocations[clickCount - 1].y - scrollmap.mouseLocations[0].y) / clickCount;
                        scrollmap.mouseLocations.length = 0;
                    }
                }
            });
        };

    </script>
</head>

<body background="#a5bfdd" oncontextmenu="return false;" topmargin="0" onkeydown="AvoidReload()" leftmargin="0"
    onload="init();">
    <!--page_rec_code:998hJ8879Kk-->
    <table width="100%" height="100%" cellspacing=0 cellpadding=0>
        <tr>
            <td align="center" valign="top">
                <div id="cc_welcome" style="margin:0px;padding:0px;height:100%;" style="overflow:hidden;">
                    <TABLE CELLPADDING=0 CELLSPACING=0 height="100%" width="100%">
                        <tr>
                            <TD id="frame" valign="middle" style="overflow:hidden;">
                                <div id="map"
                                    style="display:none;position:relative;width:500px;height:333px;vertical-align:middle;text-align:center;background-repeat:no-repeat;background-image:url('./images/geo/default/map_2.jpg');">
                                </div>
                            </TD>
                        </tr>
                    </table>
                </div>
                <a href="http://www.openstreetmap.org/" target="_blank"
                    style="position:absolute;bottom:10px;left:10px;font-size:10px;color:#4c7bb2;text-decoration:none;">&copy;OpenStreetMap
                    and Contributors, CC BY-SA</a>
            </td>
        </tr>
    </table>
</body>

</html>