var CONFIG = {};

Cufon.replace('.splash h1', { fontFamily: 'Crimson' });
Cufon.replace('.splash nav li a, ul.timeline li a', { fontFamily: 'League Gothic', hover: true });

Cufon.replace('header#header ul.sites a, footer h4, footer .col dt a', { 
	fontFamily: 'League Gothic',
	color: '-linear-gradient(red, 0=#FFF, 0.4=#FFF, 0.5=#d9d9d9)'
});

Cufon.replace('header#header nav ul li a, #content .cols .box h2', { 
	fontFamily: 'League Gothic',
	textShadow: '0px 2px #D05353'
});

window.addEvent('domready', function()
{
	CONFIG.BASE_URL = $(document.head).getElement('base').get('href');
	
	$$('a').each(function(el) {
		if(el.get('href') == '#') {
			el.addEvent('click', function(e) {
				e.stop();
			});
		}
	});
	
	if($('newsletter')) {
		$('newsletter').addEvent('submit', function() {
			var inputs = $('newsletter').getElements('input');
			var valid = true;
			inputs.each(function(el, i) {
				if(el.get('value') == '') {
					valid = false;
					el.addClass('error');
				} else {
					valid = true;
					el.removeClass('error');
				}
			}.bind(this));

			if(valid) {
				var form = $('newsletter').set('send', {
					'method': 'post',
					onComplete: function(response) {
						$('result').set('html', response);
					}
				});
				form.send();
			}
		}.bind(this));
		
		$('newsletter').getElement('a.btn-submit').addEvent('click', function(e) {
			e.stop();
			$('newsletter').fireEvent('submit');
		}.bind(this));
	}
	
	if($('carousel')) {
		var carousel = new Carousel({
			wrapper: $('carousel').getElement('.navigation-gallery'),
			thumbnails: $('carousel').getElements('.navigation-gallery ul li a'),
			fullImage: $('carousel').getElement('.fullimage'),
			buttons: $('carousel').getElements('.buttons a'),
			visibleItems: 8
		});
	}
	
	if($('timeline')) {
		var timeline = new Timeline({
			wrapper: $('timeline').getElement('.timeline-wrapper'),
			items: $('timeline').getElements('.timeline-item'),
			buttons: $('timeline').getElements('.btn'),
			timelineButtons: $('timeline').getElements('.timeline a'),
			articleLinks: $('timeline').getElements('.timeline-item li a'),
			article: $('timeline-details'),
			visibleItems: 1
		});
	}
	
	if($('albums')) {
		var scrollToAlbum = new Fx.Scroll(window);
		var buttons = $('albums').getElements('.timeline li a');
		var albums = $('albums').getElements('.col-full');
		buttons.each(function(el, i) {
			el.addEvent('click', function(e) {
				e.stop();
				scrollToAlbum.toElement(albums[i]);
			});
		}.bind(this));
	}
	
	var slide = new Carrousel({items: $$('div#pushbox img')});
	
});



Carousel = new Class({
	options: {
		wrapper: null,
		thumbnails: null,
		fullImage: null,
		buttons: null,
		activeElement:  null,
		offset: null,
		numberOfItems: null,
		visibleItems: null,
		slideFx: null
	},
	Implements: Options,
	
	initialize: function(options) {
		this.setOptions(options);
		
		this.options.numberOfItems = this.options.thumbnails.length;
		this.options.offset = 0;
		this.options.slideFx = new Fx.Scroll(this.options.wrapper, { link: 'cancel', transition: Fx.Transitions.Expo.easeOut });
		
		this.addClickEvents();
	},
	
	addClickEvents: function() {
		this.options.thumbnails.each(function(el, i) {
			el.addEvent('click', function(e) {
				e.stop();
				this.setActiveThumbnail(i);
				this.options.activeElement = i;
			}.bind(this));
		}.bind(this));
	
		this.options.buttons.each(function(el, i) {
			el.addEvent('click', function(e) {
				e.stop();
				if(el.hasClass('prev')) {
					--this.options.activeElement;
					if(this.options.activeElement < 0) {
						this.options.activeElement = 0;
					} else {
						el.fade('in').setStyle('display', 'block');
						this.setActiveThumbnail(this.options.activeElement);
						this.loadActiveFullImage(this.options.activeElement);
						this.calculateOffset(el.get('class'));
					}
				} else if(el.hasClass('next')) {
					++this.options.activeElement;
					if(this.options.activeElement >= this.options.numberOfItems) {
						this.options.activeElement = this.options.numberOfItems - 1;
					} else {
						el.fade('in').setStyle('display', 'block');
						this.setActiveThumbnail(this.options.activeElement);
						this.loadActiveFullImage(this.options.activeElement);
						this.calculateOffset(el.get('class'));
					}
				}
				
			}.bind(this));
		}.bind(this));
	},
	
	calculateOffset: function(method) {
		if(this.options.activeElement >= this.options.visibleItems) {
			this.slide();
		}
	},
	
	setActiveThumbnail: function(active) {
		this.options.thumbnails.removeClass('active');
		this.options.thumbnails[active].addClass('active');
		this.loadActiveFullImage(active);
	},
	
	loadActiveFullImage: function(active) {
		var imageSrc = this.options.thumbnails[active].get('href');
		var image = Asset.image(CONFIG.BASE_URL + imageSrc, {
			onLoad: function() {
				this.options.fullImage.empty();
				image.inject(this.options.fullImage, 'inside').fade('hide').fade('in');
			}.bind(this)
		});
	},
	
	slide: function() {
		this.options.slideFx.toElement(this.options.thumbnails[(this.options.activeElement - this.options.visibleItems + 1)]);
	}
});



Timeline = new Class({
	options: {
		wrapper: null,
		items: null,
		buttons: null,
		timelineButtons: null,
		activeElement:  0,
		numberOfItems: null,
		articleLinks: null,
		article: null,
		scrollPage: null,
		slideFx: null
	},
	Implements: Options,
	
	initialize: function(options) {
		this.setOptions(options);
		
		this.options.numberOfItems = this.options.items.length;
		this.options.slideFx = new Fx.Scroll(this.options.wrapper, { link: 'cancel', transition: Fx.Transitions.Expo.easeOut });
		this.options.scrollPage = new Fx.Scroll(window, {link: 'cancel', duration: 200});
		
		this.slide();
		this.addClickEvents();
	},
	
	addClickEvents: function() {
		this.options.buttons.each(function(el, i) {
			el.addEvent('click', function(e) {
				e.stop();
				if(el.hasClass('prev')) {
					--this.options.activeElement;
					if(this.options.activeElement < 0) {
						this.options.activeElement = this.options.numberOfItems - this.options.visibleItems
					}
				} else if(el.hasClass('next')) {
					++this.options.activeElement;
					if(this.options.activeElement > this.options.numberOfItems - this.options.visibleItems) {
						this.options.activeElement = 0;	
					}
				}
				
				this.slide(this.options.activeElement);
				
			}.bind(this));
		}.bind(this));
		
		this.options.timelineButtons.each(function(el, i) {
			el.addEvent('click', function(e) {
				e.stop();
				this.options.activeElement = i;
				this.slide(this.options.activeElement);
			}.bind(this));
		}.bind(this));
		
		this.options.articleLinks.each(function(el, i) {
			el.addEvent('click', function(e) {
				e.stop();
				this.loadArticle(el.get('href'));
			}.bind(this));
		}.bind(this));
	},
	
	setActiveTimelineButton: function() {
		this.options.timelineButtons.removeClass('active');
		this.options.timelineButtons[this.options.activeElement].addClass('active');
	},
	
	setContentHeight: function() {
		var contentTween = new Fx.Tween(this.options.wrapper, {duration: 300});
		contentTween.start('height', this.options.items[this.options.activeElement].getCoordinates().height);
	},
	
	slide: function() {
		this.setContentHeight();
		this.setActiveTimelineButton();
		this.options.slideFx.toElement(this.options.items[this.options.activeElement]);
	},
	
	loadArticle: function(articleUrl) {
		var getArticle = new Request.JSON({
			url: articleUrl,
			method: 'get',
			onRequest: function(){
				this.options.article.set('html', '<img class="loading" src="inc/image/ajax-loader.gif">');
				this.scrollToElement(this.options.article);
				this.showArticle();
			}.bind(this),
			onSuccess: function(response){
				(function() {
					this.options.article.set('html', '');
					var title = new Element('h2').inject(this.options.article, 'inside');
					var titleText = new Element('span', {'class':'title', 'text': response.title}).inject(title, 'inside');
					var closeButton = new Element('a', {
						'id': 'close',
						'class': 'floatRight',
						'text': 'Sluiten',
						events: {
							click: function(e) {
								e.stop();
								this.hideArticle();
							}.bind(this)
						}
					}).inject(title, 'inside');
					var content = new Element('div', {'class': 'det', 'html': response.content}).inject(this.options.article, 'inside');
					var image = new Element('img', {'src': response.image, 'class': 'news-image'}).inject(content, 'top');
					
					this.initCufon();
					
					(function() {
						this.showArticle();
					}.delay(200, this));
					
				}.bind(this)).delay(1000);
			}.bind(this)
		}).get();
	},
	
	scrollToElement: function(element) {
		this.options.scrollPage.toElement(element);
	},
	
	hideArticle: function() {
		var tweenArticle = new Fx.Tween(this.options.article.getParent('div'), {duration: 200});
		tweenArticle.start('height', 0);
		this.scrollToElement(this.options.timelineButtons[0]);
	},
	
	showArticle: function() {
		var articleHeight = this.options.article.getHeight();
		var tweenArticle = new Fx.Tween(this.options.article.getParent('div'), {duration: 200});
		tweenArticle.start('height', articleHeight);
	},
	
	initCufon: function() {
		Cufon.replace('#timeline-details h2', { 
			fontFamily: 'League Gothic',
			textShadow: '2px 1px #D05353'
		});
	}
});

var Carrousel = new Class(
{
	options: {
		items: null,
		active: 0,
		numberOfItems: null,
		timer: null
	},
	Implements: Options,
	
	initialize: function(options)
	{
		this.setOptions(options);	
		this.options.numberOfItems = this.options.items.length;
		
		this.options.items.each(function(el, i)
		{
			if(i > 0) {
				el.fade('hide');
			}
		});
				
		this.options.items[0].addClass('active');
		
		this.setPeriodical();
		this.addEvents();
	},
	
	addEvents: function()
	{
		//
	},
	
	setPeriodical: function()
	{
		this.options.timer = this.autoSlide.periodical(6000, this); 
	},
	
	autoSlide: function()
	{
		++this.options.active;
		if (this.options.active >= this.options.numberOfItems)
		{
			this.options.active = 0;
		}
		
		this.options.items.fade('out');
		this.options.items[this.options.active].fade('in');
		
	}
});