Event.observe(window, 'load', function() {

	Event.observe($('view'), 'click', function() {
		crossxfont.view();
	});

	Event.observe($('browser'), 'dblclick', function() {
		this.readOnly = false;
		this.className = '';
	});

	Event.observe($('browser'), 'blur', function() {
		this.readOnly = true;
		this.className = 'read';
	});

	crossxfont.init();
});

var crossxfont = new function() {

	this.sizes = [10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32];
	this.px = null;
	this.pct = null;
	this.browser = 16;

	this.setSize = function(px) {
		this.px = px;
		this.pct =  Math.ceil(px / parseInt($F('browser')) * 100);
		$('main').getElementsByTagName('strong')[0].innerHTML = this.pct;
	}

	this.init = function() {

		this.setSize(this.browser);
	
		var ul = $('description').getElementsByTagName('ul')[0];
		var main = $('main');
		var tbody = main.getElementsByTagName('tbody')[0];

		var num = 0;
		var span = main.getElementsByTagName('pre')[0].getElementsByTagName('span')[0];

		var sample2 = $('sample2');
		var sample = $('sample');
		sample2.insert({ top: '<em title="%指定のサンプル">%&nbsp;:&nbsp</em>'});
		sample.insert({ top: '<em title="px指定のサンプル">px:&nbsp</em>'});

		var self = this;

		this.sizes.each(function(size) {
	
			var li = document.createElement('li');
			var a = document.createElement('a');
			var text = document.createTextNode(size);
			
			li.className = 'px'
			if(size == self.browser) li.className += ' set';
			a.href = 'javascript:void(0)';
			
			a.appendChild(text);
			li.appendChild(a)
			ul.appendChild(li);
			
			Event.observe(li, 'click', function() {
			
				var temp = $$('li.set')[0];
				if(temp) temp.className = 'px';
				this.className += ' set';
				crossxfont.setSize(size);
				
				$A(main.getElementsByTagName('pre')[0].getElementsByTagName('em'))
					.each(function(em) {
						em.innerHTML = '? %';
					});
				
				$A(main.getElementsByTagName('tbody')[0].getElementsByTagName('tr'))
					.each(function(tr) {
						tr.getElementsByTagName('td')[1].innerHTML = '? %';
					});
					
				$A(sample2.getElementsByTagName('span'))
					.each(function(span) {
						span.title = '? %';
						span.style.fontSize = '';
					});
				
			});
			
			var row = tbody.insertRow(-1);
			row.insertCell(-1).appendChild(document.createTextNode(size + ' px'));
			row.insertCell(-1).appendChild(document.createTextNode('? %'));

			sample2.innerHTML += '<span title="font-size: ? %">' +  size + 'px</span>';
			sample.innerHTML += '<span style="font-size: ' + size + 'px" title="font-size: ' + size +'px">' +  size + 'px</span>';

			if(num % 2 == 0) span.innerHTML += '<br />&nbsp;*';
			else span.innerHTML += '  |';
			span.innerHTML += '  ' + size + ' px : <em>? %</em>';
			num++;
			
		});
	
	}

	this.view = function() {

		var main = $('main');
		var trs = main.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
		var em = main.getElementsByTagName('pre')[0].getElementsByTagName('em');

		var sample2 = $('sample2');
		sample2.style.fontSize = this.px + 'px';
		var spans = sample2.getElementsByTagName('span');

		for(var i = 0; i < this.sizes.length; i++) {
		
			var size = this.sizes[i];
		
			var tds = trs[i].getElementsByTagName('td');
			var min = Math.ceil(size / this.px * 100);
			var max = Math.floor((size + 0.5) / this.px * 100);

			tds[1].innerHTML = min + '～' + max;
			em[i].innerHTML =  (min + '%' + ' ').substr(0, 4);

			spans[i].style.fontSize =  min + '%';
			spans[i].title =  'font-size: ' + min + '%';

		}
		
	}
	
}