$(document).ready(function(){
      thumbnailhover();
      navinteraction();
      thumbnailtoggle();
      about();
   });
   
   
function thumbnailhover() {

   $('.viewport').css({'height': $(document).height()});

   $(window).scroll(function () { 
//   $('h2.selectedworks').css({'top': $(window).offset().top});
   });


$('.thumbnails').children('ul').children('li').hover(function(){
   whichdidihover = $('.thumbnails').children('ul').children('li').index($(this));
   $(this).children('a').animate({'left': '-5px'}, 200);
   $('ul.projectlist').children('li').eq(whichdidihover).stop().animate({'top': $(this).position().top+10}, {duration: 500, easing: 'expoinout'})
   $('h2.selectedworks').stop().animate({'top': $(document).height()}, {duration: 500, easing: 'expoinout'})
}, function() {
   $(this).children('a').animate({'left': '0px'}, 200);
   $('ul.projectlist').children('li').eq(whichdidihover).stop().animate({'top': '-300px'}, {duration: 500, easing: 'expoinout'})
   $('h2.selectedworks').stop().animate({'top': '200px'}, {duration: 500, easing: 'expoinout'})
});

}; //thumbnailhover

function navinteraction() {
$('ul.navigation li a:not(".nav_about")').toggle(function(){
   $(this).parent('li').addClass('off');
   $(this).animate({'opacity': '.15'}, 300);
   clickedtext = $(this).text();
   $('div.thumbnails').children('ul').children('li').each(function(){
      if ($(this).hasClass(clickedtext)) {
         $(this).slideUp(500);
      } //if
   }); //each thumbnail
   return false;
}, function() {
   $(this).parent('li').removeClass('off');
   $(this).animate({'opacity': '1'}, 300);
   clickedtext = $(this).text();
   $('div.thumbnails').children('ul').children('li').each(function(){
      if ($(this).hasClass(clickedtext)) {
         $(this).slideDown(500);
      } //if
   }); //each thumbnail
   return false;
}); //toggle nav
}; //navinteraction

function thumbnailtoggle() {

   $('.thumbnails').children('ul').children('li').children('a').click(function() {
      $('ul.projectnav').stop().animate({'opacity': '0'}, 500);
      $('div.projectname').stop().animate({'opacity': '0'}, 500);
      $('div.showcase').stop().animate({'opacity': '0'}, 500);
      setTimeout( function () {
         $('ul.projectnav').remove();
         $('div.projectname').remove();
         $('div.showcase').remove();
      }, 500 );

      $('.thumbnails').children('ul').children('li.active').removeClass('active');
      $('.thumbnails').children('ul').children('li').unbind();
      whichdidiclick = $('.thumbnails').children('ul').children('li').index($(this).parent('li'));
      $('.viewport').append('<img src="images/ajax-loader.gif" alt="Loading" style="position: absolute; z-index: 1; top: 350px; left: 450px;" />');
      setTimeout( function () {
         dynamicload(whichdidiclick);
      }, 2000 );
      $('ul.projectlist').children('li').eq(whichdidiclick).animate({'opacity': '0'}, {duration: 2000, easing: 'expoinout'})
      $(this).parent('li').addClass('active').siblings('li').children('a').animate({'left': '-5px'}, 300);
      $('.thumbnails').children('ul').children('li:not(".active")').hover(function(){
         $(this).children('a').animate({'left': '0px'}, 200);
            $('span.projecthovername').remove();
            $('div.thumbnails').append('<span class="projecthovername">'+$(this).children('a').text()+'</span>');
            $('.projecthovername').css({'top': $(this).position().top});
      }, function() {
            $('span.projecthovername').remove();
         $(this).children('a').animate({'left': '-5px'}, 200);
      });
      $('.thumbnails').children('ul').children('li.active').children('a').animate({'left': '0px'},200);
   }); //click thumbnail

}; //thumbnailtoggle

function dynamicload(whichdidiclick) {

$('ul.projectlist').remove();
$('h2.selectedworks').remove();

$('.viewport').append('<div class="projectname"></div>');
$('.viewport').append('<ul class="projectnav"></ul>');
$('div.viewport').append('<div class="showcase"></div>');


   	$.ajax({
   		type: "GET",
   		url: "javascript/portfolio.shtml",
   		dataType: "html",
   		success: function(pulleddata) {
   		
   		$(pulleddata).children('ul').eq(whichdidiclick).appendTo('.showcase');
   		$('.showcase').children('ul').children('p').eq(0).appendTo('.projectname');
   		$('.showcase').children('ul').children('li').each(function(i){
      		$('ul.projectnav').append('<li>'+(i+1)+'</li>');
      		$(this).children('span').prepend('<img src="'+$(this).children('span').text()+'.jpg" alt="Riot" />');
      		$(this).children('span').children('img').insertAfter($(this).children('span'));
      		$(this).children('span').remove();
   		}); //each image
   		
   		$('ul.projectnav').animate({'opacity': '1'}, 5000);
   		$('div.projectname').animate({'opacity': '1'}, 5000);
   		$('div.showcase').animate({'opacity': '1'}, 5000);
   		
   		projectnavinteraction();

   		} //success
   	}); //ajax

}; //dynamicload

function projectnavinteraction(){
$('ul.projectnav').children('li').eq(0).addClass('active');
$('ul.projectnav').children('li').click(function(){
$(this).addClass('active').siblings('li').removeClass('active');
whichdidiclick = $('ul.projectnav').children('li').index(this);
$('.showcase ul').animate({'left': -$('.showcase ul').children('li').eq(whichdidiclick).position().left}, {duration: 1000, easing: "expoinout"});
}); //click projectnav child li
}; //projectnavinteraction



function about() {
   $('.nav_about').toggle(function(){
      $('#worldcontainer').animate({'left': '400px'}, {duration: 700, easing: 'expoinout'})
   }, function() {
      $('#worldcontainer').animate({'left': '0px'}, {duration: 700, easing: 'expoinout'})
   }); //toggle

   $('a.closethis').click(function() {
      $('.nav_about').click();
      return false;
   });
}; //about


function addLoadEvent(func) {
   var oldonload = window.onload;
   if (typeof func != 'function') {
      //alert('Invalid: ' + func + ' [' + typeof func + ']');
   } else if (typeof window.onload != 'function') {
      window.onload = func;
   } else {
      window.onload = function() {
         if (typeof oldonload == 'function') {
            oldonload();
         }
         func();
      }
   }
} // addLoadEvent

addLoadEvent(function() {
   if (document.getElementsByTagName) {
      var anchors = document.getElementsByTagName('a');
      for (var i = 0; i < anchors.length; i++) {
         var anchor = anchors[i];
         if (anchor.getAttribute('href') &&
             anchor.getAttribute('rel') == 'external') {
            anchor.target = '_blank';
         }
      }
   }
});