/*

	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).get(0);
	this.largeImage;
	this.carousel = null;
	this.imgBlock;
	this.infoTitle;
	this.infoDesc;
	
	//Save arguments
	for(key in args)
		this[key] = args[key];

	//Retrieve links
	var links = $('#'+container+' a').get();
	
	var loaded = 0;
	var totalImages = links.length;
	
	if(totalImages > 0) {
		
		this.carousel = this.buildStructure();
		
		for(i = 0; i < links.length; i++) {
			
			links[i].style.marginRight = this.margin+'px';
			this.carousel.appendChild(links[i]);
			
			var img = $(links[i]).children('img').get(0);
			img.width = this.thumbWidth;
			img.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.infoTitle.innerHTML = info[0];
				this.infoDesc.innerHTML = info[1];
			}
	
			//Assign action to links
			if(this.usePopup) {
			
				$(links[i]).addClass('image'+container);
				links[i].rel = 'image'+container;
				
			} else {
					
				$(links[i]).bind('click', {el: links[i]}, jQuery.proxy(this.onImageClick, this));				
			}
			
			//Buttons hover effect
			$(links[i]).children(0).onmouseover = function() {
				$(this).css('opacity', 0.5);
			}
			
			$(links[i]).children(0).onmouseout = function() {
				$(this).css('opacity', 1);
			}
			
			//Save links in internal array
			if(jQuery.inArray(links[i].href, this.bigImages) == -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) {
	var el = evt.data.el;

	//Check if image finished loading
	if($(this.largeImage.parentNode).find('.large').length > 1)
		return false;

	//Create new temporary image
	var img = document.createElement('img');
	img.title = el.title;
	img.className = 'large';
	img.style.position = 'absolute';
	
	//Hide it
	$(img).css('opacity', 0);

	this.largeImage.parentNode.insertBefore(img, this.largeImage);

	$(img).bind('load', {el: img}, jQuery.proxy(this.onImageLoad, this))
	img.src = el.href;

	return false;
}

/*

	Triggered when the large image loads

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

	//Hide old image
	$(el.largeImage).fadeTo(1000, 0.1);
	
	//Show new image
	var obj = this;
	$(el).fadeTo(1000, 1, function() { obj.updateImg(obj.largeImage) });
	
	//Show info
	var info = el.title.split(' :: ');

	this.infoTitle.innerHTML = info[0];
	this.infoDesc.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();
		$(im).bind('load', jQuery.proxy(this.preloadImages, this))
		im.src = url;
	}
	
}

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

	//Fix new image
	$(largeImage).css('position', 'static');
	$(largeImage).css('opacity', 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';
	
	$(buttonLeft).bind('mouseout', jQuery.proxy(this.moveStop, this));
	$(buttonLeft).bind('mouseup', jQuery.proxy(this.moveStop, this));
	$(buttonLeft).bind('mousedown', jQuery.proxy(this.moveLeft, 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';

	$(buttonRight).bind('mouseout', jQuery.proxy(this.moveStop, this));
	$(buttonRight).bind('mouseup', jQuery.proxy(this.moveStop, this));
	$(buttonRight).bind('mousedown', jQuery.proxy(this.moveRight, this));
	
	var clear = document.createElement('div');
	clear.className = 'clear';

	if(!this.usePopup) {	
		this.largeImage = document.createElement('img');
		this.largeImage.className = 'large';
		
		this.infoTitle = document.createElement('p');
		this.infoTitle.className = 'imageTitle';
		
		this.infoDesc = document.createElement('p');
		this.infoDesc.className = 'imageDesc';
		
		mainContainer.appendChild(this.largeImage);
		mainContainer.appendChild(this.infoTitle);
		mainContainer.appendChild(this.infoDesc);
	}
	
	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';
				
		this.largeImage.parentNode.insertBefore(this.imgBlock, this.largeImage);
		$(this.largeImage).bind('load', jQuery.proxy(this.updateBlock, 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 obj = this;
	this.interval = window.setInterval(function() { obj.carousel.parentNode.scrollLeft -= 10; }, 20);

}

EmbeddedGallery.prototype.moveRight = function(){

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

}

EmbeddedGallery.prototype.moveStop = function() {

	clearInterval(this.interval);
}