var LookUp	= new Class({
	options : {
		offsets: {'x': 0, 'y': 0},
		far : {
			'border'	: '1px solid #c8e595',
			'opacity'	: 0, 
			'position'	: 'absolute',
			'left'		: '-1000px', 
			'top'		: '-1000px', 
			'zIndex'	: 1000
		},
		
		hidden : {
			'opacity'	: 0, 
			'left'		: '-1000px', 
			'top'		: '-1000px',
			'width'		:	'5px',
			'height'	:	'5px'
		},
		
		loading	: {
			'position'		:	'absolute',
			'border'		:	'1px solid #c8e595',
			'padding'		:	'20px',
			'background'	:	'#ffffff url(http://www.guavatalk.com/image/spinner.gif) no-repeat center',
			'width'			:	'50px',
			'height'		:	'50px',
			'overflow'		:	'hidden'
		},
		
		dialog : {
			'position'		: 	'absolute',
			'border'		:	'1px solid #c8e595',
			'padding'		:	'5px',
			'background'	:	'#ffffff url(http://www.guavatalk.com/image/dialogbg.gif) no-repeat center',
			'opacity'		:	100,
			'overflow'		:	'auto',
			'text-align'	:	'left'
		},
		
		error : {
			'position'		: 	'absolute',
			'border'		:	'1px solid #c8e595',
			'padding'		:	'5px',
			'background'	:	'#ffffff url(http://www.guavatalk.com/image/dialogbg.gif) no-repeat center'
		},
		
		arrow : {
			'font'		:	'normal 11px Verdana, Arial', 
			'color'		:	'#bfbfbf', 
			'padding'	:	'0 6px 0 0'
		},
		
		mark : {
			'font'		:	'normal 20px Arial', 
			'color'		:	'#8fc73e', 
			'padding'	:	'0px 0px 0px 10px'
		},
		
		content : {
			'border-bottom'		:	'1px dotted #ccc', 
			'padding-bottom'	:	'5px', 
			'margin-bottom'		:	'5px'
		},
		
		chinese : {
			'font'	: 'normal 26px \u9ed1\u4f53', 
			'color'	: '#000000'
		},
		
		stroke : {
			'font'	: 'normal 26px \u9ed1\u4f53', 
			'color'	: '#408080',
			'cursor': 'pointer'
		},
		
		en : {
			'font'	:	'bold 12px Arial', 
			'color'	:	'#56880d'
		},
		
		overlay : {
			'position'			: 'absolute',
			'left'				: '0px',
			'top'				: '0px',
			'background-color' 	: '#000000',
			'opacity' 			: 0,
			zIndex				: 99
		},
		
		button : {
			'color'		: '#FFFFFF',
			'cursor'	: 'pointer',
			'padding'	: '3px',
			'font-size'	: '12px'
		}
	},
	
	initialize : function(obj, options){
		this.translate	= new Element('div', {'styles': this.options.far}).inject(document.body);
		this.vcontainer	= new Element('div', {'styles': this.options.far}).inject(document.body);
		this.speaker	= new SpeakerFlash('vocablelist');
		this.oldinput	= '';
		
		this.initbar();
		this.addCapture();
	},
	
	initbar : function(){
		var bar = new Element('div').inject(document.body);
		bar.setStyles({
			'position'	: 'absolute',
			'left'		: '10px',
			'top'		: '10px',
			'border'	: '3px solid #c8e595',
			'width'		: '171px',
			'height'	: '19px',
			'padding'	: '1px',
			'background-color'	: '#fff'
		});
		
		var tran = new Element('span').set('text', 'GuavaTalk Translate').inject(bar);
		tran.setStyles({
			'background-color'	: '#effcd0',
			'color'			: '#8fc73e',
			'height'		: '17px',
			'display'		: 'block',
			'float'			: 'left',
			'padding'		: '2px 5px 0 5px',
			'font'			: 'bold 11px Arial'
		});
		var but = new Element('a').set('text', 'Turn off').inject(bar);
		but.setStyles({
			'width'		: '49px',
			'height'	: '16px',
			'float'		: 'right',
			'padding'	: '3px 0 0 0',
			'color'		: '#666',
			'font'		: 'bold 9px Verdana',
			'background-color'	: '#EFEFEF',
			'cursor'	: 'pointer'
		});
		but.addEvent('click', function(e){
			this.translateSwitch();
		}.bind(this));
		this.bar	= bar;
		this.tran	= tran;
		this.but	= but;
		this.currentStatus = true;
		
		window.addEvent('scroll', function(e){
			this.bar.setStyle('top', (document.getScroll().y + 10) + 'px');
		}.bind(this));
	},
	
	addCapture : function(){
		document.addEvent('mouseup', function(e){
			e.stop();
			var txt = '';
			if(window.getSelection){
				txt = window.getSelection();
			}else if(this.getSelection){
				txt = this.getSelection();
			}else if(this.selection){
				txt = this.selection.createRange().text;
			}
		
			if(txt == ''){
				lookup.hide(e);
				return;
			}
			
			if(txt != ''){
				lookup.looking(txt, e);
			}
		});
	},
	
	translateSwitch : function(){
		if(this.currentStatus){
			this.tran.setStyles({
				'color'				: '#666',
				'background-color'	: '#e5e5e5'
			});
			this.but.setStyle('color', '#8fc73e').set('text', 'Turn on');
			document.removeEvents('mouseup', null);
		}else{
			this.tran.setStyles({
				'color'				: '#8fc73e',
				'background-color'	: '#effcd0'
			});
			this.but.setStyle('color', '#666').set('text', 'Turn off');
			this.addCapture();
		}
		this.currentStatus = !this.currentStatus;
	},
	
	loading : function(event){
		this.event = event;
		this.translate.erase('style');
		this.translate.empty().setStyles(this.options.loading);
		this.locate(event);
		this.translate.morph({
			width : '100px',
			height: '100px'
		});
	},
	
	locate: function(event){
		var win = {'x': window.getWidth(), 'y': window.getHeight()};
		var scroll = {'x': window.getScrollLeft(), 'y': window.getScrollTop()};
		var tip = {'x': this.translate.offsetWidth, 'y': this.translate.offsetHeight};
		var prop = {'x': 'left', 'y': 'top'};
		for (var z in prop){
			var pos = event.page[z] + this.options.offsets[z];
			if ((pos + tip[z] - scroll[z]) > win[z]) pos = event.page[z] - this.options.offsets[z] - tip[z];
			this.translate.setStyle(prop[z], pos);
		};
		
		this.left	= this.translate.getStyle('left');
		this.top	= this.translate.getStyle('right');
	},
	
	looking : function(input, event){
		if(this.oldinput == input && this.showing){
			return;
		}
	
		var coord	= this.translate.getCoordinates();
		var pos		= this.translate.getPosition();
		var scoll	= this.translate.getScroll();
		if(event.page.x >= coord.left && event.page.x <= (pos.x + coord.width) 
			&& event.page.y >= (coord.top + scoll.y) && event.page.y <= (pos.y + coord.height + scoll.y) ){
			return;	
		}

		this.oldinput = input.toString();	
		this.loading(event);
		this.script		= new Element('script', {
			'charset'	: 'utf-8'
		}).inject(document.body);
		this.script.src = "http://www.guavatalk.com/translate.go?m=capturechineseword&jsmethod=lookup.token&input=" + encodeURIComponent(input);
	},
	
	token : function(jsontxt){
		var arrow = new Element('span', {'styles' : this.options.arrow}).appendText('\u00bb');
		var results = JSON.decode(jsontxt);
		this.script.dispose();
		
		if(!$chk(results.word)){
			this.error('No records.');
			return;
		}
		
		this.vcontainer.empty().erase('style').setStyles(this.options.far);
		results.word.each(function(item, index){
			var title = new Element('div', {});
			var speaker = new Element('img', {
				'id':'speaker'+index, 
				'src':'http://www.guavatalk.com/image/speaker.gif', 
				'styles' : {
					'padding-left':'10px','cursor':'pointer'
				},
				'events' : {
					'click': function(pinyin){
						this.speaker.loadVocalbePinyin(pinyin);
					}.pass(item.pinyin, this).bind(this)
				}
			});
			var arrStroke = item.stroke.split(',');
			for(var i=0; i<item.originword.length; i++){
				var tmpWord = item.originword.charAt(i);
				var tmpElement = new Element('span', {'styles' : this.options.chinese}).appendText(tmpWord);
				if(parseInt(arrStroke[i], 10)>0){
					tmpElement.addEvent('click', function(flashId){
						this.stroke(flashId);
					}.pass(arrStroke[i], this).bind(this));
					tmpElement.setStyles(this.options.stroke);
				}
				tmpElement.inject(title);
			}
			if($chk(item.mark) && item.mark != ''){
				title.adopt(new Element('span', {'styles' : this.options.mark}).appendText(item.mark));
				title.adopt(speaker);
			}
			this.vcontainer.adopt(title);
			var content = new Element('div', {'styles' : this.options.content});
			if($defined(item.wordbook)){
				item.wordbook.each(function(subitem, subindex){
					if(subitem.english != ''){
						var english = new Element('div');
						var subenglish = new Element('span', {'styles' : this.options.en}).appendText(subitem.english);
						english.adopt(arrow.clone()).adopt(subenglish).inject(content);
					}
				}, this);
			}
			this.vcontainer.adopt(content);
		}, this);
		
		var size = this.vcontainer.getScrollSize();
		var toX	= (size.x > 400) ? 400 : ((size.x < 200) ? 200 : size.x);
		var toY	= (size.y > 260) ? 260 : ((size.y < 120) ? 120 : size.y);
		
		this.translate.morph({
			width	: [50, toX],
			height	: [50, toY],
			opacity:100
		});	
		
		this.translate.adopt(this.vcontainer.getChildren());	
		this.translate.setStyles(this.options.dialog);
		this.showing = true;
	},
	
	stroke : function(flashId){
		if(flashId <= 0)
			return;
		
		var overlay = new Element('div', {'styles': this.options.overlay}).inject(this.translate);
		var scrollSize = this.translate.getScrollSize();
		var size = this.translate.getSize();
		var toX	= scrollSize.x;
		var toY = scrollSize.y;
		if(size.x > scrollSize.x && size.y > scrollSize.y){
			this.translate.setStyle('overflow', 'hidden');
			toX	= size.x;
			toY = size.y;
		}
		overlay.morph({
			width	: toX,
			height	: toY
		});
		overlay.fade(0.7);
		
		var panel = this.translate.getScroll();
		var flash = new Element('div',{
			'styles' : {
				'position'	: 'absolute',
				'left'		: '0px'
			}
		});
		var flashHTML = '<embed src="http://www.guavatalk.com/image/stroke/' + flashId + '.swf" quality="high" width="100" height="100" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash"></embed>';
		flash.set('html', flashHTML).inject(overlay);
		flash.setStyle('margin-top', panel.y);
				
		var hideButton = new Element('div', {'styles'	: this.options.button}).appendText('[HIDE]');
		hideButton.addEvent('click', function(overlay){
			overlay.dispose();
		}.pass(overlay, this).bind(this)); 
		flash.adopt(hideButton);
	},
	
	hide : function(event){
		if(!this.showing)
			return;

		var coord	= this.translate.getCoordinates();
		var pos		= this.translate.getPosition();
		var scoll	= this.translate.getScroll();
		if(event.page.x >= coord.left && event.page.x <= (pos.x + coord.width) 
			&& event.page.y >= (coord.top + scoll.y) && event.page.y <= (pos.y + coord.height + scoll.y) ){
			return;	
		}
		this.showing = false;		
		this.translate.morph(this.options.hidden);
	},
	
	error : function(errorMsg){
		this.translate.setStyles(this.options.error);
		this.translate.set('html', errorMsg);
		(function(){this.translate.setStyles(this.options.far)}).delay(2000, this);
	}
	
});
LookUp.implement(new Events, new Options);

var lookup = new LookUp();