/*
	Tobias Wild
*/

var Album = Class.create({
	initialize: function( query, mode, pages, options ) {
		this.pages = pages;
		this.query = query;
		this.mode = mode;
		this.pagesLoaded = 1;
		this.fotos = new Array();
		this.unloadedFotos = new Array();
		this.fotosInViewport = new Array();
		this.arrangeVisible = false;
		this.fotosLoaded = 0;
		this.maxBarWidth = 439;
		this.photosPerPage = 49;
		this.blockAjax = false;
		this.fotoDensity = 0.00009;
		this.opt = Object.extend({
			positioner: 'text'
		}, options || {});
	},
	add: function(foto) {
		this.fotos.push( foto );
		this.unloadedFotos.push( foto );
		foto.album = this;			
		//foto.updateLoader = this.updateLoader.bind(this);
	},
	
	getHighestZIndex: function() {
		var max = 0;
		var fotos = this.getFotosInViewport();
		fotos.each( function( foto ) {
			if ( foto.z > max ) max = foto.z;
		});
		return Math.max( fotos.length, max );
	},
	
	updateLoader: function() {
		this.fotosLoaded++;
		$('loader').show();
		var barWidth = Math.round( (this.fotosLoaded / this.fotos.length) * this.maxBarWidth );
		$('loader_bar').style.width = barWidth + "px";
		if ( this.fotosLoaded >= this.fotos.length ) {
			$('loader').hide();	
		}
	},	
	
	setInitialFotoSize: function() {
		
		
	},
	
	show: function() {
		var menu = new Menu("arrange", { itemStartPos: 15 });
		menu.add( new MenuItem('grid', {
			title: "Arrange photos in a grid",
			keyCode: 49,
			onClick: this.onMenuItemClick.bind(this)
		}));
		menu.add( new MenuItem('circle', {
			title: "Arrange photos in a circle",
			keyCode: 50,
			onClick: this.onMenuItemClick.bind(this)
		}));
		menu.add( new MenuItem('random', {
			title: "Arrange photos in random positions",
			keyCode: 51,
			onClick: this.onMenuItemClick.bind(this)
		}));
		menu.add( new MenuItem('text', {
			title: "Arrange photos as text",
			keyCode: 52,
			onClick: this.onMenuItemClick.bind(this)
		}));
		menu.add( new MenuItem('sine', {
			title: "Arrange photos in a sine curve",
			keyCode: 53,
			onClick: this.onMenuItemClick.bind(this)
		}));
		menu.add( new MenuItem('doublesine', {
			title: "Arrange photos in two mirrored sine curves",
			keyCode: 54,
			onClick: this.onMenuItemClick.bind(this)
		}));
		menu.show();
		menu.activateItem( this.opt.positioner );
		
		this.resizeFotoarea();
		
		new FoldOutElement( "search" );
		
		this.activatePositioner();
		
		this.loadFotos();
		
		mouseWheelListener.observe( "fotoarea", this.onMouseWheelSpin.bind(this) );
		
		if ( $('splash') ) {
			Event.observe( document, "click", function() {
				$('splash').hide();
			});
		}
		
		Event.observe( window, "scroll", function() {
			this.loadFotos();
		}.bind(this));

		new MouseDownScroller();
		
		Droppables.add( 'puzzleimg', {
			hoverclass: 'hover',
			onDrop: function( drag ) {
				showOverlay();
				new Ajax.Updater( document.body, "/puzzle.php", {
					insertion: 'bottom',
					method: 'get',
					parameters: {
						id: drag.id
					},
					evalScripts: true
				});
			}
		} );
	},
	
	onMenuItemClick: function(item) {
		this.opt.positioner = item.name;
		this.resizeFotoarea();
		this.activatePositioner();
		this.loadFotos();
	},
	
	activatePositioner: function(options) {
		switch (this.opt.positioner) {
			case 'random':
				var p = new Positioner( new RandomPositionerForm(), Object.extend({ scaleY: 90 }, options || {}));
			break;
			case 'circle':
				var p = new Positioner( new CirclePositionerForm(), Object.extend({ width: 'viewport' }, options || {}));
			break;
			case 'text':
				var p = new TextPositioner( this.query, Object.extend({ widthPerLetter: 400, scaleY: 70 }, options || {}));
			break;
			case 'grid':
				var p = new Positioner( new GridPositionerForm(), Object.extend({ width: 'viewport' }, options || {}));
			break;
			case 'sine':
				var p = new Positioner( new SinePositionerForm(), Object.extend({ width: 'viewport' }, options || {}));
			break;
			case 'doublesine':
				var p = new Positioner( new DoubleSinePositionerForm(), Object.extend({ width: 'viewport' }, options || {}));
			break;			
		}
		p.arrange();
	},
	
	onMouseWheelSpin: function( delta ) {
		var fotos = this.getFotosInViewport();
		fotos.each( function(foto) {
			foto.onMouseWheelSpin( delta );
		});
	},
	
	/*correctFotoStartSize: function( factor ) {
		this.fotoStartSize *= factor;
		this.fotoStartSize = Math.min( this.fotoStartSize, 100 );
	},*/
	
	resizeFotoarea: function() {
		var dims = document.viewport.getDimensions();
		var photosPerPixelCol = this.fotoDensity * dims.height;
		
		var count = arguments[0] || this.fotos.length; 
		var addWidth = Math.round(count / photosPerPixelCol);

		var oldWidth = ( count == this.fotos.length ) ? 0 : $('fotoarea').getWidth();
		
		var areawidth = addWidth + oldWidth;
		var real_areawidth = areawidth;
		
		// prevent small scrollareas
		if ( areawidth > dims.width && areawidth < 1.8 * dims.width ) real_areawidth = 1.8 * dims.width;
		
		real_areawidth = Math.max( areawidth, dims.width );
		
		// Resize Fotos, if the density is influenced
		/*if ( real_areawidth > areawidth && areawidth != 0) {
			this.correctFotoStartSize( Math.sqrt(real_areawidth / areawidth) );
		}*/
		
		if (real_areawidth > dims.width) {
			$('fotoarea').addClassName( 'grab' );
		}
		
		$('fotoarea').setStyle({
			width: real_areawidth + "px"
		});		
	},
	
	loadFotos: function() {
		if ( this.pagesLoaded < this.pages && !this.blockAjax ) {
			var scrollPos = document.viewport.getScrollOffsets();
			var viewportWidth = document.viewport.getWidth();
			var docWidth = $('fotoarea').getWidth();
			var left = docWidth - 1.5 * viewportWidth;
			
			if (  scrollPos.left > left ) {
				this.loadNewPage();
			}
		}
		this.fotosInViewport.clear();
		var fotos = this.getUnloadedFotosInViewport();
		fotos.each( function( foto ) { foto.show() } );
	},
	
	loadNewPage: function() {
		this.pagesLoaded++; 
		this.blockAjax = true;
		new Ajax.Updater( document.body, "/index.php", {
			insertion: 'bottom',
			method: 'get',
			parameters: {
				ajax: 'true',
				q: this.query,
				mode: this.mode,
				page: this.pagesLoaded
			},
			evalScripts: true
		});
	},
	
	onLoadSuccess: function(count) {
		var width = $('fotoarea').getWidth();
		this.resizeFotoarea(count);
		this.activatePositioner({ arrangeOnlyNotPositioned: true, xOffset: width });
		this.blockAjax = false;
	},
	
	getUnloadedFotosInViewport: function() {
		return this.unloadedFotos.findAll( function(foto) {
			return (foto.isInViewport());
		});
	},
	
	getFotosInViewport: function() {
		if ( this.fotosInViewport.length == 0 ) {
			this.fotosInViewport = this.fotos.findAll( function(foto) {
				return foto.isInViewport();
			});
		}
		return this.fotosInViewport;
	},
	
	startFotoObserving: function() {
		var fotos = this.getFotosInViewport();
		fotos.each( function( foto ) {
			foto.startObserving();
		});
	},
	stopFotoObserving: function() {
		var fotos = this.getFotosInViewport();
		fotos.each( function( foto ) {
			foto.stopObserving();
		});
	}	
});

var Foto = Class.create({
	initialize: function( url, options ) {
		this.url = url;
		this.z = 0;
		this.options = {
			id: null,
			title: 'Foto',
			scaleOnMouseOver: true,
			link: '',
			startSize: { min: 30, max: 50 } // in %
		};
		this.updateLoader = function() {}
		this.dragged = false;
		this.willBeLoaded = false;
		this.loaded = false;
		this.effect = null;
		this.observing = false;
		this.mouseOverListener = this.onMouseOver.bindAsEventListener(this);
		this.mouseOutListener = this.onMouseOut.bindAsEventListener(this);
		Object.extend(this.options,options || {});
		this.elm = Builder.node( "a", { href: this.options.urlBig, title: this.options.title, rel: "lightbox[flickr]" },
			[
				Builder.node( "img",
					{
						src: "/images/ajax-loader.gif",
						width: "16",
						border: 0,
						"class": "foto moveable notpositioned",
						alt: this.options.title
					})
			]
		);
		
		this.elm.writeAttribute( "caption", " - " + "<a target='_blank' href='"+this.options.link+"'>view on flickr</a>");
		this.image = this.elm.firstDescendant();
		this.image.style.position = "absolute";

		if (this.options.id != null) this.image.id = this.options.id; 
		$('fotoarea').appendChild( this.elm );
	},
	
	loadImage: function() {
		this.album.unloadedFotos = this.album.unloadedFotos.without( this );
		this.willBeLoaded = true;
		this.imageSrc = new Image();
		this.imageSrc.onload = this.onImageLoad.bind(this);
		this.imageSrc.src = this.url;
	},
	
	isInViewport: function() {
		return isElementInViewport( this.image );
	},
	
	getStartSize: function() {
		var d = this.options.startSize.max - this.options.startSize.min + 1;
		return Math.floor( Math.random() * d ) + this.options.startSize.min;
	},

	onImageLoad: function() {
		if (this.loaded) return;
		this.loaded = true;
		this.image.src = this.imageSrc.src;
		
		this.updateLoader();
		this.originalWidth = this.imageSrc.width;
		this.originalHeight = this.imageSrc.height;
		this.originalFormat = this.originalWidth / this.originalHeight;
		this.smallWidth = Math.round( parseInt(this.originalWidth) * this.getStartSize() / 100 );

		this.setSmallSize();
		
		this.startObserving();
		
		mouseWheelListener.observe( this.image, this.onMouseWheelSpin.bind(this) );
		
		Event.observe( this.image, 'mousedown', function(ev) {
			this.stopObserving();
			this.album.stopFotoObserving();
			if (this.effect!=null) this.effect.cancel();
			//this.setOriginalSize();
		}.bind(this));
				
		this.drag = new Draggable( this.image, {
			starteffect: function() {},
			endeffect: function() {},
			zindex: this.z,
			onEnd: function() {
				this.album.startFotoObserving();
				this.dragged = true;
			}.bind(this)
		} );
		Event.observe( this.elm, 'click', function(ev) {
			if ( this.dragged ) {
				ev.stop();
			} else {
				this.album.startFotoObserving();
			}
			this.dragged = false;
		}.bind(this));		
	},
	
	onMouseWheelSpin: function( delta ) {
			if ( !this.loaded ) return;
			if (this.effect!=null) this.effect.cancel(); 
			this.scale( delta*10 );
	},	
	
	scale: function( percent ) {
		var scale = 1 + percent / 100;
		var width = Math.round(this.image.getWidth() * scale);
		
		if ( width > this.originalWidth ) width = this.originalWidth;
		this.scaleTo( width );
		
		this.smallWidth = width;
		
	},
	
	scaleTo: function( width ) {
		var dim = this.image.getDimensions();
	    var origLeft = parseFloat(this.image.getStyle('left') || '0');
	    var origTop  = parseFloat(this.image.getStyle('top')  || '0');
	    
		var height = Math.round(width / this.originalFormat);		
		
		var topd  = (height - dim.height)/2;
	    var leftd = (width  - dim.width)/2;
		
	    var top = origTop - topd;
	    var left = origLeft - leftd;
		
	    this.image.setStyle({
			width: width + "px",
			height: height + "px",
			top: top + "px",
			left: left + "px"
		});		
	},
	
	setOriginalSize: function() {
		this.scaleTo( this.originalWidth );
	},
	
	setSmallSize: function() {
		this.scaleTo( this.smallWidth );	
	},
	
	setRandomPosition: function() {
		var dim = $('fotoarea').getDimensions();
		var clientWidth = dim.width;
		var clientHeight = dim.height;
		var x = Math.round( Math.random() * ( clientWidth - parseInt(this.smallWidth)) );
		var y = Math.round( Math.random() * ( clientHeight - parseInt(this.getHeight(this.smallWidth))) );
		this.image.style.left = x + "px";
		this.image.style.top = y + "px";
	},
	
	getHeight: function(width) {
		return ( width / this.originalFormat );
	},
	
	scaleToBigSize: function() {
		if ( this.effect!=null ) this.effect.cancel();
		var growFactor = this.originalWidth / this.image.getWidth() * 100;
		this.effect = new Effect.Scale( this.image, growFactor, {
			scaleFromCenter: true,
			afterFinish: function() {
					this.setOriginalSize();
				}.bind(this)
		} );		
	},
	
	scaleToSmallSize: function() {
		if ( this.effect!=null ) this.effect.cancel();
		var shrinkFactor = this.smallWidth / this.image.getWidth() * 100;
		this.effect = new Effect.Scale( this.image, shrinkFactor, {
			scaleFromCenter: true,
			afterFinish: function() {
					this.setSmallSize();
				}.bind(this)
		
		} );
	},
	
	onMouseOver: function() {
			this.z = this.album.getHighestZIndex() + 1;
			this.image.style.zIndex = this.z;
			if ( this.options.scaleOnMouseOver ) {
				this.scaleToBigSize();
			}
	},
	
	onMouseOut: function() {
			if (  this.options.scaleOnMouseOver ) {
				this.scaleToSmallSize();
			}	
	},
	
	stopObserving: function() {
		if (this.observing) {
			Event.stopObserving( this.image, 'mouseover', this.mouseOverListener);
			Event.stopObserving( this.image, 'mouseout', this.mouseOutListener);
			this.observing = false;
		}
	},
	
	startObserving: function() {
		if (!this.observing) {
			Event.observe( this.image, 'mouseover', this.mouseOverListener);
			Event.observe( this.image, 'mouseout', this.mouseOutListener);
			this.observing = true;
		}
	},
	
	show: function() {		
		this.loadImage();
	}
});

var Menu = Class.create({
	initialize: function( id ) {
		this.element = new Element('div', { id: id });
		this.element.setStyle({
			bottom: "5px",
			position: "fixed"
		});
		this.items = new Array();
		this.activeItem = null;
		this.opt = Object.extend({
			itemGap: 5,
			itemStartPos: 20,
			foldOffset: 65,
			itemStartSide: 'right'
		},arguments[1] || { });
	},
	add: function(item) {
		item.menu = this;
		this.items.push(item);
		this.element.appendChild( item.element );
	},
	setActive: function(item) {
		if (this.activeItem!=null) this.activeItem.deactivate();
		this.switchPosition( item, this.activeItem || this.items.first() );
		this.activeItem = item;
	},
	
	activateItem: function(name) {
		var item = this.items.find( function(i) {
			return i.name == name; 
		});
		if (item!=null) item.activate();
	},
	
	switchPosition: function( item1, item2 ) {
		var item1_pos = item1.getPosition();
		var item1_left = item1_pos.left;
		var item1_top = item1_pos.top;
		var item2_pos = item2.getPosition();
		
		item1.setPosition( item2_pos.left, item2_pos.top );
		item2.setPosition( item1_left, item1_top );
	},
	
	show: function() {
		document.body.appendChild( this.element );
		
		var dims = this.element.getDimensions();
		var width = dims.width;
		var height = dims.height;
		var itemsSpace = 0;
		
		this.items.each( function(item, index) {
			var dims = item.element.getDimensions();
			var item_width = dims.width;
			var item_height = dims.height;
			
			var y = (height - item_height) / 2;
			var itemSpace = item_width + this.opt.itemGap;
			itemsSpace += itemSpace;
			var x = this.opt.itemStartPos + index * itemSpace;
			if (this.opt.itemStartSide == 'right') {
				x = width - x - item_width;
			}
			item.setPosition( x, y );
		}.bind(this));
		
		if (this.opt.itemStartSide == 'left') {
			itemsSpace *= -1;
		}
		new FoldOutElement( this.element, { dx: itemsSpace - this.opt.foldOffset, pos: 'bottom' } );
	}
});

var MenuItem = Class.create({
	initialize: function( name ) {
		this.element = Builder.node('div', {'class': 'menuItem'},
			[
			 	Builder.node('div', {'class': 'menuItem_fg'})
			]
		);
		this.element.setStyle({
			position: "absolute"
		});
		this.opt = Object.extend({
			title: '',
			keyCode: null,
			onClick: function(ev) {}
		},arguments[1] || { });
		this.name = name;
		this.element.addClassName( name );
		this.element.observe( 'click', this.onClick.bind(this) );
		this.element.observe( 'click', function() { this.opt.onClick(this) }.bind(this) );
		var title = this.getTitle();
		if (title!="") this.element.setAttribute( "title", title );
		
		if (this.opt.keyCode != null) {
			Event.observe( document, 'keydown', this.onKeyDown.bind(this) );
		}
	},
	
	onClick: function() {
		this.activate();
	},
	
	activate: function() {
		this.menu.setActive(this);
		this.element.addClassName( "active" );
	},
	
	deactivate: function() {
		this.element.removeClassName( "active" );
	},
	
	getTitle: function() {
		var c = this.opt.keyCode;
		var keyTitle = ( c!=null && c>=48 && c<=90 ) ?
				"[Key: " + String.fromCharCode(c) + "]" : "";
		var sub = ( this.opt.title!="" && keyTitle!="") ? " - " : "";
		var title = this.opt.title + sub + keyTitle;
		return title;
	},
	
	onKeyDown: function(ev) {
		var code = ev.charCode ? ev.charCode : ev.keyCode;
		if (this.opt.keyCode != null && this.opt.keyCode == code) {
			this.activate();
			this.opt.onClick(this);
		}
	},
	getPosition: function() {
		return {
			left: parseFloat(this.element.getStyle('left') || '0'),
			top: parseFloat(this.element.getStyle('top') || '0')
		}
	},
	setPosition: function(x,y) {
		this.element.setStyle({
			left: x + "px",
			top: y + "px"
		});
	}
});

var FoldOutElement = Class.create({
	initialize: function( element ) {
		this.element = $(element);
		this.effect = null;
		this.originalLeft = parseFloat(this.element.getStyle('left') || '0');
		this.opt = Object.extend({
				dx: this.originalLeft < 0 ? -1 * this.originalLeft : 0,
				dy: 0,
				pos: 'top'
		},arguments[1] || { });
		if ( this.opt.dx != 0 || this.opt.dy != 0 ) {
			this.element.observe( "mouseenter", this.foldOut.bind(this) );
			this.element.observe( "mouseleave", this.foldIn.bind(this) );
		}
	},
	foldOut: function() {
		if ( this.opt.pos == "bottom" && !(this.effect!=null && this.effect.state != "finished") ) {
			this.originalBottom = parseFloat(this.element.getStyle( "bottom" ));
			this.originalTop = this.element.getOffsetParent().getHeight() - this.element.getHeight() - this.originalBottom;
			this.element.setStyle({ bottom: "auto", top: this.originalTop + "px" });
		} else {
			this.originalTop  = parseFloat(this.element.getStyle('top')  || '0');
		}
		if (this.effect!=null) this.effect.cancel();
		var x = this.originalLeft + this.opt.dx;
		var y = this.originalTop + this.opt.dy;
		this.effect = new Effect.Move(this.element, { x: x, y: y, mode: 'absolute', duration: 0.6 });
	},
	foldIn: function() {
		if (this.effect!=null) this.effect.cancel();
		var x = this.originalLeft;
		var y = this.originalTop;
		this.effect = new Effect.Move(this.element, {
			x: x, y: y, mode: 'absolute', duration: 0.6,
			afterFinish: function() {
				if ( this.opt.pos == "bottom" ) {
					this.element.setStyle({ bottom: this.originalBottom + "px", top: "auto" });
				}
			}.bind(this)
		});
	}
});

var MouseWheelListener = Class.create({
	initialize: function() {
		this.observer = new Array();
		if (window.addEventListener)
		    window.addEventListener('DOMMouseScroll', this.onWheelSpin.bind(this), false);
		Event.observe( window, 'mousewheel', this.onWheelSpin.bind(this) );
		Event.observe( document, 'mousewheel', this.onWheelSpin.bind(this) );
	},
	onWheelSpin: function(event) {
	    var delta = 0;
	    if (!event) /* For IE. */
	            event = window.event;
	    if (event.wheelDelta) { /* IE/Opera. */
	            delta = event.wheelDelta/120;
	            //if (window.opera)
	                    //delta = -delta;
	    } else if (event.detail) { /** Mozilla case. */
	            delta = -event.detail/3;
	    }
	    if (Prototype.Browser.WebKit) {
		delta = delta / 3;
	    }
	    if (delta) {
		var ob = this.observer.find( function(ob) {
			return ( ob.element == event.target );
	    	});
	    	if ( ob != null ) {
	    		ob.func(delta);
	    	}
	    }
	    /*if (event.preventDefault)
	            event.preventDefault();
	    event.returnValue = false;*/		
	},
	observe: function( element, func ) {
		element = $(element);
		this.observer.push( { element: element, func: func } );
	}
});
var mouseWheelListener = new MouseWheelListener();

var MouseDownScroller = Class.create({
	initialize: function() {
		this.mouseMoveListener = this.onMouseMove.bindAsEventListener(this);
		this.opt = Object.extend({
			autoScroll: false,
			autoScrollStart: 5
		},arguments[0] || { });	
		
		this.effect = null;
		
		Event.observe( "fotoarea", "mousedown", function(ev) {
			if (!Event.isLeftClick(ev)) return;
			Event.stop(ev); // fix for Webkit
			this.toogleCursor(true);
			if (this.effect!=null) this.effect.cancel();
			this.dx = 0; this.dy = 0;
			this.lastPos = { x: ev.pageX || ev.clientX, y: ev.pageY || ev.clientY };
			Event.stopObserving( "fotoarea", "mousemove" );
			Event.observe( "fotoarea", "mousemove", this.mouseMoveListener );
		}.bind(this));
		
		Event.observe( "fotoarea", "mouseup", function(ev) {
			this.toogleCursor(false);
			Event.stopObserving( "fotoarea", "mousemove" );
			if ( this.opt.autoScroll && Math.abs(this.dx) >= this.opt.autoScrollStart ) {
				this.autoScroll();
			}
		}.bind(this));
	},

	toogleCursor: function(grabbing) {
		var f = $('fotoarea');
		if ( grabbing && f.hasClassName('grab')) {
			f.addClassName('grabbing');
			f.removeClassName('grab');
		} else if (f.hasClassName('grabbing')) {
			f.addClassName('grab');
			f.removeClassName('grabbing');		}
	},

	onMouseMove: function(ev) {
		var pos = { x: ev.pageX || ev.clientX, y: ev.pageY || ev.clientY };
		this.dx = this.lastPos.x - pos.x;
		this.dy = this.lastPos.y - pos.y;
		window.scrollBy( this.dx, 0 );
		
		//this.lastPos = { x: pos.x + this.dx, y: pos.y + this.dy };
	},
	autoScroll: function() {		
		var pos = document.viewport.getScrollOffsets();
		var start = pos.left;
		
		if ( this.dx > 0 ) {
			var docSize = getDocumentSize();
			var windowSize = document.viewport.getDimensions();
			var end = docSize.width - windowSize.width;
		} else {
			var end = 0;
		}
		
		var length = Math.abs( end - start );
		var speed = Math.min( Math.abs(this.dx), 100 );
		var duration = length * 0.1 / speed;
		
		/*this.scrollLength = Math.round(length / 2);
		this.interval = window.setInterval( this.scrollLoop.bind(this), 50 );*/
		
		/*this.effect = new Effect.Tween(null, start, end, { duration: duration }, function(p){
			window.scrollBy(10,0);
		});*/
	},
	scrollLoop: function() {
		window.scrollBy(20,0);
		this.scrollLength--;
		if ( this.scrollLength <= 0 ) window.clearInterval( this.interval );
	}
});

function showOverlay() {
	var overlay = new Element( "div", { id: "overlay_bg" });
	var content = new Element( "div", { id: "overlay_content" });
	var closeBtn = new Element( "div", { id: "closeButton" } );
	var loader = new Element( "img", { src: "/images/overlay_loader.gif" });
	//var size = getDocumentSize();
	overlay.setStyle({
		opacity: 0.8,
		width: "100%",
		height: "100%"
	});
	loader.setStyle({
		position: "absolute",
		top: "50%",
		left: "50%",
		marginLeft: "-15px",
		marginTop: "-15px"
	});
	content.appendChild( closeBtn );
	content.appendChild( loader );
	document.body.appendChild(overlay);
	document.body.appendChild(content);
	Event.observe( 'closeButton', "click", function() {
		$('overlay_content').remove();
		$('overlay_bg').remove();
	});
}

function getDocumentSize() {
    var D = document;
    var width = Math.max(
        Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
        Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
        Math.max(D.body.clientWidth, D.documentElement.clientWidth)
    );
    var height = Math.max(
            Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
            Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
            Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
    return { width: width, height: height };
}

Event.observe(window, 'load', function(ev) {
	album.show();
});