<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:tsh="http://www.technicalpursuit.com/1999/tshell"
        xmlns:ev="http://www.w3.org/2001/xml-events">

<head>

    <title></title>

    <script type="text/javascript" src="~lib_lib/src/tibet_hook.min.js">
    </script>

    <link type="text/css" rel="stylesheet" href="~lib_lib/css/tibet.css"/>

</head>

<body>

    <h2>Bind Test #1</h2><br/>
    <br/>
    <br/>
    This test sets up a 'simple binding' between the fields and an empty piece of XML data, set up by the event handler embedded in this document.<br/>
    <br/>
    <br/>

    <br/>
    Enter data into the 2 text fields and click on the 'Show Model Data' button to see the resultant XML.
    <br/>
    <br/>

    <label for="firstNameField">First name: </label>

    <input type="text" id="firstNameField" value="{{{urn:tibet:test_person#xpath1(/person/firstname)}}}"/><br/>

    <!-- The above is shorthand for:
    <input type="text" id="firstNameField" bind:in="value: urn:tibet:test_person#xpath1(/person/firstname)"/><br/>
    -->

    <label for="lastNameField">Last name: </label>

    <input type="text" id="lastNameField" value="{{{urn:tibet:test_person#xpath1(/person/lastname)}}}"/><br/>

    <!-- The above is shorthand for:
    <input type="text" id="firstNameField" bind:in="value: urn:tibet:test_person#xpath1(/person/lastname)"/><br/>
    -->

<script>
<![CDATA[
var viewModel = new ViewModel(todos || []);
var bindings = {
        newTodo:  {
            value: viewModel.current,
            valueUpdate: 'afterkeydown',
            enterKey: viewModel.add
        },
        taskTooltip :  { visible: viewModel.showTooltip },
        checkAllContainer :  {visible: viewModel.todos().length },
        checkAll: {checked: viewModel.allCompleted },
        todos: {foreach: viewModel.todos },
        todoListItem: function() { return { css: { editing: this.editing } }; },
        todoListItemWrapper: function() { return { css: { done: this.done } }; },
        todoCheckBox: function() {return { checked: this.done }; },
        todoContent: function() { return { text: this.content, event: { dblclick: this.edit } };},
        todoDestroy: function() {return { click: viewModel.remove };},
        todoEdit: function() { return {
            value: this.content,
            valueUpdate: 'afterkeydown',
            enterKey: this.stopEditing,
            event: { blur: this.stopEditing } }; },
        todoCount: {visible: viewModel.remainingCount},
        remainingCount: { text: viewModel.remainingCount },
        remainingCountWord: function() { return { text: viewModel.getLabel(viewModel.remainingCount) };},
        todoClear: {visible: viewModel.completedCount},
        todoClearAll: {click: viewModel.removeCompleted},
        completedCount: { text: viewModel.completedCount },
        completedCountWord: function() { return { text: viewModel.getLabel(viewModel.completedCount) }; },
        todoInstructions: {visible: viewModel.todos().length}
    };
]]>
</script>

    <div id="create-todo">
        <input id="new-todo" data-class="newTodo" placeholder="What needs to be done?" />
        <span class="ui-tooltip-top" data-class="taskTooltip" style="display: none;">Press Enter to save this task</span>
    </div>
    <div id="todos">
        <div data-class="checkAllContainer" >
            <input id="check-all" class="check" type="checkbox" data-class="checkAll" />
            <label for="check-all">Mark all as complete</label>
        </div>
        <ul id="todo-list" data-class="todos" >
            <li data-class="todoListItem" >
                <div class="todo" data-class="todoListItemWrapper" >
                    <div class="display">
                        <input class="check" type="checkbox" data-class="todoCheckBox" />
                        <div class="todo-content" data-class="todoContent" style="cursor: pointer;"></div>
                        <span class="todo-destroy" data-class="todoDestroy"></span>
                    </div>
                    <div class="edit">
                        <input class="todo-input" data-class="todoEdit"/>
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <!-- XML data version -->
    <tibet:content id="thePerson" name="urn:tibet:test_person">
        <tibet:aspect name="lastName" value="/person/lastname" xsi:type="foo"/>

        <tibet:data>
            <person xmlns="">
                <lastname>Smith</lastname>
                <firstname>Joe</firstname>
            </person>
        </tibet:data>
    </tibet:content>

    <!-- JSON data version -->
    <tibet:content name="urn:tibet:test_person">
        <tibet:aspect name="lastName" value="person.lastname" xsi:type="foo"/>

        <tibet:data>
        <![CDATA[
            {"person": {"lastname": "Smith", "firstname": "Joe"}}
        ]]>
        </tibet:data>
    </tibet:content>

</body>
</html>
