function showCustomize()
{
	document.getElementsByTagName('body')[0].innerHTML = '<div id="custom_WYSIWYG_page"> <div id="custom_WYSIWYG_page_zoom">'+ document.getElementsByTagName('body')[0].innerHTML +'</div></div>';
	
	var customizePanel;
	if(!$('customizePanelDiv'))
	{
	customizePanel =document.createElement("DIV");
	customizePanel.id="customizePanelDiv";	
	document.body.appendChild(customizePanel);
	
	colorPanelDiv = document.createElement('div');
	colorPanelDiv.id = "colorpanel"; 
	colorPanelDiv.style.position="absolute"	;
	colorPanelDiv.style.display="none"	;
	colorPanelDiv.style.zIndex="100001";	
	document.body.appendChild(colorPanelDiv);		 
	}
	else 
	{
	 customizePanel =  $('customizePanelDiv')
	}
	
	new Ajax.Updater(customizePanel,'custom/panel.jsp',{evalScripts: true,onComplete:initSelectBox});
	createSortable();
	$('bodytag').style.overflow="hidden";
	$('customizeCode').value="<style type=\"text/css\">\n" + customStr + "\n</style>";
	
}

function createSortable()
{
   	//create a movable-cursor mouse
 if(handleobj=(document.getElementsByClassName("blockTitle",document)))
	{
	 for(i=0;i<handleobj.length;i++) 
	 {
		handleobj[i].style.cursor= "move";
	  }
			
	}   
	//create movable divs
   Sortable.create("left",
     {tag:"div",
	 handle:'blockTitle',
	 dropOnEmpty:true,containment:["left","mid","right"],constraint:false   });
   Sortable.create("mid",
     {tag:"div",	 
	 dropOnEmpty:true,handle:'blockTitle',containment:["left","mid","right"],constraint:false});
	 
	Sortable.create("right",
     {tag:"div",	 
	 dropOnEmpty:true,handle:'blockTitle',containment:["left","mid","right"],constraint:false}); 	 
	
}




function initSelectBox()
{	
$('control_blockTitleBg').style.backgroundColor = blockTitleBg;
$('control_blockContentBg').style.backgroundColor = blockContentBg;
$('control_borderColor').style.backgroundColor = borderColor;
$('control_blockContent').style.backgroundColor = blockContent;
//$('control_mainColor').style.backgroundColor = mainColor;
$('control_pageColor').style.backgroundColor = pageColor;
$('custom_WYSIWYG_page').style.backgroundRepeat= bgRepeat;
$('custom_WYSIWYG_page').style.backgroundImage= "url("+bgImage+")";	
$('customizeCode').value="<style type=\"text/css\">\n" + customStr + "\n</style>";

selectOption("borderWidth",borderWidth);
selectOption("borderStyle",borderStyle);
selectOption("bgImage",bgImage);
selectOption("bgRepeat",bgRepeat);
selectOption("bgFlash",bgFlash);



makeJsCode();

}


function getDivSort()
{
	sortString="";
	for(i=0;i<$("left").childNodes.length;i++)
	{
		sortString += $("left").childNodes[i].id+",";
	}
	leftSort = sortString;
	sortString="";
	for(i=0;i<$("mid").childNodes.length;i++)
	{
		sortString += $("mid").childNodes[i].id+",";
	}
	midSort = sortString;
	sortString="";
	for(i=0;i<$("right").childNodes.length;i++)
	{
		sortString += $("right").childNodes[i].id+",";
	}	
	rightSort = sortString;
	
	
	
}



function setDivSort()
{
	leftSort = leftSort.split(",");	
	for(i=0;i<leftSort.length;i++)
	{
		if(leftSort[i].length>0)
		{$("left").innerHTML += $(leftSort[i]).outerHTML;
		 $(leftSort[i]).outerHTML="";
		}
	}
	

	midSort = midSort.split(",");
	for(i=0;i<midSort.length;i++)
	{
		if(midSort[i].length>0)
		{$("mid").innerHTML += $(midSort[i]).outerHTML;		
		 $(midSort[i]).outerHTML="";
		}
	}
	
	
	rightSort = rightSort.split(",");
	for(i=0;i<rightSort.length;i++)
	{
		if(rightSort[i].length>0)
		{$("right").innerHTML += $(rightSort[i]).outerHTML;		
		$(rightSort[i]).outerHTML="";
		}
	}

}



function closePanel()
{
	if(confirm("Not save page yet,save it now?"))
	savepage();
}

function savepage()
{
	getDivSort();
	$('csscode').value=customStr;
	$('jscode').value=jsCode;
	$('leftsort').value=leftSort;
	$('midsort').value=midSort;
	$('rightsort').value=rightSort;	
	$('result').submit();
	
}