<script type="text/x-red" data-template-name="xmpp in">
    <div class="form-row">
        <label for="node-input-server"><i class="fa fa-bookmark"></i> Server</label>
        <input type="text" id="node-input-server">
    </div>
    <div class="form-row">
        <label for="node-input-to"><i class="fa fa-envelope"></i> Buddy</label>
        <input type="text" id="node-input-to" placeholder="joe@gmail.com">
    </div>
    <div class="form-row">
        <label>&nbsp;</label>
        <input type="checkbox" id="node-input-join" placeholder="" style="display: inline-block; width: auto; vertical-align: top;">
        <label for="node-input-join" style="width: 70%;">Is a Chat Room ?</label>
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

<script type="text/x-red" data-help-name="xmpp in">
    <p>Connects to an XMPP server to receive messages.</p>
    <p>The <b>Buddy</b> field is the id of the buddy or room you want to receive messages from.</p>
    <p>Incoming messages will appear as <code>msg.payload</code> on the first output, while <code>msg.topic</code> will contain who it is from.</p>
    <p>The second output will show the presence and status of a user in <code>msg.payload</code>. Again <code>msg.topic</code> will hold the user.</p>
</script>

<script type="text/javascript">
    RED.nodes.registerType('xmpp in',{
        category: 'social-input',
        color:"#F4F492",
        defaults: {
            name: {value:""},
            server: {type:"xmpp-server",required:true},
            to: {value:"",required:true},
            join: {value:false}
        },
        inputs:0,
        outputs:2,
        icon: "xmpp.png",
        label: function() {
            return this.name||"xmpp";
        },
        labelStyle: function() {
            return (this.name)?"node_label_italic":"";
        }
    });
</script>

<script type="text/x-red" data-template-name="xmpp out">
    <div class="form-row">
        <label for="node-input-server"><i class="fa fa-bookmark"></i> Server</label>
        <input type="text" id="node-input-server">
    </div>
    <div class="form-row">
        <label>&nbsp;</label>
        <input type="checkbox" id="node-input-sendObject" placeholder="" style="display: inline-block; width: auto; vertical-align: top;">
        <label for="node-input-sendObject" style="width: 70%;">Send complete msg object ?</label>
    </div>
    <div class="form-row">
        <label for="node-input-to"><i class="fa fa-envelope"></i> To</label>
        <input type="text" id="node-input-to" placeholder="joe@gmail.com">
    </div>
    <div class="form-row">
        <label>&nbsp;</label>
        <input type="checkbox" id="node-input-join" placeholder="" style="display: inline-block; width: auto; vertical-align: top;">
        <label for="node-input-join" style="width: 70%;">Is a Chat Room ?</label>
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-tips">The <b>To</b> field is optional. If not set uses the <code>msg.topic</code> property of the message.</div>
</script>

<script type="text/x-red" data-help-name="xmpp out">
    <p>Connects to an XMPP server to send messages.</p>
    <p>The <b>To</b> field is optional. If not set the <code>msg.topic</code> property of the message is used.</p>
    <p>If you are joining a room then the <b>To</b> field must be supplied.</p>
    <p>You may also send a msg with <code>msg.presence</code> to set your presence to one of <i>chat, away, dnd</i> or <i>xa</i>.
    If you do so then the <code>msg.payload</code> will set your status message.</p>
</script>

<script type="text/javascript">
    RED.nodes.registerType('xmpp out',{
        category: 'social-output',
        color:"#F4F492",
        defaults: {
            name: {value:""},
            server: {type:"xmpp-server",required:true},
            to: {value:""},
            join: {value:false},
            sendObject: {value:false}
        },
        inputs:1,
        outputs:0,
        icon: "xmpp.png",
        align: "right",
        label: function() {
            return this.name||"xmpp";
        },
        labelStyle: function() {
            return (this.name)?"node_label_italic":"";
        }
    });
</script>

<script type="text/x-red" data-template-name="xmpp-server">
    <div class="form-row node-input-server">
        <label for="node-config-input-server"><i class="fa fa-bookmark"></i> Server</label>
        <input class="input-append-left" type="text" id="node-config-input-server" placeholder="localhost" style="width: 40%;" >
        <label for="node-config-input-port" style="margin-left: 10px; width: 35px; "> Port</label>
        <input type="text" id="node-config-input-port" placeholder="Port" style="width:45px">
    </div>
    <div class="form-row">
        <label for="node-config-input-nickname"><i class="fa fa-user"></i> Nickname</label>
        <input type="text" id="node-config-input-nickname" placeholder="Joe">
    </div>
    <div class="form-row">
        <label for="node-config-input-user"><i class="fa fa-user"></i> Username</label>
        <input type="text" id="node-config-input-user">
    </div>
    <div class="form-row">
        <label for="node-config-input-pass"><i class="fa fa-lock"></i> Password</label>
        <input type="password" id="node-config-input-password">
    </div>
</script>

<script type="text/javascript">
    RED.nodes.registerType('xmpp-server',{
        category: 'config',
        defaults: {
            server: {required:true},
            port: {value:5222,required:true,validate:RED.validators.number()},
            nickname: {}
        },
        credentials: {
            user: {type:"text"},
            password: {type: "password"}
        },
        label: function() {
            return (this.nickname?this.nickname+"@":"")+this.server+":"+this.port;
        }
    });
</script>