var baseurl = 'http://www.objectspot.org';
var preview_vis = 0;

function build_portlet_uri(form)
{
    var fields = ['color1','color2','color3','color4','color5','color6','font'];
    var f = {};
    for (var i = 0; i < fields.length; i++)
    {
        f[fields[i]] = encodeURIComponent(form[fields[i]].value);
    }
    return baseurl + "?width=auto&height=auto&maxheight=none&maxwidth=none&color1=" + f.color1 + "&color2=" + f.color2 + "&color3=" + f.color3 + "&color4=" + f.color4 + "&color5=" + f.color5 + "&color6=" + f.color6 + "&font=" + f.font;
}


function generate_code()
{
    var width = parseInt(document.confform.width.value);
    var height = parseInt(document.confform.height.value);
    var url = build_portlet_uri(document.confform);
    var portlethtml = '<iframe src="' + url + '" style="width:' + width + 'px;height:' + height + 'px;border:1px solid black;" frameborder="0"></iframe>';
    return portlethtml;
}

function display_code()
{
    document.getElementById('codearea').value = generate_code();
}

function preview_portlet()
{

	var url = build_portlet_uri(document.confform);
	var width = parseInt(document.confform.width.value);
	var height = parseInt(document.confform.height.value);
	var iframe = document.getElementById('previewframe');
	var preview = document.getElementById('preview');
	var previewbtn = document.getElementById('previewbtn');
	if (preview_vis)
	{
		//preview.style.visibility = 'hidden';
		preview.style.display='none';
		iframe.style.display='none';
		previewbtn.value = 'Preview';
		preview_vis = 0;
		return;
	}
	//iframe.innerHTML = generate_code();
	iframe.src = build_portlet_uri(document.confform);
	preview.style.display='block';
	iframe.style.display='block';
	previewbtn.value = 'Hide';
	preview_vis = 1;
}


function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}

var pickers = ['picker1','picker2','picker3','picker4','picker5','picker6'];

function hideall()
{
	for (var i = 0; i < pickers.length; i++)
	{
		document.getElementById(pickers[i]).style.visibility = 'hidden';
	}
}

function pickme(color,picker)
{
	var c = document.getElementById(color);
	var p = document.getElementById(picker);

	// hide all the pickers
	hideall();

	// start by positioning
	var pos = findPos(c);
	p.style.left = (pos[0]+c.offsetWidth+25) + "px";
	p.style.top = (pos[1]-50) + "px";
	p.style.visibility = 'visible';

}

  $(document).ready(function() {
    $('#picker1').farbtastic('#color1');
    $('#picker2').farbtastic('#color2');
    $('#picker3').farbtastic('#color3');
    $('#picker4').farbtastic('#color4');
    $('#picker5').farbtastic('#color5');
    $('#picker6').farbtastic('#color6');
    $('#color1').click(function() { pickme('color1','picker1'); });
    $('#color2').click(function() { pickme('color2','picker2'); });
    $('#color3').click(function() { pickme('color3','picker3'); });
    $('#color4').click(function() { pickme('color4','picker4'); });
    $('#color5').click(function() { pickme('color5','picker5'); });
    $('#color6').click(function() { pickme('color6','picker6'); });
  });