var currentLayout;
var depth = 12;  
	

function createNewLayout( name )
{        
	var layoutdiv = document.createElement( "div" );
	layoutdiv.setAttribute( "id", name ); 
	document.body.appendChild( layoutdiv );
	currentLayout = document.getElementById( name );
	
	//window.alert( 'neues Layout: ' + name );
}     
 

function addLastLayout()
{ 
	//aufgerufen auf rollOut

	//window.alert( "addLastLayout" ); 
	document.body.appendChild( currentLayout );
}


function deleteActiveLayout()
{      
	//aufgerufen auf rollOver

	//window.alert( "deleteActiveLayout" ); 
	document.body.removeChild( currentLayout );
}   


function addButton( xPos, yPos, xScale, yScale, buttonName )
{          
	var button = document.createElement( "img" );
	var link = document.createElement( "a" );
	
	//Button-Bild setzen
   	button.setAttribute( "src", "pixel_transparent.gif" );
	button.setAttribute( "border", "0" );   			// 0 / 2 fuer Firefox und IE
	button.style.outlineStyle = "none";       			//fuer Opera
	
	//Hyperlink setzen   
	link.setAttribute( "href", "#" );
	link.setAttribute( "id", buttonName ); 
	link.setAttribute( "onMouseOver", "rollOver( this.id )" );    
	link.style.outlineStyle = "none"; 				// none / solid -- fuer Opera
	
	link.style.position = "absolute";
	
	link.style.left = xPos + "px";          
	link.style.top = yPos + "px";
	
	link.style.zIndex = depth;
	
       	button.style.width = xScale + "px";          
	button.style.height = yScale + "px";
	
	link.appendChild( button );
	currentLayout.appendChild( link );
	
       //	window.alert( 'neuer Button: xPos: ' + xPos + ' - yPos: ' + yPos );
		
	depth++;
}
      
function deleteButton( buttonName )
{
	var help = document.getElementById( buttonName );
	//window.alert( help ); 
	currentLayout.removeChild( help );
}

function rollOver( id )
{                  
	//window.alert( "rollOver" ); 
	deleteActiveLayout();
}

function rollOut() 
{
	//window.alert( "rollOut" );
	addLastLayout();
}