// Google Fonts
   WebFontConfig = {
      google: { families: [ 'Lato:300:latin' ] }
   };
   (function() {
      var wf = document.createElement('script');
      wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
      wf.type = 'text/javascript';
      wf.async = 'true';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(wf, s);
   })();

// Non jQuery "Global" Variables
   nav_animation_speed = 500;
   image_fadein_speed = 300;
   image_hover_speed = 150;

// Various Functions
   function log( data ) {
      if( window.console && window.console.log ) {
         console.log( data );
      }
   }
   
   function showAndCenterPage() {
   
      $content_wrapper = $('#wrapper');
      
   /* UNCOMMENT TO CENTER PAGE AGAIN...
      window_height = $(window).height();
      content_height = $content_wrapper.innerHeight();
      yMargin = Math.floor( (window_height - content_height) / 2 );
      
      if( window_height > content_height && yMargin > 20 ) {
         $content_wrapper.css({
            marginTop: Math.floor( (window_height - content_height) / 2 ) +'px'
         });
      } else {
   */
         $content_wrapper.css({
            marginTop: '60px',
            paddingBottom: '60px'
         });
   /*
      }
   */
   
      $content_wrapper.show();
      
   }
   
   function prettyThumbnailHover() {
   
      $('#thumbnail-grid li a').hover(function() {
         $(this).animate({
            opacity:0.8
         }, image_hover_speed );
      }, function() {
         $(this).animate({
            opacity:0
         }, image_hover_speed );
      });
   
   }
   
   function getImages(this_section) {
   
      $thumbnail_grid = $('#thumbnail-grid');
   
      if( $thumbnail_grid.find('li').length > 0 ) {
         
         $thumbnail_grid.removeClass();
         $thumbnail_grid.addClass('sub-section').addClass(this_section); // name the active sub-section grid
         
         $('#navigation nav li .sub-section a.active').removeClass('active');
         $('#navigation nav li .sub-section').find('a[rel='+this_section+']').addClass('active'); // activate the nav
         
         $thumbnail_grid.children().remove(); // remove images
      
         getImages(this_section); // OH NOES! RECURSION!
      
      } else {
   
         $.ajax({
            type: 'GET',
            url: 'inc/php/list-images.php',
            dataType: 'text',
            data: { 
               section: this_section
            },
            success: function(result) {
               
               images = result.split('|'); // splits by pipe
               
            // Creates the LIs and As in order   
               for( i=0; i<images.length; i++ ) {
                  temp = images[i].split('::'); // then splits the split by comma
                  thumb = temp[0];
                  video = false;
                  if( temp[1].indexOf('vimeo.com') >= 0 ) {
                     video = true;
                     content_url_split = temp[1].split("/");
                     video_id = content_url_split[content_url_split.length - 1];
                     content_url = "http://player.vimeo.com/video/"+ video_id +"?title=0&amp;byline=0&amp;portrait=0";
                  } else {
                     content_url = temp[1];
                  }
                  shortname = temp[2];
                  title = temp[3];
                  if( video ) {
                     $thumbnail_grid.append('<li class="'+ shortname +'"><a href="'+ content_url +'" class="iframe">'+ title +'</a></li>');
                  } else {
                     $thumbnail_grid.append('<li class="'+ shortname +'"><a href="'+ content_url +'" rel="'+ this_section +'">'+ title +'</a></li>');
                  }
               }
               
               showAndCenterPage(); // MUST be done AFTER LIs are created (above)
               
               $thumbnail_grid.find('li a').click(function(e) { // MUST be done AFTER LIs and As are created
                  e.preventDefault();
                  if( $thumbnail_grid.hasClass('main-section') ) {
                     $('#navigation nav li').find('a[rel='+ $(this).attr('rel') +']').parent().parent().siblings('a.main').trigger('click');
                     getImages( $(this).parent().attr('class') );
                  }
               });
               
            // Creates the IMG inside the LIs in order
               for( i=0; i<images.length; i++ ) {
                  temp = images[i].split('::'); // then splits the split by comma
                  thumb = temp[0];
                  content_url = temp[1];
                  shortname = temp[2];
                  title = temp[3];
               // create the images as jQuery objects
                  $('<img />').attr({
                     alt: title,
                     src: thumb,
                     rel: shortname
                  }).load(function() {
                     class_name = 'li.'+$(this).attr('rel');
                     $image_container = $thumbnail_grid.find(class_name);
                     $image_container.append( $(this) );
                     $image_container.find('img').delay(Math.floor(Math.random()*(image_fadein_speed*2))).animate({
                        opacity: 'toggle'
                     }, image_fadein_speed);
                  });
               }
               
               prettyThumbnailHover(); // MUST be done AFTER the IMGs are created (above)
               
               $('#thumbnail-grid.sub-section').find('a').fancybox({
                  overlayColor: "#fff",
                  overlayOpacity: 1,
                  transitionIn: 'fade',
                  transitionOut: 'fade',
                  showCloseButton: false,
                  hideOnContentClick: true
               });
               
            }
         });
         
         return false; // I mean... this is recursion...
         
      }
         
   }

// Onload
   $(function() {
   
   // jQuery Variables 
      $navigation = $('#navigation nav');
      
   // Fake Padding on Each .sub-section's first and last <li>s
      $navigation.find('.sub-section').each(function() {
         $(this).find('li:first').css('marginTop', '10px');
         $(this).find('li:last').css('marginBottom', '20px');
      });
   
   // Main Nav Fancy-ness
      $navigation.find('a.main').click(function(e) {
         e.preventDefault();
         $current_parent = $(this).parent('li');
         if( !$current_parent.hasClass('active') ) {
            $active_parent = $navigation.find('li.active');
            if( $active_parent.length > 0 ) {
               $active_parent.find('.sub-section').animate({
                  height: 'toggle',
                  opacity: 'toggle'
               }, nav_animation_speed, function() {
                  $active_parent.removeClass('active');
                  $current_parent.addClass('active');
                  $current_parent.find('.sub-section').hide().animate({
                     height: 'toggle',
                     opacity: 'toggle'
                  });
               });
            } else {
               $current_parent.addClass('active');
               $current_parent.find('.sub-section').hide().animate({
                  height: 'toggle',
                  opacity: 'toggle'
               });
            }
         }
      });
      
   // Use AJAX to pull the file list, then preload the images w/ fade
   //   There is also a line in the header that triggers this function.
      $navigation.find('.sub-section').not('.no-arrow').find('a').click(function(e) {
         e.preventDefault();
         getImages( $(this).attr('rel') );
      });
   
   // If Window Resizes, rerun showAndCenterPage()
      $(window).resize(function() {
         showAndCenterPage();
      });
   
   });