<!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("Device ready!")
                    initiateUI();
                    
            }
            var onTagsWithAlias = function(data) {
                try{
                    var tagaliasJson=window.plugins.jPushPlugin.parseEvent(data);
                    $("#tagAliasResult").html(tagaliasJson);;
                    
                }
                catch(exception){
                    console.log(exception)
                }
            }
            var onDidSetup = function() {
                try{
                    $("#connectState").html("建立连接");;
                    
                }
                catch(exception){
                    console.log(exception)
                }
            }
            var onDidClose = function() {
                try{
                    $("#connectState").html("连接关闭");;
                    
                }
                catch(exception){
                    console.log(exception)
                }
            }
            var onDidRegister = function() {
                try{
                    $("#connectState").html("注册成功");;
                    
                }
                catch(exception){
                    console.log(exception)
                }
            }
            var onDidLogin = function() {
                try{
                    $("#connectState").html("登录成功");;
                    
                }
                catch(exception){
                    console.log(exception)
                }
            }
            var onGetRegistradionID = function(data) {
                try{
                    var registrationID=window.plugins.jPushPlugin.parseEvent(data);
                    $("#registrationid").html(registrationID);;

                }
                catch(exception){
                    console.log(exception)
                    
                }
            }
           
            var initiateUI = function() {

                window.plugins.jPushPlugin.getRegistrationID();
                window.plugins.jPushPlugin.initNotificationCenter();
                window.plugins.jPushPlugin.startLogPageView("mianPage");
                //window.plugins.jPushPlugin.stopLogPageView("mianPage");
               $("#setTagWithAliasButton").click(function(ev) {
                         
                        try{
                            var tag1 = $("#tagText1").attr("value");
                            var tag2 = $("#tagText2").attr("value");
                            var tag3 = $("#tagText3").attr("value");
                            
                            var alias = $("#aliasText").attr("value");

                            console.log("tag1:"+tag1==null);
                            console.log("tag1:"+tag2==null);
                            console.log("tag1:"+tag3==null);
                            var dd = [];
                            dd[0]=tag1
                            dd[1]=tag2
                            dd[2]=tag3
                            
                            console.log("dd:"+dd);
                            window.plugins.jPushPlugin.setTagsWithAlias(dd,alias);
                        }
                        catch(exception){
                            console.log(exception);
                        }
                })
            }
            
            document.addEventListener("networkDidSetup", onDidSetup, false)
            document.addEventListener("networkDidClose", onDidClose, false)
            document.addEventListener("networkDidRegister", onDidRegister, false)
            document.addEventListener("networkDidLogin", onDidLogin, false)

            document.addEventListener("setTagsWithAlias", onTagsWithAlias, false)
            document.addEventListener("registrationID", onGetRegistradionID, false)
            document.addEventListener("deviceready", onDeviceReady, false)
            
        </script>
    </head>
    <body>
        <div data-role="page" id="page">
            
            <div data-role="header" class="ui-bar ui-bar-b">
                <center>
                    <img border="0" src="img/logo.png" alt="Urban Airship" align="center" />
                </center>
            </div>
            <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>
                            <label>connected state: </label>
                            <label id="connectState">未连接</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="tagAliasResult" >null</label>
                        </div>

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