function expand(e) {
	var iframesWidth = 570;
	$('#fb-panel-button').unbind('mouseenter');
	$('#fb-panel-content').bind('mouseleave', collapse);
	$(this).addClass('open');
	$('#fb-panel-content').animate({
		'width' : iframesWidth
		}, 500, function() {
			$('#fb-panel-button, #fb-panel-content').bind('mouseleave', collapse);
		}
	);
}

function collapse() {
	$('#fb-panel-button, #fb-panel-content').unbind('mouseleave');
	$('#fb-panel-button, #fb-panel-content').bind('mouseleave', function() { });
	$('#fb-panel-content').animate({
		'width' : 0
		}, 300, function() {
			$('#fb-panel-content').hide();
			$('#fb-panel-button').removeClass('open');
			$('#fb-panel-button').bind('mouseenter', expand);
		}
	);
}

function fbSetPosition() {

//	var fb_panel_top = $('#fb-panel').position().top;
	var window_size = $(window).scrollTop();

	if (window_size != 0) {

		var fb_panel_new_position = 60 - window_size;

		if (fb_panel_new_position < 150) {
			fb_panel_new_position = 150;
		}
	}

	$('#fb-panel').css("top", +fb_panel_new_position + "px");
}

$(function() {
		var likeBoxHref = 'http%3A%2F%2Fwww.facebook.com%2Fpages%2FProemotion-Events-Hostesses%2F139438762775122';
		var iframesWidth = 570;
		var oldOffset = null;

		var code = [];
		code.push('<div id="fb-panel">');
		code.push('<div id="fb-panel-content">');
		code.push('<div id="fb-likebox"><iframe id="fb-likebox-fr" src="http://www.facebook.com/plugins/likebox.php?href='
			+ likeBoxHref
			+ '&width='
			+ iframesWidth
			+ '&connections=20&stream=false&header=false&height=255" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:570px; height:255px;" allowTransparency="true"></iframe></div>');

		code.push('</div>');
		code.push('<div id="fb-panel-button">');
		code.push('</div>');
		$('body').append($(code.join('')));
		
		fbSetPosition();

		$(window).scroll(function() {
			fbSetPosition()
		});
		
		$('#fb-panel-button').bind('mouseenter', expand);
					/* events attach end */
});
