var $overlay_wrapper;
var $overlay_panel;
	
	/**
	  *	Create an overlay with the content of a given id in the DOM
	  *	@param	id in dom
	  *	@param	caption		is also shown with the html from the above	
	  */
	function overlayFromId(id,caption){
		if ( !$overlay_wrapper ){append_video_overlay();}
		$j("#lbCaption").text(caption);
		$j("#lbCenter").html($j("#"+id).html());
		//resize_video(480,380); // put this line in comment if you don't want to resize this
		$overlay_wrapper.slideToggle(500);
		return false;
	}

	/**
	  *	Sets the css-property of width and height for each object and embed tag into the overlay
	  */
	function resize_video(width,height){
		$j("#videobox_overlay object").each(function(){$j(this).css('width',width);$j(this).css('height',height);});
		$j("#videobox_overlay embed").each(function(){$j(this).css('width',width);$j(this).css('height',height);});
	}

	/**
	  *	Closes the overlay
	  */
	function close_video_overlay(){
		$overlay_wrapper.fadeOut(500);return false;
	}
	
	/**
	  *	This function creates an hardcoded overlay
	  *	May be edited, css description in videobox.css
	  */
	function append_video_overlay(){
		$overlay_wrapper = $j('<div id="videobox_overlay" style="display:none;"></div>').appendTo( $j('BODY') );
		$overlay_panel = $j('<div style="visibility: visible; opacity: 0.8;" id="lbOverlay"></div><div id="lbCenter"></div><div id="lbBottomContainer"><div style="margin-top: 0px;" id="lbBottom"><a href="" id="lbCloseLink" onclick="return false;"></a><div id="lbCaption"></div><div id="lbNumber"></div><div style="clear: both;"></div></div></div>').appendTo( $overlay_wrapper );
		attach_close_events();
	}

	/**
	  *	attach the events that close the overlay to the close button and the overlay arround the center
	  */
	function attach_close_events(){
		$j("#lbCloseLink").click(function(){
			return close_video_overlay();
		});
		$j("#lbOverlay").click(function(){
			return close_video_overlay();
		});
	}

	/**
	  *	@UNUSED
	  *	This is just an idea for later
	  *	! If u want to use this function you need a custom stylesheet too, this can be done in later versions
	  */
	function resize_overlay(){
		var height=0,width=0;
		$j("#videobox_overlay object").each(function(){
			width = ($j(this).attr('width') > width ? $j(this).attr('width') : width);
			height = ($j(this).attr('height') > height ? $j(this).attr('height') : height);
		});
		$j("#videobox_overlay embed").each(function(){
			width = ($j(this).attr('width') > width ? $j(this).attr('width') : width);
			height = ($j(this).attr('height') > height ? $j(this).attr('height') : height);
		});
		var top=280;
		var marginleft=(0-(width/2));
		$j("#lbCenter").css("margin-left",marginleft);
		$j("#lbBottomContainer").css("margin-left",marginleft);
		$j("#lbCenter").css("width",(width+5));
		$j("#lbBottomContainer").css("width",(width+5));
		$j("#lbCenter").css("height",(height+5));
		$j("#lbCenter").css("margin-top",top);
		$j("#lbBottomContainer").css("margin-top",(top+height+5));
		//alert(width);alert(height);
	}


//$j = jQuery.noConflict(); // important to be compatible in magento