// Copyright 2017 Wrinkle, Inc.



// Copyright 2011 Google Inc.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

var serverURL = '';
var socket;
var sendScroll = true;
var sendScrollTimeout;

if (typeof localStorage.wrinkleId == "undefined") {
    localStorage.wrinkleId = new UUID(1).format("std");
}

function socketSend(msg) {
  socket.send(JSON.stringify(msg));
}



function sendDims() {
var w=window,
    d=document,
    e=d.documentElement,
    g=d.getElementsByTagName('body')[0],
    x=w.innerWidth||e.clientWidth||g.clientWidth,
    y=w.innerHeight||e.clientHeight||g.clientHeight;


    socketSend({
      dims: [x, y]
    });
}

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

      // fix
      if(!event) { 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 );
      }
      socketSend({
        mm: [event.pageX, event.pageY]
      });
}
document.onmousemove = sendMM;
    document.onscroll = function(event) {
      socketSend({
        scroll: [window.pageXOffset, window.pageYOffset]
      });
      sendMM(event);
    }

function getHTTPObject()
{
    if (window.ActiveXObject)
    {
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
    else
    {
        if (window.XMLHttpRequest)
        {
            return new XMLHttpRequest();
        }
        else
        {
            return null;
        }
    }
}

window.addEventListener("beforeunload", function (e) {
    sessionStorage.closedLastTab = '1';
});

/* global olark */
function checkIntegrations() {
    var screenshareURL = "https://getwrinkle.com/agent/screen/window/" + localStorage.wrinkleId;
    if (typeof olark !== "undefined") {
        olark('api.chat.updateVisitorStatus', {
            snippet: 'Screenshare URL: ' + screenshareURL
        });
    }
}

var cursor_img = null;

var createCursor = function() {
    cursor_img = document.createElement("IMG");
    cursor_img.src = "https://getwrinkle.com/cobrowse/img/cursor_agent.png";
    cursor_img.style.position = "absolute";
    cursor_img.style.zIndex = 99999;
    cursor_img.id = "cursor_agent";
    cursor_img.style.pointerEvents = "none";
    document.getElementsByTagName('body')[0].appendChild(cursor_img);
    }

var createRipple = function(left, top) {
    left -= 50;
    top -= 50;
    var ripple_img = document.createElement("IMG");
    ripple_img.src = "https://getwrinkle.com/cobrowse/img/ripple.gif";
    ripple_img.style.position = "absolute";
    ripple_img.style.zIndex = 99999;
    ripple_img.style.transition = "all 1s";
    ripple_img.style.height = '100px';
    ripple_img.style.opacity = '0';
    ripple_img.style.left = left + 'px';
    ripple_img.style.top = top + 'px';
    ripple_img.style.pointerEvents = "none";
    ripple_img.id = "wrinkle_ripple";
    document.getElementsByTagName('body')[0].appendChild(ripple_img);
    setTimeout(function() { ripple_img.style.opacity = '1'; }, 100);
    setTimeout(function() { ripple_img.style.opacity = '0'; }, 3000);
    setTimeout(function() { ripple_img.remove(); }, 4100);
    }


function startMirroring() {
  if (socket)
    return;


    console.log('Starting mirroring...');

    var new_uuid = new UUID(1).format("std");
    var tab_uuid = sessionStorage.tabID && sessionStorage.closedLastTab !== '2' ? sessionStorage.tabID : sessionStorage.tabID = new_uuid;
    sessionStorage.closedLastTab = '2';

    serverURL = 'wss://getwrinkle.com:8080/projector/?company='+company+'&sid='+localStorage.wrinkleId+'&tid='+tab_uuid+'&tabTitle=' + document.title;
    checkIntegrations();
  socket = new WebSocket(serverURL);
  var mirrorClient;

  socket.onopen = function() {
    socketSend({ base: location.href.match(/^(.*\/)[^\/]*$/)[1] });
    mirrorClient = new TreeMirrorClient(document, {
      initialize: function(rootId, children) {
        socketSend({
          f: 'initialize',
          args: [rootId, children]
        });

        sendDims();
      },

      applyChanged: function(removed, addedOrMoved, attributes, text) {
        socketSend({
          f: 'applyChanged',
          args: [removed, addedOrMoved, attributes, text]
        });
      }


    });


    document.onmousemove = sendMM;
    document.onscroll = function(event) {
        if (sendScroll) {
          socketSend({
            scroll: [window.pageXOffset, window.pageYOffset]
          });
        }
        sendMM(event);
    }
    window.onresize = function(event) {
        sendDims();
        sendMM(event);
    }
  }

  function handleMessage(msg) {
    if (msg.agentMM) {
      if (cursor_img !== null) {
        cursor_img.style.left = msg.agentMM[0] + 'px';
        cursor_img.style.top = msg.agentMM[1] + 'px';
      }
    } else if (msg.agentClick) {
      createRipple(msg.agentClick[0], msg.agentClick[1]);
    } else if (msg.agentScroll) {
        sendScroll = false;
      window.scrollTo(msg.agentScroll[0], msg.agentScroll[1]);
      clearTimeout(sendScrollTimeout);
      sendScrollTimeout = setTimeout(function() { sendScroll = true; }, 1000);
    }
  }

  socket.onmessage = function(event) {
    var msg = JSON.parse(event.data);
    if (msg instanceof Array) {
      msg.forEach(function(subMessage) {
        handleMessage(JSON.parse(subMessage));
      });
    } else {
      handleMessage(msg);
    }
  }

  socket.onclose = function() {
    mirrorClient.disconnect();
    socket = undefined;
  }

  createCursor();
}

function stopMirroring() {
  if (socket)
    socket.close();
  socket = undefined;
}


startMirroring();