var __HList = DefineClass({

    Cache: [],

    init: function() {
        this.HideIcon = ce('img', null, { src: Options.HList.HideIcon } );
        this.ShowIcon = ce('img', null, { src: Options.HList.ShowIcon } );
    },

    OnClick: function(event) {
        var target = Event.findElement(event, 'li')
        var id = target.id.split('.');
        id = id[2];
        if (this.Cache[id].Content.style.display == 'block') {
            this.Cache[id].Content.style.display = 'none';
            var ClonedItem = this.ShowIcon.cloneNode(true);
        } else {
            this.Cache[id].Content.style.display = 'block';
            var ClonedItem = this.HideIcon.cloneNode(true);
        }
        this.Cache[id].Header.removeChild(this.Cache[id].Icon);
        this.Cache[id].Header.insertBefore(ClonedItem, this.Cache[id].HeaderName);
        this.Cache[id].Icon = ClonedItem;
    },

    RecolorHeader: function(event) {
        var target = Event.findElement(event, 'li')
        if (event.type == 'mouseover') target.className+=' Active'; else target.className=' Header';
    },

    Create: function(id, Style, HeaderName, Content, OnClickHook) {
        if (!id) return;
        if (!HeaderName) HeaderName = 'Header';
        if (!Style) Style = Options.HList.DefaultStyle;
        this.Cache[id] = {};
        if (!OnClickHook) OnClickHook = this.OnClick.bindAsEventListener(this);
        this.Cache[id].Main = ce('ul', null, { className: Style, id: 'HList.'+id});
        this.Cache[id].Header = ce('li', this.Cache[id].Main, {
            onclick: OnClickHook,
            onmouseover: this.RecolorHeader.bindAsEventListener(this),
            onmouseout: this.RecolorHeader.bindAsEventListener(this),
            className: 'Header',
            id: 'HList.Header.'+id
        });
        if (!Content) Content = '';
        this.Cache[id].Content = ce('li', this.Cache[id].Main, { className: 'Content', innerHTML: Content, id: 'HList.Content.'+id});
        this.Cache[id].Icon = this.ShowIcon.cloneNode(true);
        this.Cache[id].Header.appendChild(this.Cache[id].Icon);
        this.Cache[id].HeaderName= ce('span', this.Cache[id].Header, { innerHTML: HeaderName });
        return(this.Cache[id]);
    },

    SetContent: function(id, content) {
        this.Cache[id].Content.innerHTML = content;
    },

    Rename: function(id, NewName) {
        this.Cache[id].HeaderName.innerHTML = NewName;
    }

})