var initW = 200;
var initH = 200;
var mainPadding = 12;
var imageDir = '';
var ampliarTexto = 'ampliar imagen';

var showSlider = true;
var sliderPadding = 10;
var sliderExtra = 6;
var navBg = '#444';
var navHoverBg = '#444';
var autoThumb = false;
var thumbWidth = 100;
var thumbHeight = 100;

var YouTubeWidth = 425;
var YouTubeHeight = 344;

/* DO NOT MODIFY BELOW */
var block = null;
var container = null;
var link = null;
var img = null;
var galleries = new Array();
var currentIndex = null;
var slideInterval = null;
var autoScroll = null;
var docScrollX = null;
var docScrollY = null;
var imageResized = false;
var youtube = false;

function initGallery(classn) {
	
	//Assign action to gallery images
	var pics = $$('.'+classn);
	for(i = 0; i < pics.length; i++) {
	
		pics[i].onclick = function() {
			showPhoto(this);
			return false;			
		}
		
		//Group galleries
		if(pics[i].rel == '')
			pics[i].rel = 'noGallery';
			
		gallery = pics[i].rel;
			
		if(!galleries[gallery])
			galleries[gallery] = new Array();
				
		galleries[gallery].push(pics[i]);		
	
	}
	
	docScrollY = getYScroll();
	docScrollX = getXScroll();
	
}

function showPhoto(anchor) {
	if(currentIndex)
		removeImage(link, container, block)

	//Setup environment for picture display
	currentIndex = galleries[anchor.rel].indexOf(anchor);

	//Create gray background
	block = createBlockLayer();
	link = anchor;
	
	Element.extend(link);
	size = link.getDimensions();
	pos = link.cumulativeOffset();

	//Create image container
	container = document.createElement('div');
	
	container.style.width = size.width + 'px';
	container.style.height = size.height + 'px';
	container.style.top = pos.top + 'px';
	container.style.left = pos.left + 'px';
	container.style.position = 'absolute';
	container.className = 'imgContainer';
	
	Element.extend(container);
	container.setOpacity(0);

	//Center container on resize/scroll
	window.onscroll = function() {
		
		size = container.getDimensions();
			
		left = center(size.width, 'x');
		top = center(size.height, 'y');
	
		new Effect.Move(container, {x: left + (getXScroll()/2), y: top + (getYScroll()/2), mode: 'absolute', duration: 1});
		
		//container.style.left = (left + (getXScroll()/2)) + 'px';
		//container.style.top = (top + (getYScroll()/2)) + 'px';
		block.style.left = getXScroll() + 'px';
		block.style.top = getYScroll() + 'px';
	}
	
	window.onresize = window.onscroll;
	
	//Remove container on click / escape key
	block.onclick = function() {
		removeImage(link, container, block);
	}
	
	Event.observe(document, 'keypress', function(e){
		var code;
		if (!e) var e = window.event;
		if (e.keyCode) code = e.keyCode;
		else if (e.which) code = e.which;
		
		if(code == Event.KEY_ESC)
			removeImage(link, container, block);
		
	});
		
	//Append container
	document.body.appendChild(container);
	
	var left = center(initW, 'x');
	var top = center(initH, 'y');

	//Show container
	animateImage(link, container, left, top, initW, initH, true, loadImage);
		
}

function animateImage(link, container, left, top, w, h, fade, afterEffect) {

	//Animate container position / size
	//If fade is true, image will fade in

	Element.extend(container);

	var effects = new Array();
	effects.push(new Effect.Move(container, {sync:true, x: left + (getXScroll()/2), y: top + (getYScroll()/2), mode: 'absolute'}));
	effects.push(new Effect.Morph(container, {sync:true, style: {width: w+'px', height: h+'px'}}));

	if(fade)
		effects.push(new Effect.Fade(container, {sync:true, from: 0, to: 1}));
		
	new Effect.Parallel(effects, {duration: 0.5, afterFinish: afterEffect});

}

function loadImage() {
	
	var file = new String(galleries[link.rel][currentIndex]);
	youtube = (file.indexOf('youtube.com/watch?v=') != -1);

	if(youtube) {
	
		//Load full-sized youtube video
		videoID = file.match(/v=([^&]*)/);
		videoID = videoID[1];
		
		/*img = document.createElement('object');
		img.width = 425;
		img.height = 344;
		img.style.width = 425;
		img.style.height = 344;
		
		var p = document.createElement('param');
		p.name = 'movie';
		p.value = 'http://www.youtube.com/v/'+videoID+'&hl=en&fs=1';
		img.appendChild(p);

		var p2 = document.createElement('param');
		p2.name = 'allowFullScreen';
		p2.value = true;
		img.appendChild(p2);
		
		var p3 = document.createElement('param');
		p3.name = 'wmode';
		p3.value = 'transparent';
		img.appendChild(p3);*/
		
		img = document.createElement('div');
		img.width = YouTubeWidth;
		img.height = YouTubeHeight;
		
		var embed = document.createElement('embed');
		embed.src = 'http://www.youtube.com/v/'+videoID+'&hl=en&fs=1';
		embed.type = 'application/x-shockwave-flash';
		embed.width = img.width;
		embed.height = img.height;
		embed.allowfullscreen = true;
		embed.wmode = 'transparent';
		img.appendChild(embed)
		
		pad = mainPadding*2;
		totW = img.width + pad;
		totH = img.height + pad;
		container.appendChild(img);
		animateImage(link, container, center(totW, 'x'), center(totH, 'y'), totW, totH, true, insertImage);
		
	} else {	
	
		//Load full-sized image
		img = new Image();
		
		img.onload = function() {
		
			//Check if image fits in window
			pad = mainPadding*2;
	
			docHeight = document.body.offsetHeight - 100;
			docWidth = document.body.offsetWidth - 100;
			
			if(showSlider)
				docHeight -= 150;
	
			if(docHeight < 0)
				docHeight = 100
	
			if(docWidth < 0)
				docWidth = 100
	
			imgHeight = img.height + pad;
			imgWidth = img.width + pad;
	
			if(imgHeight > docHeight || imgWidth > docWidth) {
	
				if(imgHeight > imgWidth) {
		
					if(imgHeight > docHeight) {								
						img.height = docHeight;
						img.width = img.height * imgWidth / imgHeight;
					} else {	
						img.width = docWidth;
						img.height = img.width * imgHeight / imgWidth;					
					}
				
				} else {
				
					if(imgWidth > docWidth) {
						img.width = docWidth;
						img.height = img.width * imgHeight / imgWidth;
					} else {
						img.height = docHeight;
						img.width = img.height * imgWidth / imgHeight;
					}
					
				}
				
				imageResized = true;
				
			}
		
			//Relocate container
			animateImage(link, container, center(img.width+pad, 'x'), center(img.height+pad, 'y'), (img.width+pad), (img.height+pad), true, insertImage);
		}
		
		img.onclick = block.onclick;		
	}
	
	img.style.padding = mainPadding+'px';
	img.className = 'galleryImage';
		
	if(!youtube)
		img.src = file;
}

function insertImage() {

	container.style.width = (parseInt(img.width) + mainPadding*2) + 'px';
	container.style.height = (parseInt(img.height) + mainPadding*2) + 'px';
	
	var effects = new Array();
	
	//Append image to container	
	img.style.display = 'none';
	container.appendChild(img);
	effects.push(new Effect.Appear(img, {sync: true}));

	//Image data
	data = link.title.split(' | ');
	imgTitle = data[0];
	imgDesc = data[1];
	
	info = document.createElement('div');
	info.className = 'infoBox';
	
	if(imageResized) {
		big = document.createElement('a');
		big.className = 'openBigImage';
		big.href = link.href;
		big.title = ampliarTexto;
		info.appendChild(big);
	
		imageResized = false;
	}
	
	tit = document.createElement('p');
	tit.className = 'imageTitle';
	
	desc = document.createElement('p');
	desc.className = 'imageDesc';
	
	tit.appendChild(document.createTextNode(imgTitle));
	desc.appendChild(document.createTextNode(imgDesc));
	
	info.appendChild(tit);
	info.appendChild(desc);
	container.appendChild(info);
	
	infoSize = Element.extend(info).getDimensions();
	info.style.display = 'none';
	
	contW = parseInt(container.getStyle('width').replace('px', ''))
	contH = parseInt(container.getStyle('height').replace('px', ''))
	
	//Show image data
	effects.push(new Effect.BlindDown(info, {sync: true}));
	new Effect.Parallel(effects, {duration: 0.5, afterFinish: insertImageBlock});
	
	if(showSlider && link.rel != 'noGallery') {
		sliderHeight = gallerySlider();
		infoSize.height += sliderHeight;
	}
	
	//Relocate container
	animateImage(link, container, center(contW, 'x'), center(contH+infoSize.height, 'y'), contW, (contH+infoSize.height), false, insertGalleryNavigation);

}

function insertImageBlock() {

	if(!youtube) {
		
		//Inserts transparent gif on top of image
		var imgBlock = document.createElement('img')
		imgBlock.src = imageDir + 'block.gif';
		imgBlock.width = img.offsetWidth;
		imgBlock.height = img.offsetHeight;
		imgBlock.style.position = 'absolute';
		
		img.parentNode.insertBefore(imgBlock, img);
	}
	
}

function insertGalleryNavigation() {
	if(!showSlider || link.rel == 'noGallery')
		galleryNavigation()		
}

function galleryNavigation() {

	//Set container size to eliminate IE glitches
	container.style.width = container.getWidth()+'px';
	container.style.height = container.getHeight()+'px';

	//Insert previous and back buttons
	if(link.rel != 'noGallery') {
		if(currentIndex > 0)
			floatingButton(-1, container, currentIndex-1);

		if(currentIndex < (galleries[link.rel].length-1))
			floatingButton(1, container, currentIndex+1);
	}

	//Close button
	var close = document.createElement('img');
	close.style.cursor = 'pointer';
	
	close.onclick = block.onclick;
		
	close.onload = function() {
		
		if(showSlider && img.next().next())
			sliderHeight = img.next().next().offsetHeight;
		else
			sliderHeight = 0;

		var div = document.createElement('div');
		div.style.position = 'absolute';
		div.style.display = 'none';
		div.className = 'galleryNavigation';
		
		var div2 = document.createElement('div');
		div2.style.position = 'relative';
		div2.style.top = -(img.offsetHeight + sliderHeight + img.next().getHeight() + (this.height/2)) + 'px';
		
		if (navigator.appVersion.indexOf("Mac")!=-1)
			div2.style.left = -(this.width/2) + 'px';
		else
			div2.style.left = (img.offsetWidth - this.width/2) + 'px';

		div2.appendChild(this);
		div.appendChild(div2);
		container.appendChild(div);

		if(self.correctPNG)
			correctPNG(this)
		
		new Effect.Appear(div, {duration: 0.5});		
			
	}
			
	close.src = imageDir + 'close.png';

}

function floatingButton(which, container, index) {

	//Create navigation button		
	var button = new Image();	
	button.style.cursor = 'pointer';
	
	if(which > 0) {
		imgSrc = 'next.png';
	
		button.onclick = function() {
			autoScroll = null;
			currentIndex++;
			loadGalleryNext();
		}
	
	} else {
		imgSrc = 'prev.png';
		
		button.onclick = function() {
			autoScroll = null;
			currentIndex--;
			loadGalleryNext();
		}	
	}
	

	button.onload = function() {
		size = img.getDimensions();
		
		if(showSlider)
			sliderHeight = img.next().next().offsetHeight;
		else
			sliderHeight = 0;
		
		var div = document.createElement('div');
		div.style.position = 'absolute';
		div.style.zIndex = 10;
		div.style.display = 'none';
		div.className = 'galleryNavigation';
		
		var div2 = document.createElement('div');
		div2.style.position = 'relative';
		div2.style.top = -parseInt((size.height/2) + (button.height/2) + img.next().getHeight() + sliderHeight) + 'px';

		if(which > 0)
			div2.style.left = parseInt(size.width - (button.width/2)) + 'px';
		else
			div2.style.left = -parseInt(button.width/2) + 'px';

		div2.appendChild(button);
		div.appendChild(div2);
		container.appendChild(div);

		if(self.correctPNG)
			correctPNG(this)
		
		new Effect.Appear(div, {duration: 0.5});
		
	}
		
	button.src = imageDir + imgSrc;

}

function gallerySlider() {
	
	//Creates gallery image slider
	slider = document.createElement('div');
	slider.className = 'gallerySlider';
	
	cont = document.createElement('div');
	cont.className = 'gallerySliderImages';
	cont.style.overflow = 'hidden';
	
	cont2 = document.createElement('div');
	cont2.className = 'gallerySliderScroller';
	
	//Create active areas for scrolling
	contLeft = document.createElement('div');
	contLeft.style.cursor = 'pointer';
	contLeft.style.position = 'absolute';
	contLeft.className = 'sliderNavLeft';
	contLeft.style.backgroundColor = navBg;
	slider.appendChild(contLeft);
	
	contRight = contLeft.cloneNode(true);
	contRight.className = 'sliderNavRight';
	slider.appendChild(contRight);

	Element.extend(contRight);
	Element.extend(contLeft);
	
	contLeft.onmouseover = function() {
		slideInterval = setInterval("scrollSlider(-1)", 20);
		this.style.backgroundColor = navHoverBg;
	}
	
	contLeft.onmouseout = function() {
		clearInterval(slideInterval);
		this.style.backgroundColor = navBg;
	}
	
	contRight.onmouseover = function() {
		slideInterval = setInterval("scrollSlider(1)", 20);
		this.style.backgroundColor = navHoverBg;
	}
	
	contRight.onmouseout = function() {
		clearInterval(slideInterval);
		this.style.backgroundColor = navBg;
	}
	
	contWidth = 0;
	contScroll = null;
	
	//Attach images
	for(i = 0; i < galleries[link.rel].length; i++) {
		
		im = new Image();
		im.id = 'gm'+i;
		im.style.cursor = 'pointer';
		im.style.margin = sliderPadding+'px';
		im.style.marginLeft = 0;
		im.src = galleries[link.rel][i].down().src;
		
		if(autoThumb == false) {
			im.width = thumbWidth;
			im.height = thumbHeight;
		}
		
		if(i == currentIndex)
			im.className = 'selectedImage';
		
		im.onclick = function() {
			
			autoScroll = img.next().next().down().next().next().scrollLeft;
			currentIndex = this.id.substr(2);
			loadGalleryNext();
			
		}
		
		Element.extend(im);
		
		im.onmouseover = function() {
			this.addClassName('imgHover');
		}
		
		im.onmouseout = function() {
			this.removeClassName('imgHover');
		}
		
		contWidth += im.width + sliderPadding + sliderExtra;
		
		if(autoScroll == null && i < currentIndex)
			contScroll = contWidth;
		
		cont2.appendChild(im);
		
	}

	cont2.style.width = contWidth + 'px';

	if(contScroll != null)
		autoScroll = contScroll;

	cont.appendChild(cont2);
	slider.appendChild(cont);
	
	containerWidth = container.getWidth();
	container.appendChild(slider);

	//Position elements correctly
	cont.style.width = containerWidth + 'px';
	cont2.style.padding = '0 '+(contRight.getWidth() + mainPadding)+'px 0 '+(contLeft.getWidth() + mainPadding)+'px';
	contRight.style.left = (container.getWidth() - contRight.getWidth()) + 'px';

	contRight.style.display = 'none';
	contLeft.style.display = 'none';
	
	sliderHeight = slider.offsetHeight;
	
	slider.style.display = 'none';	
	new Effect.BlindDown(slider, {duration: 0.5, afterFinish: autoScroller});
	
	//Adjust active areas height
	contLeft.style.height = slider.getHeight()+'px';
	contRight.style.height = slider.getHeight()+'px';

	return sliderHeight;
}

function scrollSlider(where) {
	img.next().next().down().next().next().scrollLeft += (5 * where);
}

function autoScroller() {

	//Show navigation
	img.next().next().down().style.display = 'block'
	img.next().next().down().next().style.display = 'block';

	//Scroll
	img.next().next().down().next().next().scrollLeft = autoScroll;
	autoScroll = null;

	galleryNavigation();
}

function removeNavigation() {
	//Removes all navigation-related controls
	
	var navs = $$('.galleryNavigation');
	for(i = 0; i < navs.length; i++)
		navs[i].remove();
		
	if(showSlider && link.rel != 'noGallery')
		img.next().next().remove();
}

function loadGalleryNext() {
	//Loads image in gallery (depending on 'currentIndex' value)
	
	removeNavigation();
	
	var effects = new Array();
	effects.push(new Effect.Fade(img.next(), {sync: true}));
	effects.push(new Effect.Fade(img, {from: 1, to: 0, sync: true}));
	
	new Effect.Parallel(effects, {duration: 0.2, afterFinish: removeBetweenImages});

	link = galleries[link.rel][currentIndex];
}

function removeBetweenImages() {
	if(!youtube)
		img.previous().remove();
		
	img.next().remove();
	img.remove();
	
	setTimeout("loadImage()", 200)
}

function removeImage(link, container, block) {
	//Hide everything
	block.remove();
	
	pos = link.cumulativeOffset();
	size = link.getDimensions();

	removeNavigation();

	var effects = new Array();
	effects.push(new Effect.Move(container, {x: pos.left, y: pos.top, mode: 'absolute', sync: true}));
	effects.push(new Effect.Morph(container, {style: {width: size.width+'px', height: size.height+'px'}, sync: true}));
	effects.push(new Effect.Morph(img, {style: {width: size.width+'px', height: size.height+'px'}, sync: true}));
	effects.push(new Effect.Fade(container, {from: 1, to: 0, sync: true}));
	
	new Effect.Parallel(effects, {duration: 0.5, afterFinish: removeContainer});
	
}

function removeContainer() {
	//Remove everything	
	container.remove()
	
	img = null;
	container = null;
	link = null;
	currentIndex = null;
	
	Event.stopObserving(document, 'keypress');
}

function createBlockLayer() {
	//Creates gray layer

	blk = document.createElement('div');
	blk.style.width = '100%';
	blk.style.height = '100%';
	blk.style.top = getYScroll()+'px';
	blk.style.left = 0;
	blk.style.position = 'absolute';
	blk.style.background = '#000';
	
	Element.extend(blk);
	blk.setOpacity(0.9);
	document.body.appendChild(blk);
	
	return blk;

}

function getXScroll() {
	return window.pageXOffset || document.documentElement.scrollLeft || 0;
}

function getYScroll() {
	return window.pageYOffset || document.documentElement.scrollTop || 0;
}

function center(what, how) {
	
	//Returns coordinates to center 'what' in document
	//how = x => horizontal coordinate
	//how = y => vertical coordinate

	if(how == 'x')
		cont = document.documentElement.clientWidth + getXScroll();
	else
		cont = document.documentElement.clientHeight + getYScroll()
		
	return Math.round(parseFloat(cont/2)-parseFloat(what/2))
	
}