var Analyzer	= new Class({
	options : {
		loading	: {
			'padding'		:	'30px',
			'background'	:	'#ffffff url(/image/spinner.gif) no-repeat left top'
		},
		title : {
			'border-bottom'	: '1px solid #EEEEEE',
			'text-align'	: 'left',
			'font'			: 'normal bold 18px arial'
		},
		cell : {
			'float'			: 'left',
			'padding'		: '4px',
			'text-align'	: 'center',
			'background'	: '#fff',
			'border-bottom'	: '1px dotted #ccc',
			'margin-bottom'	: '8px'
		},
		pinyin : {
			'display'		: 'block',
			'font-size'		: '16px',
			'font-weight'	: 'bold',
			'color'			: '#8fc73e',
			'padding'		: '3px 5px 0px 5px'
		},
		chinese : {
			'display'		: 'block',
			'font-size'		: '16px',
			'padding'		: '3px 5px 0px 5px'
		},
		error : {
			'color'			: '#800000',
			'font'			: 'normal bold 14px arial',
			'padding'		: '30px 0 30px 0',
			'text-align'	: 'left'
		}
	},

	initialize : function(obj, options){
		this.analyzerForm	= $('analyzerform');
		this.resultElement	= $('result');
		
		this.analyzerForm.addEvent('submit', function(e){
			e.stop();
			if($('input').value == ''){
				this.error('Please type content!');
				return;
			}
			this.resultElement.empty().setStyles(this.options.loading);
			this.analyzerForm.set('send', {
				onComplete:function(txt){
					this.parseData(txt);
				}.bind(this)
			});

			this.analyzerForm.send();
		}.bind(this));
	},
	
	parseData : function(jsontxt){
		var results = JSON.decode(jsontxt);
		if(!$chk(results) || results.result == 'false' || !$chk(results.word)){
			this.error('Please try later!');
			return;
		}
		
		this.resultElement.erase('style');
		var resulttitle = new Element('div').inject(this.resultElement);
		new Element('span', {'styles':this.options.title}).appendText('Result list: ').inject(resulttitle);
		new Element('span').set('text', 'use your mouse to select the characters to see a popup definition.').setStyles({
			'font-size'		: '14px',
			'font-weight'	: 'bold'
		}).inject(resulttitle);
		var resultlist = new Element('div').inject(this.resultElement);
		results.word.each(function(item, index){
			var cell	= new Element('div', {'styles': this.options.cell}).inject(resultlist);
			var mark = item.mark;
			if(!$chk(mark) || mark == ''){
				mark = " ";
			}
			var origin = item.originword;
			if(!$chk(origin) || origin == ''){
				origin = " ";
			}
			new Element('span', {'styles' : this.options.pinyin}).set('html', mark).inject(cell);
			new Element('span', {'styles' : this.options.chinese}).set('html', origin).inject(cell);
		}, this);
		new Element('div', {'styles':{'clear':'both'}}).inject(resultlist);
		
	},
	

	error : function(errorMsg){
		this.resultElement.erase('style');
		this.resultElement.setStyles(this.options.error);
		this.resultElement.appendText(errorMsg);
	}	
});
Analyzer.implement(new Events, new Options);