/*
 *  Page Specific Javascript
 */

/*______________________________________________________________________________
 *    page:  instructors.html
 */

/* the page id num for the menu */
page_id = 5;

/* filterable & sortable image list */
$(document).ready(function() {

/* set container height */
  var hgt = $('ul.instructors').height();
  $('#instructors_container').height(hgt+20);

/* filter functions */
  $('ul.filter li a').click(function() {

    $('ul.filter li').removeClass('selected');
    $(this).parent('li').addClass('selected');

    thisItem   = $(this).attr('rel');

    if(thisItem != "all") {
      $('ul.instructors li').each(function() {
        if($(this).hasClass(thisItem)) {
          $(this).stop()
          .animate({'width'       : '110px',
                    'opacity'     : 1,
                    'marginRight' : '.5em',
                    'marginLeft'  : '.5em'
                  },200,function(){
                      $(this).show('slow')});
        } else {
          $(this).stop()
          .animate({'width'       : 0,
                    'opacity'     : 0,
                    'marginRight' : 0,
                    'marginLeft'  : 0
                  },200,function(){
                      $(this).hide('slow')});
        }
      });
    } else {
      $('ul.instructors li').stop()
      .animate({'width'       : '110px',
                'opacity'     : 1,
                'marginRight' : '.5em',
                'marginLeft'  : '.5em'
              },200,function(){
                    $(this).show('slow')});
    }
  });

/* click functions */
  $('ul.instructors li a.instructor').boxy({
    modal     : true,
    closeText : '<img src="images/close.png" alt="[x]" />'
  });

/* hover functions */
  $('ul.instructors li img').stop().animate({'opacity' : 0.5}).hover(function() {
    $(this).css({'z-index' : '100'});
    $(this).stop().animate({'opacity' : 1,
                              marginTop: '-110px',
                              marginLeft: '-110px',
                              top: '50%',
                              left: '50%',
                              width: '174px',
                              height: '174px',
                              padding: '20px'
                           },200).addClass('hover');
    
  }, function() {
    $(this).css({'z-index' : '10'});
    $(this).stop().animate({'opacity' : 0.5,
                              marginTop: '0',
                              marginLeft: '0',
                              top: '0',
                              left: '0',
                              width: '100px',
                              height: '100px',
                              padding: '0px'
                           },200).removeClass('hover');
    
  });

});