<script type="text/javascript">
    RED.nodes.registerType('{{&nodeName}}',{
        category: '{{&category}}',
        color: '#9BE9E8',
        defaults: {
            interactiontype: {value: "property"},
            propname: {value: ""},
            proptype: {value: ""},
            actname: {value: ""},
            evname: {value: ""}, 
            formindex: {value: 0},
            name: {value: ""}
        },
        credentials: {
            token: {type: "password"},
            username: {type: "text"},
            password: {type: "password"}
        },
        inputs: 1,
        outputs: 1,
        icon: "{{&iconpath}}",
        label: function() {
            var label = "{{&ufName}}"
            if (this.interactiontype == "property") {
                label = label + "-" + this.propname;
            } else if (this.interactiontype == "action") {
                label = label + "-" + this.actname;
            } else if (this.interactiontype == "event") {
                label = label + "-" + this.evname;
            }
            return this.name || label;
        },
        labelStyle: function() {
            return this.name ? "node_label_italic" : "";
        },
        paletteLabel: function() {
            return "{{&ufName}}";
        },
        oneditprepare: function() {
            var rwo = {{&genproprwo}};
            var formsel = {{&genformsel}};

            function prepareforms(idx) {
                var inttype = $("#node-input-interactiontype").val();
                $('#node-input-formindex').empty();
                switch (inttype) {
                    case "property":
                        var propname = $("#node-input-propname").val();
                        var proptype = $("#node-input-proptype").val();                       
                        if (formsel.property[propname] && formsel.property[propname][proptype]) {
                            var formelem = formsel.property[propname][proptype];
                            for (var i=0; i < formelem.length; i++) {
                                $('#node-input-formindex').append($("<option>", {value: formelem[i].index, text:formelem[i].secscheme+" "+formelem[i].title}));
                            }
                        };
                        break;
                    case "action":
                        var actname = $("#node-input-actname").val();                       
                        if (formsel.action[actname]) {
                            var formelem = formsel.action[actname];
                            for (var i=0; i < formelem.length; i++) {
                                $('#node-input-formindex').append($("<option>", {value: formelem[i].index, text:formelem[i].secscheme+" "+formelem[i].title}));
                            }
                        }
                        break;
                    case "event":
                        var evname = $("#node-input-evname").val();                    
                        if (formsel.event[evname]) {
                            var formelem = formsel.event[evname];
                            for (var i=0; i < formelem.length; i++) {
                                $('#node-input-formindex').append($("<option>", {value: formelem[i].index, text:formelem[i].secscheme+" "+formelem[i].title}));
                            }
                        }
                        break;
                }
                if (idx) { 
                    $('#node-input-formindex').val(idx);
                }
            }
            prepareforms(this.formindex);

            $('#node-input-interactiontype').change(function() {
                var inttype = $("#node-input-interactiontype").val();
                $('.int-sel').hide();
                if (inttype == "property") {
                    $("#node-input-propname").change();
                    $(".int-prop-sel").show();
                } else if (inttype == "action") {
                    $("#node-input-actname").change();
                    $(".int-act-sel").show();
                } else {
                    $("#node-input-evname").change();
                    $(".int-ev-sel").show();
                }
            });
            $('#node-input-propname').change(function() {
                $('#node-input-proptype').children().attr("disabled", "disabled");
                var propname = $("#node-input-propname").val();
                if (rwo[propname]) {
                    if (rwo[propname].readable) {
                        $('#node-input-proptype').children("[value='read']").removeAttr("disabled");
                    }
                    if (rwo[propname].writable) {
                        $('#node-input-proptype').children("[value='write']").removeAttr("disabled");
                    }
                    if (rwo[propname].observable) {
                        $('#node-input-proptype').children("[value='observe']").removeAttr("disabled");
                    }
                }
                $('#node-input-proptype').change();
            });
            $('#node-input-proptype').change(function() {
                var inttype = $("#node-input-interactiontype").val();
                if (inttype === "property") {
                    var formindex = $("#node-input-formindex").val();
                    var propname = $("#node-input-propname").val();
                    var proptype = $("#node-input-proptype").val();
                    if (formsel.property[propname] && formsel.property[propname][proptype] &&
                          formsel.property[propname][proptype].find(function(e){return e.index==formindex})) {
                        prepareforms(formindex);
                    } else {
                        prepareforms(null);
                    }
                }
                $('#node-input-formindex').change();
            });
            $('#node-input-actname').change(function() {
                var inttype = $("#node-input-interactiontype").val();
                if (inttype === "action") {
                    var actname = $("#node-input-actname").val();
                    var formindex = $("#node-input-formindex").val();
                    if (formsel.action[actname] &&
                        formsel.action[actname].find(function(e){return e.index==formindex})) {
                        prepareforms(formindex);
                    } else {
                        prepareforms(null);
                    }
                }
                $('#node-input-formindex').change();
            });
            $('#node-input-evname').change(function() {
                var inttype = $("#node-input-interactiontype").val();
                if (inttype === "event") {
                    var evname = $("#node-input-evname").val();
                    var formindex = $("#node-input-formindex").val();
                    if (formsel.event[evname] &&
                        formsel.event[evname].find(function(e){return e.index==formindex})) {
                        prepareforms(formindex);
                    } else {
                        prepareforms(null);
                    }
                }
                $('#node-input-formindex').change();
            });
            $("#node-input-formindex").change(function() {
                var inttype = $("#node-input-interactiontype").val();
                var formindex = $("#node-input-formindex").val();
                var secscheme = undefined;
                if (formindex) {
                    switch (inttype) {
                        case "property":
                            var propname = $("#node-input-propname").val();
                            var proptype = $("#node-input-proptype").val();
                            if (formsel.property[propname] && formsel.property[propname][proptype]) {
                                secscheme = formsel.property[propname][proptype].find(function(e){return e.index==formindex}).secscheme;
                            }
                            break;
                        case "action":
                            var actname = $("#node-input-actname").val();
                            if (formsel.action[actname]) {
                                secscheme = formsel.action[actname].find(function(e){return e.index==formindex}).secscheme;
                            }
                            break;
                        case "event":
                            var evname = $("#node-input-evname").val();
                            if (formsel.event[evname]) {
                                secscheme = formsel.event[evname].find(function(e){return e.index==formindex}).secscheme;
                            }
                            break;
                    };
                }
                switch (secscheme) {
                    case "basic":
                    case "digest":
                        $('.cred-userpass').show();
                        $('.cred-token').hide();
                        break;
                    case "bearer":
                    case "apikey":
                        $('.cred-userpass').hide();
                        $('.cred-token').show();
                        break;
                    default:
                        $('.cred-userpass').hide();
                        $('.cred-token').hide();
                        break;
                }
            });
        },
        thingDesc: {{&normtd}}
    });
</script>

<script type="text/html" data-template-name="{{&nodeName}}">
    <div class="form-row">
        <label for="node-input-interactiontype"><i class="fa fa-exchange"></i> Interaction</label>
        <select id="node-input-interactiontype">
            <option value="property" selected>Property</option>
            <option value="action">Action</option>
            <option value="event">Event</option>
        </select>
    </div>
    <div class="form-row int-sel int-prop-sel">
        <label for="node-input-propname"><i class="fa fa-bar-chart"></i> Name</label>
        <select id="node-input-propname" dir="{{textdir}}">
            {{#properties}}
            <option value="{{name}}">{{title}}</option>
            {{/properties}}
        </select>
    </div>
    <div class="form-row int-sel int-act-sel">
        <label for="node-input-actname"><i class="fa fa-bolt"></i> Name</label>
        <select id="node-input-actname" dir="{{textdir}}">
            {{#actions}}
            <option value="{{name}}">{{title}}</option>
            {{/actions}}
        </select>
    </div>
    <div class="form-row int-sel int-ev-sel">
        <label for="node-input-evname"><i class="fa fa-bell"></i> Name</label>
        <select id="node-input-evname" dir="{{textdir}}">
            {{#events}}
            <option value="{{name}}">{{title}}</option>
            {{/events}}
        </select>
    </div>
    <div class="form-row int-sel int-prop-sel">
        <label for="node-input-proptype"><i class="fa fa-pencil"></i> Access</label>
        <select id="node-input-proptype">
            <option value="read" selected>Read</option>
            <option value="write">Write</option>
            <option value="observe">Observe</option>
        </select>
    </div>
    <div class="form-row int-form-sel">
        <label for="node-input-formindex"><i class="fa fa-pencil"></i> Form</label>
        <select id="node-input-formindex">
        </select>
    </div>
    <div class="form-row cred-userpass hidden">
        <label for="node-input-username"><i class="fa fa-user"></i> Username</label>
        <input type="text" id="node-input-username">
        <label for="node-input-password"><i class="fa fa-key"></i> Password</label>
        <input type="password" id="node-input-password">
    </div>
    <div class="form-row cred-token hidden">
        <label for="node-input-token"><i class="fa fa-ticket"></i> Token</label>
        <input type="password" id="node-input-token">
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Node name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

<script type="text/html" data-help-name="{{&nodeName}}">
<p dir="{{textdir}}">{{description}}</p>

<h3>Inputs</h3>
  <dl class="message-properties">
    <dt class="optional">payload<span class="property-type">object</span></dt>
    <dd><p>read: argument for urlVariable, as an object.</p>
        <p>write: Values to write.</p>
        <p>action: Argument for action.</p>
    </dd>
  </dl>

<h3>Outputs</h3>
  <dl class="message-properties">
    <dt>payload<span class="property-type">object</span></dt>
    <dd>result</dd>
  </dl>

<h3>Details</h3>

<h4>Properties</h4>
<p>To read a property, send message to a node as a trigger.
To write a property, send value to a node.  
To observe a property, a node emit messages when value changes.</p>
<dl dir="{{textdir}}">
{{#properties}}
 <dt>{{title}}: {{description}}</dt>
 <dd>
  <ul>
   {{#forms}}
    <li><code>{{href}}</code></li>
   {{/forms}}
  </ul> 
 </dd>
{{/properties}}
</dl>

<h4>Actions</h4>
<p>To invoke an action, send message to a node with arguments in payload.</p> 
<dl dir="{{textdir}}">
{{#actions}}
  <dt>{{title}}: {{description}} {{#safe}}<code>safe</code>{{/safe}}{{#idempotent}}<code>idempotent</code>{{/idempotent}}</dt>
  <dd>
   <ul>
    {{#forms}}
     <li><code>{{href}}</code></li>
    {{/forms}}
   </ul>
  </dd>
{{/actions}}
</dl>

<h4>Events</h4>
<p>A node emit messages when event occurred.</p>
<dl dir="{{textdir}}">
{{#events}}
  <dt>{{title}}: {{description}}</dt>
  <dd>
   <ul>
    {{#forms}}
     <li><code>{{href}}</code></li>
    {{/forms}}
   </ul> 
  </dd>
{{/events}}
</dl>

<h3>Support Information</h3>
<p dir="{{textdir}}">{{support}}</p>

<h3>References</h3>
<ul dir="{{textdir}}">
{{#links}}
  <li><a href="{{href}}" target="_blank">{{rel}}</a></li>
{{/links}}
</ul>

</script>
