wmp.editor.modules.compatibility = new Class({
	Extends: wmp.editor.baseModuleBlock,
	title: "Browserkompatibilität",
	name: "compatibility",
	nodeName: "compatibility",
	icon: "/editor/editors/misc.png",
	html5: true,
	handleKeypress: wmp.editor.baseModule.getStatic("appendPOnEnter"),
	browser: {
		"firefox-2": ["Firefox", "2"],
		"firefox-3": ["Firefox", "3"],
		"firefox-3-5": ["Firefox", "3.5"],
		"firefox-3-6": ["Firefox", "3.6"],
		//"opera-9": ["Opera", "9"],
		"opera-9-5": ["Opera", "9.5"],
		"opera-10": ["Opera", "10"],
		//"safari-2": ["Safari", "2"],
		"safari-3": ["Safari", "3"],
		//"safari-3-1": ["Safari", "3.1"],
		"safari-4": ["Safari", "4"],
		"ie-6": ["IE", "6"],
		"ie-7": ["IE", "7"],
		"ie-8": ["IE", "8"]
	},
	states: {
		"yes": "Ja",
		"almost": "Fast",
		"broken": "Kaputt",
		"no": "Nein",
		"unknown": "?"
	},
	fixSetDefaultContent: function() {
		if (this.node.getElement("div"))
			return;
		for (var n in this.browser) {
			var el = this.addBrowser(n);
		}
		title = this.editor.c("div");
		title.className = 'overall-support'
		title.inject(this.node).set('text',"??%");
		title = this.editor.c("div");
		title.className = 'title'
		title.inject(this.node).set('text',"Titel");
		//el.addClass("last-child");
	},
	addBrowser: function(name, version, support) {
		var support = support||"unknown";
		var version = version||"";
		if (version) {
			fullname = name + "-" + version.replace('.', '-');
		}
		else {
			fullname = name;
		}
		if (!this.browser[fullname]) return;
		var el = this.node.getElement(".browser." + fullname);
		if (el) {
			var cur_support = this.getSupport(el);
			el.removeClass("support-" + cur_support)
			el.addClass("support-" + support)
			status = el.getElement(".support");
		}
		else {
			var el = this.editor.c("div");
			el.addClass("browser").addClass(fullname).addClass("support-" + support);
			el.addEvent("mousedown",this.toggle.bindWithEvent(this, el));
			var name_span = this.editor.c("span").addClass("name").set('text', this.browser[fullname][0]).inject(el);
			var version_span = this.editor.c("span").addClass("version").set('text', this.browser[fullname][1]).inject(el);
			var status = this.editor.c("span").addClass("support").inject(el);;
			var last_element = this.node.getElement(".overall-support")||this.node.getElement(".title");
			if (last_element)
				this.node.insertBefore(el, last_element);
			else
				this.node.appendChild(el);
		}
		status.set("text",this.states[support]);
		//return el;
	},
	getSupport: function(el) {
		if (el.hasClass('support-yes')) { return 'yes'; }
		else if (el.hasClass('support-no')) { return 'no'; }
		else if (el.hasClass('support-almost')) { return 'almost'; }
		else if (el.hasClass('support-broken')) { return 'broken'; }
		else { return 'unknown'; }
	},
	toggle: function(event, el) {
		var status = el.getElement(".support");
		var state = this.getSupport(el);
		for (n in this.states) {
			if (newstate) {
				var newstate=n;
				break;
			}
			if (state===n)
				var newstate="next";
		}
		if (newstate=="next")
			var newstate="yes";
		newstate = newstate||"yes"
		el.removeClass("support-" + state)
		el.addClass("support-" + newstate)
		el.getElement('.support').set("text",this.states[newstate]);
		event.preventDefault();
		this.focus();
	},
	exportXml: function() {
		var title = this.xmlEscape(this.node.getElement(".title").get('text'));
		var xml =  '<compatibility><title>'+title+'</title>';
		var cs = this.node.getElements(".browser"), c, x=0;
		while(c = cs[x++]) {
			var version = c.getElement('.version').get('text');
			var name = c.getElement('.name').get('text').toLowerCase();
			var support = this.getSupport(c);
			xml += '<browser name="'+name+'" version="'+version+'" support="'+ support + '"/>';
		}
		return xml += "</compatibility>";
	},
	fixme: function() {
		this.fixSetDefaultContent();
		this.makeUneditable(this.node);
		this.nodes.content = this.node.getElement(".title");
		this.makeEditable(this.nodes.content);
		var dataspan = this.node.getElement("span.data");
		if (dataspan) {
			var data= JSON.decode(dataspan.get("text"));
			data.browser.each(function(item) {
				this.addBrowser(item.name, item.version, item.support);
			}, this);
			dataspan.dispose();
			this.nodes.content.set('text',data.title)
		}
	},
	xml2html: function(node, editor) {
		var c, x=0, bstr="";
		while (c = node.childNodes[x++]) {
			if (c.nodeName.toLowerCase()=="title")
				var title = c.textContent;
			else if (c.nodeName.toLowerCase()=="browser")
				bstr+='{name:"'+c.getAttribute("name")+'",version:"'+c.getAttribute("version")+'",support:"'+c.getAttribute("support")+'"},';
			else if (c.nodeName.toLowerCase()=="tag")
				continue;	//todo: tags
		}
		bstr = bstr.substr(0, bstr.length-1);
		var n = editor.c("div");
		n.className="compatibility";
		n.innerHTML='<span class="data">{title:"'+(title||"").trim()+'",browser:[' + bstr +  ']}</span>';
		return n;
	}
	
});