/**
 * The layoutStore defined a couple of layout functions. Each functions changes the
 * style information (especially the position) of the given element, based on an internally
 * increased index. This index will be resetted on every page switching.
 */
var layoutStore = {

  index: 0,

  floatStyles: {
    'position': 'relative',
    'display':  'inline',
    'float':    'left'
  },

  stairColumns: [ ],

  calculateNumberOfStairColumns: function(width) {
    var stairColumnCount = Math.max(3, Math.floor(parseInt(width) / 235));
    this.stairColumns = [ ];
    for (var index = 0; index < stairColumnCount; index++) {
      this.stairColumns.push(0);
    }
  },

  layoutWidth: function () {
    return this.stairColumns.length * 235;
  },

  resetPositions: function(count) {
    this.positions = [ ];
    for (var index = 2; index < (count + 2); index++) {
      this.positions.push(index);
    }
    this.shufflePositions();
    this.positions = [ 0, 1 ].concat(this.positions);
  },

  shufflePositions: function() {
    for (var j, x, i = this.positions.length;
         i;
         j = parseInt(Math.random() * i), x = this.positions[--i], this.positions[i] = this.positions[j], this.positions[j] = x) { }
  },

  layout: function(name, boxes) {
    this[name].bind(this)(boxes);
  },

  expandParentElement: function(boxes) {
    boxes.each(function(box) {
      var element = box.toElement();

      var parentWidth   = element.getParent().getStyle('width') == 'auto' ? 0 : element.getParent().getStyle('width').toInt();
      var parentHeight  = element.getParent().getStyle('height') == 'auto' ? 0 : element.getParent().getStyle('height').toInt();

      var elementCoordinates = element.getCoordinates(element.getParent());

      element.getParent().setStyles({
        'width':  Math.max(parentWidth, elementCoordinates.left + elementCoordinates.width),
        'height': Math.max(parentHeight, elementCoordinates.top + elementCoordinates.height)
      });
    }, this);
  },

  randomSwappedStairs: function(boxes) {
    var shuffledBoxes = [ ];
    boxes.each(function(box, index) {
      shuffledBoxes.push(boxes[ this.positions[index] ]);
    }, this);
    this.swappedStairs(shuffledBoxes);
  },

  swappedStairs: function(boxes) {
    // workaround to swap position 1 and the last position in the first row
    var box = boxes[1];
    boxes[1] = boxes[this.stairColumns.length - 1];
    boxes[this.stairColumns.length - 1] = box;

    this.stairs(boxes);
  },

  stairs: function(boxes) {
    boxes.each(function(box, index) {
      var element = box.toElement();
      var column = index % this.stairColumns.length;

      var top   = this.stairColumns[column];
      var left  = column * 235;

      element.set('styles', { 'top': top, 'left': left, 'width': 200 });

      this.stairColumns[column] += element.getCoordinates().height + 15;
    }, this);
    this.expandParentElement(boxes);
  },

  rows12: function(boxes) {
    boxes.each(function(box, index) {
      var column = index % 2;
      var row = Math.floor(index / 2);

      var width       = column  == 0 ? 200 : 435;
      var marginTop   = row     == 0 ? 0 : 15;
      var marginLeft  = column  == 0 ? 0 : 15;

      box.toElement().set('styles', $merge(this.floatStyles, { 'width': width, 'margin-top': marginTop, 'margin-left': marginLeft }));
    }, this);
  },

  rows21: function(boxes) {
    boxes.each(function(box, index) {
      var column = index % 2;
      var row = Math.floor(index / 2);

      var width       = column  == 0 ? 435 : 200;
      var marginTop   = row     == 0 ? 0 : 15;
      var marginLeft  = column  == 0 ? 0 : 15;

      box.toElement().set('styles', $merge(this.floatStyles, { 'width': width, 'margin-top': marginTop, 'margin-left': marginLeft }));
    }, this);
  }

};