var EMAIL_REGEXP = /^[A-Z0-9._%+-]+@(?:[A-Z0-9-]+\.)+[A-Z]{2,6}$/i;
var PHONE_REGEXP = /^[0-9 \(\)\-\+]+$/;

var sidebar = {

	init: function() {
	
		//ensure upload widget is hidden
		$('attachment').setOpacity(0);
	
		//create iframe to process form
		var iframe = new Element( 'iframe', { id: 'iframe', name: 'iframe', src: 'javascript:false' } );
		$('sidebar').insert( { bottom: iframe } );
	
		$('quotation_form').action = 'formProcessor.php';
		$('quotation_form').target = 'iframe';
		$('quotation_form').method = 'post';
	
		//add handlers
		$('quotation_form').observe( 'submit', sidebar.checkForm );
		$('quotation_form').getElementsBySelector('input, textarea').each( function(elm) {

			if( elm.id == 'attachment' ) return;

			elm.changed = elm.value.toLowerCase() != elm.id.toLowerCase();
			elm.originalValue = $F(elm);
			
			elm.observe( 'change', function() { elm.changed = true; if( $F(elm).blank() ) { elm.value = elm.originalValue; elm.changed = false } });
			elm.observe( 'focus', function() { if( !elm.changed ) elm.value = '' });
			elm.observe( 'blur', function() { if( !elm.changed ) elm.value = elm.originalValue });
		
		});

		$('attachment').observe( 'change', function() {
			
			$('attachmentDesc').show();
			$('upload-holder').setStyle( { height: '1px' });
		
			//var filename = $('attachment').changed && !$F('attachment').blank() ? $F('attachment').replace( /^(\/\\)?(.+)$/, '$2' )	: 'No file selected';
			var filename = $F('attachment').replace( /^.*(\/|\\)(.+)$/, '$2' ).truncate( 20 );
			$('attachmentDesc').update( filename + " - <a href='#' onclick='sidebar.removeAttachment(); return false' class='small'>Remove</a>" );
		
		} );
	
	},
	
	removeAttachment: function() {
			
		$('attachmentDesc').hide();
		$('upload-holder').setStyle( { height: '25px' });
	
		$('attachment').changed = false;
		var attachment_tmp = $('attachment').clone();
		$('attachment').remove();
		$('upload-holder').insert( attachment_tmp );
		//$('attachmentDesc').update( 'No file selected' );
	
	},
	
	checkForm: function( e ) {
	
		e.stop();
		
		//validate
		if( $F('name').blank() || !$('name').changed ) { sidebar.alert( 'Please enter your name', $('name') ); return false; }
		if( !$F('email').match( EMAIL_REGEXP ) || !$('email').changed ) { sidebar.alert( 'Please enter a valid email address, e.g. you@yourcompany.com', $('email') ); return false; }
		if( !$F('telephone').match( PHONE_REGEXP ) || !$('telephone').changed ) { sidebar.alert( 'Please enter your telephone number', $('telephone') ); return false; }
		if( $F('message').blank() || !$('message').changed ) { sidebar.alert( 'Please enter a message', $('message') ); return false; }
		
		//if we get here then all ok.. show loading screen
		$('submit_btn').setValue( 'Sending, please wait...' );
		$('formLoading').setStyle( { opacity: 0, background: '#fff url(images/loading.gif) center no-repeat' } ).show();
		new Effect.Opacity( 'formLoading', { from: 0, to: 0.6, duration: 1, afterFinish: function() { $('quotation_form').submit() } } );
		

	},
	
	//this is called by the iframe after the form has been submitted
	finished: function( status ) {
		
		//hide loading screen
		$('formLoading').setStyle( { background: '#fff' } );
		new Effect.Opacity( 'formLoading', { from: 0.6, to: 1, duration: 0.2 } );
	
		if( status == 'OK' ) {
			
			//show confirmation message
			$('submit_btn').setStyle( { visibility: 'hidden' } );
			$('formLoading').update( '<p>Thank you, we will get back to you as soon as possible.</p>' )	

		
		} else {
				
			//show error message and back link
			$('formLoading').update( '<p>Sorry there was an error, please check you have filled in all the fields. If you have attached a file please ensure it is less than 1 mb in size. <a href="#" onclick="sidebar.resetForm(); return false;">Click here</a> to go back.</p>' )	
		
		}
	
	},
	
	resetForm: function() {
	
		$('formLoading').hide();
		$('submit_btn').setValue( 'Send form' );
	
		$('iframe').remove();
		var iframe = new Element( 'iframe', { id: 'iframe', src: 'formProcessor.php' } );
		$('sidebar').insert( { bottom: iframe } );

	
	},
	
	alert: function( s, elm ) {
	
		window.alert( s );
		
		fx = new Effect.Morph( elm, { style: 'border-color: #333;' } )
		elm.focus();
		elm.observe( 'keydown', function() { fx.cancel(); elm.setStyle('border-color: #fff') } )

	}

}

document.observe( 'dom:loaded', sidebar.init );