var ProgressionNumeracy = function() {
	
	var CONST_TARGET_DIV = "<div id='progression-table'></div>";
	var CONST_TOGGLE_ALL_DIV = "<div class='toggle-all'><a class='expand' href='#'>Expand all steps</a></div>";
	var CONST_DIV_TABLE = "<div class='row row-%levelid%'><div id='%taskid%' class='level'>%level%</div><div class='information'><div class='collapsible-content'><div class='task'>%task%</div><div class='learners-can'>%learners-can%</div><div class='activity'>%activity%</div></div><div class='section-summary'><div class='summary'>%summary%</div><a class='toggle-button collapse' href='#'>%collapse%</a></div></div></div>";
	var CONST_DIV_TABLE_HEADER = "<div class='table-header'><div class='title'>%title%</div><div class='activities'>%activities%</div></div>";
	var CONST_EXPAND_TEXT = "Expand";
	var CONST_COLLAPSE_TEXT = "Collapse";
	
	var togglingAll = false;
	
	//user has clicked on the summary section
	function onSummaryClicked() {
		var toggleButton = $(this).find('a.toggle-button');
		toggleButtonState(toggleButton);
		
		//scroll to new row if just expanded
		if ($(toggleButton).hasClass('collapse') && !togglingAll) { //button is showing 'collapse'
			var target = $(this).parent().parent();
			$.scrollTo(target, 300);
		}
		
		//slide toggle the contents and summary
		$(this).prev().find('div').slideToggle('fast');
		$(this).find('.summary').slideToggle('fast');
		
		//prevent page changing due to click
		return false;		
	}
	
	function onToggleAllClicked() {
		togglingAll = true;
		$('.section-summary').each(function() {
				var toggleButton = $(this).find('a.toggle-button');
				if ($(toggleButton).hasClass('expand')) {
					$(this).trigger('click');
				}
		});
		togglingAll = false;
		return false;
	}
	
	//toggle the collapse/expand button
	function toggleButtonState(button) {
		if ($(button).hasClass('collapse')) { //button is showing 'collapse'
			$(button).removeClass('collapse').addClass('expand').text(CONST_EXPAND_TEXT);
		} else {
			$(button).removeClass('expand').addClass('collapse').text(CONST_COLLAPSE_TEXT);
		}
	}
	
	//create a new div structure using DIVs that gets its data from a table row
	function createNewDivRow(tableRow) {
		//get each bit of information
		var level = $(tableRow).find('.level-indicator').html();
		var levelId = $(tableRow).find('.level-indicator').attr('id');
		var task = $(tableRow).find('.task').html();
		var taskId = $(tableRow).find('.task').attr('id');
		var learnersCan = $(tableRow).find('.learners-can').html();
		var activity = $(tableRow).find('.activity').html();
		//add information into a new div
		var newDiv = CONST_DIV_TABLE.replace('%level%', level).replace('%levelid%', levelId).replace('%taskid%', taskId).replace('%task%', task).replace('%learners-can%', learnersCan).replace('%activity%', activity).replace('%summary%', task).replace('%collapse%', CONST_COLLAPSE_TEXT);
		return newDiv;
	}
	
	function createDivHeader() {
		//add table header
		var headerTitle = $('.progression').find('th.title').html();
		var headerActivities = $('.progression').find('th.activities').html();
		var headerHtml = CONST_DIV_TABLE_HEADER.replace('%title%', headerTitle).replace('%activities%', headerActivities);		
		return headerHtml;
	}
	
	function quickCollapseDivRow(newRow) {
		var toggleButton = $(newRow).find('a.toggle-button');
		toggleButtonState(toggleButton);
		//hide the contents and show the summary
		$(newRow).find('.collapsible-content div').hide();
		$(newRow).find('.section-summary .summary').show();
	}
	
	return {
		
		init : function(sectionToShow) {
			
			//create space for new div table
			var target = $('.progression').append(CONST_TARGET_DIV);

			//add expand/collapse all button
			var toggleAllButton = target.prepend(CONST_TOGGLE_ALL_DIV);
			$(toggleAllButton).find('a').click(onToggleAllClicked);
	
			//create header
			$('#progression-table').append(createDivHeader());

			//go through each table row, except for the first one (table header)
			$('.progression tr:not(:first)').each(function(i) {

				$('#progression-table').append(createNewDivRow($(this)));
				
				//if a specific section is specified, then only show that section
				var newRow = $('#progression-table > div:last');
				var currentSection = $('#progression-table > div:last').find('.level').attr('id'); //fist iteration, i=0 but section should be 1
				if ((currentSection != sectionToShow) && (sectionToShow != "")) {
					quickCollapseDivRow(newRow);
				}
			});
			
			//remove the table
			$('#strand').remove();
			
			//add click listeners
			$('.section-summary').click(onSummaryClicked);
		}
		
	};
	
}();