function maxscroller_preloader() {
	var p = "maxscroller_img/"
	image1 = new Image()
	image2 = new Image()
	image3 = new Image()
	image4 = new Image()
	image1.src = p+"arrow_down.gif"
	image2.src = p+"arrow_up.gif"
	image3.src = p+"loader_link.gif"
	image4.src = p+"loader_thumb.gif"
}
// OGGETTO SCROLLER
// scroller_nome: specificare il nome dato a questo oggetto
// img_riga: indicare il numero di immagini per ogni riga
// mainw, mainh: dimensioni del div che contiene le immagini
function maxscroller(scroller_nome, mainw, mainh, img_riga) {    

	var DEBUG = 0
	
	var xhr

    var spazioh = 20 // h separatore
	var immaginih = 90 // altezza delle immagini
	    
	var num_righe = 3 // numero di righe di cui fare il preload
    var first_riga = 0
    var last_riga = num_righe - 1
    var centro_corrente = (num_righe - 1) / 2
	
    var pos_end
    var inc_scorri
		
	var books = new Array
	
	var scroller_timer = 20
	var scroller_step = 5
	var is_scrolling = false

	var step_opacity = 0.06
	var start_opacity = -0.15
	var current_opacity = 0.99 

	var arrow_center_pos = mainw / 2 - 6

	var thumb_border_color = "#333333"
	var thumb_border_color_over = "#00ADEF"
	var info_box_color = "#F0F0F0"
	var info_box_border = "#CCC"

	var url_dati = 'img.php'	
	var pos_immagini = "thumb/img_mini"

	var trovato_fine = false
	var fine_top = 0
	var fine_bottom = 0

	var started = true
	
	function Book(x, y, z, user, riga, pos, id_tag, nomi_tag) {
		this.id = x
		this.nome = y
		this.addr = z		
		this.user = user
		this.riga = riga
		this.pos = pos
				
		var a1 = id_tag.split("(^~_~^)")
		var a2 = nomi_tag.split("(^~_~^)")
		var temp
		
		// conto gli elementi che hanno il nome del tag diverso da ""
		var c = 0
		for (var i = 0; i < a1.length; i++)
		{
			if (a2[i] != "") c += 1
		}

		if (c != 0) temp = "Find more about "
		else temp = ""
		
		var j = 0
		for (var i = 0; i < a1.length; i++)
		{
			if (a2[i] != "")
			{
				if ((c > 1) && (j == c - 1)) temp += " or "
				else if (j != 0) temp += ", "
				j++
				temp += "<a href='search.php?tag=" + a1[i] + "'>" + a2[i] + "</a>";				
			}
		}

		// alert(temp)
		this.tags = temp
	}
	
	this.get_centro = function() { return centro_corrente }
	this.get_first 	= function() { return first_riga }
	this.get_last 	= function() { return last_riga }

	aggiorna_info = function(i) {
		// $('SC_id').innerHTML = books[i].id // + " " + books[i].riga + " " + books[i].pos
		// $('SC_id').innerHTML = "&nbsp"
		$('SC_nome').innerHTML = "<a href='" + books[i].addr + "'>" + books[i].nome + "</a>"
		$('SC_user').innerHTML = "Bookmarked in FortunaBay by " + books[i].user
		$('SC_tags').innerHTML = books[i].tags
	}

	this.show_dati = function(i) {
		aggiorna_info(i)
		$('BM' + i).style.borderColor = thumb_border_color_over
	}	

	show_dati2 = function(riga, pos) {
		for (var j = 0; j < books.length; j++)
		{
			if ((books[j].riga == "SC" + riga) && (books[j].pos == pos))
			{
				aggiorna_info(j)
				break;
			}
		}		
	}	

	this.hide_bordo = function(i) {
		$('BM' + i).style.borderColor = thumb_border_color
	}	
	
	get_folder_img = function(nome) {
		var h = hex_md5(nome)
		var f = ""
		for (var i = 0; i < 4; i++) 
			f = f + "/" + h.substring(0, i+1)
		return f
	}
	
	show_response = function(temp) {
		var n_dati = 6 // questo rappresenta il numero totale di righe restituite per ogni link
		var righe = temp.split("+~|~+")		
		for (var i = 0; i < righe.length; i++)
		{
			temp = righe[i]				
			if (temp != "")
			{
				var colonne = temp.split("~-!-~")
				if ((colonne.length - 2) == (img_riga * n_dati))
				{					
					immagini = new Array();
					temp = ""
					for (var j = 0; j < img_riga; j++)
					{		 		
						if (!j) temp = "&nbsp"

						var m0 = "onmouseout='" + scroller_nome + ".hide_bordo(" + books.length + ")' "
						var m1 = "onmouseover='" + scroller_nome + ".show_dati(" + books.length + ")' "
						var m2 = "name=" + j + " "
						var m3 = "id=BM" + books.length + " "

						var thumb_exist = (colonne[j * n_dati + 3] == "+")						
						var nome_immagine
						
						if (thumb_exist)
						{
							nome_immagine = "p" + colonne[j * n_dati + 1] + ".jpg"						
							immagini[j] = pos_immagini + get_folder_img(nome_immagine) + "/" + nome_immagine
						}
						else
						{
							immagini[j] = "images/nothumb.gif"
						}

						var link_addr = "open.php?id=" + colonne[j * n_dati + 1]; // qui ci metto l'id
			
						temp += "<a target=_blank href='" + link_addr + "'>"
						//temp += "<img style='border: 1px solid " + thumb_border_color + "' " + m0 + m1 + m2 + m3 + " src='" + nome_immagine + "' height=86 width=116>"
						temp += "<img style='border: 1px solid " + thumb_border_color + "' " + m0 + m1 + m2 + m3 + " src='" + immagini[j] + "' height=86 width=116>"
						temp += "</a>&nbsp;"
						
						var book_temp = new Book (
							colonne[j * n_dati + 1], // id
							colonne[j * n_dati + 2], // nome link
							link_addr, // indirizzo link
							colonne[j * n_dati + 4], // utente
							colonne[0], // pos
							j, 
							colonne[j * n_dati + 5], // id tag
							colonne[j * n_dati + 6]  // nomi tag
						)
						books.push(book_temp)
					}				
					
					// preload delle immagini - non funziona ...
					imageObj = new Image();
					for (j = 0; j < img_riga; j++)
						imageObj.src = immagini[j]

					// alert(temp)
					$(colonne[0]).innerHTML = temp
				}	
				else
				{
					// c'è stato un errore nel trasferimento dati
					// non devo poi modificare questi parametri
					if (!trovato_fine)
					{
						$(colonne[0]).innerHTML = ""
						trovato_fine = true
						if (inc_scorri > 0)
						{
							fine_top = centro_corrente
							fine_bottom = last_riga
						}					
						else
						{
							// avevo schiacciato UP
							fine_top = first_riga
							fine_bottom = centro_corrente
						}
					}
				}
			}
		}

		// se non imposto la trasparenza anche sul primo caricamento, all'avvio di questo oggetto
		// mi vengono fornite le coordinate della griglia sotto
		// alla successiva modifica della trasprenza mi fornisce le coordinate relative alle immagini 
		// e non + alla griglia sotto
		cambia_trasparenza(centro_corrente, current_opacity)		
		$("griglia").onmousemove = captureMousePosition
		aggiorna_link(0, 0, trovato_fine)		  
		if (started)
		{
			$("AW1").innerHTML = "<img src='maxscroller_img/arrow_down.gif'>"
			$("AW2").innerHTML = "<img src='maxscroller_img/arrow_up.gif'>"

			var t = ""
			// t += "<div style='padding-top: 2px; font: bold 12px arial; text-align: center;' id=SC_id>&nbsp;</div>" // ID
			t += "<br>";
			t += "<div id=SC_nome>&nbsp;</div>" // NOME
			t += "<div id=SC_user>&nbsp;</div>" // ADDR
			t += "<div id=SC_sepa>&nbsp;</div>" // spazio
			t += "<div id=SC_tags>&nbsp;</div>" // TAGS
			t += "<br>";
			$("INFO_ITEM").innerHTML = t				
			$("INFO_ITEM").style.border = "1px solid " + info_box_border

			if (img_riga % 2 != 0) show_dati2(centro_corrente, parseInt(img_riga / 2))
			started = false			
		}
	}		
	
	captureMousePosition = function(evt) {
		evt = (evt) ? evt : ((window.event) ? window.event : "");
		var elem = (evt.target) ? evt.target : evt.srcElement;

		if (!is_scrolling)
		{
			if (document.all)
			{
				// IE
				xMousePos = evt.offsetX
				yMousePos = evt.offsetY				
			}
			else
			{
				// FF2 FF3
				xMousePos = evt.layerX; // offsetX
				yMousePos = evt.layerY; // offsetY
			}

			if (DEBUG) $("debug4").innerHTML = 'X ' + xMousePos + ' Y ' + yMousePos + ' name ' + elem.name
			
			if (typeof(elem.name) != "undefined" && !isFF3())
			{
				// questo va bene solo per FF2 ... e per IE
				var o1 = 51
				var o2 = 122 * elem.name
				xpos = xMousePos + o1 + o2 - 6
			}
			else
			{
				xpos = xMousePos - 6
			}

			if (document.all)
			{
				// IE
				if ((xpos > 1) && (xpos < mainw - 15))
				{
					$("AW1").style.left = xpos
					$("AW2").style.left = xpos
				}
			}
			else
			{
				// FF2 FF3
				if ((xpos > 1) && (xpos < mainw - 14))
				{
					$("AW1").style.left = xpos
					$("AW2").style.left = xpos
				}
			}			
		}
	}

	carica_immagini = function(i_start) {
		var a
		var temp = "&nbsp;"
		for (var i = i_start; i < i_start + img_riga; i++)
		{
			a = "img/"
			if (i < 10) a += "0"
			a += i + ".jpg"
			temp += "<img src='" + a + "'>"
		}
		return temp
	}

	riga_immagini = function(i_riga, copia) {
		var temp = ""		
		temp += "<div style='overflow: hidden; text-align: center; height: " + immaginih + "px;' id=SC" + i_riga + ">"
		// temp += carica_immagini(i_riga * img_riga)
		if (copia) 
		{
			var s = $("SC" + centro_corrente).innerHTML // copio la riga su per evitare il lampeggio della riga
			s = s.replace(/BM/g, "TEMP") // devo sostituire il nuono id altrimenti non va il bordo con mouseover
			temp += s
		}
		else 
		{
			temp += "<IMG SRC='maxscroller_img/loader_thumb.gif'>" // chiocciolina che ruota
		}
		temp += "</div>"
		return temp
    }
    
	riga_spazio = function() {	
		return "<div style='overflow: hidden; height: " + spazioh + "px;'></div>"
    }
	
	send_request_dati = function(ids, tot_righe) {
		var t = SimpleAJAXCall(url_dati+'?d='+ids+'&n='+img_riga+'&t='+tot_righe, show_response, 'GET', null);
	}
	
	arrows_hide = function() {
		$("AW1").style.visibility = "hidden"
		$("AW2").style.visibility = "hidden"
	}
	
	arrows_show = function() {
		$("AW1").style.visibility = "visible"
		$("AW2").style.visibility = "visible"	
		$("AW1").style.left = arrow_center_pos
		$("AW2").style.left = arrow_center_pos
		// $('SC_id').innerHTML = "&nbsp;"
		$('SC_nome').innerHTML = "&nbsp;"
		$('SC_user').innerHTML = "&nbsp;"
		$('SC_tags').innerHTML = "&nbsp;"
		if (img_riga % 2 != 0) show_dati2(centro_corrente, parseInt(img_riga / 2))
	}

	start_tabella_immagini = function() {
		var imgh = (num_righe * immaginih + (num_righe + 1) * spazioh)
		var toppos = (mainh - imgh) / 2				
		var toppos2 = (mainh - immaginih) / 2		
		var temp = ""
		
		document.write("<div style='background: white; width: " + mainw + ";' id=main_scroller>")

			// LINK UP
			document.write("<div style='margin: 0px;'>")
			document.write("<table cellspacing=0 cellpadding=0 width=100%>");
			document.write("<tr height=26>");
			document.write("<td style='background: url(maxscroller_img/left1.gif) no-repeat; width: 10px'>");
			document.write("<td style='background: url(maxscroller_img/top1.gif) repeat-x; font: bold 12px arial; text-align: center;' id=link_up>Fortuna Scroller");
			document.write("<td style='background: url(maxscroller_img/right1.gif) no-repeat; width: 10px'>");
			document.write("</table>");
			document.write('</div>');

			// ARROW DOWN
			document.write("<div style='margin-bottom: 2px; position: relative; top: 0px; left: " + arrow_center_pos + "px; width: 12px;' id=AW1>")
			document.write("</div>");

			document.write("<div style='background: white; height: " + mainh + "px; overflow: hidden;'>")
				document.write("<div style='top: " + toppos + "px; position: relative;' id=griglia name=griglia>")
					for (var i = 0; i < num_righe; i++)
					{
						if (!i) document.write(riga_spazio())		
						else temp += ","
						document.write(riga_immagini(i, 0))
						temp += "SC" + i
						document.write(riga_spazio())			
					}
				document.write("</div>")
			document.write("</div>")			

			// ARROW UP
			document.write("<div style='margin-top: 2px; position: relative; top: 0px; left: " + arrow_center_pos + "px; width: 12px;' id=AW2>")
			document.write("</div>");

			// LINK DOWN
			document.write("<div style='margin: 0px;'>")
			document.write("<table cellspacing=0 cellpadding=0 width=100%>");
			document.write("<tr height=26>");
			document.write("<td style='background: url(maxscroller_img/left2.gif) bottom no-repeat; width:10px;'>");
			document.write("<td style='background: url(maxscroller_img/top2.gif) bottom repeat-x; font: bold 12px arial; text-align: center;' id=link_down><i><font color=gray>loading...</font>");
			document.write("<td style='background: url(maxscroller_img/right2.gif) bottom no-repeat; width: 10px;'>");
			document.write("</table>");
			document.write("</div>")
			
			document.write("<br>");
			document.write("<div style='background: " + info_box_color + ";' id=INFO_ITEM>")				
			document.write("</div>")

		document.write("</div>")

		if (DEBUG)
		{
			document.write("<div>")
				document.write("<div id=debug1>debug1</div>")
				document.write("<div id=debug2>debug2</div>")
				document.write("<div id=debug3>debug3</div>")
				document.write("<div id=debug4>debug4</div>")
			document.write("</div>")
		}
		
		send_request_dati(temp, 0)		
    }
	
	aggiorna_link = function(modo, fondo, errore) {
		var scroll_up = "scroll up"
		var scroll_down = "scroll down"
		var testo_up = "<font color=gray>" + scroll_up
		var testo_down = "<font color=gray>" + scroll_down
		var testo_loading = "<img src='maxscroller_img/loader_link.gif'>"
		var testo_errore = "<font color=gray>NO MORE BOOKMARKS"
			
		var link_up = "<a class=scroll_link onclick='" + scroller_nome + ".setup_scorrimento(-1);return false;' href='#'>" + scroll_up + "</a>"
		var link_down = "<a class=scroll_link onclick='" + scroller_nome + ".setup_scorrimento(1);return false;' href='#'>" + scroll_down + "</a>"

		switch (modo)
		{
			case 0:
				$("link_up").innerHTML = ((inc_scorri < 0) && errore && (centro_corrente == fine_bottom)) ? testo_errore : link_up
				$("link_down").innerHTML = ((inc_scorri > 0) && errore && (centro_corrente == fine_top)) ? testo_errore : link_down
				break;

			case -1:
				$("link_up").innerHTML = (fondo && !errore) ? testo_loading : testo_up
				$("link_down").innerHTML = (fondo && !errore) ? testo_loading : testo_down // testo_down
				break;
				
			case 1:
				$("link_up").innerHTML = (fondo && !errore) ? testo_loading : testo_up // testo_up
				$("link_down").innerHTML = (fondo && !errore) ? testo_loading : testo_down
				break;
		}

		if (DEBUG) $("debug1").innerHTML = "prima riga: " + first_riga + "<br>ultima riga: " + last_riga + "<br>fine_top: " + fine_top + "<br>fine_bottom: " + fine_bottom
    }

    this.setup_scorrimento = function(dir) {
		is_scrolling = true
		var s = immaginih + spazioh // mi devo spostare di altezza_immagine + spazioh, in su o in giù
		pos_end = parseInt($("griglia").style.top) + dir *  s
		inc_scorri = dir * scroller_step // faccio spostamenti di ... px ogni ... ms
		centro_corrente -= dir
		arrows_hide()
		current_opacity = start_opacity
		cambia_trasparenza(centro_corrente, current_opacity)		
		aggiorna_link(dir, (centro_corrente == first_riga || centro_corrente == last_riga), trovato_fine)		
		setTimeout(scroller_nome + ".scorri()", scroller_timer)
		if (DEBUG) $("debug2").innerHTML = "centro corrente: " + centro_corrente
    }

    this.scorri = function() {
		// se inc < 0 allora devo invertire il >= e cambiare la condizione: in questo modo le unisco
		if (inc_scorri * (parseInt($("griglia").style.top) + inc_scorri) >= inc_scorri * pos_end)
		{
			// ho finito di scorrere
			$("griglia").style.top = pos_end
			aggiungi_blocco()		
			arrows_show()
			is_scrolling = false;
		}
		else
		{
			current_opacity += step_opacity
			cambia_trasparenza(centro_corrente, current_opacity)
			$("griglia").style.top = parseInt($("griglia").style.top) + inc_scorri + "px"
			setTimeout(scroller_nome + ".scorri()", scroller_timer)			
		}        
		if (DEBUG) $("debug3").innerHTML = "current pos: " + $("griglia").style.top + "<br>destination pos: " + pos_end
    }

	aggiungi_blocco = function() {
		if (!trovato_fine) 
		{
			switch (centro_corrente)
			{
				case first_riga:
					// ci sono problemi di lampeggio della riga se aggiungo semplicemente i dati e riposiziono la tabella
					// devo ricopiare il contenuto della riga che ho portato al centro anche sulla riga sopra in quanto poi traslerà verso il basso
					first_riga--				
					// alert("1")
					$("griglia").innerHTML = riga_spazio() + riga_immagini(first_riga, 1) + $("griglia").innerHTML
					// alert("2")
					$("griglia").style.top = pos_end - (immaginih + spazioh)
					// alert("3")
					send_request_dati("SC" + first_riga, num_righe++)
					break;

				case last_riga:
					last_riga++
					$("griglia").innerHTML = $("griglia").innerHTML + riga_immagini(last_riga, 0) + riga_spazio()
					send_request_dati("SC" + last_riga, num_righe++)
					break;
					
				default:
					aggiorna_link(0, 0, trovato_fine)
			}
		}
		else aggiorna_link(0, 0, trovato_fine)
		
		// if (DEBUG) $("debug1").innerHTML = "prima riga: " + first_riga + "<br>ultima riga: " + last_riga + "<br>fine_top: " + fine_top + "<br>fine_bottom: " + fine_bottom
    }

	cambia_trasparenza = function(riga, valore) {
		var imgs = new Array
		imgs = document.getElementById("SC" + riga).getElementsByTagName("img")
		for (i = 0; i < imgs.length; i++) 
		{
			imgs[i].xOpacity = valore
			setOpacity(imgs[i])
		}		
	}

	function setOpacity(obj) {
		// funzione presa da questo link (controllare eventuali ottimizzazioni)
		// http://slayeroffice.com/code/imageCrossFade/index.html
		if (obj.xOpacity > 0.99) {
			obj.xOpacity = 0.99
			return
		}
		obj.style.opacity = obj.xOpacity
		obj.style.MozOpacity = obj.xOpacity
		obj.style.filter = "alpha(opacity=" + (obj.xOpacity * 100) + ")"
	}	
	
	var FFversion = 0
	function setFFversion() {
		//test for Firefox/x.x or Firefox x.x (ignoring remaining digits)
		if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)) { 
			FFversion = new Number(RegExp.$1) // capture x.x portion and store as a number
			/*
			if (FFversion >= 3)
				return 3;
			else if (FFversion >= 2)
				return 2;
			else if (FFversion >= 1)
				return 1;
			*/
		}
		else
			FFversion = -1
	}

	function isFF3() {
		return (FFversion == 3)
	}
	
	setFFversion()
	start_tabella_immagini()
}