$.widget("ui.fieldTitleOverlay", {
    init: function() {
        var $this = this;
        var opts = this.options;
        var el = this.element;
		var title = el.attr('title');
		if(opts.title) {
			title = opts.title;
		}
		var elId = el.attr('id');
		if(!title) {
			return;
		}
		if(!elId) {
			elId = 'field-'+Math.floor(Math.random()*1111);
			el.attr('id',elId);
		}
		el.wrap('<div class="'+opts.divClass+'"></div>');
		var div = el.parent();
		div.prepend('<label class="'+opts.labelClass+'" for="'+elId+'">'+title+'</label>');
		var label = $('label.'+opts.labelClass, div);
		if(opts.applyCss) {
			div.css('position','relative').css('float','left');
			label.css('position','absolute')
			.css('top',0)
			.css('left',0)
			.css('padding-left',el.css('padding-left'))
			.css('padding-top',el.css('padding-top'));
		}
        el.bind('keyup', function(e){
			$this.setClass(e,'focus');
		});
        el.bind('keydown', function(e){
			label.addClass('hidden');
		});
        el.bind('focus', function(e){
			$this.setClass(e,'focus');
		});
        el.bind('blur', function(e){
			$this.setClass(e);
		});
        if(el.val().length > 0) {
			label.addClass('hidden');
		}
    },
	setClass: function(e,cls) {
		var el = this.element;
		var label = $('label.'+this.options.labelClass,el.parent());
		label.removeClass('focus hidden');
		if(el.val().length > 0) {
			label.addClass('hidden');
		} if (cls == 'focus') {
			label.addClass('focus');
		}
	}
});
$.ui.fieldTitleOverlay.getter = "";
$.ui.fieldTitleOverlay.defaults = {
	labelClass:'field-title-overlay-label',
	divClass:'wrap-field-title-overlay',
	applyCss:true,
	title:null
};