/*
 * affichage et masquage de l'image de fon
 * l'animation efface le contenu du site pour voir l'image de fond en entier (état affiche) ou affiche
 * le site et donc maque l'image de fond (état masque)
 *  
 */

var etat = 'affiche';
/* état par défaut au chargement du script = (site affiché, fond masqué) */

function afficheMasqueSite() {

	if (etat == 'affiche') {

		$('#slider').data('nivoslider').stop();
		/* stoppe l'animation du slider de l'entête (sinon pb de mélange dans les légende/photos) */

		$('#search').animate( {

			opacity : 0

		}, 500, function() {

			// Animation complete.

			});

		$('#connexion').animate( {

			opacity : 0

		}, 500, function() {

			// Animation complete.

			});

		$('#page').animate( {

			opacity : 0,
			height : 'toggle'

		}, 2000, function() {

			// Animation complete.

			});

		$('#footer').animate( {

			opacity : 0,
			height : 'toggle'

		}, 1000, function() {

			// Animation complete.

			});

		$('#tools')
				.animate( {

					width : '250px'

				},
						1000,
						function() {

							// Animation complete.

						$('#infosimagefond')
								.animate( {

									opacity : 100,
									width : '230px',
									height : '100px',
									padding : '10px'

								},
										1000,
										function() {

											// Animation complete.
										document.getElementById('hidebutton').style.cssText = 'background-image:url("http://si/sn/design/images/bt_affiche.png");';
										document
												.getElementById('infosimagefond').innerHTML = '<p>La Sèvre Nantaise en hiver. Photo : IIBSN.</p>';
										etat = 'masque';

									});

					});

	}

	if (etat == 'masque') {

		$('#infosimagefond')
				.animate( {

					opacity : 0,
					width : '0px',
					height : '0px',
					padding : '0px'

				},
						500,
						function() {

							// Animation complete.
						document.getElementById('hidebutton').style.cssText = 'background-image:url("http://si/sn/design/images/bt_masque.png");';
						document.getElementById('infosimagefond').innerHTML = '';
						etat = 'affiche';

						$('#tools').animate( {

							width : '480px'

						}, 1000, function() {

							// Animation complete.

								$('#search').animate( {

									opacity : 100

								}, 500, function() {

									// Animation complete.

									});
								$('#connexion').animate( {

									opacity : 100

								}, 500, function() {

									// Animation complete.

									});

							});

						$('#page').animate( {

							opacity : 100,
							height : 'toggle'

						}, 2000, function() {

							// Animation complete.

							});

						$('#footer').animate( {

							opacity : 100,
							height : 'toggle'

						}, 2000, function() {

							// Animation complete.

							});

					});

		$('#slider').data('nivoslider').start();
		/* reprend l'animation du slider de l'entête  */

	}

}