I have an image scroller with several elements connected to it in an array. When the image goes to the next slide, the elements (title, category, desc., etc.) adjust to coincide with the new image. My issue is that I am unable to create an element (category) that pulls each "category:'current slide category'," entered in the array as a list and highlights the current slide's corresponding category.

E.g.,

Code:
var slides = Array(
          { <!--slide 1 -->
                url: 'images/image1.jpg',
                category:'category 1',
                title: 'This is the title of the image/article',
                imgLink: '#',
                caption: 'This briefly explains the image/article',
          },
          { <!--slide 2 -->
                url: 'images/image2.jpg',
                category:'category 2',
                title: 'this is the title of the image/article',
                imgLink: '#',
                caption: 'this briefly explains the image/article',
          },
    )
I want it to display: category 1 / category 2 / category 3 the corresponding slide 2 elements are active/visible in the slideshow, so whatever is entered as the category for each slide should be listed visibly (instead of the non-current items fading) and then highlighting the current one.

Slideshow JS (category element on lines 309-313): https://docs.google.com/leaf?id=0Byb...thkey=CNSOuaoO

Source: https://docs.google.com/leaf?id=0Byb...3NTli&hl=en_US