// The highest z-index
topZ = 100000;

// Variable that holds the original position of each column
colPositions = {};

// Set up the initial functionality of the selector
function setupSelector(selector) {
  if($('#selector').length) {

    // Animate
    buildInSelector();
    
    // Set up the hover behavior for the cells
    $('.options a').hover(
      function() {
        $(this).parent().addClass('highlight');
        // .parent().parent().parent().parent().parent().find(".col-header td").addClass('highlight');
      },
      function() {
        $(this).parent().removeClass('highlight');
        // .parent().parent().parent().parent().parent().find(".col-header td").removeClass('highlight');
      }
    );

    // Set up the click behavior for the cells
    $('.options a').click(
      function() {
        $('#back-to-selector').hide();
        $('#selector td').removeClass('active');
        $(this).parent().addClass('active');
        //.parent().parent().parent().parent().parent().find(".col-header td").addClass('active');
        collapseSelector($(this).parent().parent().parent().parent().parent().parent());
        $.get($(this).attr('href'), {}, setupSolution);
        return false;
      }
    );

    // Hide the close button
    $('#back-to-selector').hide();

    // Record the position of each column
    $('#selector .column').each(
      function(i) {
        colPositions[$(this).attr('id')] = $(this).css('left');
      }
    );
    
  }
}

// Animate the selector intro
function buildInSelector() {
  if($('#selector .col-header:hidden').length) {
    $('#selector .col-header:hidden:first').fadeIn("medium", buildInSelector);
  } else if($('#selector div.options:hidden').length) {
    $('#selector div.options:hidden:first').slideDown("slow", buildInSelector);
  }
}

// Move all columns to left:0
function collapseSelector(topCol) {
  topZ = topZ + 1;
  topCol.css('z-index', topZ);
  $('#selector .column').each(
    function(i) {
      $(this).animate({left: "0"}, 300);
    }
  );
}

// Move all columns back to their original positions based on colPositions
function expandSelector() {
  $('#selector td').removeClass('active');
  $('#solution').hide();
  $('#back-to-selector').hide();
  $('#selector .column').each(
    function(i) {
      $(this).animate({left: colPositions[$(this).attr('id')]}, 300);
    }
  );
}

// Load the solution content into the #solutions-content div and fade in the close button
function setupSolution(solution) {
  $('#solutions-content').html(solution);
  $('#solution').add($('#back-to-selector')).fadeIn("slow");
}

// Set up the initial functionality of the whole thing
function setupSolutionsGrid() {

  $('#js-warning').remove();

  $('#back-to-selector a').click(
    function() {
      expandSelector();
      return false;
    }
  );

  $('#loader').ajaxStart(
    function() {
      $(this).show();
    }
  );

  $('#loader').ajaxComplete(
    function() {
      $(this).hide();
    }
  );    

  $('#solutions-grid').ajaxStart(
    function() {
      $(this).addClass('loading');
    }
  );

  $('#solutions-grid').ajaxComplete(
    function() {
      $(this).removeClass('loading');
    }
  );
  
  setupSelector();

}

// Run the initial setup when the page loads
jQuery(setupSolutionsGrid);