// JavaScript Document

if( document.addEventListener ) document.addEventListener( 'DOMContentLoaded', cmxform, false );

function cmxform(){
	// Hide forms
	$( 'form.cmxform' ).hide().end();
	
	// Processing
	$( 'form.cmxform' ).find( 'li>label' ).not( '.nocmx' ).each( function( i ){
		var labelContent = this.innerHTML;
		var labelWidth = document.defaultView.getComputedStyle( this, '' ).getPropertyValue( 'width' );
		var labelSpan = document.createElement( 'span' );
			labelSpan.style.display = 'block';
			labelSpan.style.width = labelWidth;
			labelSpan.innerHTML = labelContent;
		this.style.display = '-moz-inline-box';
		this.innerHTML = null;
		this.appendChild( labelSpan );
		} ).end();	
	
	// Show forms
	$( 'form.cmxform' ).show().end();
}

$(document).ready(function(){ 
	 $('.sf-menu').superfish({ 
            animation: {height:'show'},   // slide-down effect without fade-in 
            delay:     1200,               // 1.2 second delay on mouseout
			dropShadows: false,
			disableHI:     false,
			autoArrows:    false
		}); 
	 
	 $('.inline-eml').defuscate();
	 
	 $.localScroll();
	 
	/* Wrap nested legend tags in cmxform with p tags to prevent the text from flowing beyond the boundaries of the fieldset.
		This allows for page validation and works with the design */
	$( 'form.cmxform' ).find( 'li>fieldset>legend' ).not( '.nocmx' ).each( function( i ){
		$(this).wrap('<p></p>');
		
	}).end();
	
	$('#archives').hide();
	$('#archives').before('<span id="arc-trigger">View Archives</span>');
	$('#arc-trigger').toggle(function() {
			$('#archives').show('normal');
			$(this).text('Hide Archives');
		},
		function() {
			$('#archives').hide('normal');
			$(this).text('View Archives');
		}
	);
	
	/* Ajax Validation and Submission of Contact Form */	
	$('#contactform').validate({
		submitHandler: function(form) {
			$(form).ajaxSubmit( {
				target: '#response',
				url: 'eml.php?ajax=true',
				success: function() {
					$('#response').show('normal');
					$('#submitted').attr( { disabled: 'disabled', value: 'Message Sent' } );
				}
			});
			return false;
		},
		errorElement: "div",
		errorClass: "invalid",
		errorPlacement: function(error, element) {
    		error.insertAfter( element.prev() );
  		 }
		
	});
	
	$('input:text.edit').each(function () {
		var classStr =  $(this).attr('class');
		if($(this).val() != '') {
			$(this).replaceWith('<span class="'+classStr+'" title="' + $(this).attr('title') + '" id="' + $(this).attr('id') + '">' + $(this).val() + '</span>');
		}
	});
	$('textarea.edit').each(function () {
		var classStr =  $(this).attr('class');
		if($(this).val() != '') {
			$(this).replaceWith('<span class="'+classStr+'" id="' + $(this).attr('id') + '" title="' + $(this).attr('rows') + ',' +  $(this).attr('cols') + '">' + $(this).val() + '</span>');
		}
	});
	$('select').not('.noinline').each(function () {
		var classStr =  $(this).attr('class');
		var txt = $('#' + $(this).attr('id') + ' option:selected').text();
		var title = '';
		$('#' + $(this).attr('id') + ' option').each( function(i, selected) {
			title = title + $(selected).val() + ":" + $(selected).text() + ",";
			});
		var title = title.slice(0,title.length-1);
		$(this).replaceWith('<span id="' + $(this).attr('id') + '" class="'+classStr+'" title="' + title + '">' + txt + '</span>');
	});
	
	$.editable.addInputType('validate', {
		element	: function(settings, original) {
			
			// assign an id to the form.  this will allow multiple forms to be 'open'
			//	on the page simultaneously
			$(this).attr('id','frm-' + original.id);
			
			var classStr = $('#'+original.id).attr('class');
			var arrClass= classStr.split(' ');
			
			switch (arrClass[0]) {
				case 'text':
					var input = jQuery('<input class="' + classStr + '" type="text" id="' + original.id + '" name="' + original.id + '" />');    // append an input to the field
					break;
				case 'select':
					var titleStr = $('#'+original.id).attr('title');
					var arrTitle = titleStr.split(',');
					
					var txt = '<select name="' + original.id + '" >';    // append an input to the field
					
					$(arrTitle).each( function(i, idx) {
						var temp = idx.split(':');
						txt = txt + '<option value="'+ temp[0] +'">'+ temp[1] +'</option>';
					});
					
					txt = txt + '</select>';
					
					input = jQuery(txt);					
					break;
				case 'textarea':
					var temp = $('#' + original.id).attr('title');
					var temp = temp.split();
					var rows = temp[0];
					var cols = temp[1];
					
					if (!rows) {
						var rows = 3;
					}
					if (!cols) {
						var cols = 20;
					}
					
					var input = jQuery('<textarea  class="' + classStr + '" name="' + original.id + '" id="' + original.id + '" rows="' + rows +'" cols="' + cols + '">');					
					
					break;
			}			
			
			//var input = jQuery('<input type="text" name="' + original.id + '" />');    // append an input to the field
			$(this).append(input);
			
			// get vid from root form action attribute
			var form = $('#'+original.id).parents('form').attr('id');  	// get the form id
			var act = $('#'+form).attr('action');						// get the form action (by id above for clarity)
			var id = getURLParam(act,'id');							// get the vid URL param
			var func = getURLParam(act,'func');							// get the func URL param
			
			var hiddeninput = jQuery('<input type="hidden" name="id" value="'+ id + '" />');
			$(this).append(hiddeninput);								// append a hidden field to the form to hold the id
			var hiddeninput = jQuery('<input type="hidden" name="func" value="'+ func + '" />');
			$(this).append(hiddeninput);								// append a hidden field to the form to hold the func
			
			return(input);
		},
		submit  : function(settings, original) {
			//var validation_passed = false; 
						
			// get class attributes.  These define the validation methods required on the field
			var classStr = $('#' + original.id).attr('class');
			var arrClass= classStr.split(' ');
			
			validation_passed = $('#frm-' + original.id ).validate().form();
					
			if (!validation_passed) {
			  // validation failed
			 		return false;
        	}
			else {
				// validation passed, so submit form and reset the text
				
				$('#frm-' + original.id).ajaxSubmit( {
					url 		: "http://flemingculinary.ca/save.php",
					type		: "POST"
				});
				
				// store the new value for display
				switch (arrClass[0]) {
					case 'text':
						var txt = $('#frm-' + original.id + ' input').val();
						$('#frm-' + original.id + ' input').addClass(classStr);			
						break;
					case 'textarea':
						var txt = $('#frm-' + original.id + ' textarea').val();
						$('#frm-' + original.id + ' textarea').addClass(classStr);			
						break;
					case 'select':
						var txt = $('#frm-' + original.id + ' select :selected').text();
						$('#frm-' + original.id + ' input').addClass(classStr);
						break;
				}
				
				// reset the text field
				original.reset();
				// display the new value
				$('#' + original.id).html(txt);
				
				// return false so that the jeditable script doesn't try to submit as well
				// (it will error out if it does
				return false;
        	}
    	}

	});

	$('.edit').editable(''
		, {
         indicator 	: 'Saving...',
    	 cancel   	: 'Cancel',
         submit		: 'OK',
		 style		: 'display: inline',
		 name 		: function(){return},  // not sure why - but need the function statement to get the name on the field
		 type		: 'validate',
		onblur		: 'ignore'
	});
	
	
			  	
});