function showLinkbox(id){
            var info = document.getElementById(id);
            if(info.style.display == 'none' || info.style.display == ''){
                info.style.display = 'block';
            }else{
                //info.style.display = 'none';
            }
        }



var rechnerConfig = {
	imagepath: 'images/',
	loadingtext: 'Lade...',	
	labeltext: {
		amount: 'Wunschbetrag',
		duration: 'Laufzeit in Jahren',		
		interest: '<a class="rate_beschreibung" href="http://www.kredit-beamten.de/rechenbeispiele/">&raquo; Rechenbeispiele</a>'
	},
	inputNames: {
		amount: 'start_amount',
		duration: 'start_duration'		
	},
	submitText: '',
	method: 'post',	
	slider: {
		range: $R(0,2),
		values: [0,1,2],
		realValues: [12,14,20]
	}
}






var rechner = Class.create({
	/**
		* @format | string ci | can be "big" or "small"
		*
		* @returns nothing
		**/
	initialize: function(config) {
		this.config = config;
		this.config.format = this.checkFormat(this.config.format);
		this.current = Object.clone(this.config.startValues);
	},
	
	/**
		* checks if firebug (or a similar console) is available
		*
		* @returns nothing
		**/
	debug: function(v) {
		if(typeof(console)=='object') {
			console.log(v);
		}
	},

	/**
		* writes needed containers and loading image into DOM,
		* then loading calculator (onload)
		*
		* @returns nothing
		**/
	display: function() {
		document.write('<div id="rechner'+this.config.format+'Widget" class="rechnerWidget">',
									 '<div id="rechnerLoading">'+this.config.loadingtext+'</div>',
									 '</div>');
		
		Event.observe(window, 'load', function(){
			this.build();
		}.bind(this));
	},
	
	/**
		* @format | string ci | can be "big" or "small"
		* 
		* @returns string | formatted "Big"/"Small" (needed for CSS-Class)
		**/
	checkFormat: function(format) {
		switch(format.toLowerCase()) {
			case "small":
				return "Small";
				break;
			case "big":
			default:
				return "Big";
		}
	},
	
	/**
		* @number | int | trustAmount from dataarray
		*
		* @returns string | formatted trustamount
		**/
	formatAmount: function(n){
		return n.replace(/\./g,"");
	},
	
	reformatAmount: function(n){		
		var n = '' + n;
 		var l = n.length;
 		if (l > 3) {
 			var mod = l % 3;
 			var output = (mod > 0 ?(n.substring(0,mod)): '');
 			for (i=0 ; i < Math.floor(l / 3); i++) {
 				if ((mod == 0)&& (i == 0)) output += n.substring(mod+ 3 * i, mod + 3 *i + 3);
 				else output+= '.' + n.substring(mod + 3 * i,mod + 3 * i + 3); }
 			return (output); }
 		else return n;},

	
	makeInt: function(str) {
		return (str=='yes')?1:0;
	},
		
	build: function() {
		var calculatorContainer = $('rechner'+this.config.format+'Widget');
	
		var form = new Element('form', {});
		var inputContainer = new Element('div', {id:'inputContainer'});
		
		var amountContainer = new Element('div', {id:'amountContainer', 'class':'row'});
		amountContainer = this.fillAmountContainer(amountContainer);
		inputContainer.insert(amountContainer);
		
		var durationContainer = new Element('div', {id:'durationContainer', 'class':'row'});
		durationContainer = this.fillDurationContainer(durationContainer);
		inputContainer.insert(durationContainer);		
			
		inputContainer.insert(new Element('input', {type:'hidden', value:'PC1', name:'pc'}));
		form.insert(inputContainer);
		
		var resultContainer = new Element('div', {id:'resultContainer'});
		resultContainer = this.fillResultContainer(resultContainer);
		form.insert(resultContainer);
		
		var submitContainer = new Element('div', {id:'submitContainer'});		
					
		//submitContainer.insert(new Element('div', {onmouseover:'showLinkbox(\'rechnerLinks\'); return false;'}));
		submitContainer.insert(new Element('div', {}));
		
		
		
		form.insert(submitContainer);
		
		calculatorContainer.insert(form);
		
		this.startObservers();
	
		$('rechnerLoading').remove();
	},
	
	fillAmountContainer: function(container) {
		var amountLabel = new Element('label', {'for':'amountSelect'}).update(this.config.labeltext.amount);
		var amountSelect = new Element('select', {id:'amountSelect', 'name':this.config.inputNames.amount, 'class':'styled '+this.config.color+'Select'});
		
		for (var amount in this.config.data) {
			var o = {value:this.formatAmount(amount)};			
			if(amount==this.config.startValues.amount) o.selected = 'selected';
			amountSelect.insert(new Element('option', o).update('&euro; '+amount));
		}
		container.update(amountLabel);
		container.insert(amountSelect);
		return container;
	},
	fillDurationContainer: function(container) {
		var duration = this.config.slider.realValues;
		var durationLabel = new Element('label', {'for':'durationInput'}).update(this.config.labeltext.duration);
		container.insert(durationLabel);
		
		var subContainer = new Element('div', {id:'slideWrap'});
		
		var slideContainer = new Element('div', {'id':'slideContainer'});
		slideContainer.insert(new Element('div', {'id':'colorPart', 'class':this.config.color+'Slide'}));
		slideContainer.insert(new Element('div', {'id':'handle'}));
		
		subContainer.update(slideContainer);
		
		var durationList = new Element('ul', {id:'durationList'});
		var i = 0;
		duration.each(function(d){
			var dc = '';
			if(d==this.config.startValues.duration) { 
				dc = 'current';
				this.config.startValues.durationIndex = i;
			};
			durationList.insert(new Element('li', {'class':dc}).update(d));
			i++;
		}.bind(this));
		subContainer.insert(durationList);
		container.insert(subContainer);
		container.insert(new Element('input', {'name':this.config.inputNames.duration, 'type':'hidden', 'id':'durationInput', 'value':this.config.startValues.duration}));
		return container;
	},	
	
	fillResultContainer: function(container) {
		
	var descP = new Element('p', {'class':'rateDescription'}).update(this.config.labeltext.interest.replace(/\[rate\]/, '<strong>'+this.config.data[this.config.startValues.amount][this.config.startValues.duration][1]+'%</strong>'));
		container.insert(descP);
		
	
	
		return container;
	},
	startObservers: function() {
		var bcc = this;
		var customFormElements = new Custom.init;
		Event.observe('amountSelect', 'change', function(){			
			bcc.current.amount = bcc.reformatAmount($('amountSelect').options[$('amountSelect').selectedIndex].value);						
			bcc.updateRate();
		});
		//console.log(customFormElements);
		var durationSlider = new Control.Slider('handle', 'slideContainer', {
			range: this.config.slider.range,
			values: this.config.slider.values,
			sliderValue: this.config.startValues.durationIndex,
			//sliderValue: 4,
			startSpan: 'colorPart',
			onSlide: function(v) { bcc.current.duration = bcc.config.slider.realValues[v]; bcc.updateRate(); $('durationInput').value = bcc.config.slider.realValues[v]; },
			onChange: function(v) { bcc.current.duration = bcc.config.slider.realValues[v]; bcc.updateRate(); $('durationInput').value = bcc.config.slider.realValues[v]; }
		});
		
	},
	updateRate: function() {
		var interest = this.config.data[this.current.amount][this.current.duration][1];
		var rate = [this.config.data[this.current.amount][this.current.duration][0], this.config.data[this.current.amount][this.current.duration][1]];
		//$$('#resultContainer p.rateDescription strong')[0].update(interest+'%');
		$$('#resultContainer .rateBox')[0].update('&euro; '+rate['0']);
	}
});