function textToStr(obj)
{
	return obj.nodeValue;
}
function empty(obj)
{
	return "";
}
function commentToStr(obj) {
	return "<!-- "+obj.nodeValue+" -->";
}
function objToStr(obj)
{
	var objStr = "<"+obj.nodeName;
	if(obj.attributes) {
		for(var i = 0;i < obj.attributes.length;i++) {
			objStr += ' '+obj.attributes[i].nodeName+'="'+obj.attributes[i].nodeValue+'"';
		}
	}
	objStr += ">";
	return objStr;
}
function objEndedToStr(obj)
{
	var objStr = "<"+obj.nodeName;
	if(obj.attributes) {
		for(var i = 0;i < obj.attributes.length;i++) {
			objStr += ' '+obj.attributes[i].nodeName+'="'+obj.attributes[i].nodeValue+'"';
		}
	}
	objStr += " />";
	return objStr;
}
var toStrFns = {
	"#document" : { "begin" : empty, "end" : empty},
	"#text"		  : { "begin" : textToStr, "end" : empty},
	"#comment"  : { "begin" : commentToStr, "end" : empty},
	"HR"		    : { "begin" : objEndedToStr, "end" : empty},
	"BR"		    : { "begin" : objEndedToStr, "end" : empty},
	"IMG"		    : { "begin" : objEndedToStr, "end" : empty}
};

function nilFn(evt) {}

function BasicAttribute()
{
}
BasicAttribute.prototype.BasicAttribute = function(label,name) {
		this.label = label;
		this.name = name;
}
BasicAttribute.prototype.generate = function (obj) {
	var label = document.createElement('label');
	$(label).append(this.label); 
	var input = document.createElement('input');
	$(input).attr({
		type:  'text',
		name:  this.name
	}); 
	$(input).val(this.getValue(obj));
	return [label, input];
};
BasicAttribute.prototype.getValue = function(obj) { return 'unset'};
BasicAttribute.prototype.getCallback = function(obj) { return nilFn};
function Style(label,name) {
		this.label = label;
		this.name = name;
}
Style.prototype = new BasicAttribute();
Style.prototype.getValue = function(obj) {
	return $(obj).css(this.name);
};
Style.prototype.getCallback = function() {
	return jsSetProperty;
}

function Attribute(label,name) {
		this.label = label;
		this.name = name;
}
Attribute.prototype = new BasicAttribute();
Attribute.prototype.getValue = function(obj) { 
		return $(obj).attr(this.name);
};
Attribute.prototype.getCallback = function() {
	return jsSetAttribute;
}
function Balise(name, props)
{
	this.name = name;
	this.attributes = null;
	if(props.attributes) {
		this.attributes = {
			id: new Attribute('id','id'),
			className: new Attribute('Classe','className')
		};
		for(var i = 0;i < props.attributes.length;i++) {
			this.attributes[props.attributes[i].name] = new Attribute(props.attributes[i].label, props.attributes[i].name);
		}
	}
	this.style = null;
	if(props.styles) {
		this.styles = {};
		for(var i = 0;i < props.styles.length;i++) {
			this.styles[props.styles[i].name] = new Style(props.styles[i].label, props.styles[i].name);
		}
	}
}
Balise.prototype.bind= function(event,obj)  {
	var self = this;
	$.each(this.styles,function(k,s) {
		obj.bind(event, s, function(evt) {
		});
	});
	$.each(this.attributes,function(k,a) {
		obj.bind(event,a, function(evt) {
			alert(evt.data.label+' '+evt.data.name+' '+self.attributes[evt.data.name]);
		});
	});
}
	
Balise.prototype.generate = function(obj) {
	var objs = new Array();
	$.each(this.styles,function(k,s) {
		var items = s.generate(obj);
		$.merge(objs,items);
	});
	$.each(this.attributes,function(k,a) {
		var items = a.generate(obj);
		$.merge(objs,items);
	});
	return objs;
}
function Text()
{}
Text.prototype.generate = function(obj) {
	var label = document.createElement('label');
	$(label).append(this.label); 
	var input = document.createElement('textarea');
	$(input).attr({
		name:  this.name,
		cols: 50,
		rows: 20
	}); 
	jsLog('generate '+obj+' '+obj.nodeValue);
	$(input).val(obj.nodeValue);
	return [label, input];
}
Text.prototype.bind= function(event,obj)  {
	$.each(this.styles,function(k,s) {
		obj.bind(event,s, function(evt) {
			alert(event.data);
		});
	});
	$.each(this.attributes,function(k,a) {
		obj.bind(event,a, function(evt) {
			alert(event.data);
		});
	});
}
var balises = {
	'HTML' : new Balise('HTML',
		{
			styles: [
			],
			attributes: [
			]
		}),
	'HR' : new Balise('HR',
		{
			styles: [
				{label: 'Hauteur',name: 'height'},	
				{label: 'Largeur',name: 'width'},
				{label: 'Bords', name: 'border'},
				{label: 'Fond',name: 'background'}
			],
			attributes: [
			]
		}),
	'BR' : new Balise('BR',
		{
			styles: [
			],
			attributes: [
			]
		}),
	'SPAN' : new Balise('SPAN',
		{
			styles: [
				{label: 'Graisse',name : 'fontWeight'},
				{label: 'Style',name : 'fontStyle'}
			],
			attributes: [
			]
		}),
	'TABLE': new Balise('TABLE',
		{
			styles: [
				{label: 'style de police',name: 'fontStyle'}
			],
			attributes: [
			]
		}),
	'TBODY': new Balise('TBODY',
		{
			styles: [
				{label: 'style de police',name: 'fontStyle'}
			],
			attributes: [
			]
		}),
	'TR': new Balise('TR',
		{
			styles: [
				{label:'Couleur',name:'color'},
				{label:'Fond',name:'backgroundColor'}
			],
			attributes: [
			]
		}),
	'TH': new Balise('TH',
		{
			styles: [
				{label:'Couleur',name:'color'},
				{label:'Fond',name:'backgroundColor'}
			],
			attributes: [
			]
		}),
	'TD': new Balise('TD',
		{
			styles: [
				{label:'Couleur',name:'color'},
				{label:'Fond',name:'backgroundColor'}
			],
			attributes: [
			]
		}),
	'P': new Balise('P',
		{
			styles: [
				{label:'Largeur',name:'width'},
				{label:'Couleur',name:'color'},
				{label:'Décoration',name:'textDecoration'}
			],
			attributes: [
			]
		}),
	'BODY': new Balise('BODY',
		{
			attributes: [
			],
			styles: [
			]
		}),
	'STYLE': new Balise('STYLE',
		{
			attributes: [
				{label:'type',name:'type'},
				{label:'source',name:'src'}
			],
			styles: [
			]
		}),
	'SCRIPT': new Balise('SCRIPT',
		{
			attributes: [
				{label:'type',name:'type'},
				{label:'source',name:'src'}
			],
			styles: [
			]
		}),
	'LINK': new Balise('META',
		{
			attributes: [
				{label:'jeu de caractères',name:'charset'},
				{label:'cible',name:'href'},
				{label:'rel',name:'rel'},
				{label:'type',name:'type'}
			],
			styles: [
			]
		}),
	'META': new Balise('META',
		{
			attributes: [
				{label:'http-equiv',name:'http-equiv'},
				{label:'content',name:'content'},
				{label:'charset',name:'charset'},
				{label:'name',name:'name'}
			],
			styles: [
			]
		}),
	'A': new Balise('A',
		{
			attributes: [
				{label:'href',name:'href'},
				{label:'infoBulle',name:'title'}
			],
			styles: [
			]
		}),
	'H1': new Balise('H1',
		{
			attributes: [
				{label:'title',name:'title'}
			],
			styles: [
			]
		}),
	'H2': new Balise('H2',
		{
			attributes: [
				{label:'title',name:'title'}
			],
			styles: [
			]
		}),
	'H3': new Balise('H3',
		{
			attributes: [
				{label:'title',name:'title'}
			],
			styles: [
			]
		}),
	'HR': new Balise('HR',
		{
			attributes: [
				{label:'type',name:'type'},
				{label:'source',name:'src'}
			],
			styles: [
			]
		}),
	'IMG': new Balise('IMG',
		{
			attributes: [
				{label:'fichier',name:'src'},
				{label:'alt',name:'alt'}
			],
			styles: [
			]
		}),
	'DIV': new Balise('DIV',
		{
			attributes: [
			],
			styles: [
			]
		}),
	'P': new Balise('P',
		{
			attributes: [
			],
			styles: [
			]
		}),
	'UL': new Balise('UL',
		{
			attributes: [
			],
			styles: [
			]
		}),
	'OL': new Balise('OL',
		{
			attributes: [
			],
			styles: [
			]
		}),
	'LI': new Balise('LI',
		{
			attributes: [
			],
			styles: [
			]
		}),
	'DL': new Balise('DL',
		{
			attributes: [
			],
			styles: [
			]
		}),
	'DT': new Balise('DT',
		{
			attributes: [
			],
			styles: [
			]
		}),
	'DD': new Balise('DD',
		{
			attributes: [
			],
			styles: [
			]
		}),
	'#text': new Text(),
	'#comment': new Text()
};

function jsSetProperty(event)
{
	var obj = this;
	self.opener.jsSetStyle(obj.name,obj.value);
}
function jsSetAttribute(event)
{
	var obj = this;
	self.opener.jsSetAttribute(obj.name,obj.value);
}
function endTagToStr(obj)
{
	return "</"+obj.nodeName+">";
}

function comment()
{
	var obj = document.createComment('commentaire');
	return obj;
}
function text()
{
	var obj = document.createTextNode('texte');
	return obj;
}