$(document).ready(function(){

	// Facebox
	$('a[rel*=facebox]').facebox();

	// Au démarrage, on affiche la catégorie web
	var defaultCategory = 'web';
	showCategory(defaultCategory);
	highlightCategorySelector(defaultCategory);
	updateCurrent($('a:first', 'ul.listing'));
	
	// Lorsque l'on clique sur un sélecteur de catégorie (web, logo, print)
	$('a', '#category-selector').click(function(e) {
		e.preventDefault();
		if( $(this).hasClass('active') === false) {
			var category = $(this).attr('class');
			showCategory(category);
			highlightCategorySelector(category);
			updateCurrent($('a', 'div#'+category+' ul.listing li:first'));
		}
	});
	
	// Lorsque l'on clique sur un numéro de pagination
	$('a', 'ol.pager').click(function(e) {
		e.preventDefault();
		var page = $(this).attr('class').replace('page', '');
		changePage(page);
	});
	
	// Lorsque l'on clique sur une vignette
	$('a', 'ul.listing').click(function(e) {
		e.preventDefault();
		updateCurrent(this);
	});
	
	// Lorsque l'on survole l'image de la réalisation mise en avant
	$('p.icones', '#current').hide();
	$('p.illustration', '#current').hover(
		function() {
			$('p.icones', '#current').fadeIn('fast');
		},
		function() {
			$('p.icones', '#current').hide();
		}
	);
	$('p.icones, p.icones', '#current').hover(
		function() {
			$('p.icones', '#current').show();
		},
		function() {
			$('p.icones', '#current').show();
		}
	);
	
	/**************/
	
	// Montrer une catégorie (web, logo, print)
	function showCategory(category) {
		$('div.category').hide();
		$('ul.listing').css('top', 0);
		$('div#'+category).show();
	}
	
	// "Surligner" la catégorie courante
	function highlightCategorySelector(category) {
		$('a', '#category-selector').removeClass('active');
		$('a.'+category, '#category-selector').addClass('active');
	}
	
	// Changer la réalisation mise en avant
	function updateCurrent(elt) {
		$('#currentimg').css('opacity', 0.3);
		var img2load = $(elt).children('img').attr('src').replace('/thumbs', '/medium').replace('_thumb', '');
		$.ajax({
			url: img2load,
			complete: function(data) {
				$('#nextimg').hide().attr('src', img2load).fadeIn('medium', function() {
					$('#currentimg').attr('src', img2load).hide().css('opacity', 1).fadeIn();
					$('#nextimg').removeAttr("width").removeAttr("height").css({ width: "", height: "" }); // reset
					var imgHeight = parseInt(document.getElementById('nextimg').height);
					if(imgHeight<342 && imgHeight>1)
						$('#current p.illustration').css('top', ( (343 - imgHeight) / 2 ) );
					else
						$('#current p.illustration').css('top', 0 );
					$('#nextimg').css('opacity', 1);
				});
			}
		});
		$('p.titre', '#current').text($(elt).attr('rel'));
		$('p.description', '#current').text($(elt).children('img').attr('alt'));
		$('a:not(.imprimer)', '#current p.icones').hide();
		// On affiche que certains boutons en fonction du type de réa
		var categorie = $(elt).parent().parent().attr('id').replace('realisations-', '');
		switch(categorie) {
			case 'web':
				$('#current p.icones').css({left: '110px'});
				$('a.web', '#current p.icones').attr('href', $(elt).attr('href')).show();
				$('a.imprimer', '#current p.icones').attr('href', './realisations-agrandir.php?id='+$(elt).attr('id').replace('rea-', '')+'&imprimer=oui').show();
				break;
			case 'print':
				$('#current p.icones').css({left: '110px'});
				$('a.print', '#current p.icones').attr('href', $(elt).attr('href')).show();
				$('a.imprimer', '#current p.icones').attr('href', $(elt).attr('href')+'&imprimer=oui').show();
				break;
			case 'logo':
				$('#current p.icones').css({left: '40px'});
				$('a.imprimer', '#current p.icones').attr('href', $(elt).attr('href')+'&imprimer=oui').show();
				break;
			default:
				break;
		}
	}
	
	function changePage(page) {
		var viewport = 'div.viewport';
		var slidingElt = 'ul.listing';
		var offset = parseInt($(viewport).css('height'));
		var newTop = offset - ( page * offset );
		$(slidingElt).animate({'top': newTop}, 'normal');
	}
	
});