// constants
gbDebug = false;

// default options
var gaDynStepsDefaultOptions = {
}

// class DynSteps: handle showing previous/next steps(div) in a container
var DynSteps = Class.create({
	oContainer : null, // container object to handle switches for
	sContainer : null, // container id to handle switches for
	options : null, // options given on init merged with default
	oToolbar : null, // toolbar with previous/next button
	oPrevious : null, // previous button
	oNext : null, // next button
	aSteps : null, // all steps div arrays
	nCurrentStep : 1, // all steps div arrays

	// init
	initialize : function(sContainer, options){
		var bOk = true;
		try{
			// merge options
			this.options = Object.extend(Object.extend({ }, gaDynStepsDefaultOptions), options || { });
			this.sContainer = sContainer;
			this.oContainer = $(sContainer);
			this.oContainer.object = this;
		}
		catch(e){
			bOk = false;
			this.handleEx(e);
		}	
		
		// pimp the container (add next/previous buttons)
		this.DynStepsPimpContainer();
		
		// and go to first
		this.DynStepsGotoStep(1);
		
		// return
		return bOk;
	},
	
	DynStepsPimpContainer : function (){
		// get all steps in array
		this.aSteps = new Array();
		this.oContainer.select('.step').each(function(elem){
			this.aSteps.push(elem);
		}.bind(this));
		var oElem = new Element('span').update(' ');
		this.oContainer.insert({top:oElem});
		
		//add toolbar 
		this.oToolbar = new Element('div', {
			'style' : 'text-align:center;padding:10px;'
		});
		this.oContainer.insert({after:this.oToolbar});
		
		// add previous/next buttons
		this.oPrevious = new Element('img', {
			'src':'/common/img/slide_left.png',
			'style':'margin:5px 10px;width:25px;height:25px;',
			'title':'Previous Step'
		});
		this.oNext = new Element('img', {
			'src':'/common/img/slide_right.png',
			'style':'margin:5px 10px;width:25px;height:25px;',
			'title':'Next Step'
		});
		
		this.oToolbar.insert({bottom:this.oPrevious});
		this.oToolbar.insert({bottom:this.oNext});

		// previous/next events
		this.oPrevious.observe('click', function(){this.DynStepsPrevious();}.bind(this));
		this.oNext.observe('click', function(){this.DynStepsNext();}.bind(this));
	},
	
	DynStepsPrevious : function (){
		if (this.nCurrentStep>1){
			this.nCurrentStep--;
			this.DynStepsGotoStep(this.nCurrentStep);
		}
	},
	
	DynStepsNext : function (){
		if (this.nCurrentStep<this.aSteps.length){
			this.nCurrentStep++;
			this.DynStepsGotoStep(this.nCurrentStep);
		}
	},
	
	DynStepsGotoStep : function(nStep){
		var i=1;
		this.aSteps.each(function(elem){
			if (i==nStep){
				Effect.Appear(elem, {duration:0.5});
			}
			else{
				elem.hide();
			}
			i++;
		});
		if (this.nCurrentStep==1){
			this.oPrevious.addClassName('blur');
		}
		else{
			this.oPrevious.removeClassName('blur');
		}
		if (this.nCurrentStep==this.aSteps.length){
			this.oNext.addClassName('blur');
		}
		else{
			this.oNext.removeClassName('blur');
		}		
	},

	handleEx : function(e){
		var sError =  e.message;
		if (gbDebug){
			alert("Exception :\n" + sError);
		}
	},
	
	/* public function */
	// goto one step
	gotoStep : function(nStep){
		this.DynStepsGotoStep(nStep);
	}
});