/**
 * Tilt (Javascript Tag filter)
 * Requires jQuery, min version: v1.3.2
 *
 * Created by Jeff Verkoeyen (jverkoey@gmail.com)
 * http://TheJeffFiles.com/
 */

/**
 * = How to use this =
 *
 * Example design:
 *
 * <div id="tags">
 *
 *   <h1>Filter</h1>
 *     <div><label><input type="checkbox" id="select_all" />Check 'em all</label></div>
 *
 *   <h2>Pre-filtered</h2>
 *     <div><a href="#" class="_cpp _gl">Game Dev</a></div>
 *
 *   <div class="checkboxes">
 *     <h2>Languages</h2>
 *       <div><label><input type="checkbox" class="_cpp" checked="checked" />C++</label></div>
 *       <div><label><input type="checkbox" class="_java" />Java</label></div>
 *   </div>
 *
 * </div>
 *
 */

$(function() {

  /**
   * If all tags have been selected, check the '#select_all' check box.
   */
  function check_all_clicked() {
    if( $("#tags .checkboxes input[checked]").length == $("#tags .checkboxes input").length ) {
      $('#select_all').attr('checked', true);
    } else {
      $('#select_all').attr('checked', false);
    }
  }

  /**
   * If the given check box (element) is checked, reveal any element that
   * is associated with this tag.
   *
   * @param element  the check box
   * @param animate  whether to animate or not
   */
  function check_tag(element, animate) {
    var className = $(element).attr('class');
    var tags = $('.tag'+className);
    if( $(element).attr('checked') ) {
      tags.addClass('tag'+className+'_enabled');
    } else {  
      tags.removeClass('tag'+className+'_enabled');
    }

    // Check if any tags are enabled for each tag.
    tags.each(function() {
      var classNames = $(this).attr('class');
      if( classNames.search('_enabled') >= 0 ) {
        if( animate && $(this).css('visibility') != 'visible' ) {
          $(this)
            .slideDown('slow', function() {
              $(this)
                .css('visibility', 'visible')
                .css('display', 'none')
                .fadeIn('slow');
            });
       } else {
         $(this)
           .show()
           .css('visibility', 'visible');
        }
      } else {
        if( animate && $(this).css('visibility') != 'hidden' ) {
          $(this)
            .fadeOut('slow', function() {
              $(this)
                .css('visibility', 'hidden')
                .css('display', 'block')
                .slideUp('slow');
            });
        } else {
          $(this)
            .hide()
            .css('visibility', 'hidden');
        }
      }
    });
  }

  // Check all of the checkboxes on load and then set up the click handlers.
  $("#tags .checkboxes input")
    .each(function() { check_tag(this, false); check_all_clicked(); })
    .click(function() { check_tag(this, true); check_all_clicked(); });

  // Set up the "pre-filtered" click handlers.
  $("#tags a").click(function() {
    var tags = $(this).attr('class').split(' ');
    $("#tags .checkboxes input").attr('checked', false);
    for( var i = 0; i < tags.length; ++i ) {
      var tag = tags[i];
      $('#tags .checkboxes .'+tag).attr('checked', true);
    }
    $("#tags .checkboxes input").each(function() { check_tag(this, true); });
    return false;
  });

  // "Select all" click handler.
  $('#select_all').click(function() {  
    $("#tags .checkboxes input")
      .attr('checked', $(this).attr('checked'))
      .each(function() { check_tag(this, true); });
  });

  // Fade our content in once it's loaded.
  $('#content').fadeIn('slow');
});