Preloading = new Class({
	initialize: function(url)
	{
		this.pic= new Image(); 
		this.pic.src = url;
	}
});


var Gx01;
Gallery = new Class({
	
	config: {
		'opacity': 0.8	
	},
	
	initialize: function(el){
		if(this.el = $(el)){
			this.DOMinit();
			this.events();	
		}	
		
	},
	
	DOMinit: function(){
		// background
		this.bg = new Element('div',{
			'styles': {
				'position': 'absolute',
				'left': 0,
				'top': 0,
				'width': '100%',
				'height': window.getScrollSize().y,
				'opacity': this.config.opacity,
				'background': '#000',
				'z-index': 99,
				'display': 'none'
			}	
		});
		this.bg.info = {
			'gallery': this
		};
		this.bg.fx = new Fx.Tween(this.bg,{
			'onComplete': function(el){
				if(!el.info.gallery.run)
					el.setStyle('display','none');
				else {
				}
			}
		})
		this.bg.inject($(document.body),'top');
		// loading
		this.loading = new Element('div',{
			'class': 'loading',
			'styles': {
				'width': 50,
				'height': 50,
				'position': 'absolute',
				'z-index': 110,
				'left': (window.getSize().x-50)/2,
				'top': (window.getSize().y-50)/2,
				'display': 'none'
			}	
		});
		this.loading.inject($(document.body),'top');
		// photo
		this.backArrow = new Element('a',{
			'class': 'gallery0x1_left'
		});
		this.forwardArrow = new Element('a',{
			'class': 'gallery0x1_right'
		});
		this.content = new Element('div',{
			'html': '<img src="" alt="fap fap fap"/>',
			'styles': {
				'position': 'absolute',
				'left': (window.getSize().x-150)/2,
				'top': (window.getSize().y-150)/2,
				'padding': 10,
				'border': '1px solid #2e2635',
				'z-index': 100,
				'line-height': '100%',
				'display': 'none'
			}	
		});
		this.content.inject($(document.body),'top');
		this.backArrow.inject($(document.body),'top');
		this.forwardArrow.inject($(document.body),'top');
		this.desc = new Element('div',{
			'class': 'gallery_desc'
		});
		this.desc.setStyles({
			'opacity': 1,
			'background': '#000',
			'padding': 10,
			'z-index': 101,
			'font-size': '12px',
			'text-align': 'justify',
			'display': 'none',
			'margin': '-3px 0px 0px 0px'
		});
		this.desc.inject(this.content,'bottom');
	},
	
	events: function(){
		Gx01 = this;
		window.addEvent('resize', function(){
			Gx01.resize();
		});
		window.addEvent('keypress', function(e){
			Gx01.key(e);
		});
		this.bg.addEvent('click', function(){
			this.info.gallery.hide();
		});
		this.img = this.el.getElements('a');
		this.img.each(function(o,i){
			o.info = {
				'gallery': this,
				'prev': (i-1<0)?this.img.length-1:i-1,
				'next': (i+1>=this.img.length)?0:i+1		
			};
			o.gallery = this;
			o.addEvent('click',function(e){
				if(e) e.stop();
				this.info.gallery.open(this);
			})
		},this);
		this.backArrow.gallery = this;
		this.backArrow.addEvent('click',function(e){
			if(e) e.stop();
			this.gallery.open(this.gallery.img[this.gallery.prev]);
			this.blur();
		});
		this.forwardArrow.gallery = this;
		this.forwardArrow.addEvent('click',function(e){
			if(e) e.stop();
			this.gallery.open(this.gallery.img[this.gallery.next]);
			this.blur();
		});
	},
	
	resize: function(){
		this.bg.setStyle('height', window.getScrollSize().y);
		this.desc.setStyles({
			'width': this.content.getElement('img').getSize().x-this.desc.getStyle('padding-left').toInt()-this.desc.getStyle('padding-right').toInt()
		});
		this.loading.setStyles({
			'left': (window.getSize().x-this.loading.getSize().x)/2,
			'top': (window.getSize().y-this.loading.getSize().y)/2+window.getScroll().y
		});	
		this.content.setStyles({
			'left': (window.getSize().x-this.content.getSize().x)/2,
			'top': (window.getSize().y-this.content.getSize().y)/2+window.getScroll().y
		});
		/*this.desc.setStyles({
			'top': this.content.getPosition().y+this.content.getSize().y - this.desc.getSize().y-1-this.content.getStyle('padding-bottom').toInt()-2,
			'left': this.content.getPosition().x+1+this.content.getStyle('padding-left').toInt()
		});*/
		this.content.getElements('a').each(function(o,i){
			o.setStyle('height',this.content.getElement('img').getSize().y);
		},this);
		
		this.backArrow.setStyles({
			'top': this.content.getPosition().y,
			'left': 0,
			'height': this.content.getSize().y,
			'width': this.content.getPosition().x+1+this.content.getStyle('padding-left').toInt()
		});
		this.forwardArrow.setStyles({
			'top': this.content.getPosition().y,
			'left': this.content.getPosition().x+this.content.getSize().x,
			'height': this.content.getSize().y,
			'width': window.getSize().x-(this.content.getPosition().x+this.content.getSize().x)
		});
	},
	
	hide: function(){
		this.bg.fx.start('opacity',0);
		this.run = false;
		this.loading.setStyle('display','none');
		this.content.setStyle('display','none');
		this.desc.setStyle('display','none');
		this.backArrow.setStyle('display','none');
		this.forwardArrow.setStyle('display','none');
	},
	
	run: false,
	
	open: function(obj){
		this.backArrow.setStyle('display','none');
		this.forwardArrow.setStyle('display','none');
		this.prev = obj.info.prev;
		this.next = obj.info.next;
		this.content.setStyle('display','none');
		this.desc.setStyle('display','none');
		this.loading.setStyle('display','block');
		if(!this.run){ // show
			this.run = true;
			this.bg.setStyle('opacity',0);
			this.bg.setStyle('display','block');
			this.bg.fx.start('opacity',0,this.config.opacity);
		}
		
		if(obj.title){
			this.desc.set('html',obj.title);
		} else
			this.desc.set('html','');
			
		this.content.getElement('img').info = {
			'gallery': this	
		};
		this.content.getElement('img').onload = function(){
			this.info.gallery.loaded();
		}
		this.content.getElement('img').src = obj.href;
	},
	
	loaded: function(){
		this.backArrow.setStyle('display','block');
		this.forwardArrow.setStyle('display','block');
		if(this.desc.get('html') != '')
			this.desc.setStyle('display','block');
		this.loading.setStyle('display', 'none');
		this.content.setStyle('display','block');
		this.resize();
	},
	
	key: function(e){
		if(!e || !this.run) return false;
		switch(e.key){
			case "n":
				this.open(this.img[this.next]);
			break;
			case "right":
				this.open(this.img[this.next]);
			break;
			case "p":
				this.open(this.img[this.prev]);
			break;
			case "left":
				this.open(this.img[this.prev]);
			break;
			case "esc":
				this.hide();
			break;
		}
	}
	
});