var Grid = new Class({
  element: null,
  cells: null,
  effect: null,
  cellWidth: 0,
  cellHeight: 0,
  columns: 0,
  rows: 0,
  
  /**
   * Initialize the Grid by attaching it to the DOM.
   * 
   * @param element The id of the grid DOM element.
   */
  initialize: function (identifier){
    var grid = this;
    
    grid.element = $(identifier);
    
    jQuery(window).resize(function(event){
      grid.calculate();
    });
    
    grid.calculate();
  },
  
  calculate: function (){
    var grid = this;

    grid.cells = $ES('.cell', grid.element);
    grid.effect = new Fx.Elements(
      grid.cells, 
      {wait: false, duration: 200, fps: 200, transition: Fx.Transitions.Sine.easeOut});
    
    grid.width = grid.element.getSize().size.x;
    grid.height = grid.element.getSize().size.y;
    grid.cellWidth = grid.cells[0].getSize().size.x - 1; // minus left shadow border
    grid.cellHeight = grid.cells[0].getSize().size.y - 1; // minus bottom shadow border
    grid.columns = Math.floor((grid.width) / grid.cellWidth);
    grid.rows = Math.ceil(grid.cells.length / grid.columns);
    grid.cellMaxWidth = Math.round(grid.cellWidth * 1.75);
    grid.cellMaxHeight = Math.round(grid.cellHeight * 2.2);
    grid.cellMinWidth = Math.round(((grid.columns * grid.cellWidth) - grid.cellMaxWidth) / (grid.columns - 1));
    grid.cellMinHeight = Math.round(((grid.rows * grid.cellHeight) - grid.cellMaxHeight)/ (grid.rows - 1));
    
    grid.element.setStyle("height", grid.rows * (grid.cellHeight + 5));
    
    grid.cells.removeEvents('mouseenter');
    grid.cells.removeEvents('mouseleave');
    grid.element.removeEvents('mouseleave');
    
    // Attach a mouseenter event to all cells.
    grid.cells.each(function(target, index){
      target.setStyle("overflow", "hidden");
      target.addEvent("mouseenter", function(event){
        grid.open(target, index);
      });
      
      target.addEvent("mouseleave", function(event){
        grid.close(target, index);
      });
      
    });
    
    // Attach a mouseleave event to the grid to revert to the default state.
    grid.element.addEvent("mouseleave", function(event){
      var properties = {};
      grid.cells.each(function(cell, index) {
        var width = cell.getStyle("width").toInt();
        var height = cell.getStyle("height").toInt();
        properties[index] = {
            width: [width, grid.cellWidth],
            height: [height, grid.cellHeight]};
      });
      grid.effect.start(properties);
    });
    
  },
  
  /**
   * Open the given target.
   */
  open: function (target, index){
    var grid = this;
    var properties = {};
    var row = (index - (index % grid.columns)) / grid.columns;
    var column = index % grid.columns;
    
    grid.effect.stop();
    
    target.addClass("active");
    //if (index == 3 || index == 4)
//	    $E("h5", target).removeClass("banner");
    $E(".content", target).setStyle("display", "block");
    //$E(".precontent", target).setStyle("display", "none");
    
    grid.cells.each(function(cell, index) {
      var width = cell.getStyle("width").toInt();
      var height = cell.getStyle("height").toInt();
      
      // Adjust the width and the height of the target
      if (cell == target) {
        properties[index] = {
            width: [width, grid.cellMaxWidth],
            height: [height, grid.cellMaxHeight]};
        
      // Adjust the width and height of the targets row. 
      } else if (((index - (index % grid.columns)) / grid.columns) == row) {
        properties[index] = {
            width: [width, grid.cellMinWidth],
            height: [height, grid.cellMaxHeight]};
      
      // Adjust the width and height of all other cells. 
      } else if (index % grid.columns == column){
        properties[index] = {
            width: [width, grid.cellMaxWidth],
            height: [height, grid.cellMinHeight]};
        
      } else {
       properties[index] = {
            width: [width, grid.cellMinWidth],
            height: [height, grid.cellMinHeight]};
      }
        
    });
    
    grid.effect.start(properties);
    
  },
  
  /**
   * Close the given target.
   */
  close: function (target, index){
    target.removeClass("active");
    $E(".content", target).setStyle("display", "none");
    //if (index == 3 || index == 4)
	//    $E("h5", target).addClass("banner");
    //$E(".precontent", target).setStyle("display", "block");
  }
  
});

/**
 * Carrousel
 */
var Carrousel = new Class({
  element: null,
  effect: null,
  items: null,
  auto: true,
  selection: null,
  
  initialize: function(identifier){
    var carrousel = this;
    
    this.element = $('identifier');
    
    carrousel.items = $ES('.item', this.element);
    
    carrousel.effect = new Fx.Elements(
      carrousel.items, 
      {wait: false, duration: 800, fps: 200, transition: Fx.Transitions.Back.easeOut});
    
    carrousel.items.each(function(target, index){
      target.addEvent('mouseenter', function(event){
        carrousel.auto = false;
        carrousel.select(target);
      });
      target.addEvent('mouseleave', function(event){
        carrousel.auto = true;
        carrousel.select(target);
      });
    });
    
    
    carrousel.rotate.periodical(5000, this);
  },
  
  rotate: function(){
    var carrousel = this;
    var index;
    
    if (!carrousel.auto)
      return;
      
    index = carrousel.items.indexOf(carrousel.selection);
    index = index == carrousel.items.length -1 ? 0 : index + 1;

    carrousel.select(carrousel.items[index]); 
    
  },
  
  select: function(target){
    var carrousel = this; 
    var properties = {};
    
    carrousel.selection = target;
    
    if (target.getSize().size.x == 473)
      return;
    
    carrousel.items.each(function(item, index) {
      var width = item.getSize().size.x;
      var height = item.getSize().size.y;
        
      if (item == target) {
        properties[index] = {width: [width, 471]};
      } else if (width != 87) {
        properties[index] = {width: [width, 85]};
      }
    
    });
    carrousel.effect.start(properties);
  }
  
});