// Preload les images
(function($) {
	var batch = {
		loaded:0,
		images:[
			'_images/_accueil/_effects/residence.png',
			'_images/_accueil/_effects/military.png',
			'_images/_accueil/_effects/hospitality.png',
			'_images/_accueil/_effects/exclusive.png'
		],
		finish:null
	};
	
	$.each(batch.images, function() {
		$(new Image()).load(function() {
			if (++batch.loaded >= batch.images.length && batch.finish) {
				batch.finish();
			}
		}).attr('src', this);
	});
	
	$(function() {
		var Node = {TEXT_NODE:3};
		
		var $marketsGroup = $('#markets-group');
		var $buttons = $marketsGroup.children('.action-button');
		
		var btn_states = {
			expand:{
				animate:{
					'height':248
				}
			},
			collapse:{
				animate:{
				}
			}
		};
	
		// Supprime les whitespace entre les éléments inline-block
		$('#markets-group').contents().filter(function() {
			return this.nodeType == Node.TEXT_NODE;
		}).remove();
		
		// Initialize les effets des boutons
		$buttons.each(function(count) {
			var $self = $(this);
			var $bgEffect1 = $(document.createElement('div')).addClass('effect');
			var $bgEffect2 = $(document.createElement('div')).addClass('effect');
			var $content = $(document.createElement('div')).addClass('content');
			var $cursor = $self.children('.cursor').remove();
			
			$content.append($self.contents().remove());
			$self.append($content);
			
			$bgEffect1.css({
				'background-image': $self.css('background-image'),
				'width':			$content.width(),
				'height':			btn_states.expand.animate.height
			});
			
			
			$bgEffect2.css({
				'background-image': "url('"+batch.images[count]+"')",
				'width':			$content.width(),
				'height':			btn_states.expand.animate.height,
				'opacity':			0
			});
			
			$cursor.css({
				'top':		85,
				'right':	8
			});
			
			$self.css('background-image', 'none');
			
			$self.prepend($bgEffect2);
			$self.prepend($bgEffect1);
			$self.append($cursor);
		});
		
		/* Valeurs d'animation par défaut */
		btn_states.collapse.animate = $.extend({}, btn_states.collapse.animate, {
			'height':$buttons.eq(0).height()
		});
			
		$buttons.hover(function() {
			var $self = $(this);
			var $cursor = $self.children('.cursor');
			$self.stop().animate(btn_states.expand.animate, 500);
			$self.children('.effect:first').stop().animate({'opacity':0}, 500);
			$self.children('.effect:eq(1)').stop().animate({'opacity':1}, 500, function() {
				$(this).css('opacity', '');
			});
			$cursor.stop().animate({'top':215}, 500);
		}, function() {
			var $self = $(this);
			var $cursor = $self.children('.cursor');
			$self.stop().animate(btn_states.collapse.animate, 500);
			$self.children('.effect:eq(1)').stop().animate({'opacity':0}, 500);
			$self.children('.effect:first').stop().animate({'opacity':1}, 500, function() {
				$(this).css('opacity', '');
			});
			$cursor.stop().animate({'top':85}, 500);
		});
	});
	
	
})(jQuery);