var sample_screen = '<screen position="0,0" size="400,300" >\n';
 	sample_screen += '\t<widget name="example1" position="20,20" size="50,50"  zPosition="0" />\n';          
 	sample_screen += '\t<widget name="example2" position="50,50" size="80,80" zPosition="1"  />\n';          
 	sample_screen += '</screen>\n';

function renderSkin2Html(skindata){
	var html_root = document.getElementById('root');
	html_root.innerHTML = "";
	var skinParser = new DOMParser();
    var xmlDoc = skinParser.parseFromString(skindata,"text/xml");
    if(xmlDoc.getElementsByTagName('screen').length==0){
		var xmlDoc = skinParser.parseFromString(sample_screen,"text/xml");
	}
	//screen
	var skin_screen = xmlDoc.getElementsByTagName('screen')[0];
	var html_screen = document.createElement('div');
	var size = skin_screen.getAttribute('size').split(',');
	var screen_styles  = " background-color: black;";
	screen_styles     += " outline:1px solid black;";
	screen_styles     += " position: absolute; top: 10px; left: 10px;";
	screen_styles     += " min-height: "+size[1]+"px; max-height: "+size[1]+"px;";
	screen_styles     += " min-width:"+size[0]+"px; max-width: "+size[0]+"px;";
	html_screen.setAttribute('style',screen_styles);
	html_screen.setAttribute('id','screen');
	html_root.appendChild(html_screen);
	onScreenAdded(html_screen);
	//elements
	var elements = skin_screen.getElementsByTagName('widget');
	for(var i=0;i<elements.length;i++){
		var skin_element = elements[i];
		var position = skin_element.getAttribute('position').split(',');
		var size = skin_element.getAttribute('size').split(',');
		
		var html_element = document.createElement('div');
		html_element.style.backgroundColor = getRandomColor();
		applyStyle(html_element,position,size,skin_element.getAttribute('zPosition'));
		html_element.setAttribute('onClick','top.onElementClicked(this);');
		html_element.setAttribute('id',skin_element.getAttribute('name'));
		html_element.innerHTML = skin_element.getAttribute('name');
		
		html_screen.appendChild(html_element);
	}
	
}
function renderHtml2Skin(){
	var html_screen = top.editor.document.getElementById('screen');
	var skin = '<screen position="'+html_screen.style.top.replace('px','')+','+html_screen.style.left.replace('px','')+'" size="'+html_screen.style.minWidth.replace('px','')+','+html_screen.style.minHeight.replace('px','')+'" title="">\n'; 
	var elements = html_screen.childNodes;
	for(var i=0;i<elements.length;i++){
		var element = elements[i];
		skin += '\t<widget name="'+element.id+'" position="'+element.style.left.replace('px','')+','+element.style.top.replace('px','')+'" size="'+element.style.minWidth.replace('px','')+','+element.style.minHeight.replace('px','')+'" zPosition="'+element.style.zIndex+'"\/>\n'; 
	}
	skin += "<\/screen>\n";
	var w= window.open('', "", "location=no,toolbar=no,menubar=no,status=no,width=600,height=400");
  	w.focus(); 
  	w.document.open("text/xml", "replace");
  	w.document.write(skin);
  	w.stop();

}

function applyStyle(element,position,size,zindex){
		element.style.position = "absolute";
		element.style.left = position[0]+"px";
		element.style.top = position[1]+"px";
		element.style.minWidth = size[0]+"px";
		element.style.maxWidth = size[0]+"px";
		element.style.minHeight = size[1]+"px";
		element.style.maxHeight = size[1]+"px";
		element.style.zIndex = zindex;

}
function onElementClicked(element){
	top.frames.menu.setCurrentElement(element);
}
function onScreenAdded(element){
	top.frames.menu.setCurrentScreen(element);
}
function getRandomColor(){
	var c =  ""+Math.floor(Math.random()*0xFFFFFFFFFF);
	return "#"+c.slice(0, 6);
}
function onLoad(){
	renderSkin2Html(sample_screen);
}
function $(id){
	return document.getElementById(id);
}