<?php

$DatabaseName = "mysql://root@localhost/Todo";

class TodoItem
{
    private static $fields = array( 'ID', 'creationDate', 'text', 'done' );

    private $properties = array();

    function __set_state($an_array) {
        $obj = new TodoItem;
        $obj->properties = $an_array['properties'];
        return $obj;
    }

    function set($property, $value) {
        $this->properties[$property] = $value;
    }

    function get($property) {
        return $this->properties[$property];
    }

    function toJson() {
        $str = "{";
        $first = true;
        foreach( $this->properties as $key => $value ) {
            if ( !$first ) {
                $str .= ",";
            }
            $first = false;
            $str .= "$key:\"" . str_replace(
                    array("\n", "\r"), array("\\n", "\\r"),
                    $value ) . "\"";
        }
        $str .= "}";
        return $str;
    }

    function mergeFrom($item) {
        foreach( self::$fields as $field ) {
            if ( isset( $item->properties[$field] ) ) {
                $this->properties[$field] = $item->properties[$field];
            }
        }
    }
    
    static function createFromPost()
    {
        global $_POST;
        $item = new TodoItem();
        foreach ( self::$fields as $field ) {
            $item->set( $field, $_POST[$field] );
        }

        return $item;
    }
}

class AddItemRequest
{
    function serve() {
        return getDb()->addItem( TodoItem::createFromPost() ) ;
    }
}

class DelItemRequest
{
    function serve() {
        global $_POST;
        getDb()->delItem( $_POST['delitem'] );
        return "ok";
    }
}

class SetItemInfoRequest
{
    function serve() {
        getDb()->changeItem( TodoItem::createFromPost() ) ;
        return "ok";
    }
}

function mergeSessionWithDb()
{
    global $_SESSION;
    foreach( $_SESSION['todo'] as $item ) {
        getDb()->addItem( $item );
    }
    unset($_SESSION['todo']);
}

class CreateAccountRequest
{
    function serve() {
        global $auth;
        global $_POST;
        $msg = userDb()->addUser($_POST['username'], $_POST['password'] );
        if ( $msg == "ok" ) {
            $_SESSION{'username'} = $_POST['username'];
            mergeSessionWithDb();
        }
        return $msg;
    }
}

class LoginRequest
{
    function serve() {
        global $auth;
        global $_POST;
        global $_SESSION;
        if( "ok" == userDb()->checkUser($_POST['username'], 
                        $_POST['password'] ) ) 
        {
            $_SESSION{'username'} = $_POST['username'];
            mergeSessionWithDb();
            return 'ok';
        }

        return 'error';
    }
}

class GetItemsRequest
{
    function serve()
    {
        $todo = getDb()->getItems();

        $str = "[";
        $first = true;
        foreach( $todo as $item ) {
            if ( !$first ) {
                $str .= ',';
            }
            $first = false;
            $str .= $item->toJson();
        }
        $str .= ']';
        return $str;
    }
}

function getDb()
{
    static $instance;
    if (!is_object($instance) ) {
        global $_SESSION;
        if ( isset($_SESSION['username'] ) ) {
            // Logged in -- access mysql database.
            global $DatabaseName;
            $instance = new PermanentTodoDb($DatabaseName);
        } else {
            // Not logged in -- use cookies.
            $instance = new SessionTodoDb();
        }
    }

    return $instance;
}

class Database {
    private $source;

    function __construct( $source ) {
        $this->source = $source;
    }
    
    function connectDb() {
        require_once('DB.php');
        $db = DB::connect($this->source);
        if ( DB::iserror($db)) {
            die($db->getMessage());
        }

        return $db;
    }
}

function userDb()
{
    static $instance;
    if (!is_object($instance) ) {
        global $DatabaseName;
        $instance = new UserDb($DatabaseName);
    }

    return $instance;
}

class UserDb extends Database
{
    function __construct($source) {
        parent::__construct($source);
    }

    // returns "ok", or a description of the error.
    function addUser($username, $password) {
        $db = $this->connectDb();
        $username = $db->escapeSimple($username);
        $password = $db->escapeSimple($password);
        $sql = <<<EOF
            INSERT INTO auth
            (username, password)
            VALUES
            ("$username", "$password");
EOF;
        $q = $db->query($sql);
        if (DB::iserror($q)) {
            return $q->getMessage();
        }

        $q = $db->commit();
        if (DB::iserror($q)) {
            return $q->getMessage();
        }
        return "ok";
    }

    function checkUser( $username, $password ) {
        $db = $this->connectDb();
        $username = $db->escapeSimple($username);
        $sql = <<<EOF
            SELECT * FROM auth WHERE username = "$username";
EOF;
        $q = $db->query($sql);
        if ( DB::iserror($q)) {
            die($q->getMessage());
        }

        $row = $q->fetchRow(DB_FETCHMODE_OBJECT);
        if ( $row == null || $row->password != $password ) {
            return false;
        }
        return true;
    }

    function removeUser($username) {
        $db = $this->connectDb();
        $username = $db->escapeSimple( $username );
        $sql = <<<EOF
            DELETE FROM auth WHERE username = "$username";
EOF;
        $q = $db->query($sql);
        if (DB::iserror($q)) {
            echo "<pre>$sql</pre>";
            die($q->getMessage());
        }

        $db->commit();
        return "ok";
    }

    function getUserList() {
        // not implemented.
        return array();
    }
};


class SessionTodoDb
{
    function addItem( $item ) 
    {
        global $_SESSION, $todo;
        $nextID = $_SESSION['nextID'];
        $_SESSION['todo'][$nextID] = $item;
        $item->set('ID', $nextID);
        $_SESSION['nextID'] += 1;
        return $nextID;
    }

    function delItem( $id )
    {
        unset($_SESSION['todo'][$id]);
    }

    function changeItem( $item )
    {
        global $_SESSION;
        $_SESSION['todo'][$item->get('ID')]->mergeFrom($item);
    }

    function getItems()
    {
        global $_SESSION;
        return $_SESSION['todo'];
    }
}

class PermanentTodoDb extends Database
{
    function __construct($source) {
        parent::__construct($source);
    }

    function addItem( $item ) 
    {
        global $_SESSION;
        $db = $this->connectDb();
        $ID = $db->nextId("todoid");
        $item->set('ID', $ID);

        $username = $db->escapeSimple($_SESSION['username']);
        $blob = $db->escapeSimple(var_export($item, TRUE));

        $sql = <<<EOF
            INSERT INTO Todo
            (ID, username, item)
            VALUES
            ("$ID", "$username", "$blob");
EOF;
        $q = $db->query($sql);
        if (DB::iserror($q)) {
            return $q->getMessage();
        }

        $q = $db->commit();
        if (DB::iserror($q)) {
            return $q->getMessage();
        }
        return $ID;
    }

    function delItem( $id )
    {
        global $_SESSION;
        $db = $this->connectDb();
        $username = $db->escapeSimple($_SESSION['username']);
        $ID = $db->escapeSimple($id);

        $sql = <<<EOF
            DELETE FROM Todo WHERE ID = "$id" AND username = "$username";
EOF;
        $db = $this->connectDb();
        $q = $db->query($sql);
        if (DB::iserror($q)) {
            echo "<pre>$sql</pre>";
            die($q->getMessage());
        }
        $db->commit();
    }

    function changeItem( $newitem )
    {
        global $_SESSION;
        $db = $this->connectDb();
        $username = $db->escapeSimple($_SESSION['username']);
        $ID = $db->escapeSimple($newitem->get('ID'));
        $sql = <<<EOF
            SELECT * FROM Todo 
            WHERE username="$username" AND ID="$ID";
EOF;
        $q = $db->query($sql);
        if ( DB::iserror($q)) {
            die($q->getMessage());
        }

        $row = $q->fetchRow(DB_FETCHMODE_OBJECT);
        if ( $row == null || $row->password != $password ) {
            return false;
        }
        
        eval("\$item = $row->item;");
        $item->mergeFrom($newitem);
        $blob = $db->escapeSimple(var_export($item, TRUE));
        
        $sql = <<<EOF
            UPDATE Todo
            SET item="$blob"
            WHERE username="$username" AND ID="$ID";
EOF;

        $q = $db->query($sql);
        if (DB::iserror($q)) {
            echo "<pre>$sql</pre>";
            die($q->getMessage());
        }

        $db->commit();
    }

    function getItems()
    {
        global $_SESSION;
        $db = $this->connectDb();
        $username = $db->escapeSimple($_SESSION['username']);

        $sql = "SELECT * FROM Todo WHERE username=\"$username\" ORDER BY ID;";

        $items = array();

        // look for record for given user name.
        $q = $db->query($sql);
        if ( DB::iserror($q)) {
            die($q->getMessage());
        }

        for($i = 0;;$i++) {
            $row = $q->fetchRow(DB_FETCHMODE_OBJECT);
            if ( $row == NULL ) {
                break;
            }

            eval("\$items[] = $row->item;");
        }

        return $items;
    }
}


// ----------------------------------------------------------------------------
// Main web page stuff
// ----------------------------------------------------------------------------
// create the session. Make sure it lasts as long as possible.
session_set_cookie_params(604800); // one week
session_start();

if ( isset( $_GET['logout'] ) ) {
    unset($_SESSION['username']);
    unset($_SESSION['todo']);
}

// if there isn't anything in the session already, initialize it.
if ( !isset($_SESSION['todo'] ) ) {
    $_SESSION['todo'] = array();
    $_SESSION['nextID'] = 1;
}

$todo = $_SESSION['todo'];

$request = null;

if ( isset( $_POST['additem'] ) ) {
    $request = new AddItemRequest();
} else if ( isset( $_POST['delitem'] ) ) {
    $request = new DelItemRequest();
} else if ( isset( $_POST['setiteminfo'] ) ) {
    $request = new SetItemInfoRequest();
} else if ( isset( $_POST['getitems'] ) ) {
    $request = new GetItemsRequest();
} else if ( isset( $_POST['createAccount'] ) ) {
    $request = new CreateAccountRequest();
} else if ( isset( $_POST['login'] ) ) {
    $request = new LoginRequest();
}

if ( isset($_GET['dump'] ) ) {
    echo "<pre>".var_export($_SESSION)."</pre>";
}

if ( $request ) {
    echo $request->serve();
    exit(0);
}

?>

<html>
<head>
<script type="text/javascript" src="../blog/prototype.js"></script>
<script type="text/javascript" src="../blog/scriptaculous.js?load=effects"></script>
<script type="text/javascript">
//<--

<?php
if ( isset( $_SESSION['username'] ) ) {
    echo 'var username = "' . $_SESSION["username"] . '";';
} else {
    echo "var username = null;\n";
}
?>

function makeAjaxRequest( strUrl, params, fnCallBack, param ) 
{
    var self = this;

    try {
        self.xmlHttpReq = new XMLHttpRequest();
    } catch ( trymicrosoft ) {
        try {
            self.xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(othermicrosoft) {
            try {
                self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(failed) {
                self.xmlHttpReq = null;
            }
        }
    }

    self.xmlHttpReq.open('POST', strUrl, true);
    self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    self.xmlHttpReq.onreadystatechange = function() {
        if (self.xmlHttpReq.readyState == 4) {
            if ( fnCallBack ) {
                fnCallBack( self.xmlHttpReq.responseText, param );
            }
        }
    }

    var query = "";
    var first = true;
    for ( var key in params ) {
        if ( !first ) {
            query += '&';
        } 
        first = false;
        query += key + "=" + escape(params[key]);
    }

    self.xmlHttpReq.send(query);
}

function onServerError()
{
    alert("There is a problem accessing the server. " + 
                "You should reload the page.");
}

function dateToFriendlyString(date)
{
    var months = 
        [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December",
        ];

    var days = 
        [
            "Sunday",
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday"
        ];

    return days[date.getDay()] + ", " + months[date.getMonth()] + " " + 
        date.getDate() + ", " + date.getFullYear();
}

function TodoItem(scriptid, text, creationDate)
{
    var div = document.createElement('div');
    div.style.marginBottom = "3px";
    div.style.fontFamily = "Trebuchet MS";
    div.style.fontSize = "10pt";
    div.style.textAlign = "left";
    div.itemID = null;
    div.scriptid = scriptid;
    div.originalText = text;
    div.creationDate = creationDate;
    
    //---------------------------------------------------------------------
    // create div for the delete | edit | []
    textDelete = document.createTextNode('delete');
    aDelete = document.createElement('a');
    aDelete.href="javascript:deleteClicked(" + scriptid + ");void(0)";
    aDelete.appendChild( textDelete );
    aEdit = document.createElement('a');
    aEdit.href="javascript:editClicked(" + scriptid + ");void(0)";
    div.editTextNode = document.createTextNode('edit');
    aEdit.appendChild( div.editTextNode );
    aUp = document.createElement('a');
    aUp.appendChild( document.createTextNode('up') );
    aUp.href = "javascript:upClicked("+scriptid+");void(0)";
    aDown = document.createElement('a');
    aDown.appendChild( document.createTextNode('down') );
    aDown.href = "javascript:downClicked("+scriptid+");void(0)";
    links = document.createElement( 'div' );
    links.style.fontSize = "8pt";
    links.appendChild( aUp );
    links.appendChild( document.createTextNode( '  |  ' ) );
    links.appendChild( aDown );
    links.appendChild( document.createTextNode( '  |  ' ) );
    links.appendChild( aDelete );
    links.appendChild( document.createTextNode( '  |  ' ) );
    links.appendChild( aEdit );
    links.appendChild( document.createTextNode( '  |  ' ) );
    var img = document.createElement('img');
    img.setAttribute("src", "undone.png");
    img.style.verticalAlign = "middle";
    img.div = div;
    img.onclick = function() {
        if ( this.div.itemID == null ) {
            onServerError();
            return;
        }

        this.div.setDone( !this.div.done );

        this.div.sendToServer();
    }
    div.checkImg = img;
    links.appendChild( img );

    //--------------------------------------------------------------------
    // create a table to contain the title bar
    td1 = document.createElement('td');
    td1.appendChild(document.createTextNode(dateToFriendlyString(div.creationDate)));
    td2 = document.createElement('td');
    td2.appendChild(links);
    td2.style.textAlign = "right";
    tr = document.createElement('tr');
    tr.appendChild(td1);
    tr.appendChild(td2);
    tbody = document.createElement('tbody');
    tbody.appendChild(tr);
    table = document.createElement('table');
    table.setAttribute("width", "100%");
    table.appendChild(tbody);
    
    //---------------------------------------------------------------------
    // Create title bar to contain the links.

    titleBar = document.createElement('div');
    titleBar.appendChild(table);
    div.appendChild(titleBar);
    div.titleBar = titleBar;
    
    div.done = false;

    function textToElements( div, text )
    {
        // split on \n.
        parray = text.split('\n');

        // for each resulting string,
        for( var i = 0; i < parray.length; i++ ) {
            // add a paragraph element with child as the text.
            t = document.createTextNode(parray[i]);
            p = document.createElement("p");
            p.style.marginTop = "0px";
            if ( i == parray.length-1 ) {
                p.style.marginBottom = "0px";
            } else {
                p.style.marginBottom = "0.5em";
            }
            p.appendChild(t);
            p.autoCreated = true;
            div.appendChild(p);
        }
    }

    div.setDone = function( done )
    {
        div.titleBar.style.background = "rgb(199,207,213)";
        if ( !done ) {
            div.style.border = "1px solid rgb(199,207,213)";
            div.style.background = "rgb(241,245,249)";
            div.style.opacity = "1.0";
            div.checkImg.setAttribute("src", "undone.png");
        } else {
            div.style.border = "1px solid rgb(199,255,213)";
            div.style.background = "rgb(255,255,175)";
            div.style.opacity = "0.7";
            div.checkImg.setAttribute("src", "done.png");
        }

        div.done = done;
    }

    div.editMode = false;

    div.editClicked = function()
    {
        this.editMode = !this.editMode;

        if ( this.editMode ) {
            // remove all the pararaph elements.
            for( var i = this.childNodes.length-1; i >= 0; i-- ) {
                if ( this.childNodes[i].autoCreated == true ) {
                    this.removeChild( this.childNodes[i] );
                }
            }

            // create a form containing the text area.
            textArea = document.createElement("textarea");
            textArea.setAttribute("name", "bigtext");
            textArea.appendChild(document.createTextNode( this.originalText ) );
            textArea.setAttribute("cols", "60");
            textArea.setAttribute("rows", "10");
            form = document.createElement("form");
            form.appendChild(textArea);
            form.bigtext = textArea;
            this.appendChild( form );
            this.editTextNode.nodeValue = "save";
            form.parentNode.style.textAlign = "center";
        } else {
            // find the form text.
            var form = null;
            for ( var i = this.childNodes.length-1; i>= 0; i-- ) {
                if ( this.childNodes[i].nodeName == "FORM" ) {
                    form = this.childNodes[i];
                    break;
                }
            }

            if ( form == null ) {
                alert("can't find form error");
                return;
            }

            form.parentNode.style.textAlign = "left";

            this.originalText = form.bigtext.value;
            this.removeChild( form );
            textToElements( this, this.originalText );
            div.sendToServer();
            this.editTextNode.nodeValue = "edit";
        }
    }

    div.sendToServer = function() {

        makeAjaxRequest("index.php", 
                { 
                    setiteminfo: 1, 
                    text: this.originalText,
                    done: (this.done ? "1" : "0"),
                    ID: this.itemID
                },
                null, null
                );
    }

    div.setDone( false );
    textToElements( div, text );

    return div;
}

function TodoList(div)
{
    div.TodoList = this;
    this.div = div;
    this.nextId = 1;
    this.add = function(item) {
        item.style.display = 'none';
        //this.div.insertBefore( item, this.div.firstChild );
        this.div.appendChild( item );
        new Effect.BlindDown( item, {duration: .5} );
    }

    this.findByScriptId = function(scriptid) {
        for( i = 0; i < this.div.childNodes.length; i++ ) {
            if ( this.div.childNodes[i].scriptid == scriptid ) {
                return this.div.childNodes[i];
            }
        }
        return null;
    }

    this.remove = function( scriptId ) {
        var item = this.findByScriptId( scriptId );
        if ( item.removing ) {
            return;
        }
        item.removing = true;
        new Effect.BlindUp(this.findByScriptId(scriptId),
                { duration: .5});
    }

    return this;
}

function addToList()
{
    var todoForm = document.getElementById('todoForm');

    var text;
    if ( todoForm.bigtext.style.display == "none" ) {
        text = todoForm.smalltext.value;
    } else {
        text = todoForm.bigtext.value;
    }

    if ( text == "" ) {
        return;
    }


    var item = new TodoItem( todoList.nextId++, text, new Date());
    todoForm.bigtext.value = "";
    todoForm.smalltext.value = "";
    todoList.add( item );

    function onRequestDone( response, item )
    {
        item.itemID = response;
    }

    var t = text;

    makeAjaxRequest( 
            "index.php",
            { text: t, creationDate: item.creationDate.toUTCString(), additem: 'true' },
            onRequestDone,
            item
            );
            
}

var todoList = null;

function editClicked(scriptid)
{
    var item = todoList.findByScriptId( scriptid );
    if ( item.itemID == null ) {
        // not added to server yet.
        onServerError();
        return;
    }

    item.editClicked();
}

function deleteClicked(scriptid)
{
    var item = todoList.findByScriptId( scriptid );
    if ( item.itemID == null ) {
        // not added to server yet.
        onServerError();
        return;
    }

    todoList.remove( scriptid );

    makeAjaxRequest("index.php",
            { delitem: item.itemID }, 
            null, 
            null
            );
}

function init()
{
    if ( username == null ) {
        var signin = document.getElementById('signin');
        signin.style.display = 'block';
    } else {
        var status = document.getElementById('status');
        status.appendChild(document.createTextNode("Welcome back, " + username
                    + ". | "));
                   
        a  = document.createElement('a');
        a.href="index.php?logout";
        a.appendChild(document.createTextNode("Logout"));
        status.appendChild(a);
        status.style.display = "block";
    }

    
    todoList = new TodoList(document.getElementById('todoList'));

    function fillItems(response, param)
    {
        items = eval(response);
        for( i = 0; i < items.length; i++ ) {
            items[i].creationDate = new Date(items[i].creationDate);
            var item = new TodoItem( todoList.nextId++, items[i].text,
                    items[i].creationDate);
            item.setDone( parseInt(items[i].done) );
            item.itemID = parseInt(items[i].ID);
            todoList.add( item );
        }
    }

    makeAjaxRequest("index.php",
            { getitems: 1 },
            fillItems,
            null
            );
}

function toggleMoreText()
{
    var todoForm = document.getElementById('todoForm');
    var link = document.getElementById('spaceToggle');
    if ( todoForm.bigtext.style.display == "none" ) {
        todoForm.bigtext.style.display = "inline";
        todoForm.smalltext.style.display = "none";
        link.firstChild.nodeValue = "Less Space";
    } else {
        todoForm.bigtext.style.display = "none";
        todoForm.smalltext.style.display = "inline";
        link.firstChild.nodeValue = "More Space";
    }
}

function createAccount()
{
    var main = document.getElementById("main");
    var accountBox = document.getElementById('createAccount');
    main.style.display = "none";
    accountBox.style.display = "block";
}

function backFromCreateAccount()
{
    var main = document.getElementById("main");
    var accountBox = document.getElementById('createAccount');
    main.style.display = "block";
    accountBox.style.display = "none";
}

function foo() 
{
    var accountBox = document.getElementById('createAccount');
    accountBox.style.display = "block";
    Effect.SlideDown('createAccount');
}

function validEmailAddress(text)
{
    apos = text.indexOf("@");
    dotpos = text.lastIndexOf(".");
    if ( apos < 1 || dotpos - apos < 2 ) {
        return false;
    }
    return true;
}

function replaceNodeText(elem, text)
{
    for( var i = elem.childNodes.length-1; i >= 0; i-- ) {
        elem.removeChild( elem.childNodes[i] );
    }
    elem.appendChild(document.createTextNode(text));
}

function signIn()
{
    var form = document.getElementById('signInForm');

    if ( form.username.value == "" || form.password.value == "" ) {
        return;
    }

    var loading = document.getElementById('signInWait');
    form.style.visibility = 'hidden';
    loading.style.display = 'inline';

    function onLoginResult(result, param) {
        if ( result != 'ok' ) {
            loading.style.display = 'none';
            form.style.visibility = 'visible';
            var err = document.getElementById('loginResult');
            err.style.display = 'block';
            replaceNodeText(err, "Error signing in.");
        } else {
            window.location.href = "index.php";
        }
    }

    makeAjaxRequest("index.php",
            { login: 1,
              username: form.username.value,
              password: form.password.value
              },
            onLoginResult,
            null
            );
}

function submitAccount()
{
    var newAccount = document.getElementById('newAccount');
    var errors = document.getElementById('accountCreateErrors');

    for( var i = errors.childNodes.length-1; i >= 0; i-- ) {
        errors.removeChild( errors.childNodes[i] );
    }

    function error(str) {
        errors.appendChild(document.createTextNode(str));
    }

    var email = newAccount.email.value;
    if ( !validEmailAddress( email ) ) {
        error("Not a valid email address.");
        return;
    }

    var password = newAccount.password.value;
    if ( password != newAccount.password2.value ) {
        error("Passwords do not match.");
        return;
    }

    if ( password == "" ) {
        error("Password is blank.");
        return;
    }

    var username = newAccount.username.value;
    if ( username == "" ) {
        error("Username is blank.");
        return;
    }

    error("Please wait...");
    newAccount.style.display = 'none';

    function onAccountResult(result, param) {
        if ( result != "ok" ) {
            newAccount.style.display = "block";
            errors.removeChild(errors.firstChild);
            error(result);
        } else {
            var accountBox = document.getElementById("createAccount");
            addParagraph(accountBox, "Thanks for registering. ");
            var a = document.createElement("a");
            a.appendChild(document.createTextNode("Back to List"));
            a.href = "index.php";
            var p = document.createElement("p");
            p.appendChild(a);
            accountBox.appendChild(p);
        }
    }

    makeAjaxRequest("index.php",
            { createAccount: 1,
              username: username,
              password: password,
              email: email
              },
            onAccountResult,
            null
            );
    
}

function addParagraph(elem, text)
{
    var p = document.createElement("p");
    p.appendChild(document.createTextNode(text));
    elem.appendChild(p);
}
//-->
</script>
<style type="text/css">

body {
    font-family: "Trebuchet MS";
    text-align:center;
}

h1 {
    color: #7A96DF;
}

div.todoList {
    width: 600px;
    text-align: center;
    margin: auto;
}

.hide {
    display: none;
}

div.signin {
    text-align: left;
    margin: 0px;
    padding: 0px;
    font-family: Arial;
    font-size: 8pt;
    padding: 0.5em;
    text-align: right;
    display: none;
}

h1.title {
    margin-top:0px;
    padding-top: 0px;
        
}

div.main {
    text-align: center;
}

div#accountCreateErrors {
    color: red;
    margin: 1em;
    text-align: center;
}

td {
    font-family: Arial;
    font-size: 8pt;
}

div.createAccount {
    width: 600px;
    background: #C1D2DE;
    border: 2px solid #001da0;
    display:none;        
}

div.loading {
    background: rgb(128,0,0);
    position: absolute;
    top:0;
    right: 0;
    color: white;
    text-decoration: blink;
    display:none;
}

div.loginResult {
    color: rgb(128,0,0);
    font-family: Arial;
    font-size: 8pt;
    display: none;
}

div#status {
    position: absolute;
    top: 0;
    right: 1em;
    display: none;
    font-family: arial;
    font-size: 10pt;
    text-align: right;
}

.error {
    color: red;
}

</style>
</head>

<body onload="init()">

<div id=main>

<div style="text-align:right">
<div class=loading id=signInWait>
Loading...
</div></div>
<div id=status>
</div>
<div id=signin class=signin>
<form action="javascript:signIn();void(0)" id=signInForm>
    <div class=loginResult id=loginResult>
        
    </div>
    Username: <input type=text size=15 name="username">
    Password: <input type=password size=15 name="password">
    <input type=submit value="Sign in"><br>
    <a href="javascript:createAccount();void(0)">Create account</a>
</form>
</div> <!--signin-->

<h1 class=title>My Todo List.ca </h1>

<form action="javascript:addToList();void(0)" id=todoForm>
    <textarea cols=60 name="bigtext" rows=10 style="display:none"
    ></textarea>
    <input type=text size=60 name="smalltext">
    <input type=button value="Add" onclick='addToList()'/><br>
    <a id=spaceToggle href="javascript:toggleMoreText();void(0)">More space</a>
</form>

<div class=todoList id=todoList>
</div>

</div> <!--main-->

<center>
<div id=createAccount class=createAccount>
<div> <!-- Wrapper need by scriptaculous --> 
<h1>Create Account</h1>
<form id=newAccount action="javascript:submitAccount();void(0)">
<p align=left style='margin:1em;'>
Creating an account will allow you to save your todo list on our server, so you
can access it later.
</p>
<div id=accountCreateErrors></div>

<table>
<tr><td>User name:</td><td><input type=text name=username size=30></td></tr>
<tr><td>Password:</td><td><input type=password name=password size=30></td></tr>
<tr><td>Re-enter password:</td><td><input type=password name=password2 size=30></td></tr>
<tr><td>Email Address:</td><td><input type=text name=email size=30></td></tr>
</table>
<input type=submit value="Create Account">
<input type=button value="Go Back" onclick="javascript:backFromCreateAccount()">
<input type=hidden name="login" value="1">
</form>
</div>
</div>
</center>
<a name="#createAccount">

</body>
</html>