function initCarousel() {
  new UI.Carousel($$("#horizontal_carousel_container #horizontal_carousel").first(), {previousButton: "left_button", nextButton: "right_button"})     
}

// V2   
Event.observe(window, "load", CSS.preloadImages);

UI.WindowManager.setOptions({
  zIndex: 20000
});

Demo = {
  window: function() {
    // Hello word :)
    new UI.Window({theme:  "mac_os_x", 
                   shadow: true, 
                   width:  200, 
                   height: 150}).center().setContent("Hello World!").show();
  },
  carousel: function() { 
    var w = new UI.Window({theme:  "mac_os_x", 
                           shadow: true, 
                           width:  525, 
                           activeOnClick: false,   
                           height: 220,
                           minHeight: 220,
                           maxHeight:220,
                           minWidth: 525
                           }).center({top:10}).setAjaxContent("/components/carousel", {method: "GET", onComplete: Carousel.init.bind(Carousel)}).show();
   w.observe("size:changed", Carousel.resized.bind(Carousel));
  }
}


Carousel = {
  carousel: null,
  
  init: function() {
    this.carousel = new UI.Ajax.Carousel("horizontal_carousel", {url: "/carousel", elementSize: 150})
      .observe("request:started", function() {
          $('spinner').show().morph("opacity:0.8", {duration:0.5});
        })
      .observe("request:ended", function() {
          $('spinner').morph("opacity:0", {duration:0.5, afterFinish: function(obj) { obj.element.hide(); }});
        });
  },

  resized: function(event) {
    this.updateSize(event.memo.window);  
    if (this.carousel)
      this.carousel.updateSize();
  },

  updateSize: function(win) {
    var dim = win.getSize(); 
    dim.width -= 10
    $("horizontal_carousel").style.width = dim.width + "px";
    $$("#horizontal_carousel .container").first().style.width =  (dim.width - 64) + "px";
  }
}