var GalleryAjax = new Class({
	
	options: {
		url: '_ajax/galleryList.php',
		alt: '',
		loading: 'img/lightbox_logo.gif',
		duration: 1000,
		OverLayduration: 500,
		ArrowLeft: 'arrowLeft',
		ArrowRight: 'arrowRight',
		ParentDisplay: 'displayGallery',
		column: 0,
		div: 6
	},

	initialize: function(element, options){
		this.setOptions(options);
		this.elements = $(element);
		this.imgSmall = new Array();
		this.imgLarge = new Array();
		this.build();
	},
	
	build: function(){
		this.overlay = new Element('div', {
			'id': 'overlay',
			'styles': {
				'width': window.getScrollWidth().toInt(),
				'height': window.getScrollHeight().toInt(),
				'opacity': 0
			}
		}).inject(document.body);
		
		this.bodyImage = new Element('div', {
			'id': 'bodyImage',
			'styles': {
				'position': 'absolute',
				'width': 650,
				'height': 480,
				'top': (window.getHeight().toInt() - 480) / 2,
				'left': (window.getWidth().toInt() - 650) / 2,
				'background-color': '#000',
				'border': 'solid 5px #D2C17D',
				'display': 'none'
			}
		}).inject(document.body);
		
		var progress = new Element('div', {
			'id': 'progress',
			'styles': {
				'width': 606,
				'position': 'absolute',
				'left': (window.getWidth().toInt() - 600) / 2,
				'top': this.bodyImage.getStyle('top').toInt() - 25,
				'border': 'solid 1px #D2C17D',
				'padding': 1,
				'height': 18,
				'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.img = new Element('img', {
			'id': 'isImage',
			//'src': this.options.loading,
			'styles': { 
				'opacity': 0
			}
		}).inject(this.bodyImage);

		/* Bottom List */
		this.BxGallery = new Element('div', {
			'id': 'BxGallery',
			'styles': {
				'position': 'absolute',
				'top': 0,
				'left': 0,
				'opacity': 0
			}
		}).inject(document.body);
		this.arrowLeft = new Element('div', {
			'id': 'arrowLeft'
		}).inject(this.BxGallery);
		this.displayGallery = new Element('div', {
			'id': 'displayGallery'
		}).inject(this.BxGallery);
		
		this.GalleryList = new Element('ul', {
			'id': 'GalleryList',
			'styles': {
				'left': 0,
				'top': 0
			}
		}).inject(this.displayGallery);
		
		this.arrowRight = new Element('div', {
			'id': 'arrowRight'
		}).inject(this.BxGallery);
		
		this.getAjax();
		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.arrowLeft.addEvent('click', function(){ 
			this.moveLeft();
		}.bind(this));
		
		this.arrowRight.addEvent('mouseenter', function(){ 
			this.setStyles({ 'background-color': '#5C4E1B' });
		});
		this.arrowRight.addEvent('mouseleave', function(){ 
			this.setStyles({ 'background-color': '#877227' });
		});
		this.arrowRight.addEvent('click', function(){
			this.moveRight();
		}.bind(this));
	},
		
	getAjax: function(){
		var fx = this.overlay.effects({duration: this.options.OverLayduration, transition: Fx.Transitions.Quart.easeOut});
		fx.start({
			'opacity': .5
		}).chain(function(){
			fx.start({
				'opacity': .85		   
			});
			this.bodyImage.setStyles({ 'display': '' });
		}.bind(this));
		
		createXMLHttpRequest();
		xmlHttp.open("GET", this.options.url + "?ID=" + this.elements.getProperty('id'), true);
		xmlHttp.onreadystatechange = function(){
			if(xmlHttp.readyState == 4){
				if(xmlHttp.status == 200){
					this.response = xmlHttp.responseText;
					
					var preload = new Array();			
					var p = this.response.split('::');
					for(var i=0; i<(p.length-1); i++){
						this.imgSmall.push( p[i].split('|')[0].replace(/..\//, "") );
						this.imgLarge.push( p[i].split('|')[1].replace(/..\//, "") );
						
						if(p.length > 2) preload.push(  p[i].split('|')[0].replace(/..\//, "") );
						preload.push(  p[i].split('|')[1].replace(/..\//, "") );
					}
					
					this.options.column = Math.ceil( this.imgLarge.length / this.options.div );
					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,
							'top': (window.getHeight().toInt() - progress.getStyle('height').toInt()) / 2
						});
						new Asset.images(preload, {
							onProgress: function(i) {
								loadedImages[i] = this;
								var percent = ((i + 1) * progress.getStyle('width').toInt()) / preload.length;
								//bar.setStyle('width', percent).setHTML('Loading images ' + (i + 1) + ' / ' + preload.length);
								bar.setStyle('width', percent).setHTML('Loading images');
							}.bind(this),
							
							onComplete: function(){
								progress.setStyle('visibility', 'hidden');
								progress.remove();
								busy = false;
								this.start();	
							}.bind(this)
							
						});
					}
				}
			}
		}.bind(this);
		xmlHttp.send(null);
	},
	
	start: function(){
		this.setDisplay( this.imgSmall[0] );
		this.createSlide();
	},
	
	setDisplay: function(curent){
		var imageNum = 0;
		while( this.imgSmall[imageNum] != curent ) {
			imageNum++;
		}
		var image = new Image;
		image.src = this.imgLarge[imageNum];
		var fxbody = this.bodyImage.effects({ duration: 500, transition: Fx.Transitions.Quart.easeInOut });
		
		var top = ( window.getHeight().toInt() - image.height - this.BxGallery.getCoordinates().height - this.BxGallery.getStyle('margin-top').toInt() - this.bodyImage.getStyle('border-top-width').toInt() - this.bodyImage.getStyle('border-bottom-width').toInt() ) / 2;
		var left = ( window.getWidth().toInt() - image.width ) / 2;
		
		fxbody.start({
			'width': image.width,
			'height': image.height,
			'top': (top < 0)?10:top,
			'left': (left < 0)?10:left
		});	
		var fximg = this.img.effects({duration: this.options.duration, transition: Fx.Transitions.Quart.easeInOut});
		this.img.setStyle('opacity', 0);
		this.img.setProperty('src', this.imgLarge[imageNum]);
		fximg.start({
			'opacity': 0		
		}).chain(function(){
			this.SlidePosition();	
			fximg.start({
				'opacity': 1			
			});
		}.bind(this));
	},
	
	end: function(){
		var fx = this.overlay.effects({duration: this.options.OverLayduration, transition: Fx.Transitions.Quart.easeOut});
		this.bodyImage.setStyles({ 'display': 'none' });
		this.remove();
		fx.start({ 'opacity': 0 });
	},
	
	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)
			});
	},
	
	createSlide: function(){
		this.GalleryList.setStyle( 'width', (this.imgSmall.length * 117) );
		for( var i=0; i<this.imgSmall.length; i++ ){
			var li = new Element('li').inject(this.GalleryList);
			var image = new Element('img', {
				'src': this.imgSmall[i],
				'alt': this.imgSmall[i],
				'styles': {
					'cursor': 'pointer',
					'border': 'solid 2px #D2C17D'
				}
			}).inject(li);
		}
		
		$$('#GalleryList li img').each(function(element){
			element.addEvent('click', function(){
				this.setDisplay(element.getProperty('alt'));
			}.bind(this));
		}.bind(this));
	},
	
	SlidePosition: function(){
		/* Set Position */
		var fx = this.BxGallery.effects({duration: 500, transition: Fx.Transitions.Quart.easeOut});	
		fx.start({
			'top': this.bodyImage.getCoordinates().bottom,
			'left': ( window.getScrollWidth().toInt() - this.BxGallery.getCoordinates().width ) / 2
		}).chain(function(){
			fx.start({
				'opacity': 1
			});
		});
		
		this.overlay.addEvent('click', function(){
			this.end();
		}.bind(this));
	},
	
	remove: function(){
		this.BxGallery.remove();
		//this.bodyImage.remove();
	}
});

GalleryAjax.implement(new Events, new Options);