window.addEvent('domready', function() {
   var is = new Fx.Marquee($('image-switcher'), {
       duration: 1500
   });

   var imageArray = ["rgraph2.png", "spacetree3.png", "rgraph1.png", "spacetree.png", "treemap.png", "spacetree1.png", "hypertree.png"]
    .map(function(elem) { return "/static/img/marquee/" + elem; });
   var titles = ["Customize Nodes and Edges", "Top/Bottom/Left/Right Layouts", "Compose and Combine Graphs", "On-Demand Information", "Cushioned Treemaps", "Pie and Bar Charts", "Hyperbolic Layouts"];
   
   var images = new Asset.images(imageArray, {
      onComplete: function() {
        var i = 0, len = imageArray.length;
        var announce = function(i) {
            var container = new Element('div', {
                'styles': {
                    'position': 'relative'
                }
            });
            var text = new Element('div', {
                'html': titles[i],
                'class': 'tag'
            });
            images[i++].inject(container);
            text.inject(container);
            setTimeout(function() {
                is.announce({
                  message: container,
                  delay: 3000,
                  revert: false  
                }).chain(function() {
                   i = i % len;
                   announce(i); 
                });
            }, 3000);
        };
        announce(i);
      } 
   });
});