$(document).ready(function(){
      thumbnailhover();
      thumbnailhover2();
      thumbnailtoggle();
      thumbnailtoggle2();
      about();
      contact();
      login();
   });
   
   
function thumbnailhover() {

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

   $(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({'right': '-8px'}, 200);
   $('ul.projectlist').children('li').eq(whichdidihover).stop().animate({'top': $(this).position().top+60}, {duration: 500, easing: 'expoinout'})
   $('h2.selectedworks').stop().animate({'top': $(document).height()}, {duration: 500, easing: 'expoinout'})
}, function() {
   $(this).children('a').animate({'right': '0px'}, 200);
   $('ul.projectlist').children('li').eq(whichdidihover).stop().animate({'top': '-260px'}, {duration: 500, easing: 'expoinout'})
   $('h2.selectedworks').stop().animate({'top': '300px'}, {duration: 500, easing: 'expoinout'})
});

}; //thumbnailhover

function thumbnailhover2() {

   $('.viewport').css({'height': $(document).height()});
   $('.gallery').css({'width': $(window).width()-360});
		
   $(window).scroll(function () { 
   $('h2.selectedworks').css({'top': $(window).offset().top});
   });


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

}; //thumbnailhover2

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="img/ajax-loaderx.gif" alt="" style="position: absolute; z-index: 100; top: -350px; left: 450px;" />');
      setTimeout( function () {
         dynamicload(whichdidiclick);
      }, 1000 );
      $('ul.projectlist').children('li').eq(whichdidiclick).animate({'opacity': '0'}, {duration: 1000, easing: 'expoinout'})
      $(this).parent('li').addClass('active').siblings('li').children('a').animate({'left': '0px'}, 300);
      $(this).parent('li').addClass('active').siblings('li').children('a').css({'background-position': 'left bottom'});
			
      $('.thumbnails').children('ul').children('li:not(".active")').hover(function(){
         $(this).children('a').animate({'left': '8px'}, 200);
         $(this).children('a').css({'background-position': 'left top'});
				$('ul.projectnav').stop().animate({'opacity': '0'}, 300);
				$('div.projectname').stop().animate({'opacity': '0'}, 300);
				$('div.showcase').stop().animate({'opacity': '0'}, 300);
            $('span.projecthovername').remove();
            $('div.thumbnails').append('<span class="projecthovername"><img src="img/'+$(this).children('a').text()+'.png" /></span>');
            $('.projecthovername').css({'top': $(this).position().top});
      }, function() {
            $('span.projecthovername').remove();
         $(this).children('a').animate({'left': '0px'}, 200);
         $(this).children('a').css({'background-position': 'left bottom'});
				$('ul.projectnav').stop().animate({'opacity': '1'}, 500);
				$('div.projectname').stop().animate({'opacity': '1'}, 500);
				$('div.showcase').stop().animate({'opacity': '1'}, 500);
      });
			
      $('.thumbnails2').children('ul').children('li:not(".active")').hover(function(){
         $(this).children('a').animate({'left': '-8px'}, 200);
         $(this).children('a').css({'background-position': 'left top'});
				$('ul.projectnav').stop().animate({'opacity': '0'}, 300);
				$('div.projectname').stop().animate({'opacity': '0'}, 300);
				$('div.showcase').stop().animate({'opacity': '0'}, 300);
            $('span.projecthovername').remove();
            $('div.thumbnails2').append('<span class="projecthovername"><img src="img/'+$(this).children('a').text()+'.png" /></span>');
            $('.projecthovername').css({'top': $(this).position().top});
            $('.projecthovername').css({'left': '290px'});
      }, function() {
            $('span.projecthovername').remove();
         $(this).children('a').animate({'left': '0px'}, 200);
         $(this).children('a').css({'background-position': 'left bottom'});
				$('ul.projectnav').stop().animate({'opacity': '1'}, 500);
				$('div.projectname').stop().animate({'opacity': '1'}, 500);
				$('div.showcase').stop().animate({'opacity': '1'}, 500);
      });
			
      $('.thumbnails2').children('ul').children('li.active').children('a').animate({'left': '0px'},200);
      $('.thumbnails2').children('ul').children('li.active').children('a').css({'background-position': 'left bottom'});
			
			$('span.projecthovername').remove();
      $('.thumbnails').children('ul').children('li.active').children('a').animate({'left': '8px'},200);
      $('.thumbnails').children('ul').children('li.active').children('a').css({'background-position': 'left top'});
   }); //click thumbnail

}; //thumbnailtoggle


function thumbnailtoggle2() {

   $('.thumbnails2').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 );

      $('.thumbnails2').children('ul').children('li.active').removeClass('active');
      $('.thumbnails2').children('ul').children('li').unbind();
      whichdidiclick = $('.thumbnails2').children('ul').children('li').index($(this).parent('li'))+19;
      $('.viewport').append('<img src="img/ajax-loaderx.gif" alt="" style="position: absolute; z-index: 100; top: -350px; left: 450px;" />');
      setTimeout( function () {
         dynamicload(whichdidiclick);
      }, 1000 );
      $('ul.projectlist2').children('li').eq(whichdidiclick).animate({'opacity': '0'}, {duration: 1000, easing: 'expoinout'})
      $(this).parent('li').addClass('active').siblings('li').children('a').animate({'left': '0px'}, 300);
      $(this).parent('li').addClass('active').siblings('li').children('a').css({'background-position': 'left bottom'});
			
      $('.thumbnails2').children('ul').children('li:not(".active")').hover(function(){
         $(this).children('a').animate({'left': '-8px'}, 200);
         $(this).children('a').css({'background-position': 'left top'});
				$('ul.projectnav').stop().animate({'opacity': '0'}, 300);
				$('div.projectname').stop().animate({'opacity': '0'}, 300);
				$('div.showcase').stop().animate({'opacity': '0'}, 300);
            $('span.projecthovername').remove();
            $('div.thumbnails2').append('<span class="projecthovername"><img src="img/'+$(this).children('a').text()+'.png" /></span>');
            $('.projecthovername').css({'top': $(this).position().top});
            $('.projecthovername').css({'left': '290px'});
      }, function() {
            $('span.projecthovername').remove();
         $(this).children('a').animate({'left': '0px'}, 200);
         $(this).children('a').css({'background-position': 'left bottom'});
				$('ul.projectnav').stop().animate({'opacity': '1'}, 500);
				$('div.projectname').stop().animate({'opacity': '1'}, 500);
				$('div.showcase').stop().animate({'opacity': '1'}, 500);
      });
			
      $('.thumbnails').children('ul').children('li:not(".active")').hover(function(){
         $(this).children('a').animate({'left': '8px'}, 200);
         $(this).children('a').css({'background-position': 'left top'});
				$('ul.projectnav').stop().animate({'opacity': '0'}, 300);
				$('div.projectname').stop().animate({'opacity': '0'}, 300);
				$('div.showcase').stop().animate({'opacity': '0'}, 300);
            $('span.projecthovername').remove();
            $('div.thumbnails').append('<span class="projecthovername"><img src="img/'+$(this).children('a').text()+'.png" /></span>');
            $('.projecthovername').css({'top': $(this).position().top});
      }, function() {
            $('span.projecthovername').remove();
         $(this).children('a').animate({'left': '0px'}, 200);
         $(this).children('a').css({'background-position': 'left bottom'});
				$('ul.projectnav').stop().animate({'opacity': '1'}, 500);
				$('div.projectname').stop().animate({'opacity': '1'}, 500);
				$('div.showcase').stop().animate({'opacity': '1'}, 500);
      });
			
      $('.thumbnails').children('ul').children('li.active').children('a').animate({'left': '0px'},200);
      $('.thumbnails').children('ul').children('li.active').children('a').css({'background-position': 'left bottom'});
			
			$('span.projecthovername').remove();
      $('.thumbnails2').children('ul').children('li.active').children('a').animate({'left': '-8px'},200);
      $('.thumbnails2').children('ul').children('li.active').children('a').css({'background-position': 'left top'});
   }); //click thumbnail

}; //thumbnailtoggle


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').click(function(){
      $('#aboutcontent').stop().animate({'opacity': '1'}, 100);
      $('#contactcontent').stop().animate({'opacity': '0'}, 100);
      $('#logincontent').stop().animate({'opacity': '0'}, 100);
      $('#aboutcontent').css({'z-index': 2});
      $('#worldcontainer').animate({'left': '210px'}, {duration: 700, easing: 'expoinout'})
   }, function() {
      $('#worldcontainer').animate({'left': '0px'}, {duration: 700, easing: 'expoinout'})
   }); //toggle

   $('a.closethis').click(function() {
      $('#worldcontainer').animate({'left': '0px'}, {duration: 700, easing: 'expoinout'});
      return false;
   });
}; //about

function contact() {
   $('.nav_contact').click(function(){
      $('#aboutcontent').stop().animate({'opacity': '0'}, 100);
      $('#contactcontent').stop().animate({'opacity': '1'}, 100);
      $('#logincontent').stop().animate({'opacity': '0'}, 100);
      $('#contactcontent').css({'z-index': 2});
      $('#worldcontainer').animate({'left': '210px'}, {duration: 700, easing: 'expoinout'})
   }, function() {
      $('#worldcontainer').animate({'left': '0px'}, {duration: 700, easing: 'expoinout'})
   }); //toggle

   $('a.closethis').click(function() {
      $('#worldcontainer').animate({'left': '0px'}, {duration: 700, easing: 'expoinout'});
      return false;
   });
}; //about

function login() {
   $('.nav_login').click(function(){
      $('#aboutcontent').stop().animate({'opacity': '0'}, 100);
      $('#contactcontent').stop().animate({'opacity': '0'}, 100);
      $('#logincontent').stop().animate({'opacity': '1'}, 100);
      $('#logincontent').css({'z-index': 2});
      $('#worldcontainer').animate({'left': '210px'}, {duration: 700, easing: 'expoinout'})
   }, function() {
      $('#worldcontainer').animate({'left': '0px'}, {duration: 700, easing: 'expoinout'})
   }); //toggle

   $('a.closethis').click(function() {
      $('#worldcontainer').animate({'left': '0px'}, {duration: 700, easing: 'expoinout'});
      return false;
   });
}; //login

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';
         }
      }
   }
});