// using mootools javascript library...
function initProductList() {

    // go through each <li> in <ul id='coopProductList'>, and set the onclick handler to toggle the info box.
    $S('#coopProductList li').action({

        initialize: function() {
            // ok we need to initialize the <div>'s to work with mootools.
            var infoBox = new Element(this.getElementsByTagName('div')[0]);
            // apparently style.display doesn't pick up what we set in css,
            // so we set it here so mootools can understand it.
            infoBox.style.display = 'none';
            infoBox.setOpacity(0);

            // ICC I took this out, we've got enough javascript running as it is!
            // also while we're at it, let's use 'curvyCorners' to create that rounded-corner look.
            // settings = {
            //             tl: { radius: 20 },
            //             tr: { radius: 20 },
            //             bl: { radius: 20 },
            //             br: { radius: 20 },
            //             antiAlias: true,
            //             autoPad: true
            //           };
            //var cornersObj = new curvyCorners(settings, infoBox);
            //cornersObj.applyCornersToAll();
        },

        onclick: function() {
            // note: 'this' now represents the <li> we're iterating through...

            // first we get a reference to the <div> inside the <li> and extend it as a mootools Element.
            var infoBox = new Element(this.getElementsByTagName('div')[0]);

            // Next we choose an effect to run on the <div>.

            // If the <div> is displayed then we need to fade *out* the div and set "display: none". 
            if ( (infoBox.style.display == 'block') || (infoBox.style.display == '') ) {
                var infoBoxEffect = new fx.Opacity(infoBox, {duration: 500, onComplete: function() {infoBox.style.display='none';}});
                infoBoxEffect.custom(1,0);
            }
            // Otherwise, we set "display: block" and fade *in* the div.
            else {
                infoBox.style.display = 'block';
                var infoBoxEffect = new fx.Opacity(infoBox, {duration: 500});
                infoBoxEffect.custom(0,1);
            }

            // now we return 'false' so that the browser doesn't try to navigate anywhere
            return false;
        }
    });
}

addLoadEvent(initProductList);