jQuery List Widget

by Mark

HTML

<div id="widget-test">
        </div>

CSS

/* 
   TODO 
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/
* { 
    margin: 0;
    font-family: Tahoma, Geneva, sans-serif;
}

.list-widget-head-div{
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    width:100%;
    background-color: #EEEEEE;
    float:left;
}

.list-widget-head-div .header-table{
    margin-top:6px;
    border:0px;
    border-color:black;
    border-style:solid;
    style:none;
    width:100%; 
    cellpadding:1; 
    cellspacing:1;
}

.list-widget-head-div .header-table p.title{
    font-weight:bold;
    color: #005885;
    padding-left: 8px;
    margin: 0;
}

.list-widget-head-div .header-table .add-but{ height:15px; width:15px; }
.list-widget-head-div .header-table .add-but:hover{    cursor: pointer; }

.list-widget-head-div .header-table .list-search-box {
    background-image: url("http://s16.postimage.org/ua0zwtm35/magnifier.png");
    background-position: left center;
    background-repeat: no-repeat;
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    float: right;
    height: 18px;
    margin-right: 8px;
    padding-top: 0;
    padding-left: 18px;
    height: 25px;
    width: 95%;
}

.list-widget-head-div p.descript{ margin-top: 0; padding-left: 10px; margin-bottom: 8px; }

.list-widget-list-container{
    border:1px solid #ccc;
    height:100%;
    width:100%;
    background-color: #EEEEEE;
    float:left;
    overflow-y:hidden;
    line-height: 0;
    list-style-type: none;
}
.list-widget-list-container .list-widget-list{
    line-height:0;
    background-color:white;
    float:left;
    overflow-y:scroll;
    overflow-x:hidden;
    height:100%;
    padding-left:0%;
    width:100%;
    list-style-type:none;
}
.list-widget-list-container .list-widget-list li {}
.list-widget-list-container .list-widget-list li.activated {}
.list-widget-list-container .list-widget-list li.deactivated {}
.list-widget-list-container .list-widget-list li.loading...

JavaScript

(function($) {
                /* 
                *    Document   : list-widget-0.1
                *    Created on : 06-Aug-2012, 20:53:49
                *    Author     : aydin hassan
                *    Description:
                *        This widget is designed to be attatched to a div
                *        
                *        Using the options you can specify one of three list types:
                *            1.) a normal list if items (normal)
                *            2.) a list of items with a cross/tick img depending on its status (act-deact)
                *                ---Clicking the image will toggle its status (change the img and class) and run a provided callback
                *            3.) a list of items with a trash can icon (remove)
                *                ---Click the image will run a supplied calback and then remove the item
                *
                *        Each of the lists has various callbacks:
                *            1.) The global click callback (selectabble.clickCallBack), if passed, will launch on clicked an element for any list type
                *            2.) The global click off callback (selectable.clickOffCallBack), if passed, will launch when an item is clicked off.
                *                ---Works in conjuction with selectable.sticky - if this is set to true elements will stay higlighted until they are clicked off
                *                ---NOTE: click off callback will not be processed if selectable.sticky is set to true
                *            3.) The act-deact callback, if passed, will run after a user has clicked the img, or, if there is no global click callback (selectabble.clickCallBack) it will 
                *                run when the li element is clicked
                *            4.) The remove callback, if passed, will run after the user clicks on the trash-can icon
                *            5.) The add button callback, if...