// dependencies: effects.js, edit_in_place.js, starrable.js

var MyWorldPreview = Class.create();

MyWorldPreview.prototype = Object.extend({
	initialize: function(node){
		//this.node = (node) ? $(node): $(Builder.node('div', { id: 'myworld_preview' }));
		this.node = $(node);
		if(this.node){
			this.node.hide();
			this.hider = null; // captures timeout
			this.lists = $H({});
			this.node.observe('mouseout',function(e){
				//Event.stop(e);
				this.stopShow();
				if(!this.hider && this.is_showing){
					this.hider = window.setTimeout(this.hide.bind(this),150);
				}
			}.bind(this));
			this.node.observe('mouseover',this.show.bind(this));
		}
	},
	
	hide: function(e){
		this.stopShow();
		if(this.is_showing){
			Effect.SlideUp(this.node, { duration: 0.2 });
			this.is_showing = false;
			this.hider = null;
		}
	},
	
	show: function(e){
		this.stopHide();
		if(!this.is_showing){
			// check position:
			var trigger = $('user-info');
			var trigger_offsets = Position.cumulativeOffset(trigger);
			var offleft = trigger_offsets[0];
			this.node.setStyle({ left: (offleft + trigger.offsetWidth - 422) + 'px' });
			Effect.SlideDown(this.node, { duration: 0.2 });
			this.is_showing = true;
			this.shower = null;
		}
	},
	
	stopHide: function(){
		if(this.hider){
			window.clearTimeout(this.hider);
			this.hider = null;
		}
	},
	
	stopShow: function(){
		if(this.shower){
			window.clearTimeout(this.shower);
			this.shower = null;
		}
	}
});


document.observe('dom:loaded', function(){
	var preview = new MyWorldPreview('myworld_preview');
	var trigger = $('user-info');
	if(trigger  && preview.node){
		trigger.appendChild(preview.node);
		var trigger_offsets = Position.cumulativeOffset(trigger);
		var offtop = trigger_offsets[1] + trigger.offsetHeight + 1;
		var offleft = trigger_offsets[0];
		// need to do this here for Effects
		preview.node.setStyle({ width : '400px', top: offtop + 'px', left: (offleft + trigger.offsetWidth - 400) + 'px', position: 'absolute', zIndex: '1000' });
		trigger.observe('mouseover',function(e){
			this.stopHide();
			if(!this.shower && !this.is_showing){
				this.shower = window.setTimeout(this.show.bind(this),400);
			}
		}.bind(preview));
		trigger.observe('mouseout',function(e){
			this.stopShow();
			if(!this.hider && this.is_showing){
				this.hider = window.setTimeout(this.hide.bind(this),150);
			}
		}.bind(preview));
	}
});