// Projects

function layout_work() {
  relayout('.project');
  setup_boxes();

  // Toggle links
  $('#work-tags li').click(function() {
    if (animating) return;
    animating = true;
    var new_class = 'tag-' + $(this).data('tag');
    if (new_class == old_class) {
      if (old_class == 'project') return;
      new_class = 'project';
      $('#work-tags li').addClass('active');
    }
    else {
      $('#work-tags li').removeClass('active');
      $(this).addClass('active');
    }
    toggle(new_class);
  });
  
}

function toggle(new_class) {
  if (new_class == 'all') new_class = '.project';
  relayout('#all-projects .' + new_class);

  var new_height = $('#all-projects').data('new-height');
  var current_height = $('#all-projects').css('height');

  var run_length = 0;
  var found = false;
  
  $('.project').each(function() {
    var project = $(this);
    var new_position = project.data('new-position');
    var new_top = new_position.top;
    var new_left = new_position.left;

    // if visible and shouldnt be kept, hide
    if (project.hasClass(old_class) && !project.hasClass(new_class)) {
      found = true;
      if (project.hasClass('portrait')) {
        var w = project.css('width');
        project.animate({width:0}, 500, function() {
          project.css({display: 'none', width: w});
        });
      }
      else {
        var h = project.css('height');
        project.animate({height:0}, 500, function() {
          project.css({display: 'none', height: h});
        });
      }
    }
  });
  
  if (found) {
    run_length += 500;
    found = false;
  }
  
  $('.project').each(function() {
    var project = $(this);
    var new_position = project.data('new-position');
    var new_top = new_position.top;
    var new_left = new_position.left;

    // if visible and should be kept, move
    if (project.hasClass(new_class) && project.hasClass(old_class)) {
      found = true;
      setTimeout(function() {
        project.animate({left: new_left}, 500, function() {
          project.animate({top: new_top}, 500);
        });
        
      }, run_length);
    }
  });

  if (found) {
    run_length += 1000;
    found = false;
  }
  
  $('.project').each(function() {
    var project = $(this);
    var new_position = project.data('new-position');
    var new_top = new_position.top;
    var new_left = new_position.left;

    // if invisible and should be shown, move invisibly then reveal
    if (!project.hasClass(old_class) && project.hasClass(new_class)) {
      found = true;
      project.css({top: new_top, left: new_left});

      if (project.hasClass('portrait')) {
        var w = project.css('width');
        project.css({width: 0, display: 'block'});
        setTimeout(function() {
          project.animate({width: w}, 500);
        }, run_length);
      }
      else {
        var h = project.css('height');
        project.css({height: 0, display: 'block'});
        setTimeout(function() {
          project.animate({height: h}, 500);
        }, run_length);
      }
      
    }
      
  });
  
  if (found) {
    run_length += 500;
    found = false;
  }
  
  var t = (parseInt(new_height) < parseInt(current_height)) ? run_length : 0;
  setTimeout(function() {
    $('#all-projects').animate({height: new_height}, 500);
  }, t);

  setTimeout(function() { animating = false; }, run_length);  
  old_class = new_class;
}

function relayout(items) {
  var cols = [];
  var num_cols = 4;
  var col_width = 185;
  for (var i = 0; i < num_cols; i++) cols[i] = 0;

  var wrapper = $('#all-projects');
  var boxes = $(items);
  var gaps = [];

  boxes.each(function() {
    var box = $(this);
    var box_height = box.outerHeight(true);
    var box_width = box.outerWidth(true);
    var box_cols = Math.ceil(box_width / col_width);

    var min_top = 1e5;
    var min_col;
    var gap_found = false;

    // Can we fill an existing gap?
    for (var i = 0; i < gaps.length; i++) {
      var gap = gaps[i];
      if (gap.height >= box_height) {
        gap_found = true;
        
        // Position box
        var new_position = {top: px(gap.position), left: (gap.col * col_width)};
        box.data('new-position', new_position);
        
        // Remove gap
        var new_gap = {col: gap.col, height: gap.height - box_height, position: gap.position + box_height};
        gaps[i] = new_gap;
        break;
      }
    }
    
    // If we couldn't fill a gap, whack it in the next slot
    if (!gap_found) {
      for (var i = 0; i < num_cols + 1 - box_cols; i++) {
        var cols_slice = cols.slice(i, i + box_cols);
        var lowest = Math.max.apply(Math, cols_slice);

        if (lowest < min_top) {
          min_col = i;
          min_top = lowest;
        }
      }

      // Update column heights
      for (var i = min_col; i < min_col + box_cols; i++) {
        // Have we left behind a gap?
        var old_height = cols[i];
        var new_height = min_top + box_height;
        var gap_height = new_height - old_height - box_height;

        if (gap_height) {
          var new_gap = {col: i, height: gap_height, position: old_height}
          gaps.push(new_gap);
        }
        cols[i] = new_height;
      }

      // Position box
      var new_position = {top: px(min_top), left: (min_col * col_width)};
      box.data('new-position', new_position);
    }
    
  });

  wrapper.data('new-height', px(Math.max.apply(Math, cols)));

}

function setup_boxes() {
  var wrapper = $('#all-projects');
  var boxes = $('.project');
  
  boxes.each(function() {
    box = $(this);
    var new_position = box.data('new-position');
    box.css({position: 'absolute', top: new_position.top, left: new_position.left, display: 'block'});
  });

  wrapper.css({position: 'relative', height: wrapper.data('new-height')});
}

// Blog

function layout_blog() {
  var cols = [0, 0];
  var last_left, last_right;
  
  $('#blog-posts .post').each(function() {
    var box = $(this);
    var box_height = box.outerHeight(true);
    
    var _left, _top;
    
    if (cols[0] <= cols[1]) {
      _left = 0;
      _top = cols[0];
      cols[0] += box_height;
      last_left = box;
    }
    else {
      _left = 385;
      _top = cols[1];
      cols[1] += box_height;
      last_right = box;
    }
    
    box.css({position: 'absolute', top: px(_top), left: px(_left)});
    
  });
  
  last_left.addClass('post-last');
  last_right.addClass('post-last');
  
  $('#blog-posts').css({height: px(Math.max.apply(Math, cols) - 35)});

}

// Nav hovers
$(document).ready(function() {
  
  // nav hovers
  $('#navigation li').hover(
    function() {
      $(this).find('.hover').animate({width: px(130)}, 200);
    },
    function() {
      $(this).find('.hover').animate({width: 0}, 300);
    }
  );
})

// Helpers

function px(val) { return val + 'px' }