function M4StepShow(pIdStepShow, pIdContainer, pClassSteps)
{
	this.id = pIdStepShow;
	this.container = document.getElementById(pIdContainer);
	this.className = pClassSteps;
	this.steps = $$("#"+this.id+" ."+this.className);
	this.stepWidth = this.steps[0].offsetWidth;
	this.current = this.first = 0;
    this.last = this.steps.length - 1;
}

M4StepShow.prototype.next = function()
{
	if(this.steps.length < 2)
        return;
    if(this.current+1>this.steps.length-1)
		this.display(this.first);
    else
       this.display(++this.current);
}

M4StepShow.prototype.previous = function()
{
	if(this.steps.length < 2)
        return;
    if(this.current-1<0)
		this.display(this.last);
    else
	    this.display(--this.current);
}

M4StepShow.prototype.display = function(pIndex)
{
	pIndex*=1;
	if(pIndex<0||pIndex>this.steps.length-1)
		return;
	this.current = pIndex;
	var ml = this.current * this.stepWidth;
	M4Tween.to(this.container,  .7, {"marginLeft":"-"+ml+"px"});
	//M4Tween.to(document.getElementById(this.id),  .4, {"height":this.steps[this.current].offsetHeight+"px"});
}