var TimeLine = new Class({
	Implements: [Events],

	buttons: {},


	initialize: function () {
		this.cont = $('timeline');
		this.cont.addClass('js');
		
		$extend(this.cont, {
			pos: this.cont.getPosition()
		});

		if (!Browser.Engine.trident) {
			var obscure = new Element('div', {
				styles: {
					position: 'absolute',
					top: 0,
					left: 0,
					width: '100%',
					height: '100%',
					background: '#000',
					zIndex: 100,
					opacity: 0.8
				}
			});
			obscure.inject(this.cont, 'top');

			window.addEvent('load', function () {
				obscure.destroy();
			});
		}
		
		this.layers = [
			{n: this.cont.getElement('#tl-items'),m: 7.0},
			{n: this.cont.getElement('#tl-layer-1'),m: 0.5},
			{n: this.cont.getElement('#tl-layer-2'), m: 1},
			{n: this.cont.getElement('#tl-layer-3'), m: 3},
			{n: this.cont.getElement('#tl-layer-4'), m: 0},
			{n: this.cont.getElement('#tl-layer-5'), m: 0.5},
			{n: this.cont.getElement('#tl-layer-6'), m: 0.5}
		];


		// Slider
		this.slider = {n: $('tl-preview-view'), pos: 0};
		this.slider.p = this.slider.n.getPosition();
		this.sliderEvents();


		// Navigation buttons
		this.buttons.next = $('tl-preview-next');
		this.buttons.prev = $('tl-preview-prev');
		var prevFn = function () {
			var pos = this.slider.pos-50;

			var diff = pos%50;

			if (diff > 0) {
				pos = this.slider.pos-diff;
			}

			this.moveSlider(pos, true);
		}.bind(this);
		var nextFn = function () {
			var pos = this.slider.pos+50;
			pos = pos-(pos % 50);

			this.moveSlider(pos, true);
		}.bind(this);

		// Setup button click events
		this.buttons.prev.addEvent('click', prevFn);
		this.buttons.next.addEvent('click', nextFn);

		$(document).addEvent('keydown', function (e) {
			if (['left', 'right'].contains(e.key)) {
				e.stop();

				if (e.key === 'right')
					nextFn();
				else if (e.key === 'left')
					prevFn();
			}
		});


		this.items = $$('#tl-items > li > a');
		this.overlays();
	},

	moveLayers: function (pos, animate) {
		this.layers.each(function (l, i) {
			l.pos = -(pos*l.m);

			if (i < 1) {
				//console.log(l.pos);
			}

			if ($defined(animate) && animate === true) {
				new Fx.Morph(l.n, {duration: 250}).start({left: l.pos});
			} else {
				l.n.setStyle('left', l.pos);
			}
		});
	},


	moveSlider: function (pos, animate) {
		//var pos = pPos+(x-mPos);

		// Max boundry check
		if (pos > 750)
			pos = 750;

		// Min boundry check
		if (pos < 0)
			pos = 0;

		// Adds multiplier for preview-view background position
		var bgPos = -(Math.floor(pos*1.85));

		if ($defined(animate) && animate) {
			new Fx.Morph(this.slider.n, {duration: 250}).start({
				left: pos,
				'background-position': bgPos
			});
		} else {
			this.slider.n.setStyles({
				left: pos,
				'background-position': bgPos
			});
		}

		this.slider.pos = pos;

		this.moveLayers(pos, animate);
	},

	sliderEvents: function () {
		var mOver = false;
		var mPos = 0;
		var getPos = function () {return this.slider.pos;}.bind(this);
		var sPos = getPos();

		var preview = $('tl-preview');
		var pPos = preview.getPosition();

		$('tl-preview').addEvent('click', function (e) {
			if (e.target === preview)
				this.moveSlider(e.page.x-pPos.x-115, true);
		}.bind(this));

		this.slider.n.addEvents({
			mousedown: function (e) {
				mOver = true;
				mPos = e.page.x;
				sPos = getPos();
			},
			mouseup: function (e) {
				mOver = false;
			}.bind(this),
			mouseleave: function (e) {
				mOver = false;
			}.bind(this),
			mousemove: function (e) {
				if (mOver) {
					var pos = sPos+e.page.x-mPos;
					this.moveSlider(pos);
				}
			}.bind(this)
		});
	},


	overlays: function () {
		var overlay = new Element('div', {'class': 'overlay', html: '<a href="#" class="close hide">Close</a><h3></h3><div class="copy"></div>', styles: {opacity: 1}});
		overlay.inject(this.cont, 'top');
		
		var oCopy = overlay.getElement('.copy');
		var olH = overlay.getElement('h3');
		var close = overlay.getElement('a.close');
		var open = false;

		var oFx = new Fx.Morph(overlay, {duration: 250});
		var top = this.cont.pos.y+80;
		var left = this.cont.pos.x+150;

		this.items.each(function (item, i) {
			var cont = item.getParent();
			var copy = cont.getElement('.copy');
			var h = copy.getElement('h3');
			var hT = h.get('text');
			h.destroy();
			var oS = olH.set('text', hT).getSize();

			if (i === this.items.length-1) {
				olH.set('text', 'Scroll through the timeline, roll over the images and click on the events that appear to discover more...');
				overlay.setStyles({
					left: 200,
					top: 50
				})
			}

			close.onclick = function () {
				oFx.cancel();
				oFx.start({
					opacity: 0
				}).chain(function () {
					overlay.setStyles({
						visibility: 'hidden',
						width: 'auto',
						height: 28
					});
					overlay.removeClass('open');
					close.addClass('hide');
					oCopy.empty();
					
					open = false;
				});

				return false;
			};

			cont.addEvents({
				click: function (e) {
					if (!open) {
						e.stop();
						
						oCopy.set('html', copy.get('html'));

						var text = olH.get('text');
						olH.set('text', text.substr(0, text.indexOf('.')));

						close.removeClass('hide');
						overlay.setStyles({
							visibility: 'visible',
							left: 150,
							top: 80,
							opacity: 0
						});

						oFx.start({opacity: 1});

						overlay.addClass('open');

						overlay.setStyles({
							width: 650,
							height: 250
						});

						open = true;
						new Scroll(overlay.getElement('.copy .copy'), overlay.getElement('.copy .inner'));
					}
				},
				mouseover: function (e) {
					if (!open) {
						oFx.cancel();
						olH.set('text', hT+'...');

						overlay.setStyles({
							width: 'auto',
							visibility: 'visible'
						});
						oFx.start({
							opacity: 1
						});
					}
				},
				mouseout: function () {
					if (!open) {
						oFx.cancel();
						oFx.start({
							opacity: 0
						}).chain(function () {
							overlay.setStyles({
								visibility: 'hidden'
							});
						});
					}
				},
				mousemove: function (e) {
					if (!open) {
						var s = {left: e.page.x-this.cont.pos.x+30,top: e.page.y-this.cont.pos.y};

						if (e.page.x-this.cont.pos.x+oS.x > 900) {
							s.left = (e.page.x-this.cont.pos.x)-(oS.x+60);
							overlay.addClass('left');
						} else {
							overlay.removeClass('left');
						}
						if (e.page.y-this.cont.pos.y > 370) {
							s.top = 390;
						}
						

						overlay.setStyles(s);
					}
				}.bind(this)
			});
		}, this);
	}
});


window.addEvent('domready', function () {
	var timeline = new TimeLine();
});