/*
	
	PopUpGallery grabs all the links with the specified class
	and displays their content in a popup window when clicked.
	
	Appending the class "iframe" shows the linked
	content in an iframe.
	
	Flash files and youtube videos are also supported
	without any special configuration.
	
	Link's rel attribute can be used to group images
	into galleries, displaying a carousel if the slider is enabled.
	
*/
function PopUpGallery(classn, args) {

	/* DEFAULT CONFIGURATION VALUES */
	this.initW = 200;
	this.initH = 200;
	this.mainPadding = 12;
	this.imageDir = 'images/gallery/';
	this.ampliarTexto = 'Ampliar imagen';
	
	this.showSlider = true;
	this.sliderPadding = 10;
	this.sliderExtra = 6;
	this.navBg = '#444';
	this.navHoverBg = '#444';
	this.thumbWidth = 100;
	this.thumbHeight = 100;
	
	this.YouTubeWidth = 425;
	this.YouTubeHeight = 344;
	this.SWFWidth = 800;
	this.SWFHeight = 450;
	this.iFrameWidth = 800;
	this.iFrameHeight = 450;
	
	/* DO NOT MODIFY BELOW */
	this.block = null;
	this.container = null;
	this.link = null;
	this.img = null;
	this.galleries = new Array();
	this.currentIndex = null;
	this.slideInterval = null;
	this.imageResized = false;
	this.youtube = false;
	this.swf = false;
	this.giframe = false;
	
	//Save arguments
	for(key in args)
		this[key] = args[key];
			
	//Assign action to gallery images
	var pics = $$('a.'+classn);
	var gallery = '';
	for(i = 0; i < pics.length; i++) {

		pics[i].observe('click', this.showPhoto.bind(this))
		
		//Group galleries
		if(pics[i].rel == '')
			pics[i].rel = 'noGallery';
			
		gallery = pics[i].rel;
		
		if(!this.galleries[gallery])
			this.galleries[gallery] = new Array();
				
		this.galleries[gallery].push(pics[i]);		
	
	}
	
}

/*
	
	Triggered when one of the links is clicked.	
	It sets the whole gallery display up.
	
*/
PopUpGallery.prototype.showPhoto = function(evt) {
	
	//Check for already loaded images and remove
	if(this.currentIndex)
		this.removeImage()

	//Get the link that triggered the action and
	//prevent the href from working
	var anchor = evt.findElement('a');
	evt.stop();

	if(anchor.disabled)
		return false;

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

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

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

	//Center container on resize/scroll
	Event.observe(window, 'scroll', this.centerOnScroll.bind(this))
	Event.observe(window, 'resize', this.centerOnScroll.bind(this))
	
	//Remove container on click / escape key
	this.block.observe('click', this.removeImage.bind(this))
	Event.observe(document, 'keypress', this.removeOnEsc.bind(this))
		
	//Append container
	document.body.appendChild(this.container);
	
	var left = this.center(this.initW, 'x');
	var top = this.center(this.initH, 'y');

	//Show container
	this.animateImage(left, top, this.initW, this.initH, true, this.loadImage.bind(this));
		
}

/*

	Triggered whenever the window changes size
	or scrolling position. Centers the display.
	
*/
PopUpGallery.prototype.centerOnScroll = function(evt) {
	
	if(this.container) {
			
		size = this.container.getDimensions();
			
		mleft = this.center(size.width, 'x');
		mtop = this.center(size.height, 'y');
	
		yMove = mtop + (this.getYScroll()/2);
		xMove = mleft + (this.getXScroll()/2);
	
		new Effect.Move(this.container, {x: xMove, y: yMove, mode: 'absolute', duration: 1});
		
		this.block.style.left = this.getXScroll() + 'px';
		this.block.style.top = this.getYScroll() + 'px';
		
	}
	
}

/*

	Triggered when the ESC key is pressed.
	Remove the gallery display.
	
*/
PopUpGallery.prototype.removeOnEsc = 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)
		this.removeImage();
	
}

/*

	Moves and resizes the gallery display
	to fit the linked content.

*/
PopUpGallery.prototype.animateImage = function(left, top, w, h, fade, afterEffect) {

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

	Element.extend(this.container);

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

	//Slide slider down
	if(this.showSlider && this.img && this.img.next() && this.img.next().next())
		effects.push(new Effect.BlindDown(this.img.next().next(), {afterFinish: this.autoScroller.bind(this) }));

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

}

/*

	Load linked content in gallery display.

*/
PopUpGallery.prototype.loadImage = function() {

	//Get file url
	var file = new String(this.galleries[this.link.rel][this.currentIndex]);
	
	//Get content type
	this.youtube = (file.indexOf('youtube.com/watch?v=') != -1);
	this.swf = (file.substr(-3).toLowerCase() == 'swf');
	this.giframe = (this.link.className.indexOf('iframe') != -1);

	//IFrame
	if(this.giframe) {
		
		this.img = document.createElement('div');
		var iframe = document.createElement('iframe');
	
		iframe.src = file;
			
		this.img.width = this.iFrameWidth;
		this.img.height = this.iFrameHeight;
		iframe.width = this.img.width;
		iframe.height = this.img.height;
		iframe.frameBorder = 'no';
		iframe.scrolling = 'no';
		this.img.style.overflow = 'hidden';
		this.img.appendChild(iframe)
		
		pad = this.mainPadding*2;
		totW = this.img.width + pad;
		totH = this.img.height + pad;
		this.container.appendChild(this.img);
		
		Element.extend(this.img);
		this.animateImage(this.center(totW, 'x'), this.center(totH, 'y'), totW, totH, true, this.insertImage.bind(this));
	
	//Flash content	
	} else if(this.youtube || this.swf) {
	
		this.img = document.createElement('div');
		var embed = document.createElement('embed');

		//Load full-sized youtube video
		//or regular swf file
		if(this.youtube) {
			videoID = file.match(/v=([^&]*)/);
			videoID = videoID[1];
	
			embed.src = 'http://www.youtube.com/v/'+videoID+'&hl=en&fs=1';
			
			this.img.width = this.YouTubeWidth;
			this.img.height = this.YouTubeHeight;
		} else {
			embed.src = file;
			
			this.img.width = this.SWFWidth;
			this.img.height = this.SWFHeight;
		}		
		
		this.img.style.overflow = 'hidden';
		
		embed.type = 'application/x-shockwave-flash';
		embed.width = this.img.width;
		embed.height = this.img.height;
		embed.allowfullscreen = true;
		embed.wmode = 'transparent';
		this.img.appendChild(embed)
		
		pad = this.mainPadding*2;
		totW = this.img.width + pad;
		totH = this.img.height + pad;
		this.container.appendChild(this.img);
		
		Element.extend(this.img);
		this.animateImage(this.center(totW, 'x'), this.center(totH, 'y'), totW, totH, true, this.insertImage.bind(this));
	
	//Image content	
	} else {	
	
		//Load full-sized image
		this.img = new Image();
		Element.extend(this.img);
		this.img.observe('load', this.onLoadImage.bind(this))
		this.img.src = file;
		
	}
	
	this.img.style.padding = this.mainPadding+'px';
	this.img.className = 'galleryImage';
	
}

/*
	
	Triggered once image has already loaded
	in main gallery display. Only used for images.

*/
PopUpGallery.prototype.onLoadImage = function(evt) {

	//Check if image fits in window
	pad = this.mainPadding*2;

	/*docHeight = document.documentElement.offsetHeight - 400;
	docWidth = document.documentElement.offsetWidth - 100;
	*/
	
	docHeight = browserWindowSize().height - 200;
	docWidth = browserWindowSize().width - 100;
	
	//Take carousel's height into account if enabled	
	if(this.showSlider)
		docHeight -= (this.thumbHeight + this.sliderPadding + this.sliderExtra);

	if(docHeight < 0)
		docHeight = 100

	if(docWidth < 0)
		docWidth = 100

	imgHeight = this.img.height + pad;
	imgWidth = this.img.width + pad;

	if(imgHeight > docHeight || imgWidth > docWidth) {

		if(imgHeight > imgWidth) {

			if(imgHeight > docHeight) {								
				this.img.height = docHeight;
				this.img.width = this.img.height * imgWidth / imgHeight;
			} else {	
				this.img.width = docWidth;
				this.img.height = this.img.width * imgHeight / imgWidth;					
			}
		
		} else {
		
			if(imgWidth > docWidth) {
				this.img.width = docWidth;
				this.img.height = this.img.width * imgHeight / imgWidth;
			} else {
				this.img.height = docHeight;
				this.img.width = this.img.height * imgWidth / imgHeight;
			}
			
		}
		
		this.imageResized = true;
		
	}

	//Relocate container
	this.animateImage(this.center(this.img.width+pad, 'x'), this.center(this.img.height+pad, 'y'), (this.img.width+pad), (this.img.height+pad), true, this.insertImage.bind(this));

}

/*

	Once the content's been loaded,	insert it 
	in the display window together with content
	information and navigation elements.

*/
PopUpGallery.prototype.insertImage = function() {

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

	//Image data
	data = this.link.title.split(' :: ');
	imgTitle = data[0];
	imgDesc = data[1];
	
	info = document.createElement('div');
	info.className = 'infoBox';
	
	//Add link if image has been resized
	if(this.imageResized) {
		big = document.createElement('a');
		big.className = 'openBigImage';
		big.href = this.link.href;
		big.title = this.ampliarTexto;
		info.appendChild(big);
	}
	
	//Setup info box
	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);
	this.container.appendChild(info);
	
	infoSize = Element.extend(info).getDimensions();
	info.style.display = 'none';
	
	contW = parseInt(this.container.getStyle('width').replace('px', ''))
	contH = parseInt(this.container.getStyle('height').replace('px', ''))
	
	//Show image data
	effects.push(new Effect.BlindDown(info, {sync: true}));
	
	new Effect.Parallel(effects, {duration: 0.5, afterFinish: this.insertImageBlock.bind(this)});
	
	if(this.imageResized) {
		big.style.height = info.getHeight();
		this.imageResized = false;
	}
	
	if(this.showSlider && this.link.rel != 'noGallery') {
		sliderHeight = this.gallerySlider();
		infoSize.height += sliderHeight;
	}
	
	//Relocate container
	this.animateImage(this.center(contW, 'x'), this.center(contH+infoSize.height, 'y'), contW, (contH+infoSize.height), false, this.insertGalleryNavigation.bind(this));

}

/*

	Inserts a transparent GIF image
	on top of the main display to avoid quick
	image saving. Only used with images.

*/
PopUpGallery.prototype.insertImageBlock = function() {

	if(!this.giframe && !this.swf && !this.youtube) {
		
		//Inserts transparent gif on top of image
		var imgBlock = document.createElement('img')
		imgBlock.src = this.imageDir + 'block.gif';
		imgBlock.width = this.img.offsetWidth;
		imgBlock.height = this.img.offsetHeight;
		imgBlock.style.position = 'absolute';
		
		Element.extend(imgBlock);
		imgBlock.observe('click', this.removeImage.bind(this))
		
		this.img.parentNode.insertBefore(imgBlock, this.img);
	}
	
}

/*

	Checks before inserting navigation elements.

*/
PopUpGallery.prototype.insertGalleryNavigation = function() {
	if(!this.showSlider || this.link.rel == 'noGallery')
		this.galleryNavigation()		
}

/*

	Inserts next, previous and close buttons

*/
PopUpGallery.prototype.galleryNavigation = function() {

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

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

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

	//Close button
	var close = document.createElement('img');
	close.style.cursor = 'pointer';

	Element.extend(close);	
	close.observe('load', this.onCloseButtonLoad.bind(this))
	
	close.src = this.imageDir + 'close.png';

}

/*

	Triggered when the close button finished loading.
	This function positions the button an

*/
PopUpGallery.prototype.onCloseButtonLoad = function(evt) {
		
	if(this.showSlider && this.img.next().next())
		sliderHeight = this.img.next().next().offsetHeight;
	else
		sliderHeight = 0;

	var button = evt.element();

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

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

	//Button must be hidden, not with display:none
	//Otherwise IE won't fix the PNG alpha channel
	if(self.correctPNG)
		button = Element.extend(correctPNG(button))
	
	button.observe('click', this.removeImage.bind(this))
	
	div.style.display = 'none';
	div.style.visibility = 'visible';
	
	new Effect.Appear(div, {duration: 0.5});		

}

/*
	
	Attaches 'previous' and 'next' buttons
	
*/
PopUpGallery.prototype.floatingButton = function(which, index) {

	//Create navigation button		
	var button = new Image();
	Element.extend(button);
	button.style.cursor = 'pointer';
	
	if(which > 0) {
		imgSrc = 'next.png';
		button.observe('load', this.onFloatingButtonLoadNext.bind(this))
	} else {
		imgSrc = 'prev.png';
		button.observe('load', this.onFloatingButtonLoadPrev.bind(this))
	}
		
	button.src = this.imageDir + imgSrc;

}

/*
	
	Triggered when navigation buttons are clicked
	
*/
PopUpGallery.prototype.onFloatingButtonNextClick = function() {
	this.currentIndex++;
	this.loadGalleryNext();
}

PopUpGallery.prototype.onFloatingButtonPrevClick = function() {
	this.currentIndex--;
	this.loadGalleryNext();
}

/*

	Triggered when navigation buttons are loaded

*/
PopUpGallery.prototype.onFloatingButtonLoadNext = function(evt) {
	this.onFloatingButtonLoad(1, evt)
}

PopUpGallery.prototype.onFloatingButtonLoadPrev = function(evt) {
	this.onFloatingButtonLoad(-1, evt)
}

/*

	Position previous and next buttons and assign actions

*/
PopUpGallery.prototype.onFloatingButtonLoad = function(which, evt) {
	button = evt.element();
	size = this.img.getDimensions();
		
	if(this.showSlider)
		sliderHeight = this.img.next().next().offsetHeight;
	else
		sliderHeight = 0;
	
	var div = document.createElement('div');
	div.style.position = 'absolute';
	div.style.zIndex = 10;
	div.style.visiblity = 'hidden';
	div.className = 'galleryNavigation';
	
	var div2 = document.createElement('div');
	div2.style.position = 'relative';
	div2.style.top = -parseInt((size.height/2) + (button.height/2) + this.img.next().getHeight() + sliderHeight) + 'px';

	div2.appendChild(button);
	div.appendChild(div2);
	this.container.appendChild(div);
	
	//Button must be hidden, not with display:none
	//Otherwise IE won't fix the PNG alpha channel
	if(self.correctPNG)
		button = correctPNG(button)

	Element.extend(button);

	if(which > 0) {
		div2.style.left = parseInt(size.width - (button.width/2)) + 'px';
		button.observe('click', this.onFloatingButtonNextClick.bind(this))
	} else {
		div2.style.left = -parseInt(button.width/2) + 'px';
		button.observe('click', this.onFloatingButtonPrevClick.bind(this))
	}
		
	div.style.display = 'none';
	div.style.visiblity = 'visible';
	
	new Effect.Appear(div, {duration: 0.5});
}

/*

	Create carousel

*/
PopUpGallery.prototype.gallerySlider = function() {
	
	//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 = this.navBg;
	slider.appendChild(contLeft);
	
	contRight = contLeft.cloneNode(true);
	contRight.className = 'sliderNavRight';
	slider.appendChild(contRight);

	Element.extend(contRight);
	Element.extend(contLeft);
	
	contLeft.observe('mousedown', this.slideLeft.bind(this));
	contLeft.observe('mouseout', this.clearSliderInterval.bind(this));
	contLeft.observe('mouseup', this.clearSliderInterval.bind(this));
	
	contRight.observe('mousedown', this.slideRight.bind(this));
	contRight.observe('mouseout', this.clearSliderInterval.bind(this));
	contRight.observe('mouseup', this.clearSliderInterval.bind(this));
		
	contWidth = 0;
	
	//Attach images
	for(i = 0; i < this.galleries[this.link.rel].length; i++) {
		
		im = new Image();
		im.id = 'gm'+i;
		im.style.cursor = 'pointer';
		im.style.margin = this.sliderPadding+'px';
		im.style.marginLeft = 0;
		im.src = this.galleries[this.link.rel][i].down().src;
		
		im.width = this.thumbWidth;
		im.height = this.thumbHeight;
		
		if(i == this.currentIndex)
			im.className = 'selectedImage';
		
		Element.extend(im);
		
		im.observe('click', this.onGallerySliderClick.bind(this));
		
		im.onmouseover = function() {
			this.addClassName('imgHover');
		}
		
		im.onmouseout = function() {
			this.removeClassName('imgHover');
		}
		
		contWidth += this.thumbWidth + this.sliderPadding + this.sliderExtra;
				
		cont2.appendChild(im);
		
	}

	//Remove margin from last image
	im.style.marginRight = 0;
	cont2.style.width = (contWidth - this.sliderPadding) + 'px';

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

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

	contRight.style.display = 'none';
	contLeft.style.display = 'none';
	
	sliderHeight = slider.offsetHeight;

	//Slider is shown in animateImage()	
	slider.style.display = 'none';	
	
	//Adjust active areas height
	Element.extend(slider);
	contLeft.style.height = slider.getHeight()+'px';
	contRight.style.height = slider.getHeight()+'px';
	
	//Fix IE7 bg bug
	cont.style.backgroundColor = slider.getStyle('background-color');

	return sliderHeight;
}

/*

	Carousel's buttons actions

*/
PopUpGallery.prototype.slideLeft = function(evt) {
	var el = evt.element();
	var self = this;
	this.slideInterval = window.setInterval(function() { self.scrollSlider(-1) }, 20);
	el.style.backgroundColor = this.navHoverBg;
}

PopUpGallery.prototype.slideRight = function(evt) {
	var el = evt.element();
	var self = this;
	this.slideInterval = window.setInterval(function() { self.scrollSlider(1) }, 20);
	el.style.backgroundColor = this.navHoverBg;
}

PopUpGallery.prototype.clearSliderInterval = function(evt) {
	var el = evt.element();
	
	clearInterval(this.slideInterval);
	el.style.backgroundColor = this.navBg;
}

PopUpGallery.prototype.onGallerySliderClick = function(evt) {
	var el = evt.element();
	
	this.currentIndex = el.id.substr(2);
	this.loadGalleryNext();
}

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

PopUpGallery.prototype.autoScroller = function() {

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

	//Scroll
	this.img.next().next().down().next().next().scrollLeft = (this.currentIndex * (this.thumbWidth + this.sliderPadding + this.sliderExtra));

	this.galleryNavigation();
}

/*

	Removes all navigation-related controls

*/
PopUpGallery.prototype.removeNavigation = function() {
	
	var navs = $$('.galleryNavigation');
	for(i = 0; i < navs.length; i++)
		navs[i].remove();
		
	if(this.showSlider && this.link.rel != 'noGallery')
		this.img.next().next().remove();
}

/*

	Loads next image in display

*/
PopUpGallery.prototype.loadGalleryNext = function() {
	
	this.removeNavigation();
	
	var effects = new Array();
	effects.push(new Effect.Fade(this.img.next(), {sync: true}));
	effects.push(new Effect.Fade(this.img, {from: 1, to: 0, sync: true}));
	
	new Effect.Parallel(effects, {duration: 0.2, afterFinish: this.removeBetweenImages.bind(this) });

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

/*

	Remove elements between each image
	in the gallery

*/
PopUpGallery.prototype.removeBetweenImages = function() {
	if(!this.youtube && !this.swf && !this.giframe)
		this.img.previous().remove();
		
	this.img.next().remove();
	this.img.remove();
	
	this.loadImage();
}

/*
	
	Hide all elements

*/
PopUpGallery.prototype.removeImage = function() {
	
	pos = this.link.cumulativeOffset();
	size = this.link.getDimensions();

	this.removeNavigation();
	
	//Remove info block
	this.img.next().remove();
	
	//Remove background
	this.block.remove();
	
	//Reset height
	this.container.style.height = 'auto';

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

	new Effect.Parallel(effects, {duration: 0.5, afterFinish: this.removeContainer.bind(this)});
	
}

/*

	Remove all elements

*/
PopUpGallery.prototype.removeContainer = function() {
	this.container.remove()
	
	this.block = null;
	this.img = null;
	this.container = null;
	this.link = null;
	this.currentIndex = null;
	
	Event.stopObserving(document, 'keypress');
}

/*

	Creates transparent layer in the background

*/
PopUpGallery.prototype.createBlockLayer = function() {

	var blk = document.createElement('div');
	blk.style.width = '100%';
	blk.style.height = '100%';
	blk.style.top = this.getYScroll()+'px';
	blk.style.left = 0;
	blk.style.position = 'absolute';
	blk.style.background = '#000';
	blk.style.zIndex = 99999;
	
	Element.extend(blk);
	blk.setOpacity(0.7);
	document.body.appendChild(blk);
	
	this.block = blk;
	
}

/*

	Get scroll offset

*/
PopUpGallery.prototype.getXScroll = function() {
	return (window.pageXOffset || document.documentElement.scrollLeft || 0);
}

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

/*

	Get coordinates to center element

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

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

/*
	
	Cross browser window size
	
*/
function browserWindowSize() {
	var browserWinWidth = 0, browserWinHeight = 0;
	
	if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		browserWinWidth = window.innerWidth;
		browserWinHeight = window.innerHeight;
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		//IE 6+ in 'standards compliant mode'
		browserWinWidth = document.documentElement.clientWidth;
		browserWinHeight = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		//IE 4 compatible
		browserWinWidth = document.body.clientWidth;
		browserWinHeight = document.body.clientHeight;
	}

	return { width: browserWinWidth, height: browserWinHeight}

}