var startStep = 1;
var totalSteps = 8;
var restrictSteps = false;
var containerId = 'panelContainer'; // div container for carousel
var stepClass = 'stepLinks'; // div container class for step links
var stepNumbersId = 'step-nav';
var stepPrevClass = 'white';
var stepSelectedClass = 'on'; // name of selected state class for step links
var panelClass = 'carouselPanel';
var subSuffix = new Array('a','b','c','d','e');

function doStep() {
	
	var subStep = '';
	// get the current highlighted step value
	var current = parseInt(getCurrentStep());
	// collect step variable if supplied otherwise set to next step
	var toStep = ( arguments[0] ) ? arguments[0] : current + 1;
	if (toStep==4 && primaryPackage=="easyview") toStep=5;
	// if we are passed sub step value ie: 2b, seperate the values
	if ( toStep.length > 1 ) {
		for ( var i = 0; i < subSuffix.length; i++ ) {
			if ( toStep.indexOf(subSuffix[i]) > -1 ) {
				toStep = toStep.replace(subSuffix[i],'');
				subStep = subSuffix[i];
				break;
			}
		}
	}
	
	// only allow one step forward or any step back from current step
	if ( toStep <= ( current + 1) ) {
		//stepIncrement = ( toStep < current ) ? (toStep - current) : 1;
	} else {
		// if they click more than 2 steps forward, do nothing
		if ( restrictSteps ) {
			alert('Please complete the steps in sequence');
			return;
		}
	}
	
	//alert(toStep + " " + subStep);
	//return;
	
	hideAllSteps();
	
	if ( subStep == '' ) {
		showStep(toStep);
	} else {
		showStepSub(toStep, subStep)
	}
	
	var height = getHeight(toStep);
	setHeight(containerId, height);
	
	// slide to step
	//stepcarousel.stepBy(containerId, stepIncrement);
	
	// refresh steps showing selected
	loadSteps(toStep);
	
}

function loadSteps(activeStep) {
	var container = document.getElementById(stepNumbersId);
	container.innerHTML = getSteps(activeStep);
}

function getSteps(activeStep) {
	var steps = '<ul><li id="step"><a><img src="/dstvsa/applications/dstvsa/templates/images/get_dstv/step.gif"  alt="step" /></a></li>';
	for ( var i = 1; i < totalSteps + 1; i++ ) {
		steps += '<li id="step' + i + '"><a href="javascript:doStep(' + i + ');" title=""';
		if ( stepPrevClass != '' && i < activeStep ) {
			steps += ' class="' + stepPrevClass + '"';
		}
		if ( i == activeStep ) {
			steps += ' class="' + stepSelectedClass + '"';
		}
		steps += '></a></li>';
	}
	steps += '</ul><div class="step">&nbsp;</div>';
	return steps;
}

function hideAllSteps() {
	for ( var i = 1; i < totalSteps + 1; i++ ) {
		document.getElementById('slide-step-' + i).style.display = 'none';
	}
}

function showStep(step) {
	$('#slide-step-' + step).fadeIn('slow');
}

function showStepSub(step, sub) {
	for ( var i = 0; i < subSuffix.length; i++ ) {
		if ( document.getElementById('step-' + step + subSuffix[i]) )
			document.getElementById('step-' + step + subSuffix[i]).style.display = 'none';
	}
	showStep(step);
	document.getElementById('step-' + step + sub).style.display = 'block';
}

function getCurrentStep() {
	
	var container = document.getElementById(stepNumbersId);
	var stepLinks = container.getElementsByTagName('li');
	
	for ( j = 0; j < stepLinks.length; j++ ) {
		var stepId = stepLinks[j].id.replace("step","");
		var stepLink = stepLinks[j].getElementsByTagName('a');
		if ( stepLink[0].className == stepSelectedClass ) {
			return stepId;
		}
	}
	
	return 0;
}

function getHeight(step) {
	var container = document.getElementById(containerId);
	var divs = container.getElementsByTagName('div');
	var panel = 1;
	for ( var i = 0; i < divs.length; i++ ) {
		if ( divs[i].className == panelClass ) {
			if ( panel == step ) {
				return divs[i].offsetHeight;
			}
			panel++;
		}
	}
}

function setHeight(id, height) {
	if ( typeof(height) != 'undefined' )
		document.getElementById(id).style.height = height + 'px';
}