/*
function displayAttentionMessage(obj)
{
	var msg_placeholder = document.getElementById('attention_message');
	var messages = {
		'colon hydrotherapy': "Preferably, before comming to your appointment, please download, fill in and email back to us the <a href='#cq'>client questionnaire</a>. This little home work will save you some time during the appointment."
	};
	var attentionClass = "attention";
	var name = obj.value.toLowerCase();
	
	if(messages[name] && obj.checked){
		obj.className += " "+attentionClass;
		msg_placeholder.innerHTML = messages[name];
	}else{
		if(obj.className.indexOf(attentionClass)!= -1){
			//returns the part of a class value without "attention" in it
			obj.className = obj.className.substr(0, obj.className.indexOf(attentionClass));
		}
		msg_placeholder.innerHTML = "";
	}
}
*/

var Site = {
		req_fields: new Array(),
		errors: new Array(),
		cur_el_val : "",
		submission_tracker: '', //used to make sure that only one field submission occures (onchange || keydown+delay )
		//calendarObjForForm:'',
		
		
		start: function()
		{
			
			//create new divpopup callender
			//Site.calendarObjForForm = new DHTMLSuite.calendar({minuteDropDownInterval:10,numberOfRowsInHourDropDown:5,isDragable:false,displayTimeBar:false}); 
			Site.imgPreload("../images/ajax-loader.gif");
			Site.imgPreload("../images/info-icon.gif");
			Site.imgPreload("../images/bubble.png");
			document.forms[0].reset();
			
			Site.makeUnsubmittable(); //disable form submit button
			
			$('colon_hydrotherapy').addEvent('click', function(e)
			{
				el = $$('.questionnaire')[0];		
				if(el.getStyle('display') == 'none')
				{
					el.setStyle('display','block');
					/*el.setHTML('<label for="questionaire">Upload Questionaire</label><input name="questionaire" type="file"/><input type="hidden" name="MAX_FILE_SIZE" value="100000" /><span class="attention">Colon Hydrotherapy treatment requires that you fill in the client questionnaire prior to your appointment. Please download, fill in and upload back to us the <a href="#cq">client questionnaire</a>. This little home work will save you some time during the appointment.</span>');	*/			
				}else{
					el.setStyle('display','none');
					/*el.setHTML('');*/
				}
				/*$('footer_wrapper').setStyle('position', 'absolute');*/
			});
			
			$$('.req .form_element').each(function(el, i)
			{
				Site.req_fields.push(el.id);
			});

			var form_elements = $$('.form_element');
			
			form_elements.each(function(element, i)
			{				
				Site.addNotificationIcons(element);
				
				element.addEvent('focus', function(e)
				{
					
                  /*
				  	if(Site.errors.test(element.id))
					{
						Site.submitField(element);				
					}
				  */
					
					Site.submission_tracker = '';
					Site.cur_el_val = element.value;
				});
				
				element.addEvent('keydown', function(e)
				{ 
					e = new Event(e);
					if((e.key != 'tab' ) ){ //&& (e.key != 'enter')
						var myTimer = (Site.submitField.pass(element)).delay(1000);
						element.addEvent('keydown', function(e){
							myTimer = $clear(myTimer);
						});
					}
					
					if((e.key == 'enter') ){
					
						myTimer = $clear(myTimer);
						Site.submitField.pass(element).delay(100);
					}
					
				});

				element.addEvent('blur', function(e)
				{
					if(element.value != '')
					{ 
						if((element.value != Site.cur_el_val) || Site.errors.test(element.id))
						{
							e = new Event(e).stop();
							if(Site.submission_tracker != element.id){ // if submission_tracker is defined - field has already been submitted 
								Site.submitField(element);
							}
						}
					}
				});
			});
		},
		
		/*pickDate: function(buttonObj, inputObject)
		{
			Site.calendarObjForForm.setCalendarPositionByHTMLElement(inputObject,0,inputObject.offsetHeight+2);	// Position the calendar right below the form input
			//calendarObjForForm.setInitialDateFromInput(inputObject,'yyyy-mm-dd hh:ii');	// Specify that the calendar should set it's initial date from the value of the input field.
			Site.calendarObjForForm.addHtmlElementReference('date',inputObject);	// Adding a reference to this element so that I can pick it up in the getDateFromCalendar below(myInput is a unique key)
			if(Site.calendarObjForForm.isVisible()){
				Site.calendarObjForForm.hide();
			}else{
				Site.calendarObjForForm.resetViewDisplayedMonth();	// This line resets the view back to the inital display, i.e. it displays the inital month and not the month it displayed the last time it was open.
				Site.calendarObjForForm.display();
			}		
		},
		*/
		
		submitField: function(element){
		
			Site.submission_tracker = element.id;
			var url = "../php-classes/form-processor.php";
			
			var dataHeadings = ["field_id", "value"];
			var fieldData = [element.id, element.value];
			var data = fieldData.associate(dataHeadings);
			
			data = Json.toString(data);
			data = escape(data);
						
			var options = {	
				method: 	'get', 
				onComplete: Site.callback,
				onRequest: 	function(){
					element.addClass('loading');
				},
				onFailure: 	Site.displayAuthenticationFailure,	
				data: 'json='+data
			}
			//var myJsonRequest = new Json.Remote(url, options).send(data);
			var myAjax = new Ajax(url, options).request();
		},
		
		displayErrors: function()
		{
			//expected args: field_id, error message 
			//change style to match a field with erroneous data
			//display error message
			//can accept an array with number for a number of fields and error messages
		},
		
		displayApproved: function()
		{
			//if field has been authenticated and approved, 
			//field style needs to be changed to approved style
		},
		
		displayAuthenticating: function()
		{
			//el.addClass('loading');
			//if ajax auth request has been sent
			//indicator of field checked in progress needs to be shown
		},
		
		displayAuthenticationFailure: function()
		{
			alert("Field authentication request failed.");
		},
		
		callback: function(resp)
		{
			var resp = Json.evaluate(resp);
			var el = $(resp['field_id']);
			var valid = resp['valid'];
			el.removeClass('loading');

			if(valid){
				el.removeClass('error');
				
				Site.displayIconValid(el);
				
				if(Site.req_fields.test(el.id)) Site.req_fields.remove(el.id);
				if(Site.errors.test(el.id)) Site.errors.remove(el.id);
				
				//check if for is ready for submission
				Site.makeSubmittable();
				
			}else{
				
				Site.errors.push(el.id);
				$('submit').disabled = true;
				
				el.addClass('error');
				Site.makeToolTip(resp['field_id'], resp['error_msg']);
				Site.displayIconInvalid(el);
				
				//Site.submitField.pass(el).delay(2000);
			}
		},
		//disables form submit button
		makeUnsubmittable: function()
		{
			$('submit').disabled = true;
		},
		
		makeSubmittable: function()
		{
			if((Site.req_fields.length == 0) && (Site.errors.length == 0))
			{
				$('submit').disabled = false;
			}
		},
		
		imgPreload: function(src){
			var img = new Image();
			img.src = src;
		},
		
		addNotificationIcons: function(element)
		{	
			/*Create notification icons */
			new Element ('img',{
				'src' : '../images/interface/info-icon.gif',
				'styles': {
					'position' : 'absolute',
					'top' : '4px',
					'right' : '268px',
					'visibility' : 'hidden'
				},
				'id' : element.id+'-error'
			}).injectAfter(element);
			
			new Element ('img',{
				'src' : '../images/interface/tick-icon.gif',
				'styles': {
					'position' : 'absolute',
					'top' : '4px',
					'right' : '268px',
					'visibility' : 'hidden'
				},
				'id' : element.id+'-tick'
			}).injectAfter(element);
			/*end notifination icons*/
		},
		
		displayIconValid : function(element)
		{
			$(element.id+"-error").setStyles({visibility: 'hidden'});
			$(element.id+"-tick").setStyles({visibility: 'visible'});
		},
		
		displayIconInvalid : function(element)
		{
			$(element.id+'-tick').setStyles({visibility: 'hidden'});
			$(element.id+'-error').setStyles({visibility: 'visible'});
		},
		
		makeToolTip : function(field_id, error_msg)
		{
			$(field_id+'-error').setProperty('title', error_msg);
			
			var tips = new Tips($$('#'+field_id+'-error'), {
					maxTitleChars: 50, 
					offsets: {x: 2, y: 6},
					initialize:function(){
						this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 100, wait: false}).set(0);
					},
					onShow: function(toolTip) {
						this.fx.start(1);
					},
					onHide: function(toolTip) {
						this.fx.start(0);
					}
				});
		}

};

	
window.addEvent('domready', Site.start);