var layoutMap =
	{
		'1_col' : '{"yui-g" : "yui-g"}',
		'2_col_50_50' : '{"yui-g" : {"yui-u first" : "yui-u first", "yui-u" : "yui-u"}}',
		'2_col_66_33' : '{"yui-gc" : {"yui-u first" : "yui-u first", "yui-u" : "yui-u"}}',
		'2_col_33_66' : '{"yui-gd" : {"yui-u first" : "yui-u first", "yui-u" : "yui-u"}}',
		'2_col_75_25' : '{"yui-ge" : {"yui-u first" : "yui-u first", "yui-u" : "yui-u"}}',
		'2_col_25_75' : '{"yui-gf" : {"yui-u first" : "yui-u first", "yui-u" : "yui-u"}}',
		'3_col_33_33_33' : '{"yui-g" : {"yui-gb first" : {"yui-u first" : "yui-u first", "yui-u" : "yui-u", "yui-u$1" : "yui-u"}}}',
		'3_col_50_25_25' : '{"yui-g" : {"yui-u first" : "yui-u first", "yui-g" : {"yui-u first" : "yui-u first", "yui-u" : "yui-u"}}}',
		'3_col_25_25_50' : '{"yui-g" : {"yui-g first": {"yui-u first" : "yui-u first", "yui-u" : "yui-u"}, "yui-u" : "yui-u"}}',
		'4_col' : '{"yui-g" : {"yui-g first" : {"yui-u first" : "yui-u first", "yui-u" : "yui-u"}, "yui-g" : {"yui-u first" : "yui-u first", "yui-u" : "yui-u"}}}'
	};
	
for (var layout in layoutMap)
{
	if (typeof(layoutMap[layout]) == 'string')
	{
		layoutMap[layout] = layoutMap[layout].parseJSON();
	}
}

var trashText = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit,\
posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam\
lacus feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere\
nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus\
feugiat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec,\
auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.";


function buildLayout(domNode, obj)
{
	for (var node in obj)
	{
		if (typeof(obj[node]) != 'function')
		{
			if (typeof(obj[node]) == 'string')
			{
				var divNode = Builder.node('div', {className : obj[node]});
                var spanNode = Builder.node('p', {style:'border: 2px solid red; min-height: 150px; padding: .25em;'}, trashText);
                divNode.appendChild(spanNode);
				domNode.appendChild(divNode);
			}
			else
			{
				var divNode = Builder.node('div', {className : node.split('$')[0]});
				buildLayout(divNode, obj[node]);
				domNode.appendChild(divNode);
			}
		}
	}
}

function buildDroplist(rowId, dropListId)
{
    var fieldset = Builder.node('fieldset', {style: 'clear:both'});
    var legend = Builder.node('legend', 'Choose Layout for Row:');
    fieldset.appendChild(legend);
    
    var select = Builder.node('select', {onchange:"drawLayout($('" + rowId +"'), $F(this));", id:dropListId});
    var option = Builder.node('option', {value:"1_col"}, "1 Column (100)");
    select.appendChild(option);
    
    option = Builder.node('option', {value:"2_col_50_50"}, "2 Column (50/50)");
    select.appendChild(option);
    option = Builder.node('option', {value:"2_col_66_33"}, "2 Column (66/33)");
    select.appendChild(option);
    option = Builder.node('option', {value:"2_col_33_66"}, "2 Column (33/66)");
    select.appendChild(option);
    option = Builder.node('option', {value:"2_col_75_25"}, "2 Column (75/25)");
    select.appendChild(option);
    option = Builder.node('option', {value:"2_col_25_75"}, "2 Column (25/75)");
    select.appendChild(option);
    option = Builder.node('option', {value:"3_col_33_33_33"}, "3 Column (33/33/33)");
    select.appendChild(option);
    option = Builder.node('option', {value:"3_col_50_25_25"}, "3 Column (50/25/25)");
    select.appendChild(option);
    option = Builder.node('option', {value:"3_col_25_25_50"}, "3 Column (25/25/50)");
    select.appendChild(option);
    option = Builder.node('option', {value:"4_col"}, "4 Column (25/25/25/25)");
    select.appendChild(option);
    option = Builder.node('option', {value:""}, "");
    select.appendChild(option);
    fieldset.appendChild(select);
    
    return fieldset;
}

function drawLayout(rowEl, layoutType)
{
    var bd = $('bd');
    var tempNode = Builder.node('div');
    buildLayout(tempNode,layoutMap[layoutType]);
    var rowNode = tempNode.firstChild;
    rowNode.style.border = '2px dashed yellow';
    rowNode.id = 'row' + rand(100);
    var droplist = buildDroplist(rowNode.id, 'droplist' + rowNode.id);
    rowNode.appendChild(droplist);
    if ( rowEl != null)
    {
        bd.replaceChild(rowNode, rowEl);
    }
    else
    {
        bd.appendChild(rowNode);
    }
}
	
function getGridLayout(el, obj)
{
    var divChildren = el.childNodes;
    for (var i = 0; i < divChildren.length; i++)
    {
        var divChild = divChildren[i];
        divChild.cleanWhitespace();
        if (divChild.getElementsByTagName('div').length == 0)
        {
            if (Element.hasClassName(divChild, 'yui-g') ||
                Element.hasClassName(divChild, 'yui-u') ||
                Element.hasClassName(divChild, 'yui-gb') ||
                Element.hasClassName(divChild, 'yui-gd')
            )
            {
                obj[divChild.classNames().toString() + '$' + rand(100)] = divChild.classNames().toString();
            }
        }
        else
        {
            var nodeName = divChild.classNames().toString() + '$' + rand(100);
            obj[nodeName] = new Object();
            getGridLayout(divChild, obj[nodeName]);
        }
    }
}
  
function rand ( n )
{
    return ( Math.floor ( Math.random ( ) * n + 1 ) );
}
  
function createNewRow()
{
    drawLayout(null, '1_col');
}
  
function getLayoutForPage()
{
    var bd = $('bd');
    bd.cleanWhitespace();
    var obj = new Object();
    getGridLayout(bd, obj);
    //alert(obj.toJSONString());
    
    //$('text').innerHTML = obj.toJSONString();
    //$('showLayout').show();
    
    var gridLayout = obj.toJSONString();
    window.location.href = 'constTest.html?gridLayout=' + gridLayout.escapeHTML();
}