<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function(){
 
			// Call the "sideBySide" function with number of rows and columns
			sideBySide(3, 3); 
 
			// Apply the Star Rating workaround to all numeric questions
			$('div.numeric').each(function(i) {  
				var thisQID = $(this).attr('id').split('question')[1];
				handleRatingNumeric (surveyID(),  groupID(), thisQID);
			});
	});
 
	// A function to align different <a href='http://www.docs.limesurvey.org/tiki-index.php?page=Question+types&structure=English+Instructions+for+LimeSurvey'><a href='http://www.docs.limesurvey.org/tiki-index.php?page=Question+types&structure=English+Instructions+for+LimeSurvey'>question types</a></a> side-by-side
	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.outerframe').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',
				'clear': 'both'
			});
			$( '.inlineRow:first' ).css({
				'margin-top': '10px'
			});
 
			// Get all the questions to sit politely side by side
			$( '.inlineQuestion' ).css({
				'float': 'left',
				'overflow':'hidden'
			});
			$( '.inlineQuestion .question-wrapper' ).css({
				'margin-bottom': '0'
			});
			$( '.inlineQuestion .questionhelp' ).hide();
			$( '.inlineQuestion .survey-question-help' ).parent().hide();
 
			// A little space under the last row
			$( '.inlineRow:last' ).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': '40%'
			});
			$( '.qCol2, .qCol3' ).css({
				'width': '29%'
			});
 
			//////// Question manipulation ////////
 
			// Hide the answer element in boilerplate questions
			$( 'div.boilerplate td.answer' ).parent().hide();
 
			// Hide the question text elements in non-boilerplate questions
			$('div.questionCell td.questiontext').parent().hide();
 
			// STAR RATING - Show the question text elements in numeric questions
			$('div.numeric td.questiontext').parent().show();
 
			// Push the question tables to 100%
			$( 'div.inlineRow table' ).css({
				'width': '100%'
			});
 
			// Get everything to line up nicely vertically
			$( '.inlineQuestion td.questiontext, .inlineQuestion td.answer p' ).css({
				//'text-align': 'center'
			});
 
			// Adjust cell heights so everything lines up nicely horizontally
			$( '.inlineQuestion td.answer, .inlineQuestion td.questiontext' ).css({
				'height':'35px',
				'overflow':'hidden',
				'padding':'0.5em'
			});
			$( '#inlineWrapper0 .inlineQuestion' ).css({ 'height':'50px' });
			$( '#inlineWrapper0 td.questiontext' ).css({
				'height':'50px'
			});
 
			// 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'
			});
 
		}
 
		// Fix up the row background colours
		var rowIndex = 0;
		$('.inlineRow').each(function(i, el){
			rowIndex ++;
 
			if(rowIndex % 2 == 0) {
				$(el).addClass('rowEven');
			}
			else {
				$(el).addClass('rowOdd');
			}
		});
 
		$('.inlineRow').append('<div style="width:100%; clear:both;"></div>');
 
		$('.rowOdd *, .rowEven *').css({
			'background-color': 'transparent'
		});
 
		$('.rowOdd').css({
			'background-color': '#EFEFEF'
		});
 
		$('.rowEven').css({
			'background-color': '#FAFAFA'
		});
 
		$('.inlineRow:first').css({
			'background-color': '#DADADA'
		});
	}
 
	// A function to apply the Star Rating workaround to a numeric input question
	function handleRatingNumeric (sID, gID, qID) {
 
		// Hide the numeric input
		$('#question' + qID + ' td.answer').parent().hide();
 
		// Get a previous rating (if any) and use it to initialize the star display
		var rating = $('#answer' + sID + 'X' + gID + 'X' + qID + '').val();
		if ( rating != '' ) {
			$('#question' + qID + ' input.star').rating('select', rating);
		}
 
		// Listener on the star rating cancel element
		$('#question' + qID + ' div.rating-cancel').click(function(event) {
 
			// Nullify the rating if the Cancel element is clicked
			rating = '';			
			$('#answer' + sID + 'X' + gID + 'X' + qID + '').val(rating);
		});
 
		// Listener on the star rating elements
		$('#question' + qID + ' div.star-rating').click(function(event) {
 
			// Find the value of the highest clicked star and pass it into the text input
			$('#question' + qID + ' div.star-rating-on').each(function(i) {
				rating = $(this).children('a').html( );
			});			
			$('#answer' + sID + 'X' + gID + 'X' + qID + '').val(rating);
		});
 
	}
 
	// A function to return the survey ID
	function surveyID() {
		if($('input#fieldnames').length != 0) {
			var fieldNames = $('input#fieldnames').attr('value');
			var tmp = fieldNames.split('X');
			return tmp[0];
		}
	}
 
	// A function to return the group ID
	function groupID() {
		if($('input#fieldnames').length != 0) {
			var fieldNames = $('input#fieldnames').attr('value');
			var tmp = fieldNames.split('X');
			return tmp[1];
		}
	}
 
</script>