$(document).ready(function() {

//Center enter page rotating logo
$("#box").center();

//Center enter page symbols
$("#symbols").center();

//Enter page logo rotation
$("#box").rotate({bind:{
      mouseenter: function(){
          $("#box1").rotate({
			duration: 8000,
			angle: 0, 
            animateTo: 360
          })
		  $("#box2").rotate({
			duration: 6000,
			angle: 0,
            animateTo: -360
          })
		  $("#box3").rotate({
			duration: 7000,
			angle: 0,
            animateTo: 360
          })
		  $("#box4").rotate({
			duration: 5000,
			angle: 0,
            animateTo: -360
          })
		  //Enter text fade in on mouseover
		   $('#enter').stop(true, true).fadeOut();
		  $('#enter').fadeIn('slow');
      }
  }
});

//Enter text fade out on mouseout
$('#enter').mouseout(function() {
  $('#enter').fadeOut('slow');
});

//On click animation
$('#enter').click(function() {

  //Enter text fade out
  $('#enter').stop(true, true).fadeIn();
  $('#enter').fadeOut(600);
  
  //Rotating boxes fade out
  $('#box1').fadeOut(1000);
  $('#box2').fadeOut(1000);
  $('#box3').fadeOut(1000);
  $('#box4').fadeOut(1000);
  
  //Background color change to white
  $('#index').animate({backgroundColor: '#FFFFFF'
  }, 1800, function() {
	    //Section symbols fade in
  		$('#symbols').fadeIn(1200);	  
  });

//Section symbols rotate on mouseover
$('#symbol1').rotate({bind:{ 
        mouseover : function() { 
            $('#symbol1').rotate({animateTo:180})
        },
        //Symbol returns to original position on mouseout
		mouseout : function() { 
            $('#symbol1').rotate({animateTo:0})
        }
     }
});

$('#symbol2').rotate({bind:{ 
        mouseover : function() { 
            $('#symbol2').rotate({animateTo:180})
        },
        mouseout : function() { 
            $('#symbol2').rotate({animateTo:0})
        }
     }
});

$('#symbol3').rotate({bind:{ 
        mouseover : function() { 
            $('#symbol3').rotate({animateTo:180})
        },
        mouseout : function() { 
            $('#symbol3').rotate({animateTo:0})
        }
     }
});

$('#symbol4').rotate({bind:{ 
        mouseover : function() { 
            $('#symbol4').rotate({animateTo:180})
        },
        mouseout : function() { 
            $('#symbol4').rotate({animateTo:0})
        }
     }
});

//Symbol text fade in and out
$('#symbol1').mouseover(function() {
  $('#design').fadeIn('slow');
});

$('#symbol1').mouseout(function() {
  $('#design').stop(true, true).fadeIn();
  $('#design').fadeOut('slow');
});

$('#symbol2').mouseover(function() {
  $('#photo').fadeIn('slow');
});

$('#symbol2').mouseout(function() {
  $('#photo').stop(true, true).fadeIn();
  $('#photo').fadeOut('slow');
});

$('#symbol3').mouseover(function() {
  $('#media').fadeIn('slow');
});

$('#symbol3').mouseout(function() {
  $('#media').stop(true, true).fadeIn();
  $('#media').fadeOut('slow');
});

$('#symbol4').mouseover(function() {
  $('#biblio').fadeIn('slow');
});

$('#symbol4').mouseout(function() {
  $('#biblio').stop(true, true).fadeIn();
  $('#biblio').fadeOut('slow');
});


$('#symbol1').click(function() {

  $('#symbols').fadeOut(600, function() {
		window.location = "design.html";
  });

});

$('#symbol2').click(function() {

  $('#symbols').fadeOut(600, function() {
		window.location = "photo.html";
  });

});

$('#symbol3').click(function() {

  $('#symbols').fadeOut(600, function() {
		window.location = "media.html";
  });

});

$('#symbol4').click(function() {

  $('#symbols').fadeOut(600, function() {
		window.location = "biblio.html";
  });

});
	
	
	
});






});