<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Phonegap Sample App</title>
    <link href="css/jquery.mobile-1.1.1.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.1.1.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript">
        var onDeviceReady = function () {
            console.log("JPushPlugin:Device ready!");
            initiateUI();
        };

        function getRegistrationID() {
            window.plugins.jPushPlugin.getRegistrationID(onGetRegistradionID);
        }

        var onGetRegistradionID = function (data) {
            try {

                console.log("JPushPlugin:registrationID is " + data);

                if (data.length == 0) {
                    var t1 = window.setTimeout(getRegistrationID, 1000);
                }
                $("#registrationid").html(data);
            }
            catch (exception) {
                console.log(exception);
            }
        };

        var onTagsWithAlias = function (event) {
            try {
                console.log("onTagsWithAlias");
                var result = "result code:" + event.resultCode + " ";
                result += "tags:" + event.tags + " ";
                result += "alias:" + event.alias + " ";
                $("#tagAliasResult").html(result);
            }
            catch (exception) {
                console.log(exception)
            }
        };
        var onOpenNotification = function (event) {
            try {
                var alertContent;
                if (device.platform == "Android") {
                    alertContent = window.plugins.jPushPlugin.openNotification.alert;
                } else {
                    alertContent = event.aps.alert;
                }
                alert("open Notificaiton:" + alertContent);

            }
            catch (exception) {
                console.log("JPushPlugin:onOpenNotification" + exception);
            }
        };
        var onReceiveNotification = function (event) {
            try {
                var alertContent;
                if (device.platform == "Android") {
                    alertContent = window.plugins.jPushPlugin.receiveNotification.alert;
                } else {
                    alertContent = event.aps.alert;
                }
                $("#notificationResult").html(alertContent);

            }
            catch (exeption) {
                console.log(exception)
            }
        };
        var onReceiveMessage = function (event) {
            try {

                var message;
                if (device.platform == "Android") {
                    message = window.plugins.jPushPlugin.receiveMessage.message;
                } else {
                    message = event.content;
                }
                //var extras = window.plugins.jPushPlugin.extras

                $("#messageResult").html(message);

            }
            catch (exception) {
                console.log("JPushPlugin:onReceiveMessage-->" + exception);
            }
        };

        var initiateUI = function () {
            try {
                window.plugins.jPushPlugin.init();
                getRegistrationID();

                if (device.platform != "Android") {
                    window.plugins.jPushPlugin.setDebugModeFromIos();
                    window.plugins.jPushPlugin.setApplicationIconBadgeNumber(0);
                } else {
                    window.plugins.jPushPlugin.setDebugMode(true);
                    window.plugins.jPushPlugin.setStatisticsOpen(true);
                }
            }
            catch (exception) {
                console.log(exception);
            }
            $("#setTagWithAliasButton").click(function (ev) {

//                 window.plugins.jPushPlugin.getApplicationIconBadgeNumber(function(data){
//                     console.log(data);
//                 });

                try {
                    var tag1 = $("#tagText1").attr("value");
                    var tag2 = $("#tagText2").attr("value");
                    var tag3 = $("#tagText3").attr("value");
                    var alias = $("#aliasText").attr("value");
                    var dd = [];

                    if (tag1 == "" && tag2 == "" && tag3 == "") {
                    }
                    else {
                        if (tag1 != "") {
                            dd.push(tag1);
                        }
                        if (tag2 != "") {
                            dd.push(tag2);
                        }
                        if (tag3 != "") {
                            dd.push(tag3);
                        }
                    }
                    window.plugins.jPushPlugin.setTagsWithAlias(dd, alias);

                }
                catch (exception) {
                    console.log(exception);
                }
            })
        };
        document.addEventListener("jpush.setTagsWithAlias", onTagsWithAlias, false);
        document.addEventListener("deviceready", onDeviceReady, false);
        document.addEventListener("jpush.openNotification", onOpenNotification, false);
        document.addEventListener("jpush.receiveNotification", onReceiveNotification, false);
        document.addEventListener("jpush.receiveMessage", onReceiveMessage, false);


        //jpush.receiveMessage
    </script>
</head>
<body>
<div data-role="page" id="page">

    <div data-role="content">
        <form>
            <div class="ui-body ui-body-b">

                <div data-role="fieldcontain">
                    <center><h3>JPushPlugin Example</h3></center>
                    <span name="alias" id="alias"></span>
                    <hr/>
                    <label>RegistrationID: </label>
                    <label id="registrationid">null</label>
                </div>
                <div data-role="fieldcontain">
                    <label>Tags: </label>
                    <table>
                        <tr>
                            <td>
                                <input type="text" id="tagText1"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="text" id="tagText2"/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="text" id="tagText3">
                            </td>
                        </tr>
                    </table>
                    <label>Alias: </label>
                    <table>
                        <tr>
                            <td>
                                <input type="text" id="aliasText">
                            </td>
                        </tr>
                    </table>
                </div>
                <div data-role="fieldcontain">
                    <input type="button" id="setTagWithAliasButton" value="Add tag and alias"/>
                </div>
                <div data-role="fieldcontain">
                    <label id="tagAliasPrompt">设置tag/alias结果: </label>
                    <label id="tagAliasResult">null</label>
                </div>
                <div data-role="fieldcontain">
                    <label id="notificationPrompt">接受的通知内容:</label>
                    <label id="notificationResult">null</label>
                </div>
                <div data-role="fieldcontain">
                    <label id="messagePrompt">接受的自定义消息:</label>
                    <label id="messageResult">null</label>
                </div>


            </div>
        </form>
    </div>

</div>
</body>
</html>