var interval;
var margin = 0;
var imageDir = '';

var usePopup = false;

var bigImages = new Array();

function fixedGallery(container) {

	var links = $$('#'+container+' a');
	
	var loaded = 0;
	var totalImages = links.length;
	
	if(totalImages > 0) {
		
		var containerThumbnails2 = buildStructure(container);
		Element.extend(containerThumbnails2);		

		var width = 0;
		
		for(i = 0; i < links.length; i++) {
			links[i].style.marginRight = margin+'px';
			containerThumbnails2.appendChild(links[i]);
			
			if(i == 0 && !usePopup) {
				var largeImage = getLargeImage(container);
				largeImage.src = links[i].href;
				
				info = links[i].title.split(' :: ');
				
				containerThumbnails2.up().previous().previous().previous().innerHTML = info[0];
				containerThumbnails2.up().previous().previous().innerHTML = info[1];
			}
	
			if(usePopup) {
			
				links[i].addClassName('image'+container);
				links[i].rel = 'image'+container;
				
			} else {
					
				links[i].onclick = function() {
	
					var largeImage = getLargeImage(container);
					var img = document.createElement('img');
					img.title = this.title;
					img.className = 'large';
					img.onload = largeImage.onload;
					img.style.position = 'absolute';
					Element.extend(img);
					img.setOpacity(0);
					
					largeImage.parentNode.insertBefore(img, largeImage);
					
					img.onload = function() {
					
						new Effect.Fade(largeImage,{ duration: 1, from: 1, to: 0.1 });
						new Effect.Fade(this,{ duration: 1, from: 0, to: 1, afterFinish: updateImg});
						
						var info = this.title.split(' :: ');
					
						containerThumbnails2.up().previous().previous().previous().innerHTML = info[0];
						containerThumbnails2.up().previous().previous().innerHTML = info[1];
						
						this.title = '';
						updateBlock(container)
						
					}
					
					img.src = this.href;
	
					return false;
				}
				
			}
			
			links[i].down().onmouseover = function() {
				this.setOpacity(0.5);
			}
			
			links[i].down().onmouseout = function() {
				this.setOpacity(1);	
			}

			links[i].down().onload = function() {
				width += this.width + margin;
				loaded++;
				
				//if(loaded == totalImages)
					resizeThumbnailsContainer(width, containerThumbnails2)
			}

			if(bigImages.indexOf(links[i].href) == -1)
				bigImages.push(links[i].href);

		}
		
		if(usePopup)
			initGallery('image'+container)
				
		preloadImages();
		
	} else {
		alert('No hay links.');	
	}
	
}

function resizeThumbnailsContainer(width, containerThumbnails2) {

	//Dim buttons if not necessary
	if(width <= containerThumbnails2.up().offsetWidth) {
		containerThumbnails2.up().previous().style.cursor = 'default';
		containerThumbnails2.up().previous().setOpacity(0.5)
		
		containerThumbnails2.up().next().style.cursor = 'default';
		containerThumbnails2.up().next().setOpacity(0.5)
	} else {
		containerThumbnails2.up().previous().style.cursor = 'pointer';
		containerThumbnails2.up().previous().setOpacity(1)
		
		containerThumbnails2.up().next().style.cursor = 'pointer';
		containerThumbnails2.up().next().setOpacity(1)
	}
	
	containerThumbnails2.style.width = width+'px';
	
}

function preloadImages() {
	if(bigImages.length > 0) {
		url = bigImages.pop();
		var im = new Image();
		im.onload = function() {
			preloadImages();
		}
		im.src = url;
	}
}

function updateImg(effect) {
	var largeImage = effect.element;
	var newImg = largeImage.next();

	largeImage.style.position = 'static';
	largeImage.setOpacity(1);
	newImg.remove();
}

function buildStructure(container) {

	var mainContainer = document.createElement('div');
	mainContainer.className = 'fixedGallery';
	
	if(usePopup)
		mainContainer.className += ' popup';
			
	var buttonLeft = document.createElement('img');
	buttonLeft.src = imageDir + 'prev.png';
	buttonLeft.className = 'leftButton';
	buttonLeft.onmouseout = moveStop;
	buttonLeft.onmouseup = moveStop;
	buttonLeft.onmousedown = function() { moveLeft(container); }
	buttonLeft.style.cursor = 'pointer';
	
	var containerThumbnails = document.createElement('div');
	containerThumbnails.className = 'thumbnails';
	
	var containerThumbnails2 = document.createElement('div');
	
	var buttonRight = document.createElement('img');
	buttonRight.src = imageDir + 'next.png';
	buttonRight.className = 'rightButton';
	buttonRight.onmouseout = moveStop;
	buttonRight.onmouseup = moveStop;
	buttonRight.onmousedown = function() { moveRight(container) };
	buttonRight.style.cursor = 'pointer';
	
	var clear = document.createElement('div');
	clear.className = 'clear';

	if(!usePopup) {	
		var largeImage = document.createElement('img');
		largeImage.className = 'large';
		
		var tit = document.createElement('p');
		tit.className = 'imageTitle';
		
		var desc = document.createElement('p');
		desc.className = 'imageDesc';
		
		mainContainer.appendChild(largeImage);
		mainContainer.appendChild(tit);
		mainContainer.appendChild(desc);
	}
	
	mainContainer.appendChild(buttonLeft);
	mainContainer.appendChild(containerThumbnails);
	containerThumbnails.appendChild(containerThumbnails2);
	mainContainer.appendChild(buttonRight);
	mainContainer.appendChild(clear);
	
	$(container).appendChild(mainContainer);
	
	if(!usePopup) {
		//Inserts transparent gif on top of image
		var imgBlock = document.createElement('img')
		imgBlock.src = imageDir + 'block.gif';
		imgBlock.style.position = 'absolute';
		imgBlock.className = 'block';
		
		var largeImage = getLargeImage(container);
		largeImage.parentNode.insertBefore(imgBlock, largeImage);
		largeImage.onload = function() {
			updateBlock(container);
		}
	}

	return containerThumbnails2;
}

function getLargeImage(container) {
	var th = $$('#'+container+' .large');
	return th[0];
}

function getThumbnails(container) {
	var th = $$('#'+container+' .thumbnails');
	return th[0];
}

function updateBlock(container) {
	var imgBlock = $$('#'+container+' .block');
	var largeImage = getLargeImage(container);
	
	imgBlock = imgBlock[0];
	imgBlock.width = largeImage.offsetWidth;
	imgBlock.height = largeImage.offsetHeight;
}

function moveLeft(container){
	
	interval = setInterval(function(){
		var th = getThumbnails(container);
		th.scrollLeft-=10;
	},30);
	//scroll--
}
function moveRight(container){
	interval = setInterval(function(){
		var th = getThumbnails(container);
		th.scrollLeft+=10;
	},30);

}
function moveStop(){
	clearInterval(interval);
}