

			var jqueryBox = function ( param ) {
				// param object contains: 
				//		imagepath :	path to imagefolder for imageset 'image/css/box/12/'
				//		arrow	  : 'left' || 'right' || 'none' 
				
				// Init ------------------------------------------------------------------------------------------
				var html,
					// basic box-Object
					that = {
						
						// Defaults -----------------------------
						imagepath 	: 'image/css/box/12/',		// path to imageset
						arrow 	  	: 'left',					// left | right | none
						arrowShift 	: 54, 						// default shift for arrow
						
						
						// Public Methods -----------------------
						preload : function (){
							var loader,
								i,
								images = [
									'topleft.png',
									'topright.png',
									'bottomleft.png',
									'bottomright.png',
									'background.png',
									'arrowleft.png',
									'arrowright.png'
								];
							for (imageID in images){
								loader = new Image();
								loader.src = this.imagepath + images[imageID];
							}
						},
						
						
						setArrow : function (direction){
							if (direction === 'left') {
								$('.JqueryBoxLeftarrow', that.jqueryBox ).show();	
								$('.JqueryBoxRightarrow', that.jqueryBox ).hide();	
							}
							else if (direction === 'right') {
								$('.JqueryBoxLeftarrow', that.jqueryBox ).hide();	
								$('.JqueryBoxRightarrow', that.jqueryBox ).show();	
							}
							else {
								$('.JqueryBoxLeftarrow', that.jqueryBox ).hide();	
								$('.JqueryBoxRightarrow', that.jqueryBox ).hide();	
							}
						},
						setContent : function (html) {
							$('.JqueryBoxContent', that.jqueryBox ).html(html) ;
						},
						show : function () {
							that.jqueryBox.show();
						},
						hide : function () {
							that.jqueryBox.hide();
						},
						setPosition : function (left, top){
							that.jqueryBox.css(
								{
									left: left,
									top: top-that.arrowShift
								}
							)
						},
						setPositionRelativeTo : function (jqobject, offsetLeft, offsetTop){
							// jqobject is the object that the box should be positioned relative to
							var offset = jqobject.offset();	// get object offset
							offset.left += offsetLeft;			// precalc offset
							offset.top += offsetTop;
							
							/* check the offset */
							// shiftup (positive number)  (amount to shift up by arrowshift)
							var shiftup = 
								Math.max( // (minimum = 0)
									0, 
									Math.min( // maximum shiftup is: offset.top - that.arrowShift
										offset.top - that.arrowShift - 40, // 40px extra space on top and bottom
										(offset.top - that.arrowShift + 12 + that.jqueryBox.height()) - $(window).height() 
									)
								);
							
							// increase arrowshift to push upwards (still buggy, disabled!)
							that.arrowShift += shiftup;
							
							that.setPosition(offset.left, offset.top);
							that.setArrow('left');
							that.shiftArrow(that.arrowShift);
						},
						setPositionRightOf : function (jqobject){
							var offset = jqobject.offset();
							that.setPosition(
								offset.left + jqobject.width(),
								offset.top
							)
							that.setArrow('left');
							that.shiftArrow(that.arrowShift);
						},
						setPositionLeftOf : function (jqobject){
							var offset = jqobject.offset();
							that.setPosition(
								offset.left - that.jqueryBox.width(),
								offset.top
							)
							that.setArrow('right');
							that.shiftArrow(that.arrowShift);
						},
						shiftArrow : function (top){
							that.arrowShift = top;
							$('.JqueryBoxArrow', that.jqueryBox ).css('padding-top', that.arrowShift) ;
						},
						setContentWidth : function (width){
							$('.JqueryBoxContent', that.jqueryBox ).css('width', width) ;
						},
						setContentPadding : function (padding){
							$('.JqueryBoxContent', that.jqueryBox ).css('padding', padding) ;
						}
					}
				
				
				// takeover parameters
				if (param.imagepath) that.imagepath = param.imagepath;
				if (param.arrow) that.arrow = param.arrow;
				
				
				// DOM representation -----------------------------------------------------------------------------------
				html   = '<table cellspacing="0" cellpadding="0" class="JqueryBox">';
				html  += '	<tr>';
				
				html  += '		<!-- left arrow -->';
				html  += '		<td class="JqueryBoxLeftarrow JqueryBoxArrow">';
				html  += '			<img src="' + that.imagepath + 'arrowleft.png" alt="" />';
				html  += '		</td>';
				
				html  += '		<!-- center -->';
				html  += '		<td>';
				html  += '			<!-- the border -->';
				html  += '			<table border="0" cellspacing="0" cellpadding="0" class="JqueryBoxBorder">';
				html  += '				<tr>';
				html  += '					<td class="JqueryBoxvBorder JqueryBoxhBorder JqueryBoxCorner"><img src="' + that.imagepath + 'topleft.png" alt="" /></td>';
				html  += '					<td class="JqueryBoxhBorder JqueryBoxBackground"></td>';
				html  += '					<td class="JqueryBoxvBorder JqueryBoxhBorder JqueryBoxCorner"><img src="' + that.imagepath + 'topright.png" alt="" /></td>';
				html  += '				</tr>';
				html  += '				<tr>';
				html  += '					<td class="JqueryBoxhBorder JqueryBoxBackground"></td>';
				html  += '					<td class="JqueryBoxContent"></td>';
				html  += '					<td class="JqueryBoxhBorder JqueryBoxBackground"></td>';
				html  += '				</tr>';
				html  += '				<tr>';
				html  += '					<td class="JqueryBoxvBorder JqueryBoxhBorder JqueryBoxCorner"><img src="' + that.imagepath + 'bottomleft.png" alt="" /></td>';
				html  += '					<td class="JqueryBoxhBorder JqueryBoxBackground"></td>';
				html  += '					<td class="JqueryBoxvBorder JqueryBoxhBorder JqueryBoxCorner"><img src="' + that.imagepath + 'bottomright.png" alt="" /></td>';
				html  += '				</tr>';
				html  += '			</table>';	
				html  += '		</td>';
						
				html  += '		<!-- right arrow -->';
				html  += '		<td class="JqueryBoxRightarrow JqueryBoxArrow">';
				html  += '			<img src="' + that.imagepath + 'arrowright.png" alt="" />';
				html  += '		</td>';
				
				html  += '	</tr>';
				html  += '</table>';
				
				// create its DOM Part...
				$(document.body).append(html);				
				
				// ... and save a reference (jqueryBox) to its DOM Part
				that.jqueryBox 		= $('.JqueryBox:last');  // the (last created) box itself
				
				// set Backgroundimage for .JqueryBoxBackground (top, left, right, bottom) and .JqueryBoxContent
				$('.JqueryBoxBackground, .JqueryBoxContent', that.jqueryBox )
					.css('background-image' , 'url(' + param.imagepath + 'background.png)')
				
				// Init arrow 
				that.setArrow(that.arrow);
				// that.shiftArrow(that.arrowShift)
				
				// set box close event on leaving box
				that.jqueryBox.hover(
					null,
					function () {
						$(this).hide();
					}
				);
				
				// return the box-object
				return that;
			}
