var MyId = 0;

$(function () {
    function init() {
        asterisk.server.whoAmI().done(function (id) {
            MyId = id;
        });
    }

    var asterisk = $.connection.asterisk;

    $.connection.hub.start().done(init);

    asterisk.client.incomingCall = function (message) {
        var card = JSON.parse(message);
        if (!$("#pushoverlay").length) {
            $("body").append('<div id="pushoverlay" class="overlay"></div>');
            $("#pushoverlay").click(function (e) {
                e.preventDefault();
                $(".notify-card").fadeOut('fast', function () {
                    $(".notify-card").remove();
                    $("#pushoverlay").remove();
                })
            })
        }

        if (card.hasOwnProperty("errorDescription")) {
            $("body").append($(createErrorCard(card)).fadeIn('fast'));
        }
        if (card.hasOwnProperty("timeStamp")) {
            $("body").append($(createClientCard(card)).fadeIn('fast'));
        }
        setTimeout(dismissTask, 15000, '#cc' + card.id);
    }
    asterisk.client.callAccepted = function (callerId, operators) {
        var cardOperator = Number($('#cc' + callerId).attr("operator-id"));
        if(operators.length === 0 || operators.indexOf(cardOperator) == -1)
            dismissTask($('#cc' + callerId));
    }

})
function dismissTask(that, e) {
    if(e !== null && e !== undefined)
        e.stopPropagation();
    var $that = $(that);
    var right = $(document).width() + 10;
    $that.fadeOut(300, function () {
            $that.remove();
            $("#pushoverlay").remove();
    })
}

function createClientCard(card) {
    return '<div id="cc' + card.id + '" class ="notify-card card-success-border" operator-id="' + MyId + '" onclick="createTask(this); return false;"> <table> <tr> <td width="56px"> <div class ="notify-icon notify-card-success"> <i class ="fa fa-phone-square animate"></i> </div> </td> <td> <div class ="card-title"><a class="controlbutton btncreate" href="#"><img src="img/add.gif"/><span>' + AsteriskResources.CreateTask + '</span></a><h2>' + card.phone + '</h2> </div> </td> </tr> </table> <table> <tr> <td width="30px"> <div class ="icon"> <i class ="fa fa-building"></i> </div> </td> <td> <div class ="card-text"> <h2>' + AsteriskResources.Client + '</h2> <span>' + card.companyName + '</span> <input id="companyIdcc' + card.id + '" type="hidden" value=' + card.companyId + '></input> </div> </td> </tr> <tr> <td width="36px"> <div class ="icon"> <i class ="fa fa-user"></i> </div> </td> <td> <div class ="card-text"> <h2>' + AsteriskResources.User + '</h2> <span>' + card.contactName + '</span> <input id="contactIdcc' + card.id + '" type="hidden" value=' + card.contactId + '></input> </div> </td> </tr> <tr><td></td><td style="text-align: right;"><a class="arrow-dismiss" href="#" onclick="dismissTask(\'#cc' + card.id + '\', event); return false;">' + AsteriskResources.Hide + ' <i class="fa fa-angle-right" aria-hidden="true"></i></a></td></tr></table> <input id="serviceIdcc' + card.id + '" type="hidden" value=' + card.serviceId + '></input> <input id="taskTypecc' + card.id + '" type="hidden" value=' + card.taskType + '></input> </div>';
}

function createErrorCard(card) {
    return '<div id="cc' + card.id + '" class ="notify-card card-success-border" operator-id="' + MyId + '" onclick="dismissTask(this)"> <table> <tr> <td width="56px"> <div class ="notify-icon notify-card-success"> <i class ="fa fa-phone-square animate"></i> </div> </td> <td> <div class ="card-title"> <h1>' + AsteriskResources.PhoneCall + '</h1> <h2>' + card.phone + '</h2> </div> </td> </tr> </table> <table> <tr> <td width="30px"> <div class ="icon"> <i class ="fa fa-building-o notify-card-success"></i> </div> </td> <td> <div class ="card-text"> <h2>' + AsteriskResources.UnknownPhoneNumber + '</h2> </div> </td> </tr> </table> <div class ="notify-buttons"><a class="arrow-dismiss" href="#" onclick="return false;">' + AsteriskResources.Hide +' <i class="fa fa-angle-right" aria-hidden="true"></i></a></div> </div>';
}

function createTask(that) {
    var $that = $(that);
    var id = $that.attr('id');
    dismissTask($that);
    if (typeof formchanged !== 'undefined' && formchanged)
        window.open(base + 'Task/Create?serviceid=' + $("#serviceId" + id).val() + '&typeid=' + $("#taskType" + id).val() + '&creatorid=' + $("#contactId" + id).val());
    else
        window.location.replace(base + 'Task/Create?serviceid=' + $("#serviceId" + id).val() + '&typeid=' + $("#taskType" + id).val() + '&creatorid=' + $("#contactId" + id).val());

}