/** Create a dynamic Gallery from images with class="gallery"
 *	Naming-convention:	thumbs must be named "imagename_thumb.*"
 *  					and large images the same without the "_thumb"
 *  Data:				the images will be taken in order how their thumbs appear on the page
 *						their caption will be taken from their thumbs title-attribute
 *  @author				Simon Daniel Flottmann (sdf@gmxpro.de)
 *  @version			0.1
 *  @date				2009-03-24
 *  @dependecies		MooTools (http://mootools.net)
 **/
var Gallery = new Class({
	/** This is where the big images will be found **/
	'ereg':{
		'reg':/info_images/,			// the pattern in the thumbnail image
		'repl':'popup_images_custom'	// the replacement where the gallery image will be found
	},
	/** All the image data will be stored here **/
	'images':[],
	/** the current image index **/
	'index':null,
	/** constructor **/
	'initialize':function() {
		/** where all the action takes place **/
		this.root=$(document).getElement('body');
		
		/** The element that will contain the image **/
		this.container=new Element('div',{
			'class':'galleryContainer galleryContainerHidden',
			'id':'galleryContainer',
			'morph':{'onComplete':function(){this.footer.fade('in');}.bind(this)}
		});
		
		/** The element to fade the  background to black **/
		this.fader=new Element('div',{
			'class':'galleryFader',
			'opacity':0,
			'tween':{
				'property':'opacity',
				'onComplete':this.loading.bind(this)
			}
		});
		
		/** Elements to hold image info and navigation **/
		this.footer=new Element('div', {
			'class':'galleryFooter',
			'id':'galleryFooter',
			'opacity':0
		});
		this.footer.set('html','<span></span>');
		this.next=new Element('a',{
			'class':'galleryNav',
			'opacity':0,
			'text':'nächstes',
			'styles':{'right':5},
			'events':{
				'click':function() {this.go(1);}.bind(this)	
			}
		});
		this.prev=new Element('a',{
			'class':'galleryNav',
			'opacity':0,
			'text':'vorheriges',
			'styles':{'left':5},
			'events':{
				'click':function() {this.go(-1);}.bind(this)	
			}
		});
		this.next.injectInside(this.footer);
		this.prev.injectInside(this.footer);

		/** Search for the images **/
		$(document).getElements('img.gallery').forEach(function(el,index){
			this.images.push({
				'preloaded':0,
				'thumb':el,
				'title':el.get('title'),
				'image':new Asset.image(el.get('src').replace(this.ereg.reg,this.ereg.repl),{
					'title':'zum Schlie&szlig;en ins Bild klicken',
					'alt':'',
					'onerror':function() {this.images[index].preloaded=-1;}.bind(this),
					'onload':function(el) {
						this.images[index].preloaded=1;
						this.images[index].width=el.width;
						this.images[index].height=el.height;
					}.bind(this)
				})
			});
			el.addEvent('click',function(){
				this.index=index;
				this.fade();
			}.bind(this));
		}.bind(this));
		
		/** find images on subsequent pages **/
		$$('.galleryPages').forEach(function(item) {
			this.add(item.get('href'));
		}.bind(this));
		
		/** prepare the image container **/
		if(this.images.length > 0) {
			this.container.injectInside(this.root);
			this.footer.injectInside(this.root);
		}
	},
	/** Exchange image, image info and update navigation **/
	'change':function() {
		this.images[this.index].image.addEvent('click',this.close.bind(this));
		this.images[this.index].image.injectInside(this.container);
		if(!this.tip) this.tip=new Tips(this.images[this.index].image, {'className':'galleryTip'});
		else this.tip.attach(this.images[this.index].image);
		this.images[this.index].image.fade('in');
		if(this.images[this.index].title) 
			var title=this.images[this.index].title;
		else
			var title=this.images[this.index].image.src.substr(this.images[this.index].image.src.lastIndexOf('/')+1);
		this.footer.getElement('span').set('html',title);
		if(this.index<this.images.length-1) this.next.fade('in');
		else this.next.fade('hide');
		if(this.index>0) this.prev.fade('in');
		else this.prev.fade('hide');
	},
	/** Fade background **/
	'fade':function() {
		/** hide scrollbars **/
		this.root.addClass('galleryBody');
		if(Browser.Engine.trident || Browser.Engine.presto) {
			document.body.scroll="no";
			document.documentElement.style.overflow = "hidden"
		}
		
		this.refreshDim();
		this.fader.setStyles({'top':this.scroll.y,'left':this.scroll.x});
		if(Browser.Engine.trident && Browser.Engine.version==4) this.fader.setStyles({'width':this.size.x,'height':this.size.y});
		this.fader.injectInside(this.root);
		this.fader.tween(0.8);
		this.open=true;
		$(window).addEvent('scroll',this.preventScroll.bindWithEvent(this));
		$(window).addEvent('resize',this.resize.bind(this));
	},
	/** Wait for image to be loaded **/
	'loading':function() {
		switch(this.images[this.index].preloaded) {
			/** The image could not be loaded **/
			case -1:
				alert('Bild nicht gefunden');
				this.close();
			break;
			/** Image not yet loaded **/
			case 0:
				(function() {this.loading() }).bind(this).delay(100);
			break;
			/** The image is loaded successful **/
			case 1:
				this.images[this.index].image.fade('hide');
				this.resize();
				this.change();
			break;
		}
	},
	/** Resize the image container to fit image and window **/
	'resize':function() {
		if(this.open) {
			this.refreshDim();
			var left=Math.floor((this.size.x-this.images[this.index].width)/2)+this.scroll.x;
			var top=this.scroll.y+45;
			this.footer.setStyles({'left':this.scroll.x, 'top':this.scroll.y+20});
			this.container.removeClass('galleryContainerHidden');
			this.container.morph({'height':this.images[this.index].height,'width':this.images[this.index].width,'top':top,'left':left});
		}
	},
	/** close the gallery and reset everything **/
	'close':function() {
		this.open=false;
		this.index=null;
		
		/** remove content **/
		this.container.addClass('galleryContainerHidden');
		$$('.galleryTip').setStyle('left',-10000);
		this.fader.dispose();
		this.footer.fade('hide');
		this.footer.setStyles({'left':-10000,'top':-10000});
		this.container.set('html','');
		this.container.setStyles({'width':5,'height':5,'left':Math.floor(this.size.x/2)+this.scroll.x,'top':Math.floor(this.size.y/2)+this.scroll.y});
		
		/** add scrollbars back again **/
		this.root.removeClass('galleryBody');
		if(Browser.Engine.trident || Browser.Engine.presto) {
			document.body.scroll="auto";
			document.documentElement.style.overflow = "auto"
		}

	},
	/** move to a certain image by offset "where" **/
	'go':function(where) {
		this.index+=where;
		this.loading();
	},
	/** prevent the image from scrolling when in gallery mode (workaround for Opera) **/
	'preventScroll':function(event) {
		if(this.open) {
			event=new Event();
			event.stop();
			var size=this.fader.getPosition();
			window.scrollTo(size.x,size.y);
			return false;
		}
	},
	/** recalc window dimensions **/
	'refreshDim':function() {
		this.scroll=$(window).getScroll();
		this.size=$(window).getSize();
	},
	'add':function(url) {
		var request=new Request.JSON({
			'url':url,
			'onSuccess':function(json){
				json.forEach(function(item) {
					this.images.push(item);
				}.bind(this));
			}.bind(this)
		}).get({'access':'ajax'});
	}
});

$(document).addEvent('domready',function() {
	var sqn_shop_gallery=new Gallery();
});