// clase ImageBrowser
/*
 *
 *
 *
 */
function ImageBrowser(containerElementId, instanceName,
					  pathToImages)
{
	this.instanceName = instanceName;
	this.pathToImages = pathToImages;

	this.imageFiles = new Array();
	this.thumbnailPrefix = 'small_';

	// ids para aplicar estilos
	this.containerElementId = containerElementId;
	this.mainViewerId = 'mainViewer';
	this.photoStripId = 'photoStrip';

	// dom
	this.mainViewer = null;

	// métodos del visor
	this.initializeFromArray = initializeFromArray;
	this.initializeFromURL 	 = initializeFromURL;
	this.displayBrowser      = displayBrowser;
	this.generateViewer      = generateViewer;
	this.generateStrip       = generateStrip;
	this.changePicture       = changePicture; // imageBrowser.changePicture(newCurrentPic)
	this.displayLoadingFeedback = displayLoadingFeedback;
}
function initializeFromArray(imageFiles)
{
	this.imageFiles = imageFiles;
	// número de imágenes que se manejarán
	this.numberOfImages = this.imageFiles.length;
	this.displayBrowser();
}
function initializeFromURL(url)
{
	this.displayLoadingFeedback();
	
	// cargar datos de imagenes
	var callback =
	{
		cache:false,
		success:function(o)
		{
			processXMLResponse(o);
		},
		failure:function(o)
		{//TODO: throwear una exepcion mardita para dejarlo todo como estaba
			alert("Error al cargar archivo de imagenes");
		},
		argument:this
	}
	// transacción asíncrona
	var transaction = YAHOO.util.Connect.asyncRequest('GET', url, callback, null);		
}
function processXMLResponse(o)
{
	// rellenar imageFilesFromURL
	var XMLimageFiles = o.responseXML.getElementsByTagName('image');
	imageFilesFromURL = new Array();
	for(var i=0; i<XMLimageFiles.length; i++)
	{
		imageFilesFromURL[i]=XMLimageFiles[i].getAttribute('name');
	}
	o.argument.initializeFromArray(imageFilesFromURL);		
}
function displayLoadingFeedback()
{
	var container = document.getElementById(this.containerElementId);
	var img = document.createElement('img');
	container.appendChild(img);
	img.setAttribute('src', 'images/ajax-loader-bar.gif');
	img.setAttribute('id', 'loadingImg');
}
function displayBrowser()
{
	var container = document.getElementById(this.containerElementId);
	var loadingImg = document.getElementById('loadingImg');

	this.generateViewer();
	var strip = this.generateStrip();

	container.removeChild(loadingImg);
	this.mainViewer.appendChild(strip);
	container.appendChild(this.mainViewer);
}
	
function generateViewer()
{
	// crear el elemento visor
	this.mainViewer = document.createElement('div');
	this.mainViewer.setAttribute('id', this.mainViewerId);
	
	// asignar primera imagen al visor
	this.changePicture(0);
}
function generateStrip()
{
	// crear la tira de imágenes, un div
	var photoStrip = document.createElement('div');

	photoStrip.setAttribute('id', this.photoStripId);
	
	var thisCell;
	for (var i = 0; i < this.numberOfImages; i++)
	{
  		thisCell = document.createElement('div');
		thisImage = document.createElement('img');
		thisImage.setAttribute('src', this.pathToImages + this.thumbnailPrefix + this.imageFiles[i]);
		thisImage.setAttribute('onclick', this.instanceName + '.changePicture(' + i + ')');
		thisCell.appendChild(thisImage);
		
		thisCell.innerHTML = thisCell.innerHTML; // para que el siniestro Internet Explorer escuche los onClick
		photoStrip.appendChild(thisCell);
	}
	//alert(photoStrip.innerHTML);
	return photoStrip;
}
function changePicture(newCurrentPic)
{
	YAHOO.util.Dom.setStyle(this.mainViewer, 'background-image',
		"url('" + this.pathToImages + this.imageFiles[newCurrentPic] + "')");
	//alert("changePicture por el numero " + newCurrentPic);
	this.mainViewer.innerHTML = this.mainViewer.innerHTML;
}
// final de clase ImageBrowser