ShowRoomItem = Class.create({
  initialize: function(element) {
    this.element = element;
    this.link = this.element.down("a");
    this.tip  = this.element.down(".tip");
  },
  
  setupHandlers: function() {
    this.element.observe("mouseover", this.mouseOverHandler.bind(this));
    this.element.observe("mouseout",  this.mouseOutHandler.bind(this));
    this.element.observe("mousemove", this.mouseMoveHandler.bind(this));
  },
  
  mouseOverHandler: function() {
    this.over = true;
    this.element.addClassName("over");
  },
  
  mouseOutHandler: function() {
    this.over = false;
    this.element.removeClassName("over");
  },
  
  mouseMoveHandler: function(event) {
    if (!this.over) return;
    var top = event.pointerY() - this.elementOffset.top + 10;
    var left = event.pointerX() - this.element.cumulativeOffset().left + 10;
    this.tip.setStyle({top: top + "px", left: left + "px"});
  },
  
  appear: function(callback) {
    this.element.appear({afterFinish: function() {
      this.elementOffset = this.element.cumulativeOffset();
      this.setupHandlers();
      callback();
    }.bind(this), duration: 0.15});
  }
});

ShowRoom = Class.create({
  initialize: function() {
    this.index = 0;    
    this.setup();
    this.start();
  },
  
  setup: function() {
    $("category-menu").observe("change", this.menuChangeHandler.bind(this));
    this.items = [];
    $("items").select(".item").each(function(element) {
      this.items.push(new ShowRoomItem(element));
    }.bind(this));
    $("q").observe("focus", this.searchFocusHandler.bind(this));
  },
  
  searchFocusHandler: function() {
    if ($F("q") == "Cerca..." || $F("q") == "Search...")
      $("q").value = "";
  },
  
  menuChangeHandler: function() {
    window.location = "/vetrina2007.php?category=" + $F("category-menu");
  },
  
  start: function() {
    this.showNext();
  },
  
  showNext: function() {
    if (this.index < this.items.length)
      this.items[this.index++].appear(this.showNext.bind(this));
    else
     $("items").removeClassName("loading");
  }
});

document.observe("dom:loaded", function() {
  new ShowRoom();
});