window.addEvent('domready', function()
{
	/*
	 * Dynamic headers
	 */

	// List of header images
	var images = new Hash(
	{
		'welkom': 'images/headers/header_welkom.jpg',
		'werkwijze': 'images/headers/header_werkwijze.jpg',
		'praktijk': 'images/headers/header_praktijk.jpg',
		'diensten': 'images/headers/header_diensten.jpg',
		'nieuws': 'images/headers/header_nieuws.jpg',
		'filosofie': 'images/headers/header_filosofie.jpg',
		'bouwprojecten': 'images/headers/header_bouwprojecten.jpg',
		'processing': 'images/headers/header_processing.jpg',
		'logistiek': 'images/headers/header_logistiek.jpg',
		'klimaat': 'images/headers/header_klimaat.jpg',
		'energiebesparing': 'images/headers/header_energiebesparing.jpg',
		'chemie': 'images/headers/header_chemie.jpg',
		'kunststof': 'images/headers/header_kunststof.jpg',
		'subsidies': 'images/headers/header_subsidies.jpg',
		'brandpreventie': 'images/headers/header_brandpreventie.jpg',
		'contact': 'images/headers/header_contact.jpg'
	});

	// Preload images
	var imageLoader = new Asset.images(images.getValues());

	// Slide effect options
	var effectOptions =
	{
		property: 'height',
		unit: 'px',
		duration: 'normal',
		link: 'cancel',
		transition: Fx.Transitions.Expo.easeOut
	};

	// Create slider elements
	var header = $('header');
	var anchors = new Hash();
	images.each(function(item, index)
	{
		var element = new Element('div')
			.setProperty('id', 'slider_' + index)
			.addClass('slider')
			.setStyles({'background-image': 'url(\'' + item + '\')', 'z-index': 0});
		header.adopt(element);

		var anchor = $(document.body).getElement('a.' + index);
		if (anchor && anchor.hasClass('dynamic'))
		{
			anchor.store('ref', 'slider_' + index);
			anchors.set(index, anchor);
		}
	});

	// Bind events to the anchors
	anchors.each(function(item, index)
	{
		item.addEvents(
		{
			'mouseover': function (event)
			{
				event.stop();

				// Slide effect
				/*
				if (!this.effect)
					this.effect = new Fx.Tween(this.retrieve('ref'), effectOptions);

				this.effect
					.removeEvents()
					.addEvent('start', function () { this.element.setStyle('z-index', 2); })
					.addEvent('complete', function () { this.element.setStyle('z-index', 1); })
					.start(160);
				*/

				// Fade effect
				$(this.retrieve('ref'))
					.fade('hide')
					.setStyle('height', '160px')
					.fade('in');
			},
			'mouseout': function (event)
			{
				event.stop();

				// Slide effect
				/*
				if (this.effect)
				{
					this.effect
						.removeEvents()
						.addEvent('complete', function () { this.element.setStyle('z-index', 0); })
						.start(0);
				}
				*/

				// Fade effect
				$(this.retrieve('ref'))
					.fade('out');
			}
		});
	});


	/*
	 * Specials box content (print button/ font resizing)
	 */

		var SpecialBox = new Class(
		{
			initialize: function (el)
			{
				this.element = $(el);
				if (!this.element)
					return;

				this.element.setStyle('opacity', .5);
				this.element.addEvents(
				{
					'mouseenter': function (event)
					{
						event.stop();
						this.focus();
					}.bind(this),
					'mouseleave': function (event)
					{
						event.stop();
						this.blur();
					}.bind(this)
				});
			},

			focus: function ()
			{
				if (this.effect)
					this.effect.cancel();
				this.element.setStyle('opacity', 1);
			},

			blur: function ()
			{
				this.effect = new Fx.Tween(this.element, {property: 'opacity', duration: 'short'}).start(.5);
			},

			getElement: function ()
			{
				return this.element;
			}
		});
		var specialsbox = new SpecialBox('specials');

		specialsbox.getElement().set('html', '<a id="decrement" title="Tekst kleiner"><img src="images/font_minus.jpg" alt="Kleiner" /></a>');
		specialsbox.getElement().adopt(new Element('div').adopt(new Element('div').setProperty('id', 'fontKnob')).setProperty('id', 'fontHandle'));
		specialsbox.getElement().set('html', specialsbox.getElement().innerHTML + '<a id="increment" title="Tekst groter"><img src="images/font_plus.jpg" alt="Groter" /></a>');
		specialsbox.getElement().set('html', specialsbox.getElement().innerHTML + '<a href="javascript:window.print();" title="Print deze pagina"><img src="images/print_icon.jpg" alt="Print" /></a>');

		// Create slider
		Slider.implement(
		{
			addIncrementButton: function (el)
			{
				$(el).addEvent('click', function (event)
				{
					this.set(this.step >= 0 ? this.step + 1 : 1);
				}.bind(this));

				return this;
			},

			addDecrementButton: function (el)
			{
				$(el).addEvent('click', function (event)
				{
					this.set(this.step - 1);
				}.bind(this));

				return this;
			}
		});

		var fontSlider = new Slider('fontHandle', 'fontKnob',
		{
			'wheel': true,
			'snap': true,
			'range': [0, 2],
			'steps': 2,
			'onChange': function (step)
			{
				$('content').setStyle('font-size', 1 + (step * 0.2) + 'em');
				Cookie.write('font-step', step, {duration: 356});
			}
		});
		fontSlider
			.addIncrementButton('increment')
			.addDecrementButton('decrement')
			.set(Cookie.read('font-step') ? Cookie.read('font-step').toInt() : 0);


	/*
	 * Highlighting for the footer links
	 */
	$('footer').getElements('a').each(function(item, index)
	{
		item.setStyle('background-image', 'none');
		$(item).addEvent('mouseover', function (event)
		{
			event.stop();
			this.highlight('#576f82');
		});
	});


	/*
	 * Special effects for the lastbyte link
	 */
	$('sub-footer').getElement('a.lb').addEvents(
	{
		'mouseover': function (event)
		{
			event.stop();
			$(this).morph('a.lb-hover');
		},
		'mouseout': function (event)
		{
			event.stop();
			$(this).morph('a.lb');
		}
	});
	
	// Zebra tables
	$$('table.zebratable').each(function (element)
	{
		new ZebraTable(element);
	});

});