var CONFIG = {}, Portfolio = {};

window.addEvent('domready', function()
{	
	if($('portfolio')) {
		new Portfolio({
			wrapper: $('portfolio'),
			carouselWrapper: $('portfolio').getElement('.visuals-wrapper'),
			items: $('portfolio').getElements('.visuals-wrapper li.project-item'),
			paginator: $('portfolio').getElements('ul.paginator a'),
			buttons: $('portfolio').getElements('.buttons a'),
			articles: $('portfolio').getElements('.portfolio-texts div')
		});
	}
	
	if($('text')) {
		new ReadMore({
			links: $$('a.more'),
			textWrapper: $('text'),
			text: $('text').getElements('.item'),
			close: $('text').getElements('h3 a')
		});
	}
	
	if($('maps')) {
		new Maps({
			pointers: $$('.map .pointer'),
			links: $('maps').getElements('p .pointer'),
			maps: $('googlemaps'),
			mapDirections: $('googlemaps').getElements('select#start'),
			close: $('googlemaps').getElement('a.close')
		});
	}
	
	if($('contact')) {
		var inputs = $('contact').getElements('input');
		$('contact').getElement('a').addEvent('click', function(e) {
			e.stop();
			inputs.each(function(el, i) {
				if(el.get('value') == '' || el.get('value') == 'Naam' || el.get('value') == 'E-mail of Telefoonnummer' || el.get('value') === 'Email or telephone-number' || el.get('value') === 'Name') {
					el.addClass('error');
				} else {
					el.removeClass('error');
				}
			}.bind(this));
			
			if(
			   $$('input[name=name]').get('value') == ''
			   || $$('input[name=email_phone]').get('value') == '' 
			   || $$('input[name=name]').get('value') == 'Naam'
			   || $$('input[name=email_phone]').get('value') == 'E-mail of Telefoonnummer'
			   || $$('input[name=name]').get('value') == 'Name'
			   || $$('input[name=email_phone]').get('value') == 'Email or telephone-number'
			) {
				return false;
			} else {
				var submitForm = new Request({
					url: 'contact.php',
					method: 'post',
					onRequest: function() {
						$('contact').set('html', '<img src="inc/images/ajax-loader.gif" class="loader">');
					},
					onSuccess: function(responseText) {
						$('contact').set('html', '<p class="thanks">Bedankt voor je interesse! We nemen zo spoedig mogelijk contact met je op.</p>');
					}
				});
				submitForm.send('name=' + $$('input[name=name]').get('value') + '&email_phone=' + $$('input[name=email_phone]').get('value'));
			}
		}.bind(this));
	}
	
	$$('input[type=text]').each(function(el, i) {
		var value = el.get('value');
		el.addEvents({
			focus: function(e) {
				if(el.get('value') == value) {
					el.set('value', '');
				}
			},
			blur: function(e) {
				if(el.get('value') == '') {
					el.set('value', value);
					el.addClass('error');	
				} else {
					el.removeClass('error');	
				}
			}
		});
	}.bind(this));
	
	var scrollToContact = new Fx.Scroll(document.window);
	var contactLinks = $$('.contactLinks');
	contactLinks.each(function(el, i) {
		el.addEvent('click', function(e) {
			e.stop();
			scrollToContact.toElement($$('.scroll-contact')[0]);
		}.bind(this));
	});
		
});



ReadMore = new Class({
	options: {
		links: null,
		textWrapper: null,
		text: null,
		close: null
	},
	Implements: Options,
	
	initialize: function(options)
	{
		this.setOptions(options);
		this.options.setHeightFx = new Fx.Tween(this.options.textWrapper, {duration: 300});
		this.options.scrollToText = new Fx.Scroll($(window.document), {duration: 300, link: 'cancel'});
		this.options.textWrapper.setStyle('height', 0).fade('hide');
		this.options.text.fade('hide').setStyle('display', 'none');
		
		window.addEvent('resize', function() {
			this.options.width = $(document.body).getSize().x;
			if(this.options.width <= 800) {
				$$('a.scroll-more')[0].inject($('text'), 'before');
			} else {
				$$('a.scroll-more')[0].inject($$('a.scroll-cols')[0], 'after');	
			}
		}.bind(this)).fireEvent('resize');
		
		this.addEvents();
	},
	
	addEvents: function() {
		this.options.links.each(function(el, i) {
			el.addEvent('click', function(e) {
				e.stop();
				this.toggleMoreInfo(el.get('rel'));
				this.fadeInactive(el.get('rel'));
				this.options.scrollToText.toElement($$('a.scroll-more')[0]);
			}.bind(this));
		}.bind(this));
		
		this.options.close.each(function(el, i) {
			el.addEvent('click', function(e) {
				e.stop();
				this.options.scrollToText.toElement($$('a.scroll-cols')[0]);
				this.hideMoreInfo();
			}.bind(this));
		}.bind(this));
	},
	
	fadeInactive: function(rel) {
		this.options.links.each(function(el) {
			if(el.get('rel') == rel) {
				el.fade(1);
			} else {
				el.fade(0.6);
			}
		}.bind(this));
	},
	
	toggleMoreInfo: function(rel) {
		this.options.text.fade('hide').setStyle('display', 'none');
		this.options.text.each(function(el, i) {
			if(el.hasClass(rel)) {
				el.fade('show').setStyle('display', 'block');
				this.setMoreInfoHeight(el.getHeight() + 30);
			}
		}.bind(this));
	},
	
	hideMoreInfo: function() {
		this.setMoreInfoHeight(0);		
		this.options.textWrapper.fade('out');
		this.options.links.fade('in');
	},
	
	setMoreInfoHeight: function(height) {
		this.options.textWrapper.fade('in');
		this.options.setHeightFx.start('height', height);
	}
});



Maps = new Class({
	options: {
		pointers: null,
		links: null,
		maps: null,
		mapDirections: null,
		close: null
	},
	Implements: Options,
	
	initialize: function(options)
	{
		this.setOptions(options);
		this.options.pointers.fade('hide');
		this.options.setHeightFx = new Fx.Tween(this.options.maps, {duration: 200});
		this.options.scrollToText = new Fx.Scroll($(window.document), {duration: 500, link: 'cancel'});
		this.options.maps.setStyle('height', 0).fade('hide');
		
		this.addEvents();
	},
	
	addEvents: function() {
		this.options.links.each(function(el, i) {
			var point = el.get('rel');
		 	el.addEvents({
				mouseenter: function(e) {
					this.options.pointers.each(function(el) {
						if(el.hasClass(point)) {
							el.fade('in');
						}
					}.bind(this));
				}.bind(this),
				mouseleave: function(e) {
					this.options.pointers.fade('out');
				}.bind(this),
				click: function(e) {
					this.setMarkers(el.get('rel'));
				}.bind(this)
			});
		 }.bind(this));
		 
		 this.options.close.addEvent('click', function(e) {
			 e.stop();
			 this.hideMaps();
		 }.bind(this));
	},
	
	setMarkers: function(rel) {
		if(rel == 'a') {
			rel = 'b';
		}
		this.options.mapDirections.getElement('option.' + rel).set('selected', true);
		calcRoute();
		this.toggleMaps();
	},
	
	toggleMaps: function() {
		this.options.setHeightFx.start('height', 535);
		this.options.maps.fade('in').setStyle('display', 'block');
		this.options.scrollToText.toElement($$('.scroll-maps')[0]);
	},
	
	hideMaps: function() {
		this.options.scrollToText.toElement($$('.scroll-route')[0]);
		this.options.setHeightFx.start('height', 0);
	}
});




Portfolio = new Class({
	options: {
		wrapper: null,
		carouselWrapper: null,
		items: null,
		paginator: null,
		buttons: null,
		articles:  null,
		activeElement: 0
	},
	Implements: Options,
	
	initialize: function(options)
	{
		this.setOptions(options);
		this.options.slideFx = new Fx.Scroll(this.options.carouselWrapper, {'duration': 500, 'link': 'cancel'});
		this.options.scrollToText = new Fx.Scroll($(window.document), {duration: 500, link: 'cancel'});
		
		this.options.verticalActive = 0;
		
		this.options.articles.each(function(el, i) {
			if(i > 0) {
				el.fade('hide').setStyle('display', 'none');
			}
		}.bind(this));
		
		var paginatorWidth = 0;
		this.options.paginator.each(function(el) {
			paginatorWidth = paginatorWidth + el.getWidth() + 10;
		}.bind(this));
		
		this.options.paginator.getParent('ul').setStyles({
			'display': 'block',
			'width': Math.floor(paginatorWidth) + 10
		});
		
		this.addEvents();
		
		this.setSubNavigation();
	},
	
	addEvents: 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.items.length - 1;
					}
				} else if(el.hasClass('next')) {
					++this.options.activeElement;
					if(this.options.activeElement > this.options.items.length - 1) {
						this.options.activeElement = 0;
					}
				}
				this.setPaginator();
			}.bind(this));
		}.bind(this));
		
		this.options.paginator.each(function(el, i) {
			el.addEvent('click', function(e) {
				e.stop();
				this.options.activeElement = i;
				this.setPaginator();
			}.bind(this));
		}.bind(this));
		
		this.options.items.each(function(el, i) {
			el.addEvents({
				mouseover: function(e) {
					if(Browser.ie) {
						el.getElement('.subbuttons').fade('show');
					} else {
						el.getElement('.subbuttons').fade('in');
					}
				}.bind(this),
				mouseleave: function(e) {
					if(Browser.ie) {
						el.getElement('.subbuttons').fade('hide');
					} else {
						el.getElement('.subbuttons').fade('out');
					}
				}.bind(this)
			});
		}.bind(this));
	},
	
	slide: function() {
		this.options.slideFx.toElement(this.options.items[this.options.activeElement]);
	},
	
	setPaginator: function() {
		this.options.scrollToText.toElement($$('a.scroll-portfolio')[0]);
		this.options.paginator.removeClass('active');
		
		this.options.paginator[this.options.activeElement].fade(0.2);
		(function() {
			this.options.paginator[this.options.activeElement].addClass('active').fade('in');
		}.bind(this)).delay(300);
		this.slide();
		this.setActiveArticle();
	},
	
	setActiveArticle: function() {
		this.options.articles.fade('out').setStyle('display', 'none');
		this.options.articles[this.options.activeElement].fade('in').setStyle('display', 'block');
		
		var setArticleHeight = new Fx.Tween(this.options.articles[this.options.activeElement].getParent('article'), {duration: 200, link: 'cancel'});
		setArticleHeight.start('height', this.options.articles[this.options.activeElement].getHeight());
	},
	
	setSubNavigation: function() {
	
		$$('.subbuttons').fade('hide');
		
		this.options.items.each(function(el, i) {
			var verticalNavigation = el.getElements('.subbuttons a');
			verticalNavigation.each(function(el, i) {
				el.addEvent('click', function(e) {
					e.stop();
					var vertical = new Fx.Scroll(this.options.items[this.options.activeElement].getElement('.subwrapper .sub-project'), {duration: 400, link: 'cancel'});
					var verticalItems = this.options.items[this.options.activeElement].getElements('li');
					if(el.hasClass('up')) {
						--this.options.verticalActive;
						if(this.options.verticalActive < 0) {
							this.options.verticalActive = verticalItems.length - 1;
						}
					} else if(el.hasClass('down')) {
						++this.options.verticalActive;
						if(this.options.verticalActive > verticalItems.length - 1) {
							this.options.verticalActive = 0;
						}
					}
					vertical.toElement(verticalItems[this.options.verticalActive]);
				}.bind(this));
			}.bind(this));
		}.bind(this));
	}
});

var map;
var directionDisplay;
var directionsService;
var stepDisplay;
var markerArray = [];

function initialize() {
// Instantiate a directions service.
directionsService = new google.maps.DirectionsService();

// Create a map and center it on Manhattan.
var manhattan = new google.maps.LatLng(52.226994, 5.175435);
var myOptions = {
  zoom: 13,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  center: manhattan
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

// Create a renderer for directions and bind it to the map.
var rendererOptions = {
  map: map
}
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions)

// Instantiate an info window to hold step text.
stepDisplay = new google.maps.InfoWindow();
}

function calcRoute() {

// First, remove any existing markers from the map.
for (i = 0; i < markerArray.length; i++) {
  markerArray[i].setMap(null);
}

// Now, clear the array itself.
markerArray = [];

// Retrieve the start and end locations and create
// a DirectionsRequest using WALKING directions.
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var request = {
	origin: start,
	destination: end,
	travelMode: google.maps.DirectionsTravelMode.DRIVING
};

// Route the directions and pass the response to a
// function to create markers for each step.
directionsService.route(request, function(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
	var warnings = document.getElementById("warnings_panel");
	warnings.innerHTML = "<b>" + response.routes[0].warnings + "</b>";
	directionsDisplay.setDirections(response);
	showSteps(response);
  }
});
}

function showSteps(directionResult) {
// For each step, place a marker, and add the text to the marker's
// info window. Also attach the marker to an array so we
// can keep track of it and remove it when calculating new
// routes.
var myRoute = directionResult.routes[0].legs[0];

for (var i = 0; i < myRoute.steps.length; i++) {
  var marker = new google.maps.Marker({
	position: myRoute.steps[i].start_point, 
	map: map
  });
  attachInstructionText(marker, myRoute.steps[i].instructions);
  markerArray[i] = marker;
}
}

function attachInstructionText(marker, text) {
google.maps.event.addListener(marker, 'click', function() {
  // Open an info window when the marker is clicked on,
  // containing the text of the step.
  stepDisplay.setContent(text);
  stepDisplay.open(map, marker);
});
}