var LightBox = new Class({
	
	options: {
		duration: 1000,
		ParentDisplay: 'displayGallery',
		column: 0,
		ArrowLeft: 'arrowLeft',
		ArrowRight: 'arrowRight',
		ParentDisplay: 'displayGallery',
		div: 6,
		OverLay: 500,
		wait: false
	},

	initialize: function(element, options){
		this.setOptions(options);
		if( $(element) ){
			this.elements = $(element);	
			this.options.column = Math.ceil($$('#' + element + ' li').length / this.options.div);
			this.image = new Array();
			this.build(this.elements);
		}
	},
	
	build: function(el){
		this.overlay = new Element('div', {
			'id': 'overlay',
			'styles': {
				'width': window.getScrollWidth().toInt(),
				'height': window.getScrollHeight().toInt(),
				'opacity': 0
			}
		}).inject(document.body);
		
		this.imgContainer = new Element('div', {
			'id': 'imgContainer',
			'styles': {
				'width': 650,
				'height': 480,
				'background-color': '#000',
				'top': (window.getHeight().toInt() - 480) / 2,
				'left': (window.getWidth().toInt() - 650) / 2,
				'display': 'none'
			}
		}).inject(document.body);
		
		this.img = new Element('img', {
			'id': 'DImg',
			'styles': { 
				'opacity': 0
			}
		}).inject(this.imgContainer);
		
		var progress = new Element('div', {
			'id': 'progress',
			'styles': {
				'width': 606, // 656
				'position': 'absolute',
				'left': (window.getWidth().toInt() - 600) / 2, //650
				'top': this.imgContainer.getStyle('top').toInt() - 25,
				'border': 'solid 1px #D2C17D',
				'padding': 1,
				'height': 18,
				'overflow': 'hidden',
				'visibility': 'hidden'
			}
		}).inject(document.body);
		
		var bar = new Element('div', {
			'class': 'bar',
			'styles': {
				'width': 0,
				'padding-top': 3,
				'height': 15,
				'text-align': 'center',
				'font-weight': 'bold',
				'color': '#fff', //#877227
				'background-color': '#80581E'
			}
		}).inject(progress);
		
		this.BxGallery = new Element('div', {
			'id': 'BxGallery',
			'styles': {
				'opacity': 0	
			}
		}).inject(document.body);
		this.arrowLeft = new Element('div', {
			'id': 'arrowLeft'
		}).inject(this.BxGallery).addEvent('click', function(){ 
			this.moveLeft();
		}.bind(this));
		this.displayGallery = new Element('div', {
			'id': 'displayGallery'
		}).inject(this.BxGallery);
		this.GalleryList = new Element('ul', {
			'id': 'GalleryList'
		}).inject(this.displayGallery);
		this.arrowRight = new Element('div', {
			'id': 'arrowRight'
		}).inject(this.BxGallery).addEvent('click', function(){
			this.moveRight();
		}.bind(this));
		
		this.attach();
	},
	
	attach: function(){		
		this.arrowLeft.addEvent('mouseenter', function(){ 
			this.setStyles({ 'background-color' : '#5C4E1B' });
		});
		this.arrowLeft.addEvent('mouseleave', function(){ 
			this.setStyles({ 'background-color' : '#877227' });
		});
		
		this.arrowRight.addEvent('mouseenter', function(){ 
			this.setStyles({ 'background-color' : '#5C4E1B' });
		});
		this.arrowRight.addEvent('mouseleave', function(){ 
			this.setStyles({ 'background-color' : '#877227' });
		});
		
		var list = $$('#' + this.elements.getProperty('id') + ' li a');
		list.each(function(element){
			element.addEvent('click', function(){
				this.start(element.getProperty('rel'));
			}.bind(this));
		}.bind(this));
	},
	
	detach: function(){
		var list = $$('#' + this.elements.getProperty('id') + ' li a');
		list.each(function(element){
			element.removeEvents();
		}.bind(this));
	},
	
	updateAttach: function(){
		var list = $$('#' + this.elements.getProperty('id') + ' li a');
		list.each(function(element){
			element.addEvent('click', function(){
				this.setDisplay(element.getProperty('rel'));
			}.bind(this));
		}.bind(this));
	},
	
	start: function(curent){
		var fx = this.overlay.effects({duration: this.options.OverLayduration, transition: Fx.Transitions.Quart.easeInOut});
		fx.start({ 'opacity': .75 });
		this.img.setStyle('opacity', 0);
		this.imgContainer.setStyle('display', '');
		
		var curent = curent;
		var image2 = new Array();
		var list = $$('#' + this.elements.getProperty('id') + ' li a');
		list.each(function(element){
			this.image.push(new Array( element.getProperty('rel'), element.getProperty('title') ) );
			image2.push(element.getProperty('rel'));
		}.bind(this));

		var busy = false, loadedImages = [];
		var bar = $E('#progress .bar'), progress = $('progress'); 
		if (!busy) {
			busy = true;
			progress.setStyles({
				'visibility': 'visible',
				'left': (window.getWidth().toInt() - 600) / 2, // 650
				'top': (window.getHeight().toInt() - progress.getStyle('height').toInt()) / 2
				//this.imgContainer.getStyle('top').toInt() / 2 
			});
			new Asset.images(image2, {
				onProgress: function(i) {
					loadedImages[i] = this;
					var percent = 0;
					percent = ((i + 1) * progress.getStyle('width').toInt()) / image2.length;
					//bar.setStyle('width', percent).setHTML('Loading images ' + (i + 1) + ' / ' + image2.length);
					bar.setStyle('width', percent).setHTML('Loading images');
				}.bind(this),
				onComplete: function(){
					progress.setStyle('visibility', 'hidden');
					//progress.remove();
					busy = false;
					this.detach();
					this.updateAttach();
					this.setDisplay(curent);
					this.createList();	
				}.bind(this)
			});
		}
	},
	
	setDisplay: function(curent){
		this.overlay.removeEvents();
		var fx = this.overlay.effects({duration: this.options.OverLayduration, transition: Fx.Transitions.Quart.easeOut});
		fx.start({ 'opacity': .85 });
		this.img.setStyle('opacity', 0);
		this.imgContainer.setStyle('display', '');
		
		var imageNum = 0;		
		while( this.image[imageNum][0] != curent ) {
			imageNum++;
		}
		
		this.img.setStyle('opacity', 0);
		var activeImage = imageNum;	
		var img = new Image();
		img.src = this.image[activeImage][0];
		
		this.img.setProperty('src', this.image[activeImage][0]);
		
		var imCon = this.imgContainer.effects({duration: 500, transition: Fx.Transitions.Quart.easeInOut});
		var top = (window.getHeight().toInt() - img.height - this.BxGallery.getCoordinates().height - this.BxGallery.getStyle('margin-top').toInt() - this.imgContainer.getStyle('border-top').toInt() - this.imgContainer.getStyle('border-bottom').toInt() ) / 2;
		var left = (window.getWidth().toInt() - img.width) / 2;
		
		imCon.start(1).chain(function(){
			imCon.start({
				'width': img.width,
				'height': img.height,
				'top': (top < 0)?10:top,
				'left': (left < 0)?10:left
			});
		}.bind(this)).chain(function(){
			var imgfx = this.img.effects({duration: 300, transition: Fx.Transitions.Quart.easeOut});
			imgfx.start({
				'opacity': 0		 
			}).chain(function(){
				this.SlidePosition();	
				imgfx.start({
					'opacity': 1
				});
			}.bind(this));
		}.bind(this));		
	},
	
	end: function(e){
		var bxfx = this.BxGallery.effects({duration: this.options.OverLayduration, transition: Fx.Transitions.Quart.easeOut});
		bxfx.start({ 'opacity': 0 }).chain(function(){ 
			this.imgContainer.setStyles({ 'display': 'none' })
		}.bind(this));
			
		var fx = this.overlay.effects({duration: this.options.duration, transition: Fx.Transitions.Quart.easeInOut});
		fx.start({
			'opacity': 0
		});
		e = new Event(e).stop();
	},

	createList: function(){
		var list = $$('#' + this.elements.getProperty('id') + ' li');
		this.GalleryList.setStyle('width', list.length * 117);
		list.each(function(el){
			var li = el.clone().inject(this.GalleryList);
		}.bind(this));
		
		var list = $$('#GalleryList li a');
		list.each(function(el){
			el.removeEvents();
			el.addEvent('click', function(){
				this.setDisplay(el.getProperty('rel')); 
			}.bind(this)); 
		}.bind(this));
	},
	
	SlidePosition: function(){
		var bxfx = this.BxGallery.effects({duration: 500, transition: Fx.Transitions.Quart.easeOut});
		bxfx.start({
			'top': this.imgContainer.getCoordinates().bottom,
			'left': ( window.getWidth() - this.BxGallery.getCoordinates().width ) / 2
		}).chain(function(){
			bxfx.start({
				'opacity': 1		   
			}).chain(function(){
				this.overlay.addEvent('click', function(){
					this.end();
				}.bind(this));
			}.bind(this));
		}.bind(this));
	},
	
	moveLeft: function(){
		var fx = this.GalleryList.effects({duration: this.options.duration, transition: Fx.Transitions.Quart.easeInOut});
		var left = this.GalleryList.getStyle('left').toInt();
		var coor = this.GalleryList.getCoordinates();
		var right = left + coor.width;
		var maxWidth = $(this.options.ParentDisplay).getStyle('width').toInt();
		if(left < 0) 
			fx.start({ 'left' : left + (this.options.div * 117) });
	},
	
	moveRight: function(){
		var fx = this.GalleryList.effects({duration: this.options.duration, transition: Fx.Transitions.Quart.easeInOut});
		var left = this.GalleryList.getStyle('left').toInt();
		var coor = this.GalleryList.getCoordinates();
		var right = left + coor.width;
		var maxWidth = $(this.options.ParentDisplay).getStyle('width').toInt();
		if(right > maxWidth)
			fx.start({ 'left' : left - (this.options.div * 117) });
	}
});

LightBox.implement(new Events, new Options);