function initialize() {
    $('#datepicker').datepicker({
    inline: true,
    onSelect: function(dateText, inst) { 
            loadDay($.datepicker.formatDate("yy/mm/dd", $(this).datepicker('getDate')));
        }
    });

    $("#selectable").selectable({
        selected: function(event, ui) { 
           window.MAILING_LIST = ui.selected.innerHTML;
           loadDay($.datepicker.formatDate("yy/mm/dd", $("#datepicker").datepicker('getDate')));
        }
       });

    $('#dialog').dialog({
        autoOpen: false,
        width: 400,
        height: 500,
        buttons: {
            "Ok": function() { 
                $(this).dialog("close"); 
            }, 
            "Cancel": function() { 
                $(this).dialog("close"); 
            } 
        }
        });

    $('#dialog_link').click(function(){
        $('#dialog').dialog('open');
        return false;
    });

    //hover states on the static widgets
    $('#dialog_link').hover(
        function() { $(this).addClass('ui-state-hover'); }, 
        function() { $(this).removeClass('ui-state-hover'); }
        );

    $.getJSON("/archives/", {},
            function(data) {
               for(i in data[1]) {
                   $("#selectable").append(
                       "<li class=\"ui-widget-content\">" + data[1][i] + "</li>"
                    );
               }
            }
        );

    window.MESSAGE_CACHE = {}
}

function summarize(msg) {
    if(msg.body == null) {
        return msg.parts[0].body;
    } else {
        return msg.body;
    }
}

function scrub(txt) {
    console.log(txt);
    if(txt != null) {
	    return txt.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    } else {
            return ""
    }
}

function appendMessage(msg) {
    display = '<div id="message"><div id="header">' +
        '<div>' + scrub(msg.headers['Date']) + '</div>' +
        '<div id="addressing">' + scrub(msg.headers['From']) + '</div>' +
        '<div id="subject">' + scrub(msg.headers['Subject']) + '</div>' +
        '</div><div id="body"><pre>' +
        scrub(summarize(msg)) +
        '</pre></div></div>'
        
        $("#messages").append(display);
}

function fetchMessage(uri) {
    msg = window.MESSAGE_CACHE[uri]

    if(msg) {
        appendMessage(msg);
    } else {
        $.getJSON(uri, {}, function(m) { appendMessage(m); window.MESSAGE_CACHE[uri] = m });
    }
}

function loadDay(date) {
    if(window.MAILING_LIST) {
        $.getJSON("/archives/" + window.MAILING_LIST + date + "/json/", {},
        function(data) {
            $("#messages").empty();
            base = data[0]
            msgs = data[1]
            for(i in msgs) {
                fetchMessage(base + msgs[i])
            }
        });
    } else {
        $("#messages").html("<h3>Now pick a list to look at for that day.</h3>");
    }
}