window.addEvent('domready', function() {

	// logo home
	var logoHome = $('content').getElement('.logo-home');

	if (logoHome) {
		var intro = logoHome.getElement('.intro');
		intro.fx = new Fx.Slide(intro);
		intro.fx.hide();

		logoHome.addEvents({
			'mouseenter': function() {
				intro.fx.slideIn();
			},
			'mouseleave': function() {
				intro.fx.slideOut();
			}
		});
	}

	// project form filter
	if ($('form-filter')) {
		var form   = $('form-filter');
		var select = form.getElement('select');
		form.getElement('input[type="submit"]').destroy();

		select.addEvent('change', function(e) {
			window.location = '/projecten/filter/' + select.value;
		});
	}

	// projects
	if ($('projects')) {
		var projects = $$('#projects li.project');
		projects.each(function(project, index) {
			if (index & 1) {
				project.addClass('odd');
			}

			project.addEvents({
				'click': function() {
					window.location = project.getElement('a').href;
				},
				'mouseenter': function() {
					project.addClass('hover');
				},
				'mouseleave': function() {
					project.removeClass('hover');
				}
			});
		});
	}

	// project content
	if ($(document.body).hasClass('project')) {
		var infoLink = new Element('div', {
			'id': 'info-link',
			'html': '<a href="#">info</a>',
			'events': {
				'mouseenter': function() {
					this.addClass('hover');
				},
				'mouseleave': function() {
					this.removeClass('hover');
				}
			}
		}).inject($('content').getElement('.project-images'), 'after');

		var sidebarLeft  = $('sidebar-left');
		var sidebarRight = $('sidebar-right');

		var sidebarLeftFx  = new Fx.Slide(sidebarLeft);
		var sidebarRightFx = new Fx.Slide(sidebarRight);

		sidebarLeftFx.hide();
		sidebarRightFx.hide();

		infoLink.getElement('a').addEvent('click', function(e) {
			sidebarLeftFx.toggle();
			sidebarRightFx.toggle();

			this.toggleClass('show');

			infoLink.toggleClass('current');

			e.stop();
		});

		// project images
		var projectImages = $$('body.project .project-images');

		projectImages.each(function(projectImage) {
			projectImage.addClass('slideshow');

			// create images menu
			var imagesMenu = new Element('div', {
				'id': 'images-menu',
				'html': '<ul><li><span>Foto:</span></li></ul>'
			}).inject(projectImage, 'after');

			var images = projectImage.getElements('img');
			projectImage.empty();

			images.each(function(image, index) {

				// put image into div.image
				image.imageDiv = new Element('div', {
					'class': 'image'
				}).inject(projectImage);

				image.inject(image.imageDiv);

				image.fxFade = new Fx.Tween(image.imageDiv);

				// create link to show image
				image.menuItem = new Element('li', {
					'html': '<a href="#">' + (index + 1) + '</a>'
				}).inject(imagesMenu.getElement('ul'));

				image.menuItem.addEvent('click', function(e) {

					// hide the current image
					if (image != projectImage.currentImage) {

						// remove current class on menu item
						projectImage.currentImage.menuItem.currentMenuItem.removeClass('current');

						// fade out old image
						projectImage.currentImage.fxFade.chain(function() {
							this.element.removeClass('show');
						});
						projectImage.currentImage.fxFade.start('opacity', 1, 0);

						// fade in new current image
						projectImage.currentImage = image;
						projectImage.currentImage.fxFade.set('opacity', 0);
						projectImage.currentImage.imageDiv.addClass('show')
						projectImage.currentImage.fxFade.start('opacity', 0, 1);

						// set current class on menu item
						projectImage.currentImage.menuItem.currentMenuItem = image.menuItem;
						projectImage.currentImage.menuItem.currentMenuItem.addClass('current');
					}

					e.stop();
				});

				// show first image on startup
				if (index == 0) {
					projectImage.currentImage = image;
					projectImage.currentImage.imageDiv.addClass('show');

					projectImage.currentImage.menuItem.currentMenuItem = image.menuItem;
					projectImage.currentImage.menuItem.currentMenuItem.addClass('current');
				}
			});
		});
	}
});