Untitled

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>Todo list: azuretest1</title>
        <link rel='stylesheet' href='styles.css' />
        <link rel="stylesheet" href="http://akquinet.github.io/jquery-toastmessage-plugin/demo/css/jquery.toastmessage-min.css" />
          <script src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js'></script>
            <script type="text/javascript" src="http://akquinet.github.io/jquery-toastmessage-plugin/demo/jquery.toastmessage-min.js"></script>
        <meta name='viewport' content='width=device-width' />
        <!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"></script><![endif]-->
    </head>
    <body>
        <div id='wrapper'>
            <article>
                <header>
                    <h2>Microsoft Azure</h2>
                    <h1>Mobile Services</h1>

                    <form id='add-item'>
                        <button type='submit'>Add</button>
                        <div><input type='text' id='new-item-text' placeholder='Enter new task' /></div>
                    </form>
                </header>

                <ul id='todo-items'></ul>
                <p id='summary'>Loading...</p>
            </article>

            <footer>
                <a href='http://www.windowsazure.com/en-us/develop/mobile/'>
                    Learn more about Microsoft Azure Mobile Services
                </a>
                <ul id='errorlog'></ul>
            </footer>
        </div>


        <script src='http://ajax.aspnetcdn.com/ajax/mobileservices/MobileServices.Web-1.2.2.min.js'></script>
        <script src='page.js'></script>

        <script src="http://js.pusher.com/2.2/pusher.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Enable pusher logging - don't include this in production
            Pusher.log = function(message) {
              if (window.console && window.console.log) {
                window.console.log(message);
              }
            };

            var pusher = new Pusher('PUSHER_KEY');
            var channel = pusher.subscribe('test_channel');
            channel.bind('OnUpdate', function(data) {

                if(data.complete)
                {
                    $().toastmessage('showSuccessToast', "Finally, Completed Task.");
                    $("li[data-todoitem-id=" + data.id + "]").fadeOut(100).remove();
                }
                else
                {
                    $().toastmessage('showSuccessToast', "Updated item ...");
                    $("li[data-todoitem-id=" + data.id + "] div input").fadeOut().val(data.text).fadeIn(100);

                }
                $('#summary').html('<strong>' + $("#todo-items li").length + '</strong> item(s)');
            });

            channel.bind('OnInsert', function(data) {
                $().toastmessage('showSuccessToast', "Hooray, Someone created task " + data.text);
                var newelem =  $('<li>')
                    .attr('data-todoitem-id', data.id)
                    .append($('<button class="item-delete">Delete</button>'))
                    .append($('<input type="checkbox" class="item-complete">').prop('checked', false))
                    .append($('<div>').append($('<input class="item-text">').val(data.text)));
                $('#todo-items').fadeOut().append(newelem).fadeIn(100);
                $('#summary').html('<strong>' + $("#todo-items li").length + '</strong> item(s)');
            });
            //OnDelete

            channel.bind('OnDelete', function(data) {
                $().toastmessage('showSuccessToast', "Got rid of one more task, Huh!");
                $("li[data-todoitem-id=" + data + "]").fadeOut(100).remove();
                $('#summary').html('<strong>' + $("#todo-items li").length + '</strong> item(s)');
            });
        </script>
    </body>
</html>