/**
 * Wegener aanbiedingen site form (wasf)
 * 
 * This form can be embedded in external sites using the following implementation:
 * 
 * <script type="text/javascript" src="http://aanbiedingensite.4worx.com/assets/js/wasf.js"></script>
 * <script type="text/javascript">
 * var myForm = _wasf.getForm();
 * myForm.render();
 * </script>
 * 
 * The script renders a form with default layout, which can be disabled configuration wise.
 * The following parameters can be changed in usage
 * 
 * Form related:
 * id				string	the ID to use for form identification
 * method			string	the method to use for submitting the form
 * action			string	the action to go to on submit
 * 
 * Text related:
 * title			string	the title to print above the input field
 * description		string	the description to print above the input field
 * inputId			string	the name of the input field, this value will hold the search value on submit
 * submitBtnText	string	the text to print on the submit button
 * 
 * Layout related:
 * noStyles			boolean When set to true, no inline styles will be generated
 * fontFamily		string	Set the font family to use when using inline styles
 * fontSize			string	Set the font size when using inline styles
 * inputWidth		string	Set the input width when using inline styles
 * 
 * Color related settings:
 * primaryColor		string	Set the primary color when using inline styles
 * secondaryColor	string	Set the secondary color when using inline styles
 * 
 * Here an example using no styles and submitting to another page
 * <example>
 * <script type="text/javascript" src="http://aanbiedingensite.4worx.com/assets/js/wasf.js"></script>
 * <script type="text/javascript">
 * var myForm = _wasf.getForm();
 * myForm.action = '/posttopage.html';
 * myForm.noStyles = true;
 * myForm.render();
 * </script>
 * <example>
 * 
 * Here an example with changed text and different colors
 * <example>
 * <script type="text/javascript" src="http://aanbiedingensite.4worx.com/assets/js/wasf.js"></script>
 * <script type="text/javascript">
 * var myForm = _wasf.getForm();
 * myForm.primaryColor = 'green';
 * myForm.secondaryColor = '#cccccc';
 * myForm.description = 'Start searching now!';
 * myForm.render();
 * </script>
 * <example>
 */
var _wasf={
	getForm: function()
	{
		var form={
			version: '1.0',
			id: '_wasfId',
			method: 'POST',
			action: '',
			title: '',
			description: 'De grootste etalage van ...',
			inputId: 'q',
			submitBtnText: 'Zoek advertentie',
			noStyles: false,
			primaryColor: '#0076ba',
			secondaryColor: '#fff',
			fontFamily: 'Tahoma,Verdana,Arial,Helvetica,sans-serif',
			fontSize: '14px',
			inputWidth: '200px',
			
			/**
			 * Render the form using the set parameters
			 */
			render: function()
			{
				document.write(
					'<form id="'+this.id+'" name="'+this.id+'" method="'+this.method+'" action="'+this.action+'">'+
					'<label>'+this.title+'</label><br />'+
					'<span>'+this.description+'</span><br />'+
					'<input type="text" name="'+this.inputId+'" value="" />'+
					'<input type="submit" value="'+this.submitBtnText+'" />'+
					'</form>'
				);
				if (this.noStyles == false)
				{
					var f = document.getElementById(this.id);
					var l = f.firstChild;
					var t = f.firstChild.nextSibling.nextSibling;
					var i = f.lastChild.previousSibling;
					var s = f.lastChild;
					
					f.style.fontFamily = this.fontFamily;
					f.style.fontSize = this.fontSize;
					t.style.color = this.primaryColor;
					t.style.lineHeight = '18px';
					i.style.width = this.inputWidth;
					i.style.color = this.primaryColor;
					i.style.padding = '2px';
					s.style.backgroundColor = this.primaryColor;
					s.style.color = this.secondaryColor;
					s.style.padding = '2px';
				}
			}
		};
		return form;
	}
};