What event is triggered when a HTML5 Adobe Extension Panel is collapsed?

Question

I am working on a HTML5 Adobe Extension that needs to load data from LocalStorage into some 's but for the life of me I can't figure out wether the panel is being collapsed or closed or what happens with it. The list items are generated dinamically.

I would also need an ideea to save data upon exit so that the list elements inside the UL can be saved and retrieved when PS starts again. So far I noticed that the host i a chrome type browser that supports a lot of stuff, including localstorage. However, I've not seen a dead simple tutorial for saving ul items but only for variables and strings.

right now I'm unable to save or retrieve the data from localstorage.

here is my code so far.

$(document).ready(function(){
var task = {
        "name" : "",
        "description" : "",
        "project" : ""
};

$('#saveData').css("visibility", "hidden");
$('#btnMarkAsDone').css("visibility","hidden");

var toBeDone = Array();
var wasDone = Array();

$( window ).load(function() {

    for(var i = 0;i < toBeDone.length;i++){
        $('#todo').append('<li class="todo-item">'+toBeDone[i]+'</li>');
    }
    for(var i = 0; i < wasDone.length; i++){
        $('#done').append('<li class="completed">'+wasDone[i]+'</li>');
    }

});
$( window ).width(function() {

});

$("#btnAddTask").click(function(){
    var oName = task.name;
    var oProject = task.project;
    var oDescription = task.description;

    var taskname = $("#txtTaskName").val();
    var taskproject = $("#txtTaskProj").val();
    var taskdescription = $("#txtTaskDesc").val();

    oName = taskname;
    oProject = taskproject;
    oDescription = taskdescription;

    var input = "<b>Task: </b>"+oName+" | "+"<b>PSD: </b>"+oProject+" | "+"<b>Desc: </b>"+oDescription;

    $("#todo").append('<li class="todo-item">'+input+'</li>');
});

$("#todo").on('click','li',function(){
    $(this).addClass('complete');
    $("#done").append(this);
});
$("#done").on('click','li',function(){
    $(this).remove();
});
$("#saveData").click(function(){

    if(localStorage['todo']){
        toBeDone = JSON.parse(localStorage['todo']);
    }if(localStorage['done']){
        wasDone = JSON.parse(localStorage['done']);
    }
});

$(function() { 
    $("button").button();
});
});

Answer 1

Fixed the localStorage part:

$("#saveData").click(function(){

    var toDo = $('#todo').html();
    var finished = $('#done').html();
    localStorage.setItem('todo',toDo);
    localStorage.setItem('done',finished);

});

$(window).load(function() {
    $("#todo").html(localStorage.getItem('todo'));
    $("#done").html(localStorage.getItem('done'));
});

Still need to find out what kind of event is fired when a window is collapsed though. I appreciate any help !