<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function() { 
 
		// Call the "sideBySide" function with number of rows and columns
		sideBySide(4, 5);   
    });
 
	function sideBySide(rows, columns) {
 
		/// Display multiple questions side by side///
 
		if ($('div.qRow1').length == 0) {
 
			var rowNum = 0;
			var colNum = 1;
			var rowList = new Array(); 
 
			//////// Add question classes for later use ////////
 
			// Loop through all questions and add row and column specific classes
			$('div[id^="question"]').each(function(i) {
				if(rowNum <= rows) { // This IF condition only needed if there are questions following the "inline" questions
					$(this).addClass('qRow'+rowNum+'').addClass('qCol'+colNum+'').addClass('inlineQuestion');
					if(rowNum == 0 && colNum > 1) {
						$(this).addClass('columnLabel');
					}
					if(rowNum > 0 && colNum == 1) {
						$(this).addClass('rowLabel');
					}
					else if(rowNum > 0 && colNum > 1) {
						$(this).addClass('questionCell');
					}
					if(colNum == columns) {
						rowList.push('qRow'+rowNum+'');
						rowNum++;
						colNum = 1;
					}
					else {
						colNum++;
					}
				}
				else {
					$(this).addClass('normalQuestion');
				}
			}); 
 
			//////// Survey layout manipulation ////////
 
			// Fix the width of the survey
			$('table.container').css({
				'width': '900px'
			});
 
			// Wrap each "row" in a wrapper div
			$(rowList).each(function(i) {
				$('.'+this+'').wrapAll('<div id="inlineWrapper'+i+'" class="inlineRow" />');
			}); 
 
			// Style the wrapper divs
			$('.inlineRow').css({
				'width': '850px',
				'margin': '0 auto 0 auto',
				'clear': 'both'
			});
			$( '.inlineRow:first' ).css({
				'margin-top': '10px'
			});
 
			// Get all the questions to sit politely side by side
			$( '.inlineQuestion' ).css({
				'float': 'left',
				'overflow':'hidden',
				'margin-bottom': '-1px'    
			});
			$( '.inlineQuestion div.question' ).css({
				'padding':'0',
				'height':'41px',
				'margin': '0',
				'border': '0 none',
				'width': '100%'    
			});
			$( '.inlineQuestion .questionhelp' ).hide();
			$( '.inlineQuestion .survey-question-help' ).hide();
 
			// A little space under the last row
			$( '.inlineRow:last .inlineQuestion' ).css({
				'margin-bottom': '10px'
			});
 
			// Any questions not displayed inline (this is only needed if there are questions following the "inline" questions)
			$( '.normalQuestion' ).css({
				'clear': 'both'   
			});
 
			//////// Column manipulation ////////
 
			// Set the column widths - can be set individually if necessary
			// Must add up to less than 100%
			$( '.qCol1' ).css({
				'width': '12%'
			});
			$( '.qCol2, .qCol3, .qCol4, .qCol5' ).css({
				'width': '22%'
			});
 
			//////// Question manipulation ////////
 
			// Hide the answer element in boilerplate questions
			$( 'div.boilerplate .answers' ).hide();
 
			// Hide the question text elements in non-boilerplate questions
			$('div.questionCell .questiontext').hide();
 
			// Push the question tables to 100%
			$( 'div.inlineRow table' ).css({
				'width': '100%'
			});
 
			// Get everything to line up nicely vertically
			$( '.inlineQuestion .questiontext, .inlineQuestion .answers p' ).css({
				'text-align': 'center'
			});
 
			// Adjust cell heights so everything lines up nicely horizontally
			$( '.inlineQuestion .answers, .inlineQuestion .questiontext' ).css({
				'height':'35px',
				'overflow':'hidden',
				'padding':'0.5em'
			});
			//$( '#inlineWrapper0 .inlineQuestion' ).css({'height':'50px'});
			$( '#inlineWrapper0 .questiontext' ).css({
				'height':'50px'
			});
 
			// Yes-no question styles
			$( 'div.yes-no ul' ).css({
				'text-align': 'center',
				'font-size': '90%',
				'margin': '0',
				'padding-bottom': '5px'
			});
			$( 'div.yes-no li' ).css({
				'padding-right': '1.5em'
			});
			$( 'div.yes-no .answers' ).css({
				'padding-bottom': '0'
			});
 
			// Short-text question styles
			$( 'div.text-short input' ).css({
				'width': '125px',
				'margin-left': '0'
			});
 
			// Numeric question styles
			$( 'div.numeric input' ).css({
				'width': '125px',
				'margin-left': '0'
			});
			$( 'div.numeric p.tip' ).css({
				'display': 'none'
			});
 
			// Get rid of the margins around select boxes    
			$( 'p.question' ).css({'margin':'0'}); 
 
		}
	}
 
</script>