(function(){

function dataset(){
		var store = {};
		for(var n = 1; n <= 6; n++) {
			if ($('card' + n).style.display != 'none') {
				var LA = parseFloat(replaceChar(replaceChars(document.temps.elements['LA' + n].value)));
				var PI = parseFloat(replaceChar(document.temps.elements['PI' + n].value));
				var PO = parseFloat(replaceChar(document.temps.elements['PO' + n].value));
				var YR = parseFloat(replaceChar(document.temps.elements['YR' + n].value));
				var IR = parseFloat(replacePct(document.temps.elements['IR' + n].value)) / 1200;
				var j = 0;
				store['Card ' + n] = Array.from($R(0,YR).toArray()).collect(function(){
					return [j++, (LA - ((LA / YR) * (j - 1)))];
				});
			}
		}
		return store;
	}
	
var formControl = {
	opts: {},
	diff: {},
	chart: null,
	form: null,
	formElements: null,
	type: '',
	
	init: function(){
		
		this.form = $('form');
		this.form.reset();
		this.formElements = Form.getElements(this.form);
		
		// Render default chart.		
		this.resetRender();
		
		// Assign onChange event handler.
		this.formElements.invoke('observe', 'change', this.resetRender.bind(this));
		Event.observe($('compute'), 'click', this.resetRender.bind(this));
		Event.observe($('addcard1'), 'click', this.resetRender.bind(this));
		Event.observe($('addcard2'), 'click', this.resetRender.bind(this));
		Event.observe($('removeall1'), 'click', this.resetRender.bind(this));
		Event.observe($('removeall2'), 'click', this.resetRender.bind(this));
		Event.observe($('removecard1'), 'click', this.resetRender.bind(this));
		Event.observe($('removecard2'), 'click', this.resetRender.bind(this));
		Event.observe($('removecard3'), 'click', this.resetRender.bind(this));
		Event.observe($('removecard4'), 'click', this.resetRender.bind(this));
		Event.observe($('removecard5'), 'click', this.resetRender.bind(this));
		Event.observe($('removecard6'), 'click', this.resetRender.bind(this));
	},
	
	resetRender: function(){
		if(this.chart){
			this.chart.clean();
			this.diff = {};
		}
		
		this.opts = this.form.serialize(true);		
		this.namespaceOpts();
		this.chart = this.switchChart(this.opts.charttype);		
		this.chart.addDataset(dataset());
		this.chart.render();
	},
	
	switchChart: function(type){
		var chart;
		switch(this.type){
			case 'BarChart':
				this.addOption('axis-lineColor');
				this.addOption('axis-labelFontSize');
				this.addOption('axis-labelFont');
				this.addOption('yTickPrecision');
				this.opts.padding = {left: 40, right: 0, top: 10, bottom: 20};
				this.opts.colorScheme = new Hash({
					'Card 1': '#FB5F0C',
					'Card 2': '#BB5B3D',
					'Card 3': '#3A8133',
					'Card 4': '#813379',
					'Card 5': '#1C4A7E',
					'Card 6': '#666666',
					'Suggested Card': '#000000'
				});
				chart = new Plotr.BarChart('plotr', this.opts);			
				break;
			case 'LineChart':
				this.addOption('axis-lineColor');
				this.addOption('axis-labelFontSize');
				this.addOption('axis-labelFont');
				this.addOption('yTickPrecision');
				this.opts.shouldFill = false;
				this.opts.padding = {left: 40, right: 0, top: 10, bottom: 20};
				this.opts.colorScheme = new Hash({
					'Card 1': '#FB5F0C',
					'Card 2': '#BB5B3D',
					'Card 3': '#3A8133',
					'Card 4': '#813379',
					'Card 5': '#1C4A7E',
					'Card 6': '#666666',
					'Suggested Card': '#000000'
				});
				chart = new Plotr.LineChart('plotr', this.opts);			
				break;
			default:
				throw 'Wrong parameters!';
		}		
		return chart;
	},
		
	namespaceOpts: function(){
		
		this.type = this.opts.charttype;
		delete this.opts.charttype;
	},
	
	addOption: function(option){
		
		if(this.opts[option] == undefined){
			return;
		}
		
		var optName = option.split('-');
		
		if(optName.length == 2){
			
			if(!this.opts[optName[0]]){
				this.opts[optName[0]] = {};
			}
			
			this.opts[optName[0]][optName[1]] = this.opts[option];
			
			if(this.defaultOpts[optName[0]][optName[1]] != this.opts[option]){
				
				if(!this.diff[optName[0]]){
					this.diff[optName[0]] = {};
				}
				
				this.diff[optName[0]][optName[1]] = this.opts[option];
			}
			
			delete this.opts[option];
		}else if(optName.length == 3){
					
			if(!this.opts[optName[0]]){
				this.opts[optName[0]] = {};
			}
			
			if(!this.opts[optName[0]][optName[1]]){
				this.opts[optName[0]][optName[1]] = {};
			}		
			
			this.opts[optName[0]][optName[1]][optName[2]] = this.opts[option];
			
			if(this.defaultOpts[optName[0]][optName[1]][optName[2]] != this.opts[option]){
				
				if(!this.diff[optName[0]]){
					this.diff[optName[0]] = {};
				}
				
				if(!this.diff[optName[0]][optName[1]]){
					this.diff[optName[0]][optName[1]] = {};
				}
				
				this.diff[optName[0]][optName[1]][optName[2]] = this.opts[option];
			}
			
			delete this.opts[option];					
		}
	},
	
	defaultOpts: {
			axis: {
				lineWidth:			"1.0",
				lineColor:			'#000000',
				tickSize:			"3.0",
				labelColor:			'#666666',
				labelFont:			'Tahoma',
				labelFontSize:		"9",
				labelWidth: 		50.0,
				x: {
					hide:			false,
					values:			null,
					ticks:			null,
					tickCount:		'10',
					tickPrecision:	1
				},
				y: {
					hide:			false,
					ticks:			null,
					tickCount:		10,
					tickPrecision:	1,					
					values:			null			
				}	
			},
			background: {
				color:				'#f5f5f5',
				hide:				false,
				lineColor:			'#ffffff',
				lineWidth:			1.5
			},
			legend:	{
				opacity:			'0.8',
				borderColor:		'#000000',
				style:				{},
				hide:				false,
				position:			{'top': '20px', 'left': '40px'}				
			},
	        padding: {
				left: 				30, 
				right: 				30, 			
				top: 				5,
				bottom: 			10
			},			
			stroke:	{
				color:				'#ffffff',
				hide:				false,								
				shadow:				true,
				width:				2	
			},			
			fillOpacity:			1.0,
	        shouldFill: 			true,		
	        axisTickSize: 			3,
	        axisLineColor: 			'#000000',
			barWidthFillFraction:	0.75,
			barOrientation: 		'vertical',
        	xOriginIsZero: 			true,
			yOriginIsZero:			true,
			pieRadius: 				0.4
	    }
};
formControl.init();
})();