function addComponents()
{
	for(var i=0; i<components.length;i++)
	{
		$('#leftCol').html($('#leftCol').html()+'<div id="butt1'+i+'" class="button">' + components[i] + '</div>');
		$('#rightCol').html($('#rightCol').html()+ '<div id="butt0'+i+'" class="buttonImg"><img src="images/formElements/'+images[i]+'" alt="'+alt[i]+'" /></div>');
		
	}
	$('#leftCol').html($('#leftCol').html()+'<hr />');
	$('#rightCol').html($('#rightCol').html()+'<hr />');
	for(var i=0; i<predefinedComponents.length;i++)
	{
		$('#leftCol').html($('#leftCol').html()+'<div id="butt1'+(i+components.length)+'" class="button">' + predefinedComponents[i] + '</div>');
		$('#rightCol').html($('#rightCol').html()+ '<div id="butt0'+(i+components.length)+'" class="buttonImg"><img src="images/formElements/'+predefinedImages[i]+'" alt="'+predefinedAlt[i]+'" /></div>');
	}

	for(var i=0; i<components.length;i++)
	{
		var k= '#butt0'+i;
		
		$(k).click(function(){ addItem(this.id.substring(5))});
		$(k).hover(function(){var hoverId=this.id.substring(5); $(this).html('<img src="images/formElements/arrow.jpg" alt="'+alt[hoverId]+'" />')},function(){var hoverId=this.id.substring(5); $(this).html('<img src="images/formElements/'+images[hoverId]+'" alt="'+alt[hoverId]+'" />')});	


		var k= '#butt1'+i;
		
		$(k).click(function(){ addItem(this.id.substring(5))});
		$(k).hover(function(){var hoverId=this.id.substring(5); $('#butt0'+hoverId).html('<img src="images/formElements/arrow.jpg" alt="'+alt[hoverId]+'" />')},function(){var hoverId=this.id.substring(5); $('#butt0'+hoverId).html('<img src="images/formElements/'+images[hoverId]+'" alt="'+alt[hoverId]+'" />')});	


	}
	for(var i=0; i<predefinedComponents.length;i++)
	{
		var k= '#butt0'+(i+components.length);
		
		$(k).click(function(){ addItem(this.id.substring(5))});
		$(k).hover(function(){var hoverId=this.id.substring(5)- components.length; $(this).html('<img src="images/formElements/arrow.jpg" alt="'+predefinedAlt[hoverId]+'" />')},function(){var hoverId=this.id.substring(5) - components.length; $(this).html('<img src="images/formElements/'+predefinedImages[hoverId]+'" alt="'+predefinedAlt[hoverId]+'" />')});	
		
		var k= '#butt1'+(i+components.length);
		
		$(k).click(function(){ addItem(this.id.substring(5))});
		$(k).hover(function(){var hoverId=this.id.substring(5)- components.length; $('#butt0'+(hoverId+components.length)).html('<img src="images/formElements/arrow.jpg" alt="'+predefinedAlt[hoverId]+'" />')},function(){var hoverId=this.id.substring(5) - components.length; $('#butt0'+(hoverId+components.length)).html('<img src="images/formElements/'+predefinedImages[hoverId]+'" alt="'+predefinedAlt[hoverId]+'" />')});	
		
	}
	
}

/*function addItem(i)
{
	var code = '<tr class="formRow" id="item'+itemCount+'"><td class="handle"><img src="images/formElements/move.jpg" alt="Move" /></td><td class="leftPer"><div  id="left'+itemCount+'">';
	//alert(typeof i);
	//"Text", "Textfield", "Text Area", "Radio Buttons", "Checkbox", "List",  "Password", "Upload", "Button"
/*	switch(i)
	{
		case "0":
			code += 'Click here to edit'
			break;
		case "1":
			code += 'Click here to edit';
			break;
		case "2":
			code += 'Click here to edit';
			break;
		case "3":
			code += 'Click here to edit';
			break;
		case "4":
			code += 'Click here to edit';
			break;
	}*//*
	
	code+= 'Edit</div></td>';
	
//"Text", "Textfield", "Text Area", "Radio Buttons", "Checkbox", "List",  "Password", "Upload", "Button"
	switch(i)
	{
		case "0":
			//Nothing here
			break;
		case "1":
			code += '<td class="rightPer"><input type="text" name="textfield" /></td>';
			break;
		case "2":
			code += '<td class="rightPer"><textarea name="textarea"></textarea></td>';
			break;
		case "3":
			code += '<td class="rightPer"><label><input type="radio" name="RadioGroup1" value="radio" />Radio</label><br /><label><input type="radio" name="RadioGroup1" value="radio" />Radio</label></td>';
			break;
		case "4":
			code += '<td class="rightPer"><input type="checkbox" name="checkbox" value="checkbox" /></td>';
			break;
		case "5":
			code += '<td class="rightPer"><select name=""><option>Item 1</option><option>Item 2</option><option>Item 3</option></select></td>';
			break;
		case "6":
			code += '<td class="rightPer"><input name="textfield" type="password" value="" /></td>';
			break;
		case "7":
			code += '<td class="rightPer"><input type="file" name="file" /></td>';
			break;
		case "8":
			code += '<td class="rightPer"><input type="submit" name="Submit" value="Submit" /></td>';
			break;
	}
	
	code += '</tr>';
	//alert(code);
	if(itemCount == 0)
	{
		$("#preview").html('<table id="previewTable" border="0" cellpadding="0" cellspacing="0">' + code + '</table><br  /><br  />');
	}
	else
	{
		//alert(itemCount)
		$("#previewTable").html($("#previewTable").html()+code);
	}
	for(var i =0 ; i<itemCount+1;i++)
		setClickable("left"+i);
		
	$("#item"+itemCount).hover(function(){ $(this).addClass("outline");},function(){$(this).removeClass("outline")});
	
//	$(".leftPer").
	$('#previewTable').Sortable(
	{
		accept : 'formRow',
		activeclass : null,
		hoverclass : null,
		helperclass : null,
		handle: '.handle',
		opacity: 	0.5,
		fit :	true
	})
	
	itemCount++;
}
*/

function addItem(i)
{
	var code = '<div class="formRow" id="item'+itemCount+'"><img class="close" id="close'+itemCount+'" src="images/formElements/cross.jpg" alt="Move" /><img class="handle" src="images/formElements/move.jpg" alt="Move" />';
	//alert(typeof i);
	//"Text", "Textfield", "Text Area", "Radio Buttons", "Checkbox", "List",  "Password", "Upload", "Button"
	code+= '<div class="labelClass" id="label_item'+itemCount+'">Edit</div>';
	
	switch(i)
	{
		case "0":
			//Nothing here
			break;
		case "1":
			code += '<input type="text" name="textfield" value="" disabled="disabled" />';
			form['item'+itemCount] = new clone(properties['textfield']);
			break;
		case "2":
			code += '<textarea name="textarea" disabled="disabled" ></textarea>';
			form['item'+itemCount] = new clone(properties['textarea']);
			break;
		case "3":
			code += '<label><input type="radio" name="RadioGroup1" value="radio" /><span class="option" >Radio1</span></label><br /><label><input type="radio" name="RadioGroup1" value="radio" /><span class="option" >Radio2</span></label><br /><!--<div class="incrDecr"><img class="decr" src="images/formElements/decr.jpg" />&nbsp;<img class=" incrR" src="images/formElements/incr.jpg" /></div>-->';
			form['item'+itemCount] = new clone(properties['radios']);
			break;
		case "4":
			code += '<label><input type="checkbox" name="checkbox" value="checkbox" /><span class="option" >Check Box 1</span></label><br /><!--<div class="incrDecr"><img class="decr" src="images/formElements/decr.jpg" />&nbsp;<img class=" incrC" src="images/formElements/incr.jpg" /></div>-->';
			form['item'+itemCount] = new clone(properties['checkboxes']);
			break;
		case "5":
			code += '<select id="select_item'+itemCount+'"><option>Item 1</option><option>Item 2</option><option>Item 3</option></select>';
			form['item'+itemCount] = new clone(properties['select']);
			break;
		case "6":
			code += '<input name="textfield" type="password" value="" />';
			form['item'+itemCount] = new clone(properties['password']);
			break;
		case "7":
			code += '<input type="file" name="file" />';
			form['item'+itemCount] = new clone(properties['file']);
			break;
		case "8":
			code = '<div class="formRow" id="item'+itemCount+'"><img class="close" id="close'+itemCount+'" src="images/formElements/cross.jpg" alt="Move" /><img class="handle" src="images/formElements/move.jpg" alt="Move" />';
			code += '<input type="submit" name="Submit" value="Submit" />';
			form['item'+itemCount] = new clone(properties['button']);
			break;
	}
	//alert(php_serialize(form))
	code += '</div>';
	//alert(code);
	if(itemCount == 0)
	{
		$("#previewTab").html(code);
	}
	else
	{
		$("#previewTab").append(code);
	}
	for(var j =0 ; j<itemCount+1;j++)
	{
		$("#label_item"+j).click(function(){ $(".formRow").removeClass("outline"); $('#'+this.id.substring(6)).addClass("outline"); showProperties(this.id.substring(6));});
		setClickable("label_item"+j);
	}
	
	$('.incrR').unclick().click(function(){$(this).parent().parent().trigger('click');  alert("ffff"); $(this).parent().before('<label><input type="radio" name="RadioGroup1" value="radio" /><span class="option">Radio</span></label><br />'); synchronize($(this).parent().parent().get(0).id,'#options',2);});
	$('.incrC').unclick().click(function(){$(this).parent().parent().trigger('click'); $(this).parent().before('<label><input type="checkbox" name="checkbox" value="checkbox" /><span class="option">Check Box</span></label><br />'); synchronize($(this).parent().parent().get(0).id,'#options',2); });
	$('.decr').unclick().click(function(){$(this).parent().parent().trigger('click');  $('.outline').find('br:last').remove(); $('.outline').find('label:last').remove(); synchronize($(this).parent().parent().get(0).id,'#options',2); });
	
	$("#item"+itemCount).hover(function(){ $(this).addClass("outline-hover");},function(){$(this).removeClass("outline-hover")});
	$("#close"+itemCount).click(function(){ $('#item' + ((this.id).substring(5))).remove(); removeItem('item' + ((this.id).substring(5))); createSortables();});
	$("#item"+itemCount).click(function(){ $(".formRow").removeClass("outline"); $(this).addClass("outline"); showProperties(this.id);});
	
//	$(".leftPer").
	createSortables();	
	itemCount++;
}

function removeItem(formItem)
{
	//alert(formItem)
	delete form[formItem];
}


function showProperties(formItem)
{
	//alert("|"+'#'+formItem+"|");
	var code = "<form><table><tr><td>Element Type: </td><td>"+ form[formItem]['#type']+"<td></tr>";
	for(key in form[formItem])
	{
		switch(key)
		{
			case '#maxlength':
				code += '<tr><td><label>Max. Length: </td><td><input type="text" name="maxlength" size="5" value="'+form[formItem][key]+'" onchange="synchronize(\''+formItem+'\', \''+ key+'\' , 3)" /></div></label></td></tr>';
			break;
			case '#title':
				code += '<tr><td><label>Title: </td><td><input type="text" name="title" size="10" value="'+form[formItem][key]+'" onchange="synchronize(\''+formItem+'\',\''+ key+'\', 3)" /></div></label></td></tr>';
			break;
			case '#size':
				code += '<tr><td><label>Size: </td><td><input type="text" name="size" size="5"  value="'+form[formItem][key]+'" onchange="synchronize(\''+formItem+'\',\''+ key+'\', 3)" /></div></label></td></tr>';
			break;
			case '#autocomplete_path':
				code += '<tr><td><label>Autocomplete: </td><td><input type="checkbox" name="autocomplete_path" size="5" onchange="synchronize(\''+formItem+'\',\''+ key+'\', 3)" /></div></label></td></tr>';
			break;
			case '#default_value':
				code += '<tr><td><label>Default: </td><td><input type="text" name="default_value"  value="'+form[formItem][key]+'" size="10" onchange="synchronize(\''+formItem+'\',\''+ key+'\', 3)" /></div></label></td></tr>';
			break;
			case '#description':
				code += '<tr><td><label>Description: </td><td><textarea name="description"  value="'+form[formItem][key]+'" cols=8 rows=5 onchange="synchronize(\''+formItem+'\',\''+ key+'\', 3)"></textarea></div></label></td></tr>';
			break;
			case '#cols':
				code += '<tr><td><label>Columns: </td><td><input type="text" name="cols"  value="'+form[formItem][key]+'" size="5" onchange="synchronize(\''+formItem+'\',\''+ key+'\', 3)" /></div></label></td></tr>';
			break;
			case '#rows':
				code += '<tr><td><label>Rows: </td><td><input type="text" name="rows" size="5"  value="'+form[formItem][key]+'" onchange="synchronize(\''+formItem+'\',\''+ key+'\', 3)" /></div></label></td></tr>';
			break;
			case '#options':
				if(form[formItem]['#type'] == 'radios' || form[formItem]['#type'] == 'checkboxes' )
				{
					code += '<tr><td><label>Options: </label></td></tr>';
					//alert(form[formItem][key].substring(8,form[formItem][key].length-1));
					var val = form[formItem][key].substring(8,form[formItem][key].length-1);
					val = val.split(',');
					for(var i = 0; i< val.length;i++)
						code += '<tr class="optionProp"><td>&nbsp;</td><td><input type="text" name="option'+i+'" onchange="synchronize(\''+formItem+'\',\''+ key+'\', 3)" value='+val[i]+' size="10" /></td></tr>';
					code += '<tr><td>&nbsp;</td><td><img onclick="less()" src="images/formElements/decrProp.jpg" />&nbsp;<img onclick="more(\'radios\')" src="images/formElements/incrProp.jpg" /></td></tr>'
				}
				else if(form[formItem]['#type'] == 'select')
				{
					code += '<tr><td><label>Options: </label></td></tr>';
					//alert(form[formItem][key].substring(8,form[formItem][key].length-1));
					var val = form[formItem][key].substring(6,form[formItem][key].length-1);
					val = val.split(',');
					//alert(val.length)
					for(var i = 0; i< val.length;i++)
						code += '<tr class="optionProp"><td><input type="text" name="key'+i+'" onchange="synchronize(\''+formItem+'\',\''+ key+'\', 3)" value='+val[i].split('=>')[0]+' size="10" /></td><td><input type="text" name="option'+i+'" onchange="synchronize(\''+formItem+'\',\''+ key+'\', 3)" value='+val[i].split('=>')[1]+' size="10" /></td></tr>';
					code += '<tr><td>&nbsp;</td><td><img onclick="less()" src="images/formElements/decrProp.jpg" /><img onclick="more(\'select\')" src="images/formElements/incrProp.jpg" /></td></tr>'
				}
				
			break;
			case '#button_type':
				code += '<tr><td><label>Button type:</td><td><input type="text" name="button_type" size="5"  value="'+form[formItem][key]+'" onchange="synchronize(\''+formItem+'\',\''+ key+'\', 3)" /></div></label></td></tr>';
			break;
			case '#value':
				code += '<tr><td><label>Value: </td><td><input type="text" name="value" size="5"  value="'+form[formItem][key]+'" onchange="synchronize(\''+formItem+'\',\''+ key+'\', 3)" /></div></label></td></tr>';
			break;
			case '#submit':
				code += '<tr><td><label>Submit: </td><td><input type="checkbox" name="submit" size="5" onchange="synchronize(\''+formItem+'\',\''+ key+'\', 3)" /></div></label></td></tr>';
			break;
		}
	}

	//alert(formItem);
	
	code += "</table></form>"
	$("#properties").html(code);
}
/*
function save(formItem)
{
	for(key in form[formItem])
	{
		switch(key)
		{
			case '#maxlength':
				form[formItem][key] = document.forms[0].maxlength.value;
				//alert($("label",document.getElementById(formItem)).html("SSS"))
				$("input",document.getElementById(formItem)).set('maxlength',document.forms[0].maxlength.value);
			break;
			case '#title':
				form[formItem][key] = document.forms[0].title.value;
				$("#label_"+formItem,document.getElementById(formItem)).html(document.forms[0].title.value);
			break;
			case '#size':
				form[formItem][key] = document.forms[0].size.value;
				$("input",document.getElementById(formItem)).set('size',document.forms[0].size.value);
			break;
			case '#autocomplete_path':
				form[formItem][key] = (document.forms[0].autocomplete_path.checked == 1)? true : false;
				//$("input",document.getElementById(formItem)).set('maxlength',document.forms[0].maxlength.value);
			break;
			case '#default_value':
				form[formItem][key] = document.forms[0].default_value.value;
				if(form[formItem]['#type'] == 'textfield')
					$("input",document.getElementById(formItem)).set('value',document.forms[0].default_value.value);
				else if(form[formItem]['#type'] == 'textarea')
					$("textarea",document.getElementById(formItem)).html(document.forms[0].default_value.value);
			break;
			case '#description':
				form[formItem][key] = document.forms[0].description.value;
				//$("input",document.getElementById(formItem)).set('maxlength',document.forms[0].maxlength.value);
			break;
			case '#cols':
				form[formItem][key] = document.forms[0].cols.value;
				$("textarea",document.getElementById(formItem)).set('cols',document.forms[0].cols.value);
			break;
			case '#rows':
				form[formItem][key] = document.forms[0].rows.value;
				$("textarea",document.getElementById(formItem)).set('rows',document.forms[0].rows.value);
			break;
		}
	}
}
*/
/* Function used to synchronize the three "data pools" namely: DOM Form,
*	JS form Object and the properties field.
*	@params: 
*		formItem:	the form widget that is being synchronized
*		element:	the elementof the widget that is being synchronized
*		source:		1 => js form object, 2 => DOM form, 3 => properties
*	Note: Only title uses the source = 2, source = 1 is also used rarely.
*/

function synchronize(formItem, key, source)
{

	switch(key)
	{
		case '#maxlength':
			if(source == 3)
			{
				form[formItem][key] = document.forms[0].maxlength.value;
				$("input",document.getElementById(formItem)).set('maxlength',document.forms[0].maxlength.value);
			}
			else
			{
				document.forms[0].maxlength.value = form[formItem][key];
				$("input",document.getElementById(formItem)).set('maxlength',form[formItem][key]);
			}
		break;
		case '#title':
			if(source == 3)
			{
				form[formItem][key] = document.forms[0].title.value;
				$("#label_"+formItem,document.getElementById(formItem)).html(document.forms[0].title.value);
			}
			else if(source == 2)
			{
				form[formItem][key] = $("#label_"+formItem).html();
				if(document.forms[0] && document.forms[0].title)
					document.forms[0].title.value = $("#label_"+formItem).html();
			}
		break;
		case '#size':
			if(source == 3)
			{
				form[formItem][key] = document.forms[0].size.value;
				if(form[formItem]['#type'] != 'select')
				{
					$("input",document.getElementById(formItem)).set('size',document.forms[0].size.value);
				}
				else if(form[formItem]['#type'] == 'select')
				{
					$("select",document.getElementById(formItem)).set('size',document.forms[0].size.value);
				}
			}
		break;
		case '#autocomplete_path':
			if(source == 3)
			{
				form[formItem][key] = (document.forms[0].autocomplete_path.checked == 1)? true : false;
			}
			//$("input",document.getElementById(formItem)).set('maxlength',document.forms[0].maxlength.value);
		break;
		case '#default_value':
			if(source == 3)
			{
				form[formItem][key] = document.forms[0].default_value.value;
				if(form[formItem]['#type'] == 'textfield' || form[formItem]['#type'] == 'password' || form[formItem]['#type'] == 'file'   )
					$("input",document.getElementById(formItem)).set('value',document.forms[0].default_value.value);
				else if(form[formItem]['#type'] == 'textarea')
					$("textarea",document.getElementById(formItem)).html(document.forms[0].default_value.value);
			}
/*				else if(form[formItem]['#type'] == 'textfield')
				$("input",document.getElementById(formItem)).set('value',document.forms[0].default_value.value);
			else if(form[formItem]['#type'] == 'textfield')
				$("input",document.getElementById(formItem)).set('value',document.forms[0].default_value.value);	
*/
		break;
		case '#description':
			if(source == 3)
			{
				form[formItem][key] = document.forms[0].description.value;
			}
		break;
		case '#cols':
			if(source == 3)
			{
				form[formItem][key] = document.forms[0].cols.value;
				$("textarea",document.getElementById(formItem)).set('cols',document.forms[0].cols.value);
			}
		break;
		case '#rows':
			if(source == 3)
			{
				form[formItem][key] = document.forms[0].rows.value;
				$("textarea",document.getElementById(formItem)).set('rows',document.forms[0].rows.value);
			}
		break;
		case '#options':
			if(source == 3)
			{
				var value = new Array();
				//alert("DDD");
				var temp1 = $('input').parents('.optionProp').size();
				$('.outline').find('label').find('input').end().remove().end();
				$('.outline').find('br').remove();
				$('#select_'+formItem).find('option').remove();
				for(var i = 0 ; i< temp1 ;i++)
				{
					//alert(document.forms[0]['option'+i].value);
					if(form[formItem]['#type'] == 'radios')
					{
						value[i] = '"' + document.forms[0]['option'+i].value + '"';
						$('#'+formItem).append('<label><input type="radio" name="RadioGroup1" value="radio" /><span class="option">'+document.forms[0]['option'+i].value+'</span></label><br />');
						
					}
					else if(form[formItem]['#type'] == 'checkboxes')
					{
						value[i] = '"' + document.forms[0]['option'+i].value + '"';
						$('#'+formItem).append('<label><input type="checkbox" name="checkbox" value="checkbox" /><span class="option">'+document.forms[0]['option'+i].value+'</span></label><br />');
					}
					else if(form[formItem]['#type'] == 'select')
					{
						value[i] = '"' + document.forms[0]['key'+i].value +'"=>"' + document.forms[0]['option'+i].value + '"';
						$('#select_'+formItem).html($('#select_'+formItem).html()+'<option>'+document.forms[0]['option'+i].value+'</option>');
						//alert($('#select_'+formItem).html())
					}
					
				}
				//alert(value)
				if(form[formItem]['#type'] == 'select')
					form[formItem][key] = 'array('+value+')';
				else
					form[formItem][key] = 'options('+value+')';
				
				
				//form[formItem][key] = document.forms[0].rows.value;
				//$("textarea",document.getElementById(formItem)).set('rows',document.forms[0].rows.value);
			}
			else if(source == 2)
			{
				var value = new Array();
				var temp1 = $('.outline').find('.option').size();
				var temp2 = $('.outline').find('.option');
				for(var i = 0 ; i< temp1 ;i++)
				{
					value[i] = '"' + $(temp2.get(i)).html() + '"';
					
				}
				//alert(value)
				form[formItem][key] = 'options('+value+')';
				//$("textarea",document.getElementById(formItem)).set('rows',document.forms[0].op.value);
			}
		break;
	}
}


function createSortables()
{
	$('#previewTab').Sortable(
	{
		accept : 'formRow',
		activeclass : null,
		hoverclass : null,
		helperclass : null,
		handle: '.handle',
		opacity: 	0.5,
		fit :	true
	})
}

function less()
{
	$('.optionProp:last',document.forms[0]).remove();
	$('.outline').find('label:last').remove();
	$('.outline').find('br:last').remove();
	synchronize($('.outline').get(0).id,'#options',3);
}

function more(widget)
{
	if(widget == 'radios' || widget == 'checkboxes')
	{
		var prev = $('input').parents('.optionProp').size()-1;
		$('.optionProp:last',document.forms[0]).after('<tr class="optionProp"><td>&nbsp;</td><td><input type="text" name="'+'option'+(prev+1)+'" value="'+document.forms[0]['option'+prev].value+'" size="10" /></td></tr>');
		document.forms[0]['option'+(prev+1)].onchange = document.forms[0]['option'+prev].onchange;
		$('.outline').find('br:last').after('<label>'+$('.outline').find('label:last').html()+'</label><br />');
		
		synchronize($('.outline').get(0).id,'#options',3);
	}
	else
	{		
		var prev = $('input').parents('.optionProp').size()-1;
		$('.optionProp:last',document.forms[0]).after('<tr class="optionProp"><td><input type="text" name="'+'key'+(prev+1)+'" value="'+document.forms[0]['key'+prev].value+'" size="10" /></td><td><input type="text" name="'+'option'+(prev+1)+'" value="'+document.forms[0]['option'+prev].value+'" size="10" /></td></tr>');
		document.forms[0]['option'+(prev+1)].onchange = document.forms[0]['option'+prev].onchange;
		document.forms[0]['key'+(prev+1)].onchange = document.forms[0]['key'+prev].onchange;
		$('.outline').find('br:last').after('<label>'+$('.outline').find('label:last').html()+'</label><br />');
		
		synchronize($('.outline').get(0).id,'#options',3);
	}
	
	//alert("done")
}

function setClickable(id) {
$('#'+id).click(function() {
						 if($(this).html() == "Edit")
							$(this).html('');
var textarea = '<div id="editorCont'+id+'" ><input class="labelClass" id="editor'+id+'" type="text" size="15" name="textfield" value="'+$(this).html()+'" /></div>';

var revert = $(this).html();

$(this).after(textarea).remove();

$('#editor'+id).blur(function(){saveChanges(this, id);})
$('#editor'+id).get(0).focus();
})

.mouseover(function() {
$(this).addClass("editable");
})
.mouseout(function() {
$(this).removeClass("editable");
});

};//end of function setClickable

function saveChanges(obj, id) {
//alert(id)
var t = $("#editor"+id).val();

if(t == '' )
	t = "Edit"
$("#editorCont"+id).after('<div class="labelClass" id="'+id+'">'+t+'</div>').remove() ;
$('#'+id).click(function(){ $(".formRow").removeClass("outline");  $('#'+this.id.substring(6)).addClass("outline"); showProperties(this.id.substring(6));});
setClickable(id);

synchronize(id.substring(6),'#title',2);
}


function clone(original) {
    for (i in original) {
        if (typeof original[i] == 'object') {
            this[i] = new cloneObject(original[i]);
        }
        else
            this[i] = original[i];
    }
}

function php_serialize(obj)
{
    var string = '';

    if (typeof(obj) == 'object') {
        if (obj instanceof Array) {
            string = 'a:';
            tmpstring = '';
            count = 0;
            for (var key in obj) {
                tmpstring += php_serialize(key);
                tmpstring += php_serialize(obj[key]);
                count++;
            }
            string += /*count +*/ ':\n{';
            string += tmpstring;
            string += '}\n';
        } else if (obj instanceof Object) {
            classname = obj.toString();

            if (classname == '[object Object]') {
                classname = 'StdClass';
            }

            string = 'O:' + '"' + classname + '":';
            tmpstring = '';
            count = 0;
            for (var key in obj) {
                tmpstring += php_serialize(key);
                if (obj[key]) {
                    tmpstring += php_serialize(obj[key]);
                } else {
                    tmpstring += php_serialize('');
                }
                count++;
            }
            string +=  '\n{\n' + tmpstring + '}';
        }
    } else {
        switch (typeof(obj)) {
            case 'number':
                if (obj - Math.floor(obj) != 0) {
                    string += 'd:' + obj + ';\n';
                } else {
                    string += 'i:' + obj + ';\n';
                }
                break;
            case 'string':
                string += 's:' + '"' + obj + '";\n';
                break;
            case 'boolean':
                if (obj) {
                    string += 'b:'+obj+';\n';
                } else {
                    string += 'b:'+obj+';\n';
                }
                break;
        }
    }

    return string;
}