
ripl.renderers.addCollectionRenderer('contentlist_custom1',function (contentList) 
{
    // If this content list doesn't have anywhere to render, then exit out.
    if (!contentList.displayOptions.renderTarget) { return; }

    // First, set up the vars & create a base container.
    var pContent, pBottomBar, pRow, pTd, pAnchor, pImage, i, pageInfo,
        pContainer = $ripl.create('div', {className:'ripl_displayObject'});
        
    if (contentList._availableItems.length == 0) 
    {
        // If our content list doesn't have any items in it,
        // then render the 'no items' html.
        pContainer.add(contentList.displayOptions.noitems);
    }
    else
    {
        // The pagination_helper is a handy function for determining  
        // what content to show in a 'paged' environment.
        pageInfo = ripl.renderers.collectionRenderers.pagination_helper(contentList);

        // Create a box of content items for the parent container.  
        // Normallly, I'd use a DIV but using a table makes it easier 
        // to vertically align content.  RIPL thumbnails are not 
        // homogenous to a given size... they actually vary slightly 
        // depending on the kind of content and the source.
        pContent = $ripl.create('table',{
                className:'ripl_contentcontainer'
            });
        pBody = $ripl.create('tbody');
        pRow = $ripl.create('tr');
        
        for (i = pageInfo.start; i < pageInfo.max; i++)
        {
            // Start with a table cell, since we're using a table structure.
            pTd = $ripl.create('td');
            // Create an anchor (< A >) tag.  Make sure to add the new  
            // className, which we'll define in our CSS additions.
            pAnchor = contentList._availableItems[i].getAnchor({
                    className:'custom1_contentitem'
                });
            // Create an img (< IMG >) tag which will go inside the anchor.
            pImage = $ripl.create('img',{
                    className:'custom1_contentimage',
                    src:contentList._availableItems[i].thumbnail_image_url
                });
            // Add the Image to the anchor.
            pAnchor.add(pImage);
            // Add the anchor to the Table cell.
            pTd.add(pAnchor);
            pRow.add(pTd);
        }
        // Add the entire box of content items into the parent container.
        pBody.add(pRow);
        pContent.add(pBody);
    }
    // Standard code to create page steppers for a content list.
    if ((contentList.displayOptions.itemsperpage < contentList._availableItems.length) && (contentList.displayOptions.itemsperpage > 0))
    {
        pBottomBar = $ripl.create('div',{
            className:"ripl_displayoptions"
        });    
        pBottomBar.add(ripl.renderers.collectionRenderers.collection_helper_pageChanger(contentList));
    }
    pContainer.add([pContent, pBottomBar]);

    // Finally, update our rendering container with the enclosing container.
    $ripl.update(contentList.displayOptions.renderTarget,pContainer);
});
