(function(){
var dataset = {
	'myFirstDataset': [[0, 1], [1, 2.2], [2, 1.414], [3, 4], [4, 3.4]],
	'mySecondDataset': [[0, 0.7], [1, 2.67], [2, 1.34], [3, 3], [4, 3.2]],
	'myThirdDataset': [[0, 0.46], [1, 1.45], [2, 2.5], [3, 1.2], [4, 2.4]],
	'myFourthDataset': [[0, 0.86], [1, 0.83], [2, 0.2], [3, 1.73], [4, 0.76]],
	'myFifthDataset': [[0, 0.45], [1, 0.2], [2, 0.5], [3, 0.8], [4, 0.1]]
};

var pieSet = {
	'firstPie': [[0, 1]],
	'secondPie': [[0, 0.7]],
	'thirdPie': [[0, 0.5]],
	'fourthPie': [[0, 0.5]],
	'fifthPie': [[0, 0.5]]
};

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);		
		
		// Position canvas.
		this.scroll();
		Event.observe(window, 'scroll', this.scroll.bind(this));	
		
		// Render default chart.		
		this.resetRender();
		
		// Assign onChange event handler.
		this.formElements.invoke('observe', 'change', this.resetRender.bind(this));
		if( Plotr.Base.excanvasSupported() ){
			this.formElements.invoke('observe', 'click', this.resetRender.bind(this));
		}
				
		Event.observe($('resetBtn'), 'click', function(){
			if(confirm('You\'ll lose the current configuration, are you sure?')){
				this.form.reset();
				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((this.type == 'PieChart')?pieSet:dataset);
		this.chart.render();
		
		this.showCode();
	},
	
	switchChart: function(type){
		var chart;
		
		$$('.barOpt, .pieOpt, .lineOpt', '#form tr').invoke('removeClassName', 'hidden');
		this.formElements.invoke('enable');

		switch(this.type){
			case 'BarChart':
				$$('.lineOpt', '.pieOpt').invoke('addClassName', 'hidden');
				$$('.lineOpt input', '.pieOpt input').invoke('disable');
				
				chart = new Plotr.BarChart('plotr', this.opts);			
				break;
			case 'LineChart':
				$$('.barOpt', '.pieOpt').invoke('addClassName', 'hidden');
				$$('.barOpt select', '.pieOpt input').invoke('disable');
				
				$$('.lineOpt').invoke('removeClassName', 'hidden');
				$$('.lineOpt input')[0].enable();
				
				chart = new Plotr.LineChart('plotr', this.opts);			
				break;
			case 'PieChart':
				$$('.barOpt, .lineOpt, .axis2, .axis3, .axis4, .axis5, .axis6, .axis7, .bg3, .bg4').invoke('addClassName', 'hidden');
				$$('.barOpt select', '.lineOpt input').invoke('disable');
								
				chart = new Plotr.PieChart('plotr', this.opts);			
				break;
			default:
				throw 'Wrong parameters!';
		}		
		return chart;
	},
		
	namespaceOpts: function(){
		
		this.type = this.opts.charttype;
		delete this.opts.charttype;	
		
		for(var i in this.opts){
			
			switch(this.opts[i]){
				case 'true': this.opts[i] = true; break;
				case 'false': this.opts[i] = false;
			}		
			
			if(i.indexOf('-') != -1){
				this.addOption(i);
			}else if(this.defaultOpts[i] != this.opts[i]){				
				this.diff[i] = this.opts[i];
			}
		}
	},
	
	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];					
		}
	},
	
	showCode: function(){
		var code =
		"<br /><span class=\"comment\">/* Plotr Javascript Code */</span><br /><br />"+
		"var dataset = " + Object.toJSON(((this.type == 'PieChart')?pieSet:dataset)) + ";<br /><br />" +
		"var options = " + Object.toJSON(this.diff) + ";<br /><br />" +
		"var chart = new Plotr." + this.type + "('plotr', options);<br />" +
		"chart.addDataset(dataset);<br />" +
		"chart.render();<br /><br />" +
		"<span class=\"comment\">/* Plotr HTML Code */</span><br /><br />" +
		'&lt;div&gt;&lt;canvas id=\&quot;plotr\&quot; height=\&quot;300\&quot; width=\&quot;500\&quot;&gt;&lt;/canvas&gt;&lt;/div&gt;';
		
		$('code').innerHTML = code;
	},
	
	scroll: function(){
		var top = (window.pageYOffset || document.documentElement.scrollTop) - 400;		
		if( top > 0 && top < '570')
			$('canvas').style.top = top + 'px';		
	},
	
	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();
})();