function DynField (color,centerx,centery,width,height,zpos,contents) 
{
	this.id = getNewID();
		
	this.color = color; //'dark',...
	
	this.centerx = centerx;
	this.centery = centery;
	this.width = width;
	this.height = height;
	this.zpos = zpos;
	
	this.contents = contents; //array mit contents (m?ssen alle create unterst?tzen)
	
	// Bilder
	this.pics = new Array();
	this.pics['dark'] = new Array();
	this.pics['med'] = new Array();
	this.pics['light'] = new Array();
	this.pics['red'] = new Array();
	
	this.pics['dark']['color'] = '#2E302F';
	this.pics['med']['color'] = '#7A7675';
	this.pics['light']['color'] = '#9A9695';
	this.pics['red']['color'] = '#E71029';
	
	this.picswidth = 3;
	this.picsheight = 3;
	
	// Methoden
	this.setColor = DynFieldSetColor;
	this.show = DynFieldShow;
	this.hide = DynFieldHide;
	this.create = DynFieldCreate;
	//private
	this.initPics = DynFieldInitPics;
	this.createPic = DynFieldCreatePic;
	
	// inits continue
	this.initPics('dark');
	this.initPics('med');
	this.initPics('light');
	this.initPics('red');
}

function DynFieldInitPics( color )
{
	this.pics[color]['tl'] = new Image();
	this.pics[color]['tl'].src = PICPATH+'m_tl_'+color+'.gif';
	
	this.pics[color]['tr'] = new Image();
	this.pics[color]['tr'].src = PICPATH+'m_tr_'+color+'.gif';
	
	this.pics[color]['bl'] = new Image();
	this.pics[color]['bl'].src = PICPATH+'m_bl_'+color+'.gif';
	
	this.pics[color]['br'] = new Image();
	this.pics[color]['br'].src = PICPATH+'m_br_'+color+'.gif';
	
	this.pics[color]['tb'] = new Image();
	this.pics[color]['tb'].src = PICPATH+'m_tb_'+color+'.gif';
	
	this.pics[color]['lr'] = new Image();
	this.pics[color]['lr'].src = PICPATH+'m_lr_'+color+'.gif';
}
	
function DynFieldCreate()
{
	var left = this.centerx - (this.width / 2) - this.picswidth;
	var top = this.centery - (this.height / 2) - this.picsheight;
	var width = this.width + ( 2 * this.picswidth );
	var height = this.height + ( 2 * this.picsheight );
	 
	document.write('<div id="'+this.id+'" style="position:absolute; z-index:'+this.zpos+'; top:'+top+'px; left:'+left+'px; width:'+width+'px; height:'+height+'px;">');	
	
	this.createPic('tl',0,0,this.picswidth,this.picsheight);
	this.createPic('tr',this.width+this.picswidth,0,this.picswidth,this.picsheight);
	this.createPic('bl',0,this.height+this.picsheight,this.picswidth,this.picsheight);
	this.createPic('br',this.width+this.picswidth,this.height+this.picsheight,this.picswidth,this.picsheight);
	this.createPic('tb',this.picswidth,0,this.width,this.picsheight);
	this.createPic('tb',this.picswidth,this.height+this.picsheight,this.width,this.picsheight);
	this.createPic('lr',0,this.picsheight,this.picswidth,this.height);
	this.createPic('lr',this.width+this.picswidth,this.picsheight,this.picswidth,this.height);
	
	// innen
	document.write('<div style="background-color:'+this.pics[this.color]['color']+';position:absolute; top:'+this.picswidth+'px;left:'+this.picsheight+'px;width:'+this.width+'px;height:'+this.height+'px;">');
//	document.write('<div style="background-color: #ffffff ;position:absolute; top:'+this.picswidth+'px;left:'+this.picsheight+'px;width:'+this.width+'px;height:'+this.height+'px;">');
		
		//contents
		if(this.contents != null)
		{
			for (var i in this.contents)
			{
				this.contents[i].create();	
			}	
		}
		
	document.write('</div>');	
		
	document.write('</div>');	
}

function DynFieldCreatePic(id,left,top,width,height)
{
	document.write('<div style="position:absolute; top:'+top+'px; left:'+left+'px; width:'+width+'px; height:'+height+'px;">');
	
	document.write('<img src="'+this.pics[this.color][id].src+'" width="'+width+'px" height="'+height+'px"/>');
	
	document.write('</div>');	
}

function DynFieldSetColor(color)
{
	if(this.color != color)
	{
		var node = document.getElementById(this.id);
		
		node.childNodes[0].firstChild.src=this.pics[color]['tl'].src;
		node.childNodes[1].firstChild.src=this.pics[color]['tr'].src;
		node.childNodes[2].firstChild.src=this.pics[color]['bl'].src;
		node.childNodes[3].firstChild.src=this.pics[color]['br'].src;
		node.childNodes[4].firstChild.src=this.pics[color]['tb'].src;
		node.childNodes[5].firstChild.src=this.pics[color]['tb'].src;
		node.childNodes[6].firstChild.src=this.pics[color]['lr'].src;
		node.childNodes[7].firstChild.src=this.pics[color]['lr'].src;

		node.childNodes[8].style.backgroundColor = this.pics[color]['color'];
		
		this.color = color;	
	}
}

function DynFieldShow()
{
	document.getElementById(this.id).style.visibility='visible';
	document.getElementById(this.id).style.opacity=0.7;
//	document.getElementById(this.id).style.filter:Alpha((opacity=100, finishopacity=0, style=2);
	document.getElementById(this.id).style.color='#ffffff';
}

function DynFieldHide()
{
	document.getElementById(this.id).style.visibility='hidden';
}