/*global YUI*/
YUI( {gallery: 'gallery-2010.05.12-19-08'} ).use( 'gallery-overlay-extras', 'io-form', function(Y) {
	var overlay,
		formHTML = '<table class="mailform" style="margin-bottom: 15px;"><tr><td>Naam</td><td><input type="text" size="35" name="name" /></td></tr><tr><td>E-mail adres</td><td><input type="text" size="35" name="email" /></td></tr><tr><td class="grey">Organisatie</td><td><input type="text" size="35" name="company" /></td></tr><tr><td class="grey">Telefoon</td><td><input type="text" size="35" name="tel" /></td></tr><tr><td class="grey">Adres</td><td><textarea name="q" rows="2" cols="25"></textarea></td></tr><tr><td class="grey">Opmerking</td><td><textarea name="remarks" rows="3" cols="25"></textarea></td></tr><tr><td><input type="submit" id="submitForm" value="Versturen" /></td><td class="grey">(de grijs gemarkeerde velden zijn optioneel)</td></tr></table>';
	
	// -- thumbnails --
	Y.delegate(
		'click',
		function () {
			var image = new Image();
			image.src = this.get( 'src' ).replace( /thumb_/, '' );
			image.onload = function () {
				showImageOverlay( image );
			}
		},
		'body',
		'img.thumb'
	);
	
	// -- youtube --
	Y.delegate(
		'click',
		function () {
			overlay.set( 'centered', true )	// reset to force recalc of center point viewport
				.set( 'height', '650px' )
				.set( 'width', '850px' )
				.set( 'centered', true )	// reset to force recalc of center point viewport
				.set( 'bodyContent', '<object width="808" height="555"><param name="movie" value="http://www.youtube.com/v/' + this.get('name') + '?fs=1&amp;hl=nl_NL&amp;hd=1&amp;&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/' + this.get('name') + '?fs=1&amp;hl=nl_NL&amp;hd=1&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="808" height="555"></embed></object>' )
				.show();
		},
		'body',
		'img.youtube'
	);
	
	// -- screenshot --
	Y.delegate(
		'click',
		function () {
			var image = new Image();
			image.src = 'images/alis/screenshots/' + this.get('name');
			image.onload = function () {
				showImageOverlay( image );
			}
		},
		'body',
		'img.screenshot'
	);
	
	// -- informatie pakket --
	if ( Y.one('a#infopakket' ) ) {
		Y.one('a#infopakket' ).on( 'click', function () {
			overlay
				.set( 'height', '510px' )
				.set( 'centered', true )	// reset to force recalc of center point viewport 
				.set( 'bodyContent', '<form name="mailForm"><input type="hidden" name="request" value="infopakket" /><h2>Informatiepakket aanvragen</h2><p>Een informatiepakket bevat de Alis brochure, meerdere praktijkcases en artikelen uit vakbladen.<br />Als u het informatiepakket fysiek wilt ontvangen, vul dan uw adresgegevens in.</p>' + formHTML + '</form>' )
				.show();
			
			registerSubmit( 
				'mailForm',
				function () {
					overlay
						.set( 'height', '145px' )
						.set( 'bodyContent', '<p>Uw aanvraag voor een informatiepakket is verwerkt.<br />We sturen het u spoedig toe.</p>' );
				}
			);
		} );
	}
	
	// -- demonstratie --
	if ( Y.one('a#demonstratie' ) ) {
		Y.one('a#demonstratie' ).on( 'click', function () {
			overlay
				.set( 'height', '460px' )
				.set( 'centered', true )	// reset to force recalc of center point viewport 
				.set( 'bodyContent', '<form name="mailForm"><input type="hidden" name="request" value="demonstration" /><h2>Demonstratie aanvragen</h2><p>Als u onderstaand formulier invult, nemen we spoedig contact met u op om een demonstratie te plannen.</p>' + formHTML + '</form>' )
				.show();
			
			registerSubmit(
				'mailForm',
				function ( ) {
					overlay
						.set( 'height', '145px' )
						.set( 'bodyContent', '<p>Uw aanvraag voor een demonstratie is verwerkt.<br />We nemen spoedig contact met u op om een afspraak te plannen.</p>' );
				}
			);
		} );
	}
	
	// -- contact form --
	if ( Y.one('form[name="contactForm"]' ) ) {
		registerSubmit( 'contactForm', function () {
			Y.one('form[name="contactForm"]').reset();
			overlay
				.set( 'height', '120px' )
				.set( 'bodyContent', '<p>Uw aanvraag is verwerkt. We nemen spoedig contact met u op.</p>' )
				.show();
		} );
	}
	
	Y.on( 'domready', function () {
		// -- add dialog container to DOM --
		Y.one( 'body' ).append( 
			'<div id="impressionDialog"><a id="hideOverlay" class="noborder" style="color: white; font-size: .9em; cursor: pointer;">Sluit scherm</a></div>' 
		);
		
		overlay = new Y.Overlay( {
			srcNode		: '#impressionDialog',
			width       : '500px',
	        height      : '600px',
	        zIndex      : 100,
	        centered    : true,
	        constrain   : true,
	        render      : true,
	        visible     : false,
	        plugins     : [
				{ fn: Y.Plugin.OverlayModal },
				{ fn: Y.Plugin.OverlayKeepaligned },
				{ fn: Y.Plugin.OverlayAutohide }
	        ]
	    } );
		
		Y.one( '#hideOverlay' ).on( 'click', Y.bind(overlay.hide, overlay) );
	} );
	
	
	
	
	/**
	 * Display specified image in a properly formatted modal dialog overlay
	 * 
	 * @param	Image	Image object to show
	 */
	function showImageOverlay ( image ) {
		overlay.set( 'centered', true )	// reset to force recalc of center point viewport 
			.set( 'width', (image.width*1.1) + 'px' )	// width & height have 10% margin
			.set( 'height', (image.height*1.2) + 'px' )
			.set( 'centered', true )	// reset to force recalc of center point viewport
			.set( 'bodyContent', '<img src="' + image.src + '" />' )
			.show();
	}
	
	
	
	/**
	 * Register form submit
	 * 
	 * @param	string	name of form to register success callback for
	 * @param	object	success callback function
	 */
	function registerSubmit ( formName, succesCallback ) {
		var requestForm = Y.one('form[name="' + formName + '"]'); 
		
		requestForm.on( 'submit', function ( e ) {
			var nameField = requestForm.one( 'input[name="name"]' ),
				emailField = requestForm.one( 'input[name="email"]' ),
				blockSubmit = false;
			
			// -- check required fields --
			if ( nameField.get('value') == '' ) {
				nameField.setStyle( 'border', '1px solid red' );
				blockSubmit = true;
			} else {
				nameField.setStyle( 'border', '' );
			}
			if ( emailField.get('value') == '' ) {
				emailField.setStyle( 'border', '1px solid red' );
				blockSubmit = true;
			} else {
				emailField.setStyle( 'border', '' );
			}
			
			if ( blockSubmit ) {
				e.preventDefault();
				return;
			}
			
			// -- submit request --
			Y.io(
				'util/sendmail.php',
				{
					method: 'POST',
					headers : { 'If-Modified-Since': '0' },
					form: { id: requestForm },
					on: {
						success: succesCallback,
						failure: function () {
							alert( 'Er is een probleem opgetreden bij het versturen van uw gegevens. Probeert u het nogmaals' );
						}
					}
				}
			);

			e.preventDefault();
		} );
	}
	
} );