////////////////////////////////////////////////////////////////////////////////
//  Layout manager
////////////////////////////////////////////////////////////////////////////////

function setNodeWidth(node, width)
{
  node.style.width = (width) + 'px';
  if (node.offsetWidth != width) node.style.width = (width - (node.offsetWidth-width)) + 'px';
}

function setNodeHeight(node, height)
{
  node.style.height = (height) + 'px';
  if (node.offsetHeight != height) node.style.height = (height - (node.offsetHeight-height)) + 'px';
}

function getNodeInnerSize(node, depth)
{
  if (null == depth) { depth = 0; }
  var box = (0 == depth) ? [0, 0] : [node.offsetWidth, node.offsetHeight];
  var child = node.firstChild;
  while (child) {
    var cbox = getNodeInnerSize(child, depth+1);
    cbox[0] += child.offsetLeft;
    cbox[1] += child.offsetTop;
    if (cbox[0] > box[0]) { box[0] = cbox[0]; }
    if (cbox[1] > box[1]) { box[1] = cbox[1]; }
    child = child.nextSibling;
  }
  return box;
}

function initializeLayout()
{
    document.title = 'Bromelia Kwekerij Geling b.v. uit Rijsenhout, voor groot assortiment Aechmea, Guzmania en Tillandsia.';
   
    var container1 = document.createElement('div');
    container1.style.position = 'absolute';
    container1.style.top = '0px';
    container1.style.left = '50%';
    document.body.appendChild(container1);
    
    var container2 = document.createElement('div');
    container2.style.position = 'absolute';
    container2.style.top = '0px';
    container2.style.left = '-437px';
    container1.appendChild(container2);
   
    var container = document.createElement('div');
    container.id = 'container';
    container.style.width = '875px';
    container2.appendChild(container);

////////////////////////////////////////////////////////////////////////////////    
    
    var banner = document.createElement('img');
    banner.style.position = 'absolute';
    banner.style.left = '0px';
    banner.style.top = '16px';
    banner.src = 'images/banner.jpg';
    container.appendChild(banner);
           
    var shadow = document.createElement('img');
    shadow.style.position = 'absolute';
    shadow.style.left = '0px';
    shadow.style.top = '198px';
    shadow.style.height = '60px';
    shadow.style.width = '875px';
    shadow.src = 'images/mainbackground_top.png';
    container.appendChild(shadow);
    
    var logo = document.createElement('img');
    logo.style.position = 'absolute';
    logo.style.left = '-8px';
    logo.style.top = '94px';
    logo.src = 'images/logo.png';
    logo.className = 'png';
    container.appendChild(logo);
    
    var contentbg = document.createElement('div')
    contentbg.id = 'contentbg';
    contentbg.style.position = 'absolute';
    contentbg.style.left = '0px';
    contentbg.style.top = '235px';
    contentbg.style.width = '875px';
    contentbg.style.backgroundColor = 'white';
    contentbg.style.backgroundImage = 'url(\'images/mainbackground.jpg\')';
    contentbg.style.backgroundRepeat = 'no-repeat';
    contentbg.style.backgroundPosition = '0% 100%';
    container.appendChild(contentbg);
    
    var content = document.createElement('div')
    content.id = 'content';
    content.style.position = 'absolute';
    content.style.left = '2px';
    content.style.top = '235px';
    content.style.borderTop = '0px';
    content.style.borderRight = '1px solid #c7c7c7';
    content.style.borderBottom = '1px solid #c7c7c7';
    content.style.borderLeft = '1px solid #c7c7c7';
    content.style.margin = '0px 0px 200px 0px';        
    container.appendChild(content);
    setNodeWidth(content, 871);
    
    var bottomSpacer = document.createElement('div');
    bottomSpacer.id = 'bottomSpacer';
    bottomSpacer.style.position = 'absolute';    
    bottomSpacer.style.width = '100%';
    bottomSpacer.style.backgroundColor = '';
    bottomSpacer.style.top = '0px';
    bottomSpacer.style.height = '50px';
    document.body.appendChild(bottomSpacer);
    
////////////////////////////////////////////////////////////////////////////////
    
//  set default page sizes

    var langbox = document.createElement('img');
    langbox.style.position = 'absolute';
    langbox.style.left = '766px';
    langbox.style.top = '170px';
    langbox.style.width = '109px';
    langbox.style.height = '45px';
    langbox.src = 'images/lang_arrow.png';
    langbox.className = 'png';
    container.appendChild(langbox);
    
////////////////////////////////////////////////////////////////////////////////

	var recordset = $V('menu');
	var languages = $V('languages');

	var menucontainer = document.createElement('div')
	menucontainer.style.position = 'absolute';
    menucontainer.style.top = '170px';
	menucontainer.style.left = '218px';
	menucontainer.style.width = '656px';
	container.appendChild(menucontainer);

	var data = '<table cellpadding="0" cellspacing="0" border="0" style="width: 100%; height: 100%;"><tr>';

	for (var i=0; i<recordset.length; i++ ) {
		var menuBorderStyle = 'menuItemBorder';
		var menuItem = 'menuItem';

		if(recordset[i]['MenuID'] == $V('recordset').MenuID) {
			menuBorderStyle = 'menuItemBorderActive';
			menuItem = 'menuItemActive';
		}

        link = '?cmd=document&id='+recordset[i]['ID'];
        
		data += 
				'<td class="'+menuBorderStyle+'">&nbsp;</td>'
			 +	'<td class="'+menuItem+'" onclick="document.location = \''+link+'\'"><a href="'+link+'">'+recordset[i]['Titel']+'</a></td>'
			 +	'<td class="'+menuBorderStyle+'">&nbsp;</td>'
	}

	if($V('language') == 'nl') currentName = $V('languages')[currentKey = 'en'];
		else currentName = $V('languages')[currentKey = 'nl'];
	
	data += '<td class="menuLang">&nbsp;<a href="?language='+currentKey+'">'+currentName+'</a></td>';		

	data += '</tr></table>';

	var element = document.createElement('div');
    element.style.height = '27px';
    element.innerHTML = data;  
    menucontainer.appendChild(element);

    var footer = document.createElement('div');
    footer.id = 'footer';
    footer.style.position = 'absolute';
    footer.style.bottom = '0px';
    footer.style.left = '0px';
	footer.style.height = '18px';
	footer.style.padding = '1px';
	footer.style.margin = '1px';
	footer.style.border = '1px solid #7A981A';
    footer.innerHTML = '';

	data  = '<table border="0" cellpadding="0" class="footer"><tr>';
	data += '<th>Geling & Zn.</th>';
	data += '<td><img src="images/block.png" border=""></td>';
	data += '<td>Rijshornstraat 191</td>';
	data += '<td><img src="images/block.png" border=""></td>';
	data += '<td>1435 HH Rijsenhout</td>';
	data += '<td><img src="images/block.png" border=""></td>';
	data += '<td>Tel: +31(0)297 321 025</td>';
	data += '<td><img src="images/block.png" border=""></td>';
	data += '<td>Fax: +31(0)297 321 595</td>';
	data += '<td><img src="images/block.png" border=""></td>';
	data += '<td>E-mail: <a href="mailto:info@geling.nl">info@geling.nl</a></td>';

	data += '</tr></table>';

	footer.innerHTML = data;
    $('content').appendChild(footer);
}

////////////////////////////////////////////////////////////////////////////////

var ImageTemplate = {
    background: '#ffffff',
    padding: 0
};

function LayoutBlock(template)
{
    this.node = null;
    this.title = null;
    this.content = '';
    this.left = 0;
    this.top = 0;
    this.width = 0;
    this.height = 0;
    this.background = '#ffffff';
    this.padding = 7;
    this.spacing = 0;

    if (template) {
        for (var m in template) {
            this[m] = template[m];
        }
    }
}

LayoutBlock.prototype.boxWidth = function()
{
    return this.node.offsetWidth;
}

LayoutBlock.prototype.boxHeight = function()
{
    return this.node.offsetHeight;
}

LayoutBlock.prototype.create = function()
{
    if (this.left instanceof LayoutBlock) {
        this.left = this.left.node.offsetLeft + this.left.boxWidth() + this.spacing; 
    }
    if (this.top instanceof LayoutBlock) {
        this.top = this.top.node.offsetTop + this.top.boxHeight() + this.spacing; 
    }

    this.node = document.createElement('div')
    $('content').appendChild(this.node);
    
    this.node.style.position = 'absolute';
    this.node.style.margin = '2px';
    this.node.style.padding = '1px';
    this.node.style.left = this.left + 'px';
    this.node.style.top = this.top + 'px';
    if (this.width > 0) {
        setNodeWidth(this.node, this.width);
    } else {
        this.node.style.width = 'auto';
    }
    if (this.height > 0) {
        setNodeHeight(this.node, this.height);
    } else {
        this.node.style.height = 'auto';
    }
    this.node.style.border = '1px solid #7A981A';
    
    if (this.title) {
        var titleBlock = document.createElement('div')
        titleBlock.style.backgroundColor = '#B9C272';
        titleBlock.style.padding = '7px';
        titleBlock.innerHTML = '<strong>' + this.title + '</strong>';
        this.node.appendChild(titleBlock);
    }
    
    var contentBlock = document.createElement('div')
    contentBlock.style.padding = this.padding + 'px';
    this.node.style.backgroundColor = this.background;
    contentBlock.innerHTML = this.content;
    this.node.appendChild(contentBlock);    
 
}

function correctLayoutSize()
{
    var size = getNodeInnerSize($('content'));
    size[1] = Math.max(537, size[1]); 
    
    $('footer').style.width = (size[0] - 5) + 'px';
    $('footer').style.top = (size[1] + 2) + 'px';
    
    size = getNodeInnerSize($('content'));
    setNodeHeight($('content'), size[1] + 3);
    setNodeHeight($('contentbg'), size[1] + 5);
    $('bottomSpacer').style.top = ($('content').offsetTop + size[1]) + 'px';
}

String.prototype.nl2br = function()
{
    return this.replace(/\n/g,'<br>');
}