/**
 * Create a new instance of Gallery
 * 
 * @classDescription 				This class creates a new image gallery
 * @param {String, Object} parent	The id or a reference to the object in which the images are kept
 * @return {ndGallery}	            a new ndGallery object
 * @constructor
 */
ndGallery = new Class({
	parent: null,
	title: '',
	images: [],
	current: 0,
	fullscreen: false,
	isplaying: false,
	interval: null,
    autoplay: false,

	initialize: function(parent) {
		if (typeof(parent) == 'string') parent = $(parent);
		this.parent = parent;
		this.parent.getElements('img').each(function(el) {
			this.images.push(el.src);
		}, this);
		this.title = this.parent.title;
		this.parent.set('title', '');
        if (this.parent.hasClass('autoplay')) this.autoplay = true;
		this.clear();
	},

/**
 * Empties the parent object
 * 
 * @alias clear
 * @alias ndGallery.clear
 */
	clear: function() {
		this.parent.set('text', '');
		this.parent.removeClass('ndGallery');
		this.pause();
		this.current = 0;
	},

	/**
	 * Pause the slideshow
	 */
	pause: function() {	
		if (!this.isplaying) return;
		this.object_play.fireEvent('click', {});
	},

	/**
	 * Start the slideshow
	 */
	play: function() {
		if (this.isplaying) return;
		this.object_play.fireEvent('click', {});
	},

	/**
	 * Scroll to the previous page of images
	 */
	prev_page: function() {
		this.object_prevp.fireEvent('click', {});
	},
	
	/**
	 * Select the previous image in the list
	 */
	prev: function() {
		this.object_prev.fireEvent('click', {});
	},
	
	/**
	 * Selects the next image in the list
	 */
	next: function() {
		this.object_next.fireEvent('click', {});		
	},
	
	/**
	 * Scrolls to the next page of images
	 */
	next_page: function() {
		this.object_nextp.fireEvent('click', {});				
	},
	
	/**
	 * Transforms the parent (which contains all the images) into a the gallery
	 */
	render: function() {
		this.clear();
		loadimages = [];
		this.parent.addClass('ndGallery');
		size = this.parent.getSize();
		this.parent.setStyles({
			lineHeight: size.y - 40,
			textAlign: 'center'
		});
		this.images.each(function(src) {
			this.push(src + '?w=24&h=24&min=1');
			this.push(src + '?w=71&h=51&min=1');
			this.push(src + '?w=' + size.x + '&h=' + (size.y - 40) + '&min=1');
		}, loadimages);
		this.loader = new ndImageLoader(loadimages, function(progress) {
			this.parent.set('text', 'Bezig met laden... %p%'.replace('%p', progress));
			if (progress == 100) {
				this.parent.innerHTML = '';
				this.parent.setStyle('line-height', '');
				this.object_image = new Element('img', {
					width: size.x,
					height: size.y - 40,
					src: '/albums/code/blank.png'
				});
				this.object_image.inject(this.parent);
				this.object_toolbar = new Element('div', {
					'class': 'ndToolbar'
				});
				this.object_toolbar.inject(this.parent);
				this.object_left = new Element('div', {
					'class': 'ndLeftControls'
				});
				this.object_right = new Element('div', {
					'class': 'ndRightControls'
				});
				this.object_thumbs = new Element('div', {
					'class': 'ndThumbs'
				});
				this.object_right.inject(this.object_toolbar);		
				this.object_left.inject(this.object_toolbar);		
				this.object_play = new Element('a', {
					alt: 'Play',
					title: 'Play',
					href: 'javascript:void(0)'
				});
				this.object_play.innerHTML = '<img src="/albums/code/play.png" alt="">';
				this.object_play.addEvent('click', function(e) {
					if (!e.target) {
                        e.target = this.parent.getElements('.ndToolbar .ndLeftControls a img')[0];
                        clicked = false;
                    } else clicked = true;
					if (e.target) e.target.parentNode.blur();
					this.isplaying = (!this.isplaying);
					if (this.isplaying) {
                        if (clicked) this.next();
						this.interval = this.next.periodical('5000', this);
						e.target.src = '/albums/code/pause.png';
					} else {
						this.interval = $clear(this.interval);
						e.target.src = '/albums/code/play.png';
					}
				}.bind(this));
				this.object_play.inject(this.object_left);
				this.object_prevp = new Element('a', {
					alt: 'Vorige pagina',
					title: 'Vorige pagina',
					href: 'javascript:void(0)'
				});
				this.object_prevp.innerHTML = '<img src="/albums/code/prev_page.png" alt="">';
				this.object_prevp.addEvent('click', function(e) {
					if (e.target) e.target.parentNode.blur();
					fx = new Fx.Scroll(this.object_thumbs_container);
					sw = this.object_thumbs_container.getSize().x;
					ss = this.object_thumbs_container.getScroll().x;
					fx.start(ss - sw, 0);
				}.bind(this));
				this.object_prevp.inject(this.object_left);
				this.object_prev = new Element('a', {
					alt: 'Vorige afbeelding',
					title: 'Vorige afbeelding',
					href: 'javascript:void(0)'
				});
				this.object_prev.innerHTML = '<img src="/albums/code/prev.png" alt="">';
				this.object_prev.addEvent('click', function(e) {
					if (e.target) e.target.parentNode.blur();
					if (this.current.toInt() == 0) return;
					prev = this.current.toInt() - 1;
					img = this.parent.getElements('.ndToolbar .ndThumbs_container .ndThumbs img')[prev];
					co = img.getCoordinates(this.object_thumbs);
					min = this.object_thumbs_container.getScroll().x;
					if (co.left < min) {
						fx = new Fx.Scroll(this.object_thumbs_container);
						fx.addEvent('complete', function() {
							this.prev_page();							
						}.bind(this));
						scrollto = this.parent.getElements('.ndToolbar .ndThumbs_container .ndThumbs img')[this.current.toInt()];
						fx.toElement(scrollto);
					}
					img.fireEvent('click', {
						target: img
					});
				}.bind(this));
				this.object_prev.inject(this.object_left);
				this.object_next = new Element('a', {
					alt: 'Volgende afbeelding',
					title: 'Volgende afbeelding',
					href: 'javascript:void(0)'
				});
				this.object_next.innerHTML = '<img src="/albums/code/next.png" alt="">';
				this.object_next.addEvent('click', function(e) {
					if (e.target) e.target.parentNode.blur();
					if (this.current.toInt() == this.images.length - 1) {
						if (this.isplaying) this.pause();
						return;
					}
					next = this.current.toInt() + 1;
					img = this.parent.getElements('.ndToolbar .ndThumbs_container .ndThumbs img')[next];
					co = img.getCoordinates(this.object_thumbs);
					max = this.object_thumbs_container.getScroll().x + this.object_thumbs_container.getSize().x;
					if (co.right > max) {
						fx = new Fx.Scroll(this.object_thumbs_container);
						fx.toElement(img);						
					}
					img.fireEvent('click', {
						target: img
					});
				}.bind(this));
				this.object_next.inject(this.object_right);
				this.object_nextp = new Element('a', {
					alt: 'Volgende pagina',
					title: 'Volgende pagina',
					href: 'javascript:void(0)'
				});
				this.object_nextp.innerHTML = '<img src="/albums/code/next_page.png" alt="">';
				this.object_nextp.addEvent('click', function(e) {
					if (e.target) e.target.parentNode.blur();
					fx = new Fx.Scroll(this.object_thumbs_container);
					sw = this.object_thumbs_container.getSize().x;
					ss = this.object_thumbs_container.getScroll().x;
					fx.start(sw + ss, 0);
				}.bind(this));
				this.object_nextp.inject(this.object_right);
				this.object_screen = new Element('a', {
					alt: 'Volledig scherm',
					title: 'Volledig scherm',
					href: 'javascript:void(0)'
				});
				this.object_screen.innerHTML = '<img src="/albums/code/fullscreen.png" alt="">';
				this.object_screen.addEvent('click', function(e) {
					if (e.target) e.target.parentNode.blur();
					if (!this.fullscreen) {
						this.orig_overflow = document.body.getStyle('overflow');
						this.orig_styles = this.parent.getStyles('width', 'height', 'left', 'z-index', 'top', 'position', 'display', 'margin', 'padding');
						this.clear();
						document.body.setStyle('overflow', 'hidden');
						win = document.getSize();
						this.parent.setStyles({
							margin: '0 0 0 0',
							padding: '0 0 0 0',
							position: 'absolute',
							left: '0px',
							top: '0px',
							display: 'block',
							zIndex: 999,
							width: win.x + 'px',
							height: win.y + 'px'
						});
						fx = new Fx.Scroll(window);
						fx.addEvent('complete', function() {
							this.render();
							this.fullscreen = true;							
						}.bind(this));
						fx.start(0, 0);
					} else {
						this.clear();
						this.parent.setStyles(this.orig_styles);
						document.body.setStyle('overflow', this.orig_overflow);
						fx = new Fx.Scroll(window);
						fx.addEvent('complete', function() {
							this.render();
							this.fullscreen = false;							
						}.bind(this));
						fx.toElement(this.parent);
					}
				}.bind(this));
				//this.object_screen.inject(this.object_right);
				$$('.ndGallery .ndToolbar div a img').addEvent('mouseover', function() {
					src = this.src;
					if ((src.match('play.png') !== null) || (src.match('pause.png') !== null)) return;
					if (src.match('_hover.png') == null) newsrc = src.replace('.png', '_hover.png');
					this.src = newsrc;
				});
				$$('.ndGallery .ndToolbar div a img').addEvent('mouseout', function() {
					src = this.src;
					if ((src.match('play.png') !== null) || (src.match('pause.png') !== null)) return;
					if (src.match('_hover.png') != null) newsrc = src.replace('_hover.png', '.png');
					this.src = newsrc;
				});
				this.object_thumbs_container = new Element('div', {
					'class': 'ndThumbs_container'
				});
				this.object_thumbs_container.inject(this.object_toolbar);
				w = this.object_thumbs_container.getSize().x;
				this.object_thumbs = new Element('div', {
					'class': 'ndThumbs'
				});
				this.object_thumbs.inject(this.object_thumbs_container);
                this.object_thumbs_container.setStyle('width', w + 'px');
                w = (this.images.length * 34) + 39;
                this.object_thumbs.setStyle('width', w + 'px');
				this.images.each(function(img, img_id) {
					this.thumb = new Element('img', {
						width: 24,
						height: 24,
						src: img + '?w=24&h=24&min=1'
					});
					this.thumb.set('thumb_id', img_id);
					this.thumb.addEvent('mouseenter', function(e) {
						preview = new Element('div', {
							id: 'ndGallery_Preview'
						});
						img_id = e.target.get('thumb_id');
						img = this.images[img_id];
						preview.innerHTML = '<img src="' + img + '?w=71&h=51&min=1" alt="" />';
						co = e.target.getPosition();
						x = co.x - 25;
						y = co.y - 60;
						preview.setStyles({
							left: x + 'px',
							top: y + 'px'
						});
						preview.inject(document.body);
					}.bind(this));
					this.thumb.addEvent('mouseleave', function() {
						preview = $('ndGallery_Preview');
						if (preview) preview.dispose();
					}.bind(this));
					this.thumb.addEvent('click', function(e) {
						this.parent.getElements('.ndToolbar .ndThumbs_container .ndThumbs img.active').each(function(el) {
							el.removeClass('active');
						});
						img_id = e.target.get('thumb_id');
						this.current = img_id.toInt();
						e.target.addClass('active');
						img = this.images[img_id];
						img += '?w=' + size.x;
						img += '&h=' + (size.y - 40);
						img += '&min=1';
						fx = new Fx.Tween(this.object_image, {
							property: 'opacity',
							duration: 250
						});
						fx.addEvent('complete', function() {
							if (this.object_image.src == img) return;
                            this.object_image.addEvent('load', function() {
                                fx.start(0, 1);                                
                            });
							this.object_image.src = img;
						}.bind(this));
						fx.start(1, 0);
						
					}.bind(this));
					this.thumb.inject(this.object_thumbs);
				}, this);
				new Element('br', {'class': 'clear'}).inject(this.object_toolbar);
				img = this.parent.getElements('.ndToolbar .ndThumbs_container .ndThumbs img')[0];
				img.fireEvent('click', {
					target: img
				});
                if (this.autoplay) this.play();
			}
		}.bind(this));
		this.loader.start();
	}
});

window.addEvent('domready', function() {
    window.galleries = [];
    $$('div.gallery').each(function(el) {
        gallery = new ndGallery(el);
        gallery.render();
        window.galleries.push(gallery);
    });
});