var symbols, elements, app;

symbols = [
	{
		name: 'three',
		points: [[1, 0], [2, 0], [3, 0], [4, 0], [5, 0], [0, 1], [1, 1], [2, 1], [3, 1], [4, 1], [5, 1], [6, 1], [0, 2], [1, 2], [5, 2], [6, 2], [5, 3], [6, 3], [3, 4], [4, 4], [5, 4], [6, 4], [3, 5], [4, 5], [5, 5], [5, 6], [6, 6], [5, 7], [6, 7], [0, 8], [1, 8], [5, 8], [6, 8], [0, 9], [1, 9], [2, 9], [3, 9], [4, 9], [5, 9], [6, 9], [1, 10], [2, 10], [3, 10], [4, 10], [5, 10]]
	},
	{
		name: 'eight',
		points: [[1, 0], [2, 0], [3, 0], [4, 0], [5, 0], [0, 1], [1, 1], [2, 1], [3, 1], [4, 1], [5, 1], [6, 1], [0, 2], [1, 2], [5, 2], [6, 2], [0, 3], [1, 3], [5, 3], [6, 3], [0, 4], [1, 4], [2, 4], [3, 4], [4, 4], [5, 4], [6, 4], [1, 5], [2, 5], [3, 5], [4, 5], [5, 5], [0, 6], [1, 6], [5, 6], [6, 6], [0, 7], [1, 7], [5, 7], [6, 7], [0, 8], [1, 8], [5, 8], [6, 8], [0, 9], [1, 9], [2, 9], [3, 9], [4, 9], [5, 9], [6, 9], [1, 10], [2, 10], [3, 10], [4, 10], [5, 10]]
	},
	{
		name: 'nine',
		points: [[1, 0], [2, 0], [3, 0], [4, 0], [5, 0], [0, 1], [1, 1], [2, 1], [3, 1], [4, 1], [5, 1], [6, 1], [0, 2], [1, 2], [5, 2], [6, 2], [0, 3], [1, 3], [5, 3], [6, 3], [0, 4], [1, 4], [5, 4], [6, 4], [0, 5], [1, 5], [2, 5], [3, 5], [4, 5], [5, 5], [6, 5], [1, 6], [2, 6], [3, 6], [4, 6], [5, 6], [6, 6], [5, 7], [6, 7], [0, 8], [1, 8], [5, 8], [6, 8], [0, 9], [1, 9], [2, 9], [3, 9], [4, 9], [5, 9], [6, 9], [1, 10], [2, 10], [3, 10], [4, 10], [5, 10]]
	}
];

elements = [
	{vertical: false, size: 1, html: '<div class="single"><input type="checkbox" checked="true" /></div>'},
	{vertical: false, size: 1, html: '<div class="single"><input type="checkbox" /></div>'},
	{vertical: false, size: 1, html: '<div class="single"><input type="radio" checked="true" /></div>'},
	{vertical: false, size: 1, html: '<div class="single"><input type="radio" /></div>'},
	{vertical: false, size: 2, html: '<div class="double_horizontal"><input type="button" /></div>'},
	{vertical: false, size: 3, html: '<div class="triple_horizontal"><select><option></option><option></option><option></option></select></div>'},
	{vertical: false, size: 4, html: '<div class="quatro_horizontal"><span class="scrollbar"><span></span></span></div>'},
	{vertical: true, size: 4, html: '<div class="quatro_vertical"><span class="scrollbar"><span></span></span></div>'}
	//{vertical: false, size: 5, html: '<div class="punto_horizontal"><span class="scrollbar"><span></span></span></div>'}
	//{vertical: true, size: 5, html: '<div class="punto_vertical"><span class="scrollbar"><span></span></span></div>'}
];

function $(id) {
	return document.getElementById(id);
}

function random(min, max) {
	return min + (max-min) * Math.random();
}

function attach_event(element, name, handler) {
	if (element.addEventListener) {
		element.addEventListener(name, handler, false);
	} else {
		element.attachEvent("on" + name, handler);
	}
}

app = {
	init: function() {
		this.container = $('logo');
		
		for (var i=0, ilen=symbols.length; i<ilen; i++) {
			var symbol = symbols[i], e = document.createElement('div');
			e.id = symbol.name;
			e.className = 'symbol';
			this.container.appendChild(e);
			
			for (var j=0, jlen=symbol.points.length; j<jlen; j++) {
				var point = symbol.points[j], element = this.random_element();
				if (point !== null) {
					while (this.space_test(symbol, point, element.vertical, element.size) != true) {
						element = this.random_element();
					}
					
					e.innerHTML += element.html;
					var divs = e.getElementsByTagName('div'), last = divs[divs.length-1];
					last.style.left = point[0] * 16 + 'px';
					last.style.top = point[1] * 16 + 'px';
				}
			}
		}
		
		var as = document.getElementById('container').getElementsByTagName('a'),
			n = 388;
		for (var i=0, len=as.length; i<len; i++) {
		    var a = as[i];
		    
			if (a.innerHTML === '') {
    			a.innerHTML = n;
    			if (a.target != '_top') {
    				(function(i) {
    					attach_event(a, 'click', function() {
    						window.parent.nav.open(i + 1)
    					});
    				})(i);
    			}
    			n--;
    		}
		}
	},
	space_test: function(s, point, is_vertical, size) {
		var points = [], v = 0, h = 0;
		if (is_vertical) {v = 1;}
		else {h = 1;}

		for (var i=0; i<size; i++) {
			var test = [point[0] + h * i, point[1] + v * i], pos = this.indexof(s.points, test);
			if (pos >= 0) {points.push(pos);}
		}

		if (points.length == size) {
			this.lock_points(s, points);
			return true;
		}
		
		return false;
	},
	lock_points: function(s, points) {
		for (var i=0; i<points.length; i++) {
			s.points[points[i]] = null;
		}
	},
	indexof: function(a1, a2) {
		for (var i=0; i<a1.length; i++) {
			if (a1[i] !== null) {
				var p = a1[i];
				if (p[0] == a2[0] && p[1] == a2[1]) {
					return i;
				}
			}
		}
		return -1;
	},
	random_element: function() {
		return elements[Math.floor(random(0, elements.length))];
	}
}

attach_event(window, 'load', function() {
	app.init();
})

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

try {
var pageTracker = _gat._getTracker("UA-6257429-2");
pageTracker._trackPageview();
} catch(err) {}
