var editInPlace = new Class({
	options:{
		url: false,
		postBody: '',
		type: 'input', // input OR textarea
		maxlength: false, // maxlengh input attribute, for input only
		hover_css_class: 'hover', // cssclass OR false
		tip: false // tip text OR false
	},

	initialize:function(elemns,options){
		this.setOptions(options);
		this.elemns = elemns;
		this.elemns.each(function(el){
			//define id
			el.identifier = this.options.url && el.className.indexOf('id:')>-1 ? el.className.replace(/^.+:/,'').replace(/ .+$/,'') : false;
			//events
			el.addEvents({
				click:function(){
					if(el.getProperty('original')) return;
					//
					el.setProperty('original',el.innerHTML.trim().replace(/\n/g,' ')).empty();
					//
					var input = new Element(this.options.type,{
						events:{
							blur:function(){							
								var current = input.getProperty('value').trim().replace(/\n/g,' ');
								var original = el.getProperty('original');
								if(this.options.url && el.identifier && current!=original){
									
									/* replace */
									/* becomes -~- cause ajax uses & too... - needs to be replaced in php */
									current = current.replace(/Ä/g, "-~-Auml;");
									current = current.replace(/ä/g, "-~-auml;");
									current = current.replace(/Ö/g, "-~-Öuml;");
									current = current.replace(/ö/g, "-~-ouml;");
									current = current.replace(/Ü/g, "-~-Uuml;");
									current = current.replace(/ü/g, "-~-uuml;");
									current = current.replace(/ß/g, "-~-szlig;");
									
									var postBody = this.options.postBody+'&id='+el.identifier+'&edited='+current.replace(/&/,'%26');
																		 
									new Ajax(this.options.url,
										{
											postBody: postBody,
											onRequest: function()
												{
													Page.loaderShow();
												},
											onComplete: function()
												{						
													Page.loaderHide();
												}
										}
									).request();
									
									// replace -~- for viewing AFTER ajax
									current = current.replace(/-~-/g, "&");
									
									/*|------>*/ // alert(postBody); //<------| FOR TEST ONLY
								}
								input.remove();
								el.removeProperty('original').setHTML(current);
							}.bind(this),
							//
							keydown:function(e){
								var event = new Event(e);
								if(event.key=='enter' || event.key=='tab' || event.key=='esc') this.blur()
							}
						}
					});
					if(this.options.maxlength) input.setProperty('maxlength',this.options.maxlength);
					input.setProperty('value',el.getProperty('original')).inject(el).focus()
				}.bind(this)
			});
			//on hover
			if(this.options.hover_css_class){
				el.addEvents({
					'mouseenter':function(){el.addClass(this.options.hover_css_class)}.bind(this),
					'mouseleave':function(){el.removeClass(this.options.hover_css_class)}.bind(this)
				})
			}
			//adding title for tip
			if(this.options.tip) el.setProperty('title',this.options.tip);
		}, this)
		//tips
		if(this.options.tip) new Tips(this.elemns, {
				showDelay: 0,
				hideDelay: 0,
				maxTitleChars: 50
			});
	}
	
});

editInPlace.implement(new Options);