$(function(){
var HTML5Video = (typeof HTMLVideoElement != 'undefined');
function videoBubble($this) {
	var
		self = this,
		data = this.data = $this.data(),
		video = this.video =
			(HTML5Video) ?
				$('<video loop="" tabindex="0"/>').bind('ended', function(){ this.play(); }) :
				$('<div/>'),
		target = video,
		v = video.get(0),
		bubble = this.bubble = $('<div class="bubble video" style="position:absolute;">').hide();
	
	this.handler = $this;
	
	if(HTML5Video && 'poster' in data)
		video.attr('poster', data['alt']);
	if('alt' in data)
		$('<img border="0"/>').attr('src', data['alt']).appendTo(video);
	if('width' in data)
		video.attr('width', data.width);
	if('height' in data)
		video.attr('height', data.height);
	if('link' in data)
		target = this.link = $('<a/>').attr('href', data.link).append(video);
	if('position' in data)
		this.position = parseInt(data.position);
	if('title' in data)
		$('<p class="bubble_title"/>').text(data.title).prependTo(bubble);
	else
		bubble.addClass('no-title');
	
	if(!('pin' in data && data.pin == 'no'))
		$('<div class="pin"/>').addClass(('pin' in data ? data.pin : 'horizontal-left')).appendTo(bubble);
	
	bubble.append(target).appendTo('body');
	
	if('class' in data)
		video.addClass(data['class']);
	
	if('ui-elements' in data)
		$.each(data['ui-elements'].split(/\s+/), function(k,v) {
			$('<div/>').addClass(v).prependTo(bubble);
		});
	if('close' in data) {
		$('<div class="bubble_close"/>').text(data.close).prependTo(bubble).bind('click', function(){ self.hide() });
		this.listen(false);
	} else {
		this.listen(true);
	}
}
videoBubble.prototype = {
	bubble : null,
	data : {},
	handler : null,
	state : false,
	video : false,
	link : false,
	position : 0,
	listen : function(autoclose) {
		var self = this;
		if(autoclose) {
			this.handler.bind({
				'mouseover': function() { self.show(); },
				'mouseout' : function() { self.hide(); }
			});
		} else {
			this.handler.one('mouseover', function() { self.show(); });
		}
	},
	show : function() {
		var
			$this = this.handler,
			bubble = this.bubble.show(),
			top = $this.offset().top,
			t = top - $(document).scrollTop(),
			left = ($this.offset().left + $this.width() * 0.5 - bubble.width() * 0.5) + this.position,
			h = bubble.outerHeight(true),
			v = this.element;
		
		if(!v && HTML5Video) {
			v = this.element = this.video.get(0);
			if('src' in this.data) {
				$.each(this.data.src.split('#'), function(k,d) {
					d = d.split(' ');
					$('<source/>').attr({
						type : d[0],
						src : d[1]
					}).appendTo(v);
				});
			}
		}
		if(t - h > 0) {
			bubble.removeClass('bottom').css({
				left: left,
				top: top - h
			});
		} else {
			bubble.addClass('bottom').css({
				left: left,
				top: top + $this.outerHeight()
			});
		}
		if(HTML5Video) v.play();
	},
	hide : function() {
		var self = this;
		this.listen();
		this.bubble.hide();
		if(HTML5Video) this.element.pause();
	}
};
var vids = $('.make_video_bubble');
vids.each(function(k,e) {
	new videoBubble(vids.eq(k));
});
});