var Timeline = function() {
	/* Définit la logique du pattern singleton */
	timelineClass = this.constructor;
	if(typeof(timelineClass.singleton) != 'undefined') return timelineClass.singleton;
	else timelineClass.singleton = this;

	/* Etend la classe avec de nouvelles méthodes et propriétés  --  ne sera exécuté qu'une seule fois  */
	return ($.extend(timelineClass.singleton, {

		loaded : false,

		/* Niveau de scroll à droite pour chaque siècle & décennies */
		centuries : {
			700 : 971,
			800 : 2009,
			900 : 3042,
			1000 : 4076,
			1100 : 5108,
			1200 : 6149,
			1300 : 7174,
			1400 : 12085,
			1500 : 21787,
			1600 : 31484,
			1700 : 41188,
			1800 : 50891,
			1900 : 60590
		},
		decades : {
			1300 : {
				1310 : 8143,
				1320 : 9112,
				1330 : 10090,
				1340 : 10095,
				1350 : 10100,
				1360 : 10110,
				1370 : 10120,
				1380 : 10147,
				1390 : 11116
			},
			1400 : {
				1410 : 13054,
				1420 : 14023,
				1430 : 14995,
				1440 : 15967,
				1450 : 16933,
				1460 : 17905,
				1470 : 18877,
				1480 : 19846,
				1490 : 20812
			},
			1500 : {
				1510 : 22756,
				1520 : 23725,
				1530 : 24697,
				1540 : 25666,
				1550 : 26632,
				1560 : 27607,
				1570 : 28576,
				1580 : 29545,
				1590 : 30517
			},
			1600 : {
				1610 : 32455,
				1620 : 33427,
				1630 : 34393,
				1640 : 35365,
				1650 : 36337,
				1660 : 37306,
				1670 : 38275,
				1680 : 39247,
				1690 : 40216
			},
			1700 : {
				1710 : 42157,
				1720 : 43126,
				1730 : 44098,
				1740 : 45067,
				1750 : 46036,
				1760 : 47007,
				1770 : 47976,
				1780 : 48948,
				1790 : 49920
			},
			1800 : {
				1810 : 51858,
				1820 : 52827,
				1830 : 53814,
				1840 : 54768,
				1850 : 55737,
				1860 : 56706,
				1870 : 57678,
				1880 : 58647,
				1890 : 59616
			},
			1900 : {
				1910 : 61560,
				1920 : 63012,
				1930 : 64950,
				1940 : 66504,
				1950 : 67473,
				1960 : 68442,
				1970 : 69414,
				1980 : 70386,
				1990 : 71354
			}
		},
		
		/* Drag & drop */

		startx : null, // position x de la souris au début du drag
		offset : null, // niveau de scroll à droite

		drag : function(e) {
			var left = offset + ((startx - e.pageX) * 3);
			if(
				e.pageX > $('#timeline .content').width() + $('#timeline .content').position().left
				|| e.pageX < $('#timeline .content').position().left
			) {
				$(this).unbind('mousemove', self.drag);
			}
			$('#timeline .content').scrollLeft(left);
			new Timeline().checkActive($('#timeline .content').scrollLeft()); // 'this' renvoie à l'élément html auquel est associé l'évenement
			$('.slider').slider('option','value',left);
		},
		
		/* Déplacement de la frise au clic sur un élément de menu */

		moveFrieze : function(left) {
			var self = this;
			$('#timeline .content').animate({
				scrollLeft: left
			}, "easeInOutCubic",
			function() {
				self.checkActive(left);
			});
			$('.slider .ui-slider-handle').animate({
				left : (left / $('#timeline .content .frieze').width() ) * $('.slider').width()
			}, "easeInOutCubic");
		},
		
		/* Définition des siècles et décennies actifs */
		
		checkActive : function(left) {
			var century_active;
			var decade_active;
			var self = this;
			$.each(this.centuries, function(i, val) {
				if(left >= val) { century_active = i; return; }
			});
			$('#timeline ul.centuries li.active').toggleClass('active');
			$('#c' + century_active).toggleClass('active');
			var empty = $('#timeline .decades_empty');
			$('#timeline .decades').hide();
			if(this.decades[century_active] != undefined) {
				if($('#timeline ul.decades.c' + century_active).length) {
					empty.hide();
					$('#timeline ul.decades.c' + century_active).show();
				}
				else {
					var ul = $(document.createElement('ul')).addClass('decades c' + century_active);
					empty.after(ul);
					$.each(this.decades[century_active], function(i, val) {
						ul.append(
							$(document.createElement('li')).attr('id','d' + i).append(
								$(document.createElement('a')).text(i).attr('href', 'javascript:void(0)').click(function() {
									self.moveFrieze(val);
									window.location.hash = '#' + i;
								})
							)
						);
					});
					empty.hide();
					$('#timeline ul.decades li a').each(function() {
						if($(this).hasClass('flir-replaced')) return;
						FLIR.replace(this, new FLIRStyle({
							cFont: 'silkscreen',
							mode: 'wrap',
							realFontHeight: true,
							resizeBox: true
						}));
					});
				}
				$.each(this.decades[century_active], function(i, val) {
					if(left >= val) { decade_active = i; return; }
				});
				$('#timeline ul.decades li.active').toggleClass('active');
				$('#d' + decade_active).toggleClass('active');
			}
			else empty.show();
		},
		
		/* Détection des ancres dans l'url */
		
		checkAnchors : function() {
			var self = this;
			if(window.location.hash != '') {
				var anchor = (window.location.hash).substr(1);
				if(this.centuries[anchor]) {
					$('#timeline .content').scrollLeft(self.centuries[anchor]);
					self.checkActive(self.centuries[anchor]);
					$('#timeline .slider').slider('option', 'value', self.centuries[anchor]);
					return;
				}
				$.each(this.decades, function(i, val) {
					if(self.decades[i][anchor]) {
						$('#timeline .content').scrollLeft(self.decades[i][anchor]);
						self.checkActive(self.decades[i][anchor]);
						$('.slider').slider('option', 'value', self.decades[i][anchor]);
					}
				});
			}
		},
		
		/* Création du DOM du menu */
		
		createDOM : function() {
			var self = this;
			$('#timeline .content').css({
				'overflow':'hidden',
				'cursor':'pointer'
			})
			.after(
				$(document.createElement('div'))
				.attr('class','slider-container')
				.append($(document.createElement('div')).attr('class','slider'))
			);
			var ul = $(document.createElement('ul')).attr('class','centuries').hide();
			$.each(this.centuries, function(i, val) {
				ul.append($(document.createElement('li')).attr('id', 'c' + i).append(
					$(document.createElement('a')).attr('href', 'javascript:void(0)')
					.text(i)
					.click(function() { 
						self.moveFrieze(val);
						window.location.hash = '#' + i;
					})
				));
			});
			$('#timeline .content').before(ul);
			ul.after($(document.createElement('div')).attr('class','decades_empty'));
		},
		
		/* Vérification du chargement des images */
		checkLoad : function() {
			var self = this;
			$('#timeline').before(
				$(document.createElement('p')).attr('id','loadingZone').text("Loading...")
			);
			var checkLoadedInterval = setInterval(
				function() {
					var loadTest = true;
					$('#timeline img').each(function() { 
						if(!this.complete) {
							loadTest = false;
							$('#loadingZone').text('Loading ' + $(this).attr('alt') + '...');
							return false;
						}
					});
					if(loadTest) {
						clearInterval(checkLoadedInterval);
						$('#loadingZone').text('Loading complete');
						self.loaded = true;
						self.init();
					}
				}, 500
			);
		},

		/* Constructeur */
		init : function() {
			var self = this;
			if(!this.loaded) {
				// on profite du chargement des images pour modifier rapidement le dom + initialiser FLIR
				this.createDOM();
			    FLIR.init( { path: '/facelift/' } );
				this.checkLoad();
				$(".timeline #footer").css( "position",'absolute' );
				$(".timeline #footer").css( "top", $(document).height() - $('#footer').height());
			}
			else {
				$('#loadingZone').fadeOut(600);
				$('ul.centuries').slideDown(600);
				$('#timeline .slider').slider({
					animate: true,
					max : $('#timeline .frieze').width(),
					slide : function(event, ui) {
						$('#timeline .content').scrollLeft(ui.value);
						self.checkActive(ui.value);
					}
				});
				if($.browser.msie) document.ondragstart = function() { return false; };
				$('#timeline .content')
				.mousedown(function(e) {
					startx = e.pageX;
					offset = $('#timeline .content').scrollLeft();
					$('#timeline .content').css('cursor','e-resize');
					$('body').bind('mousemove', self.drag);
					return false;
				})
				.mouseup(function(e) {
					$('body').unbind('mousemove', self.drag);
					$('#timeline .content').css('cursor','pointer');
				});
				this.checkAnchors();
				return this;
			}
		}
	}).init());
};