// functions that dont's require the DOM
compass_texts = setTexts();
preload();

/**
 *	These function require the DOM to be loaded
 *
 */
window.addEvent('domready', function() {
	setFonts();
	statements();

	// compass page
	if ( $chk( $('kompas') ) ) {
		changeCompassBlock('g1_kompas');
		compass();
		adjust();
	}

	// werkwijze
	if ( $chk( $('trajectmodel') ) ) {
		trajectmodel();
	}

	// menu
	menuAnimation();
	menuCurrent();
	
	// form
	if ( $chk( $('contact_form') ) )
		validate();
});

/**
 *	Adjusts the content on the first page
 *
 */
function adjust() {
	var h	= $('col1').getStyle('height');
	var mt	= $('blocks').getStyle('margin-top');

	// fix the margin-top
	var fixed = mt.toInt() + (605 - h.toInt());
	
	$('blocks').setStyle('margin-top', fixed);
}

/** 
 *  Takes care of the form validation
 *
 */
function validate() {
	$('button').addEvent('click', function(e) {
		e.stop();
		
		// clean erros
		$$('.notice_input').each( function(e) {
			e.removeClass('notice_input');
		});

		$$('div.notice').each( function(e) {
			e.destroy();
		});

		$('message').setStyle('display', 'none');
		
		// revalidate
		$('contact_form').set('send', {
			method: 'post',
			onSuccess: function(responseText) {
				results = JSON.decode(responseText);
	
				// mail was send
				if (results.send == 1) {
					location.href = ab_url + '/verzonden';
				} else {
					// validation was ok, but the mail was not send
					if ( results.messages.length == 0 ) {
						var message = 'Het formulier kon om technische redenen niet verzonden worden. Probeer het later nogmaals of neem telefonisch contact met ons op. Onze excuses voor het ongemak';
					} else {
						// there were errors in the form which need to be corrected
						var message = 'Niet alle velden zijn volledig of juist ingevuld.';

						for (i in results.messages ) {
							
							var error = new Element('div', {
								'class' : 'notice message',
								'text'	: results.messages[i]
							});

							error.inject($(i), 'after');
							$(i).addClass('notice_input');
						}
					}
				}

				// set the top feedback
				$('message').addClass('notice');
				$('message').set('text', message);
				$('message').setStyle('display', 'block');
			}
		}).send();
	});
}


/**
 *	Preloads images
 *
 */
function preload() {
	new Request.JSON({
		url: ab_path +  'preload.php',
		onSuccess: function(files) {
			
			// prefix
			for(i=0; i<files.length; i++) {
				files[i] = ab_path + files[i];
			}

			new Asset.images(files,  {
				onComplete : function() {
					//alert('preload completed');
				}
			});
		}
	}).send();
}

/**
 *	Render fonts using ReFont
 *
 */
function setFonts() {
	refont.path = '../assets/fonts/';
	refont.url	= ab_path + 'includes';

	refont.replace('#refont_contact', 'Triplex Serif Bold');
	refont.replace('h1', 'Triplex Serif Bold');
	refont.replace('#col1 h2', 'Triplex Serif Light');
	refont.replace('#col1 h3', 'Triplex Serif Light');
}

function changeCompassBlock(id) {
	// check if the id exists
	if ( !$chk( $(id) ) )
		return false;

	var type	= id.substring(0,1);
	var level	= id.substring(1,2);
	var color	= getColor(type + level);
	var path	= ab_path + 'assets/images/kompas/';
	var texts	= getTexts(type, level);

	// set new text
	$('compass_block_content').set('text', texts.bottom);

	// change background colors
	$$('#blocks .change').each( function(e) {
		e.setStyle('background', color);
	});
	
	// right part
	if (level == 0) {
		$$('#blocks .right').each( function(e) {
			e.setStyle('visibility', 'hidden');
		});

		var level = 1;
	} else {
		$('refont_right').set('text', texts.right);
		refont.replace('#refont_right', 'Triplex Serif Bold');
		$('icon_right').setAttribute('src', path + type + level + '_subicon.gif');
		

		$$('#blocks .right').each( function(e) {
			e.setStyle('visibility', 'visible');
		});
	}

	$('refont_left').set('text', texts.left);
	refont.replace('#refont_left', 'Triplex Serif Bold');
	$('icon_left').setAttribute('src', path + type + level + '_icon.gif');
}

// model of quality workings
function trajectmodel() {
	$$('area').each( function(e) {
		e.addEvent('click', function(event) {
			// don't follow the href
			event.stop();

			// set the intro invisible
			$('fase_intro').setStyle('display', 'none');
			
			$$('area').each( function(e) {
				var id		= e.getProperty('id');
				var id_mo	= id + '_mo';	 
				
				$(id_mo).setStyle('display', 'none');
			});
			
			// little redundant for now
			var id		= e.getProperty('id');
			var id_mo	= id + '_mo';

			$(id_mo).setStyle('display', 'block');	
		});
	});

	$('fase_intro').setStyle('display', 'block');	
}

// compass workings
function compass() {
	$$('area').each( function(e) {
		e.addEvent('click', function(event) {
			// don't follow the href
			event.stop();
			changeCompassBlock( e.getProperty('id') );
		});

		e.addEvent('mouseover', function() {
			var id = e.getProperty('id');
			
			if ( id.substring(1,2) != 0 )
				$('kompas').setProperty('src', ab_path + 'assets/images/kompas/' + id.substring(0,2) + '.jpg');
		});

		e.addEvent('mouseout', function() {
			var id = e.getProperty('id');

			if ( id.substring(1,2) != 0 )
				$('kompas').setProperty('src', ab_path + 'assets/images/kompas_leeg.png');
		});
	});
}

/**
 *	loads the menu's
 *
 */
function menuAnimation() {
	$$('#menu li.top').each( function(e) {
		e.addEvents({
			'mouseover' : function() {
				id = e.getAttribute('id');

				// only show the current menu, hide the other {
				$$('#menu li.top').each( function(e) {
					if (id != e.getAttribute('id'))
						e.getElement('ul').fade('out');
				});
				
				// check if the menu was loaded before
				if (e.getElement('ul').getStyle('display') != 'block') {
					e.getElement('ul').fade('hide');
					e.getElement('ul').setStyle('display', 'block');
				}
				
				e.getElement('ul').fade('in');
			}
		});
	});
}

/**
 *	loads the menu's
 *
 */
function menuCurrent() {
	if ( !$chk( $$('.selected') ) )
		return false;

	$$('.selected').each( function(e) {
		var menu = e.getParent('ul'); 

		menu.setStyle('display', 'block');
		menu.fade('show');
	});
}


/**
 *	The colorscheme for the compass
 *
 */
function getColor(id) {
	colors = {
		o3 : 'fad97a',
		o2 : 'facd50',
		o1 : 'f9c126',
		o0 : 'f9c126',
		b3 : '82cccb',
		b2 : '33b0b2',
		b1 : '009d9e',
		b0 : '009d9e',
		a3 : '65bca9',
		a2 : '33aa8e',
		a1 : '009371',
		a0 : '009371',
		g3 : 'adcd82',
		g2 : '8bb84f',
		g1 : '6ea722',
		g0 : '6ea733'
	};
	
	return '#' + colors[id];
}

/**
 *	Set the right text in the right fields
 *
 */
function setTexts() {
	new Request.JSON({
		url: ab_url + '/het-kompas',
		async: false,
		method: 'get',
		onSuccess: function(texts) {
			compass_texts = texts;
		}
	}).send();

	return compass_texts;
}

/**
 *	Set the right text in the right fields
 *
 */
function getTexts(type, level) {
	// convert
	if (level == 0)
		level = 4;

	for (i in compass_texts ) {
		if (i == type + level)
			var text = compass_texts[i];
	}

	return text;
}

/**
 *	Sets the current statement and changes it periodically
 *	
 */
function statements() {
	new Request.JSON({
		url: ab_url + '/statements',
		method: 'get',
		onSuccess: function(statements) {
			// init
			refreshStatements(statements, 0);
			
			// reperform
			(function() {
				refreshStatements(statements, 1000)
			}).periodical(10000);
		}
	}).send();
	
	// redirect
	$('quote').addEvent('click', function() {
		location.href = ab_url + '/statements/ ' + $('quote').getElement('span.anchor').getProperty('id');
	});
}

/**
 *	Sets and refreshes the statements on top
 *
 */
function refreshStatements(statements, delay) {
	var random = $random(1, statements.length - 1);
	
	$('quote').fade('out');

	var reveal = function() {
		id			= statements[random]['id'];
		statement	= statements[random]['statement'];

		$('quote').set('html', '<span class="anchor" id="' + id + '">' + statement + '</span>');
		$('quote').fade('in');
	}
	reveal.delay(delay);
}