var Box = new Class({

  options: {
  
  },
  
  styles: {
    tableStyle: {
      borderCollapse: 'collapse',
      marginRight: 'auto',
      marginLeft: 'auto',
	  border: '1px solid red'
    },
    trStyle: {
    },
    tdStyle: {
      border: '2px solid #98677E',
      width: '36px',
      height: '38px',
	  padding: '1px 0px 0px 0px',
	  margin: '0px',
      textAlign: 'center',
      fontWeight: 'bold',
      fontSize: '12px',
      color: '#D5BFCA'
    },
    tinyImgStyle: {
      cursor: 'pointer'
    }
  },
  
  dimensions: {
    '8': [2,4],
    '18': [3,6],
    '32': [4,8]
  },
  
  initialize: function(size, chocolates)
  {
    this.size = size;
    this.chocolates = chocolates || [];
  },
  
  render: function(container)
  {
    if (container) this.container = container;
    
    var table = createElement('table');
    table.setStyles(this.styles.tableStyle);
    var numRows = this.getNumRows();
    var numColumns = this.getNumColumns();
    var chocIndex = 0;
    
    for (var i = 0; i < numRows; i++)
    {
      var tr = $(table.insertRow(-1));
      tr.setStyles(this.styles.trStyle);
      for (var j = 0; j < numColumns; j++)
      {
        var td = $(tr.insertCell(-1));
        td.setStyles(this.styles.tdStyle);
        
        if (this.chocolates[chocIndex])
        {
          var productImage = $('product_' + this.chocolates[chocIndex]);
          var desc = productImage.getAttribute('title');
          var tinySrc = productImage.src.replace('/images/products/', '/images/products/tiny/');
          
          var tinyImg = createElement('img');
          tinyImg.setStyles(this.styles.tinyImgStyle);
          tinyImg.setAttribute('alt', desc);
          tinyImg.setAttribute('title', desc);
          tinyImg.src = tinySrc;
          
          td.appendChild(tinyImg);
          
          tinyImg.chocIndex = chocIndex;
          tinyImg.onmousedown = function(e) {
            this.removeChocolate(e.target.chocIndex);
            this.render();
          }.bind(this);
        }
        else
        {
          td.innerHTML = '&nbsp;?&nbsp;';
        }
        
        chocIndex++;
      }
    }
    
    this.container.innerHTML = '';
    this.container.appendChild(table);
    
    var removeLink = createElement('a');
    removeLink.addClass('bottomLink');
    removeLink.href = 'javascript:;';
    removeLink.onmousedown = this.removeBoxClick.bind(this);
    removeLink.innerHTML = 'remove box';
    
    var randomLink = createElement('a');
    randomLink.addClass('bottomLink');
    randomLink.href = 'javascript:;';
    randomLink.onmousedown = this.randomLinkClick.bind(this);
    randomLink.innerHTML = 'add random chocolate';
    
    var spacingDiv = createElement('div');
    spacingDiv.setStyles({height: '8px'});
    
    this.container.appendChild(randomLink);
    this.container.appendChild(removeLink);
    this.container.appendChild(spacingDiv);
  },
  
  getDescription: function()
  {
    return 'Box of ' + this.size + ' Chocolates';
  },
  
  getCartIcon: function()
  {
    return 'images/products/box_tiny.jpg';
  },
  
  getPrice: function()
  {
    switch (this.size)
    {
      case 8: return 15;
      case 18: return 30;
      case 32: return 50;
    }
  },
  
  getProductCode: function()
  {
    // return a compressed representation of each chocolate code in this box.
    var code = '';
    this.chocolates.each(function(c){
      code += c + '-';
    }.bind(this));
    code = code.substring(0, code.length - 1);
    
    return code;
  },
  
  getNumRows: function() { return this.dimensions[this.size][0]; },
  getNumColumns: function() { return this.dimensions[this.size][1]; },
  
  randomLinkClick: function()
  {
    cart.chooseChocolate(this.getRandomChocolate());
  },
  
  getRandomChocolate: function()
  {
    var productImages = $$('.chocolate');
    var index = parseInt(Math.random() * productImages.length);
    return productImages[index].id.replace('product_', '');
  },
  
  isFull: function()
  {
    for (var i=0; i<this.size; i++)
    {
      if (!this.chocolates[i]) return false;
    }
    return true;
  },
  
  fillWithRandom: function()
  {
    for (var i=0; i<this.size; i++)
    {
      if (!this.chocolates[i]) this.chocolates[i] = this.getRandomChocolate();
    }
  },
  
  removeBoxClick: function()
  {
    cart.removeBox(this);
  },
  
  addChocolate: function(code)
  {
    for (var i=0; i<this.size; i++)
    {
      if (!this.chocolates[i])
      {
        this.chocolates[i] = code;
        return;
      }
    }
  
    // if we're here, we need to grow the box, or prompt to select a new box!
    if (this.size < 32 && confirm('Would you like to increase the size of this box?'))
    {
      switch(this.size)
      {
        case 8: this.size = 18; break;
        case 18: this.size = 32; break;
      }
      this.chocolates.push(code);
      cart.render();
    }
  },
  
  removeChocolate: function(index)
  {
    //this.chocolates.splice(index, 1);
    this.chocolates[index] = false;
  },
  
  persistentData: function()
  {
    // return data that will be stored in the cookie
    return {size: this.size, chocolates: this.chocolates};
  }
  
});