/*

	EmbeddedGallery grabs all the links inside a specific container
	and creates a good-looking with a carousel bellow.

*/
function EmbeddedGallery(container, args) {

	/* DEFAULT CONFIGURATION VALUES */
	this.margin = 0;
	this.imageDir = 'images/gallery/';	
	this.thumbWidth = 150;
	this.thumbHeight = 100;
	this.usePopup = false;
	
	/* DO NOT MODIFY BELOW */
	this.bigImages = new Array();
	this.interval = null;
	this.container = $(container);
	this.largeImage;
	this.carousel = null;
	this.imgBlock;
	
	//Save arguments
	for(key in args)
		this[key] = args[key];

	//Retrieve links
	var links = $$('#'+container+' a');
	
	var loaded = 0;
	var totalImages = links.length;
	
	if(totalImages > 0) {
		
		this.carousel = this.buildStructure();
		Element.extend(this.carousel);		
		
		for(i = 0; i < links.length; i++) {
			
			links[i].style.marginRight = this.margin+'px';
			this.carousel.appendChild(links[i]);
			
			links[i].down().width = this.thumbWidth;
			links[i].down().height = this.thumbHeight;
			
			//Show first image with info
			if(i == 0 && !this.usePopup) {
				this.largeImage.src = links[i].href;
				
				info = links[i].title.split(' :: ');
				
				this.carousel.up().previous().previous().previous().innerHTML = info[0];
				this.carousel.up().previous().previous().innerHTML = info[1];
			}
	
			//Assign action to links
			if(this.usePopup) {
			
				links[i].addClassName('image'+container);
				links[i].rel = 'image'+container;
				
			} else {
					
				links[i].observe('click', this.onImageClick.bind(this));				
			}
			
			//Buttons hover effect
			links[i].down().onmouseover = function() {
				this.setOpacity(0.5);
			}
			
			links[i].down().onmouseout = function() {
				this.setOpacity(1);	
			}
			
			//Save links in internal array
			if(this.bigImages.indexOf(links[i].href) == -1)
				this.bigImages.push(links[i].href);

		}
		
		//Set carousel width
		this.carousel.style.width = ((links.length * this.thumbWidth) + (this.thumbWidth * this.margin)) +'px';
		
		//Setup PopUpGallery;
		if(this.usePopup)
			new PopUpGallery('image'+container)
				
		this.preloadImages();
		
	}
	
}

/*
	
	Triggered when an image in the carousel is clicked

*/
EmbeddedGallery.prototype.onImageClick = function(evt) {
	el = evt.findElement('a');

	//Create new temporary image
	var img = document.createElement('img');
	img.title = el.title;
	img.className = 'large';
	img.style.position = 'absolute';
	Element.extend(img);
	
	//Hide it
	img.setOpacity(0);
	
	this.largeImage.parentNode.insertBefore(img, this.largeImage);
	
	img.observe('load', this.onImageLoad.bind(this))	
	img.src = el.href;

	evt.stop();
}

/*

	Triggered when the large image loads

*/
EmbeddedGallery.prototype.onImageLoad = function(evt) {
	el = evt.element();

	//Hide old image
	new Effect.Fade(this.largeImage,{ duration: 1, from: 1, to: 0.1 });
	//Show new image
	new Effect.Fade(el,{ duration: 1, from: 0, to: 1, afterFinish: this.updateImg});
	
	//Show info
	var info = el.title.split(' :: ');

	this.carousel.up().previous().previous().previous().innerHTML = info[0];
	this.carousel.up().previous().previous().innerHTML = info[1];
	
	el.title = '';
	
	//Update pointer to new large image
	this.largeImage = el;
	
	//Update transparent protection
	this.updateBlock()
}

/*

	Preload all big images stored in internal array

*/
EmbeddedGallery.prototype.preloadImages = function() {

	if(this.bigImages.length > 0) {
		url = this.bigImages.pop();
		
		var im = new Image();
		Element.extend(im);
		im.observe('load', this.preloadImages.bind(this))
		im.src = url;
	}
	
}

/*
	
	Triggered when the new large image is shown
	
*/
EmbeddedGallery.prototype.updateImg = function(effect) {
	var largeImage = effect.element;
	var newImg = largeImage.next();

	//Fix new image
	largeImage.style.position = 'static';
	largeImage.setOpacity(1);
	
	//Remove old image
	newImg.remove();
}

/*
	
	Build the main structure for the gallery

*/
EmbeddedGallery.prototype.buildStructure = function() {
		
	var mainContainer = document.createElement('div');
	mainContainer.className = 'fixedGallery';
	
	if(this.usePopup)
		mainContainer.className += ' popup';
			
	var buttonLeft = document.createElement('img');
	buttonLeft.src = this.imageDir + 'prev.jpg';
	buttonLeft.className = 'leftButton';
	buttonLeft.style.cursor = 'pointer';
	
	Element.extend(buttonLeft);	
	buttonLeft.observe('mouseout', this.moveStop.bind(this));
	buttonLeft.observe('mouseup', this.moveStop.bind(this));
	buttonLeft.observe('mousedown', this.moveLeft.bind(this));
	
	var containerThumbnails = document.createElement('div');
	containerThumbnails.className = 'thumbnails';
	
	var containerThumbnails2 = document.createElement('div');
	
	var buttonRight = document.createElement('img');
	buttonRight.src = this.imageDir + 'next.jpg';
	buttonRight.className = 'rightButton';
	buttonRight.style.cursor = 'pointer';

	Element.extend(buttonRight);	
	buttonRight.observe('mouseout', this.moveStop.bind(this));
	buttonRight.observe('mouseup', this.moveStop.bind(this));
	buttonRight.observe('mousedown', this.moveRight.bind(this));
	
	var clear = document.createElement('div');
	clear.className = 'clear';

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

	}

	return containerThumbnails2;
}

/*

	Inserts a transparent GIF image	on top of 
	the large image to avoid quickimage saving.

*/
EmbeddedGallery.prototype.updateBlock = function() {	
	this.imgBlock.width = this.largeImage.offsetWidth;
	this.imgBlock.height = this.largeImage.offsetHeight;
}

/*

	Scroll carousel

*/
EmbeddedGallery.prototype.moveLeft = function(){
	
	var self = this;
	this.interval = window.setInterval(function() { self.carousel.up().scrollLeft -= 10; }, 20);

}

EmbeddedGallery.prototype.moveRight = function(){

	var self = this;
	this.interval = window.setInterval(function() { self.carousel.up().scrollLeft += 10 }, 20);

}

EmbeddedGallery.prototype.moveStop = function(){
	clearInterval(this.interval);
}