/*
    tested with IE 7, FF3

cssRule:
    'span[class=targetClass]'
    'ul[class=targetClass]'

*/

function ItemCollapse(cssRule) {

    var imgMinus = "/_lib/images/icons/icoMinus.gif";
    var imgPlus = "/_lib/images/icons/icoPlus.gif";

    // Used to make sure that other instances don't interfere with each other
    var randomnumber = (Math.floor(Math.random() * 256)).toString(16);

    this.setImgMinus = function(minusImg) {
        imgMinus = minusImg;
    };

    this.setImgPlus = function(plusImg) {
        imgPlus = plusImg;
    };



    this.init = function() {
        var collapseItems = $$(cssRule);
        var itemCount = 0;

        collapseItems.each(function(item) {

            item.writeAttribute('id', randomnumber + itemCount);

            item.hide();

            var imgLink = new Element('div', {
                id: randomnumber + itemCount + 'A',
                'class': 'noPrint',
                'title': 'Show detail'
            });


            imgLink.setStyle({
                'float': 'right',
                'padding': '0px 5px 0px 5px',
                'cursor': 'pointer',
                //'cursor': 'hand',
                'height': '18px',
                'width': '18px',
                'backgroundRepeat': 'no-repeat',
                'backgroundPosition': 'left top',
                'backgroundImage': 'url(' + imgPlus + ')'
            });


            imgLink.observe('click', function(event) {
                var tmpId = this.id.slice(0, this.id.length - 1);
                $(tmpId).toggle();
                $(tmpId + 'T').toggle();

                var src = "";
                if (this.title == 'Show detail') {
                    src = imgMinus;
                    this.title = 'Hide detail'
                }
                else {
                    src = imgPlus;
                    this.title = 'Show detail'
                }

                imgLink.setStyle({
                    'backgroundImage': 'url(' + src + ')'
                });
            });


            imgLink.observe('mouseover', function(event) {
                this.setStyle({
                    'backgroundPosition': '0 -19px'
                });
            });


            imgLink.observe('mouseout', function(event) {
                this.setStyle({
                    'backgroundPosition': '0 0'
                });
            });



            var itemTitle = new Element('span', {
                id: randomnumber + itemCount + 'T',
                'class': 'noPrint'
            });
            itemTitle.update(item.readAttribute('kbtitle'));

            Element.insert(item.parentNode, { top: imgLink });
            Element.insert(item.parentNode, { top: itemTitle });

            itemCount++;
        });

        // Add print style so all items are expanded
        var scr = new Element('style', { 'type': 'text/css', 'media': 'print' });
        scr.update(cssRule + " { display:block! important; }");

        Element.insert(document.body, { top: scr });
    };
}