### PUT THIS IN INDEX.HTML ###
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'" />

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<!-- Bootstrap library -->
<link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript" src="scripts/fabric.js"></script>
<script type="text/javascript" src="scripts/socket.io.js"></script>
<script type="text/javascript" src="scripts/controller.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>


### FOR LOGIN ###
<script>
$.support.cors = true;
$(document).ready(function(e) {
    $("form").submit(function(e) {

        e.preventDefault();

        // just make username and password string equal the same as form
        var username = $('#username').val();
        var password = $('#password').val();

        $.ajax({
          crossDomain: true,
            url: "http://drawchat.online/mobilelogin",
            type: "POST",
            data: {
                "username": username,
                "password": password
            },
            statusCode: {
              200: function() {
                $(location).attr('href', 'profile.html');
              }
            },
            cache: false
        });
    });
});
</script>

### CANVASES ###
### name top canvas to canvas1 and bottom canvas to canvas2 ###

<script>
var userid;

function controller($log, $scope, $cookies, $state, $stateParams) {
    var vm = this;
    vm.historyLog = [];

    var socket = io.connect('http://54.89.105.34:80/main-namespace');

    vm.canvasSettings = { fill: false, stroke: 'green', opacity: 1 };
    vm.buttonOneEnabled = false;
    vm.buttonTwoEnabled = false;
    var canvas2Div = document.getElementById('canvas1div');
    var canvas1Div = document.getElementById('canvas2div');
    var canvas2 = new fabric.Canvas('canvas1', { isDrawingMode: true });
    var canvas1 = new fabric.Canvas('canvas2', { isDrawingMode: true });

    vm.pathCreatedHandler = pathCreatedHandler;

    canvas2.setWidth(canvas2Div.clientWidth);
    canvas2.setHeight(canvas2.getWidth());


    canvas1.setWidth(canvas1Div.clientWidth);
    canvas1.setHeight(canvas1.getWidth());

    canvas1.renderAll();
    canvas2.renderAll();

    canvas1.backgroundColor = "white";
    canvas1.renderAll();

    canvas2.backgroundColor = "white";
    canvas2.renderAll();

    vm.userOne = {
        lineHistory: [],
        id: null
    };
    vm.userTwo = {
        lineHistory: [],
        id: null
    };

    vm.canvas = canvas1;
    vm.canvasTwo = canvas2;

    vm.canvas.on({ 'path:created': vm.pathCreatedHandler });
    vm.canvasTwo.on({ 'path:created': vm.pathCreatedHandler });

    vm.canvasTwo.isDrawingMode = false;
    vm.canvas.isDrawingMode = true;
    vm.canvasTwo.selectable = false;

    var x = false;
    var userNum = 0;

    socket.on('joined-room', function (data) {

        if (!x) {
            socket.id = socket.id.substr(16);

            vm.roomNumber = data.roomNumber;

            console.log("user1: " + data.user.id);
            console.log("user1: " + socket.id);
            console.log("canvas: " + data.user.canvas);

            if (data.user.canvas === 1) { // user 1
                console.log("you are host");
                vm.userOne.id = data.user.id;
                vm.userOne.name = data.user.name;
                vm.userOne.userId = data.user.userId;
                userNum = 0;
            }
            if (data.user.canvas === 2) { // user 2
                console.log("you are not host");
                vm.userOne.id = data.user.id;
                vm.userOne.name = data.user.name;
                vm.userOne.userId = data.user.userId;
                userNum = 1;

                socket.emit('get-existing-user', { id: socket.id, roomNumber: data.roomNumber }, function (error, user) {
                    console.log(user.id);
                    vm.userTwo.id = user.id;
                    vm.userTwo.name = user.name;
                    vm.userTwo.userId = user.userId;
                    // if two users exist then save it to the chat history
                    if (vm.userOne.name && vm.userTwo.name) {
                        socket.emit('save-users', { users: [vm.userOne, vm.userTwo] });
                    }
                });
            }
        }
        if (x) {
            socket.emit('get-existing-user', { id: socket.id, roomNumber: data.roomNumber }, function (error, user) {
                console.log(data.user.id);
                vm.userTwo.id = data.user.id;
                vm.userTwo.name = data.user.name;
                vm.userTwo.userId = data.user.userId;
                // if two users exist then save it to the chat history
                if (vm.userOne.name && vm.userTwo.name) {
                    socket.emit('save-users', { users: [vm.userOne, vm.userTwo] });
                }
            });
        }
        x = true;
    });

    socket.on('draw', function (data) {

        if (data.id === vm.userTwo.id) {
            if (data.path === null) {
                vm.canvasTwo.clear();
            } else {
                fabric.util.enlivenObjects([data.path], function (objects) {
                    objects.forEach(function (o) {
                        o.selectable = false;
                        vm.canvasTwo.add(o);
                    });
                });
            }
        }
    });

    function pathCreatedHandler(evt) {

        var path = evt.path;
        path.set(vm.canvasSettings);
        socket.emit('draw', {
            path: path,
            roomNumber: vm.roomNumber,
            id: socket.id
        });
    }

    vm.clearCanvas = function () {
        socket.emit('draw', {
            path: null,
            roomNumber: vm.roomNumber,
            id: socket.id.substr(16)
        });
    };
}
</script>