// 1. classe class_stondify; l'unico parametro passato al costruttore e' il path (interno al basepath, che e'
// img/stondify/) delle immagini che costituiscono gli angoli e i bordi che verranno applicati ai box designati;
// path e' facoltativo e, se omesso, verra' usato il basepath.
function class_stondify(path) {
	this.path = 'img/stondify/' + (path || '');
}

// 2. il metodo init inizializza gli 8 elementi div (4 per gli angoli e 4 per i bordi) che verranno aggiunti ai box
// designati per ottenere l'effetto desiderato.
class_stondify.prototype.init = function() {
	// 2.z. array delle dimensioni che dovranno assumere gli 8 elementi; corrispondono alle dimensioni delle omonime immagini;
	// DA MODIFICARE SE CAMBIANO LE IMMAGINI USATE PER LO STONDIFY! Questo e' un work-around (temporaneo) per il baco della
	// mancata visualizzazione di stondify al primo caricamento (quando le immagini non sono ancora state cachate).
	var dimensions = {
		top: [1, 20],
		right: [20, 1],
		bottom: [1, 21],
		left: [18, 1],
		top_left: [18, 17],
		top_right: [20, 20],
		bottom_left: [18, 21],
		bottom_right: [20, 21]
	};
	
	// 2.a. viene creato un div vuoto che rappresenta un generico angolo
	var corner = document.createElement('DIV');
	// 2.b. viene creato, clonando il precedente elemento, un div che rappresenta un generico bordo
	var border = corner.cloneNode(true);
	// 2.c. vengono assegnate le apposite classi css ai 2 elementi appena creati
	corner.style.position = border.style.position = 'absolute';
	border.style.zIndex = '0';
	corner.style.zIndex = '1';
	
	// 2.d. vengono creati i singoli bordi, per clonazione del generico bordo.
	// 2.d.I. il bordo superiore.
	this.top = border.cloneNode(true);
	apply_dimensions(this.top, dimensions['top']);
	
	// 2.d.II. il bordo destro.
	this.right = border.cloneNode(true);
	apply_dimensions(this.right, dimensions['right']);
	
	// 2.d.III. il bordo inferiore.
	this.bottom = border.cloneNode(true);
	apply_dimensions(this.bottom, dimensions['bottom']);
	
	// 2.d.IV. il bordo sinistro.
	this.left = border.cloneNode(true);
	apply_dimensions(this.left, dimensions['left']);
	
	// 2.e. vengono creati i singoli angoli, per clonazione del generico angolo.
	// 2.e.I. l'angolo superiore sinistro.
	this.top_left = corner.cloneNode(true);
	apply_dimensions(this.top_left, dimensions['top_left']);
	
	// 2.e.II. l'angolo superiore destro.
	this.top_right = corner.cloneNode(true);
	apply_dimensions(this.top_right, dimensions['top_right']);
	
	// 2.e.III. l'angolo inferiore sinistro.
	this.bottom_left = corner.cloneNode(true);
	apply_dimensions(this.bottom_left, dimensions['bottom_left']);
	
	// 2.e.IV. l'angolo inferiore destro.
	this.bottom_right = corner.cloneNode(true);
	apply_dimensions(this.bottom_right, dimensions['bottom_right']);
	
	// 2.f. le 8 immagini vengono inserite in un array, partendo dall'angolo in alto a sinistra e procedendo in senso orario.
	var images_filenames = [
		'top_left.png',
		'top.png',
		'top_right.png',
		'right.png',
		'bottom_right.png',
		'bottom.png',
		'bottom_left.png',
		'left.png'
	];
	
	// 2.g. gli 8 elementi (div) vengono anch'essi inseriti in un array, nel medesimo ordine.
	var elements = [
		this.top_left,
		this.top,
		this.top_right,
		this.right,
		this.bottom_right,
		this.bottom,
		this.bottom_left,
		this.left
	];

	// 2.h. ciclando sui filename delle immagini, queste vengono impostate come sfondo del corrispondente elemento (div).
	// Fuori ciclo, assegno la larghezza dei bordi superiore e inferiore a 100%;
	for(var i = 0; i < images_filenames.length; i++) {
		set_png_background(elements[i], images_filenames[i], this.path);
	}
	elements[1].style.width = elements[5].style.width = '100%';
	
	// 2.i. posiziono gli elementi.
	// 2.i.I. i tre elementi superiori e i bordi sinistro e destro a top = 0.
	elements[0].style.top = elements[1].style.top = elements[2].style.top = '0';
	elements[3].style.top = elements[7].style.top = '0';
	// 2.i.II. i tre elementi destri a right = 0.
	elements[2].style.right = elements[3].style.right = elements[4].style.right = '0';
	// 2.i.III. i tre elementi inferiori a bottom = 0.
	elements[4].style.bottom = elements[5].style.bottom = elements[6].style.bottom = '0';
	// 2.i.IV. i tre elementi sinistri e i bordi superiore e inferiore a left = 0.
	elements[6].style.left = elements[7].style.left = elements[0].style.left = '0';
	elements[1].style.left = elements[5].style.left = '0';
	
	// 2.j applico il background-repeat ai bordi.
	elements[1].style.backgroundRepeat = elements[5].style.backgroundRepeat = 'repeat-x';
	elements[3].style.backgroundRepeat = elements[7].style.backgroundRepeat = 'repeat-y';
}

// 3. il metodo apply(node, class_str) applica cloni degli elementi creati dal metodo init() a tutti i box, discendenti del
// nodo 'node' aventi la classe 'class_str'.
class_stondify.prototype.apply = function(node, class_str) {
	// 3.a. ottengo un array dei box designati.
	var boxes = get_elements_by_class_name(node, class_str);
	var l = boxes.length;
	for (var i = 0; i < l; i++) {
		// 3.b. istanzio il box corrente (che, se non e' un div, viene ignorato)...
		var cur_box = boxes[i];
		if(cur_box.nodeName != 'DIV') continue;
		// ...lo posiziono (perche' dovra' essere il riferimento cartesiano degli elementi al suo interno)...
		// --- ATTENZIONE! SE IL BOX E' POSITION: ABSOLUTE, COMMENTARE LA SEGUENTE RIGA ---
		// cur_box.style.position = 'relative';
		// ...ne ottengo l'altezza...
		var H = cur_box.offsetHeight + 'px';
		// ...e la assegno ai bordi destro e sinistro correnti (creo due variabili temporanee).
		var cur_right = this.right.cloneNode(true);
		var cur_left = this.left.cloneNode(true);
		cur_right.style.height = cur_left.style.height = H;
		// 3.c. appendo, al box corrente, cloni dei generici elementi creati in precedenza (ad eccezione di cur_right e cur_left)
		cur_box.appendChild(this.top_left.cloneNode(true));
		cur_box.appendChild(this.top.cloneNode(true));
		cur_box.appendChild(this.top_right.cloneNode(true));
		cur_box.appendChild(cur_right);
		cur_box.appendChild(this.bottom_right.cloneNode(true));
		cur_box.appendChild(this.bottom.cloneNode(true));
		cur_box.appendChild(this.bottom_left.cloneNode(true));
		cur_box.appendChild(cur_left);
	}
}

function apply_dimensions(obj, array) {
	obj.style.width = array[0] + 'px';
	obj.style.height = array[1] + 'px';
}