var selectedPlacement = null;
var selectedTab = 'baseelements_tab';

var m_materialgroups = null;
var m_materialplacements = null;
var m_placementsvisible = false;

var m_libraryview = null;
var m_materiallibraryview = null;

var noLibItemsInfo = 'ei sallittuja elementtejä.';

function ShowAllowedItems( data )
{
    if( m_libraryview == null )
    {
        m_materiallibraryview = null;
        
        // remove existing child elements
        var target=document.getElementById( "LibraryLocator" );
        while( target.firstChild )
            target.removeChild( target.firstChild );
        
        m_libraryview = createDiv( "LibraryView" );
        target.appendChild(m_libraryview);
    }

    while( m_libraryview.firstChild ) 
        m_libraryview.removeChild( m_libraryview.firstChild );

    var libhtml = CreateLibraryView( data, 'LibraryItemSelected' );   
    m_libraryview.appendChild( libhtml );
    
    if( m_placementsvisible )
    {
        // remove content from the placement view..
        var placement = document.getElementById('placementLayer');
        while( placement.firstChild )
            placement.removeChild( placement.firstChild );

        placement.style.visibility = 'hidden';
        document.body.style.marginTop = "63";
    }
}


function ShowMaterialGroups( data )
{
    if ( m_materiallibraryview == null )
    {
        m_libraryview = null;
        // remove existing child elements
        var target=document.getElementById( "LibraryLocator" );
        while(target.firstChild)
            target.removeChild(target.firstChild)
        
        m_materiallibraryview = createDiv( "MaterialsLibraryView" );
        target.appendChild(m_materiallibraryview);
    }
  
    // store groups data    
    m_materialgroups = data;
    
    // create placement view..
    var placementCount = GetPlacementCount();
    if( placementCount > 1 )
    {
        var htmlObj = CreateMaterialPlacementView( m_materialplacements );
        var placementdiv = document.getElementById( 'placementLayer' );
    	
    	var offset = placementCount * 15;

    	// push down the material view..
	    document.body.style.marginTop = 110 + offset;

	    placementdiv.style.height = 50 + offset;
	    placementdiv.style.visibility = "visible";
        placementdiv.appendChild( htmlObj );
        
        m_placementsvisible = true;
    }
    
    var materialsdiv = createDiv( "materialsview1" );
    var html = CreateMaterialView( m_materialgroups, null );   
    materialsdiv.innerHTML = html;

    m_materiallibraryview.appendChild( materialsdiv );

}

function ShowAllowedMaterials( data )
{
    var libhtml = CreateMaterialView( m_materialgroups, data );   
    document.getElementById( 'materialsview1' ).innerHTML = libhtml;   
}

function ShowExistingMaterialGroups()
{
    var libhtml = CreateMaterialView( m_materialgroups, null );   
    document.getElementById( 'materialsview1' ).innerHTML = libhtml;
}

function CreateMaterialPlacementView( data )
{
    // create view for materials groups
    var table = document.createElement("table");
    table.setAttribute("id", "materialplacementstable");
    table.style.width = '220px';
	
	if ( data != null )
	{
        var tr = table.insertRow( 0 );
        tr.className = "libImage";
        
        var td = tr.insertCell( 0 );
        td.className = "materialPlacementCell";
        td.setAttribute("colspan", "2");
        td.setAttribute( "id", "materialplacementCell" );

        var placements = data.split( ';' );
        if ( placements.length >= 1 )
        {
            var titlespan = document.createElement( "span");
            titlespan.innerHTML = materialPlacementInfo;
            td.appendChild( titlespan );
            var br1 = document.createElement( "br");
            td.appendChild( br1 );

            for( i = 0; i < placements.length; i++ )
            {
                var splittedEntry = placements[ i ].split(','); 
                var placement = splittedEntry[ 0 ];
                var placementAlias = splittedEntry[ 1 ];
                
                var checked = "";
                
                if ( m_activeMaterialPlacement == 'all' || containsString( m_activeplacements, placement ) )  
                    checked = " checked ";
                    
                var input = null;
                var html = '<input type="checkbox" name="materialplacementgroup1" value="'+ placement +'" ' + checked + ' onclick="ActivatePlacement(\''+ placement +'\')" >';
                try { // style="overflow:auto; position: relative; top: 0px; left: 0px; height: 100%;"> 
                    input = document.createElement( html );
                    
                } catch (e) {
                    input = document.createElement("input");
                    input.setAttribute("name", "materialplacementgroup1");
                    input.setAttribute("value", placement );
                    input.setAttribute("type", "checkbox" );
                    input.setAttribute("checked", checked);

	                //input.className="partOfList";
	                input.onclick=Function( ";ActivatePlacement('" + placement + "')");
	                //input.id="row"+daID;                    
                }   
                if ( input != null )
                {    
                    var span = document.createElement( "span" );
                    var br= document.createElement( "br" );
                    
                    if( placementAlias == null || placementAlias.length == 0 )
                        span.innerHTML = placement;
                    else
                        span.innerHTML = placementAlias;
                    
                    td.appendChild( input ); 
                    td.appendChild( span );
                    td.appendChild( br );
                }
                    
            }
        }
	}

    var hr = document.createElement( "hr" );
    td.appendChild( hr );

    return table;
}

function CreateMaterialView( data, selectedgroup )
{
    var link = 'LibraryItemSelected';
    var materiallink = 'MaterialItemSelected';
	var libhtml = '<TABLE style="WIDTH:206"><TBODY>';
	
	if( data.length > 0 )
	{
	    var selectedMaterialGroup = null;
	    var selectedGroupData = null;
	    if ( selectedgroup != null )
	    {
	        var splitteddata = selectedgroup.split( ":" );
	        selectedMaterialGroup = splitteddata[ 0 ];
	        selectedGroupData = splitteddata[ 1 ];
	    }
	    	
    	var matitems = data.split( ';' );
    	for( var j = 0; j < matitems.length; j++ )
    	{
       	    libhtml += '<tr>';    	    
    		libhtml += '<td colspan="2" ';

       		var itemParamters = matitems[ j ].split( ',' );
       		// itemParamters[ 0 ] = name, itemParamters[ 1 ] = alias
       		if ( itemParamters[ 0 ] == selectedMaterialGroup )
       		{
       		    libhtml += ' style="width:206;height:41;" background="images/ui/materialgroup_top_bg.GIF">';
       		    libhtml += createLibLink( itemParamters[ 1 ], itemParamters[ 1 ], 'ShowExistingMaterialGroups', '-' );
       		    libhtml += '</td></tr>';
       		    libhtml +=  CreateLibraryViewContent( selectedGroupData, materiallink ); //'images/ui/materialgroup_mid_bg.GIF', 'images/ui/materialgroup_mid_l_bg.GIF', 'images/ui/materialgroup_mid_r_bg.GIF' );

       	        libhtml += '<tr>';    	    
    		    libhtml += '<td colspan="2" style="width:206;height:10;" background="images/ui/materialgroup_bottom_bg.GIF">';
       		}
       		else
       		{
       		    libhtml += ' style="width:206;height:41;" background="images/ui/materialgroup_bg.GIF">';
    		    libhtml += createLibLink( itemParamters[ 0 ], itemParamters[ 1 ], link, '+' );
    		}
    
    		libhtml += "</td>";
    		libhtml += "</tr>";
		}
		
	}
	else
		libhtml = '<tr><td><span class="libImage" >' + noLibItemsInfo + '</span></td></tr>';

    libhtml += '</TBODY></TABLE>';

    return libhtml;
}

function CreateLibraryViewContentObject( table, data, link )
{
    var even = true;
    var first = true;
    var tr = table.insertRow( -1 );
    
	if( data.length > 0 )
	{
        // create view for materials groups
    	var items = data.split( ';' );
    	for( var i = 0; i < items.length; i++ )
    	{
    	    if ( even )
    	    {
    	        if ( !first )
    	        {
                    tr = table.insertRow( -1 );                    
    	        }
    	    }
            first = false;      
    	    even = !even;

   	        var td = tr.insertCell( -1 );
       		var itemParamters = items[ i ].split( ',' );
    		var libimageObject = createLibImageObject( itemParamters[ 0 ], itemParamters[ 1 ], itemParamters[ 2 ], link );

            td.appendChild( libimageObject );
		}
	}
	else
	{
	    var td = tr.insertCell( -1 );
	    td.innerHTML = '<span class="libImage" >'+ noLibItemsInfo +'</span>';
	}
		
}
function CreateLibraryView( data, link )
{
    // create view for materials groups
    var table= document.createElement("table");
    table.style.width = '206px';

    CreateLibraryViewContentObject( table, data, link );
    
    return table;
}

function GetPlacementCount()
{
    var count = 0;
    if( m_materialplacements != null )
        count = m_materialplacements.split( ';' ).length;
    
    return count;
}

function SetMaterialPlacementData( data )
{
    m_materialplacements = data;
}


function createLibLink( itemName, alias, link, symbol )
{
	var libimg = '<span class="libHeader" >';
	libimg += 		'<a href="#" onclick="' + link + '(\''+ itemName +'\');" >';
	libimg +=		symbol + ' ' + alias + '</a>';
	libimg +=		'</span>';
	
	return libimg;
}

function CreateLibraryViewContent( data, link, bg, bg_l, bg_r )
{
    var libhtml = "";
    var even = true;
    var first = true;
    
	if( data.length > 0 )
	{
    	var items = data.split( ';' );
    	for( var i = 0; i < items.length; i++ )
    	{
    	    if( even )
    	    {
    	        if ( !first )
    	            libhtml += "</tr>";

    	        if ( bg != null ) {
        	        libhtml += '<tr background="'+bg+'">';
        	    }
        	    else {
        	        libhtml += '<tr>';
        	    }
    	    }
               	    
    		libhtml += "<td>"; 
   	        
       		var itemParamters = items[ i ].split( ',' );

            if( itemParamters[ 2 ] == null || itemParamters[ 2 ].length == 0 )
                libhtml += createTextEntry( itemParamters[ 0 ], itemParamters[ 1 ], link );
       		else
       		{
    		    libhtml += createLibImageText( itemParamters[ 0 ], itemParamters[ 1 ], itemParamters[ 2 ], link );
    		    even = !even;
    		}
    		
    		libhtml += "</td>";
    		first = false;
		}

		libhtml += "</tr>";
		libhtml += "<br>";
	}
	else
		libhtml = '<tr><td><span class="libImage" >   '+ noLibItemsInfo +'</span></td></tr>';
		
    return libhtml;
}

function createLibImageObject( itemName, alias, url, link )
{
    // create view for materials groups
    var span = document.createElement("span");
    span.setAttribute("id", itemName);
    span.className = "libImage";
  
    var img = document.createElement( "img" );
    img.src = url;
    img.width = 96;
    img.height = 96;
    img.hspace = 2;
    img.vspace = 2;
    img.alt = alias;
    img.border = 0;
    img.className = 'libImage';

    var a = document.createElement( "a" );
    a.href = "#";
    var linkstring = link + "('"+ itemName + "');" 
    a.onclick=Function( linkstring );
    a.appendChild( img );
    
    span.appendChild( a );
   
    var span2 = document.createElement("span");
    span2.innerHTML = '<br>' + alias;
    
    span.appendChild( span2 );

	return span;
}

function createTextEntry( itemName, alias, link )
{
	var textEntry = '<span class="libTextEntry" >';
	textEntry += 		'<li style="padding-left:15px"><a href="#" onclick="' + link + '(\''+ itemName +'\');" >';
	textEntry +=		alias;
	textEntry +=		'</a>';
	textEntry +=	 '</span>';
	
	return textEntry;
}

function createLibImageText( itemName, alias, url, link )
{
	var libimg = '<span class="libImage" >';
	libimg += 		'<a href="#" onclick="' + link + '(\''+ itemName +'\');" >';
	libimg +=		'<img class="libImage" width="96px" height="96px" hspace="4" vspace="4" src="'+ url +'" alt="'+ alias +'"  />';
	libimg +=		'</a>';
	libimg +=		'<br>' + alias;
	libimg +=		'</span>';
	
	return libimg;
}

function createDiv( id )
{
    var div = document.createElement("div");
    div.setAttribute("id", id );
    return div;
}