/*
Script: gallery.js
		
License:
        MIT-style license.
		
Note:
		Don't forget to insert "<script language="Javascript" type="text/javascript" src="js/mootools.js"></script>" into the head page before this js file.

*/


var Gallery = new Class({
	
	options: {
		selector : '.gbox',
		gallerySelector : '.gcontainer',
		opener : '.gboxarrow',
		opacity : 0.6,
		playerSpeed : 3500,
		slideLength : 6,
		preloader : false,
		upscaling : false,
		imageSize : {
			width : 640,
			height : 480
		},
		thumbWidth : 106,
		useSections : false,
		fileManager : false
	},
	
	initialize : function(options) {
		this.setOptions(options);
		
		this.initialized = false;
		
		//set behavior
		this.setBehavior();
		this.setMiniGallery();
	},
	
	build : function(pictID, sectionID){
		//add an overlay
		this.setOverlay();
		
		//open gallery
		this.openGallery(pictID, sectionID);
		
		//set events
		//recenter on resize
		window.addEvent('resize', function(e){
			this.setWrapperPosition();
		}.bind(this));
		
		if (window.ie6) {
			window.onscroll = function(){
				//set gallery position
				this.setWrapperPosition();
			}.bind(this);
		}
	},
	
	setOverlay : function(){
		//build the overlay
		this.overlay = new Element('div', {
			id : 'gallery-overlay'
		}).inject(document.body);
		
		this.overlay.setStyle('height', window.getSize().scrollSize.y);
		
		//make an fx
		var fx = new Fx.Style(this.overlay, 'opacity', {
			onComplete : function(){
				if (!this.overlay.getStyle('opacity')) {
					this.overlay.remove();
				}
			}.bind(this)
		}).start(0, this.options.opacity);
		
		//add click event to remove
		this.overlay.addEvent('click', function(){
			this.closeGallery(fx);
		}.bind(this));
	},
	
	openGallery : function(pictID, sectionID){
	
		//gallery alerady exist?
		if (this.initialized) {
			//set gallery position
			this.setWrapperPosition();
			
			//Load first gallery
			this.loadGallery(sectionID, $('gallery-sections').getChildren()[sectionID], pictID);
			
			//display gallery
			this.wrapper.setStyle('display', 'block');
			this.wrapperFx.start(1);
			pictID = (pictID == false) ? 0 : pictID; 
			$('gallery-thumbs').getElements('img')[pictID].fireEvent('click', '', 500);
		} else {
			//build it
			this.buildGallery(pictID, sectionID);
			this.initialized = true;
		}
		
		//check if we need to slide slider (uh)
		if (pictID) {
			var number = Math.ceil((pictID+1) / 4)-1;
			this.sliderFx.start(-number * 106 * 4);
			this.counterControls = number;
		}
	},
	
	buildGallery : function(pictID, sectionID){
		//make a container
		
		this.wrapper = new Element('div', { id : 'gallery-wrapper'}).inject(document.body);
		this.wrapperFx = new Fx.Style(this.wrapper, 'opacity', {
			onComplete : function(){
				if (this.wrapper.getStyle('opacity') == 0) {
					this.wrapper.setStyle('display', 'none');
				} 
			}.bind(this)
		});
		
		//Determine wrapper size
		if (!this.buildSections()) {
			
			this.wrapper.addClass('small');
			this.options.slideLength -= 2;
		}
		
		
		//define static size
		this.size = {
			gallery : this.wrapper.getSize(),
			window : window.getSize()
		};			
		
		this.setWrapperPosition();
		
		//Create elements
		new Element('div', { id : 'gallery-picture' }).inject(this.wrapper, 'top');
		if (this.options.preloader) new Element('div', { id : 'gallery-preloader' }).injectTop(this.wrapper);
		new Element('img', {
			id : 'gallery-close',
			src : '/img/gallery/closebox.png',
			'class' : 'png',
			events : {
				click : function(){
					this.overlay.fireEvent('click');
				}.bind(this)
			}
		}).inject(this.wrapper);
		var bottom = new Element('div', { id : 'gallery-bottom' }).inject(this.wrapper);
		var slider = new Element('div', { id : 'gallery-slider' }).inject(bottom);
		new Element('ul', { id : 'gallery-thumbs' }).inject(slider);
		this.buildControls();
		
		//Load first gallery
		this.loadGallery(sectionID, $('gallery-sections').getChildren()[sectionID], pictID);
		
	},
	
	setWrapperPosition : function(){
		this.size.window = window.getSize();
		var ieCorrection = (window.ie6) ? window.getSize().scroll.y : 0;
		this.wrapper.setStyles({
			top : (this.size.window.size.y - this.size.gallery.size.y) / 2 + ieCorrection,
			left : (this.size.window.size.x - this.size.gallery.size.x) / 2
		});
	},
	
	buildSections : function(){
		var ul = new Element('ul', { id : 'gallery-sections' }).inject(this.wrapper);
		
		this.sections.each(function(section, i){
			if(!this.options.fileManager && (!section[0].getParent().getPrevious().getChildren().length || section[0].getParent().getPrevious().getElement('a') === null)) {
				var text = '';
			}
			else if (this.options.fileManager)
			{
				var text = section[0].getPrevious().getText();
			}
			else
			{
				var text = section[0].getParent().getPrevious().getElement('a').getText();
			}
			
			var li = new Element('li').setText(text).inject(ul);
			
			//add event to load related gallery
			li.addEvent('click', function(){
				// load gallery
				this.loadGallery(i, li);
			}.bind(this));
		}, this);
		if (this.sections.length > 1 && this.options.useSections) {
			return true;
		} else {
			ul.setStyle('display', 'none');
			return false;
		}
	},
	
	buildControls : function(){
		new Element('div', { id : 'gallery-controls-bg', 'class' : 'png' }).inject(this.wrapper);
		var wrapper = new Element('div', { id : 'gallery-controls' }).inject(this.wrapper);
		
		//add fx on thumbs list
		var fx = new Fx.Style('gallery-slider', 'left');
		this.sliderFx = fx;
		
		//buttons
		new Element('a', { id : 'gallery-controls-previous', 'class' : 'png' }).inject(wrapper);
		new Element('a', { id : 'gallery-controls-play' }).inject(wrapper);
		new Element('a', { id : 'gallery-controls-next', 'class' : 'png' }).inject(wrapper);		
		
		this.counterControls = 0;
		this.autoPlay = false;
		
		$('gallery-controls-next').addEvent('click', function(){
			var max = ($$('#gallery-thumbs li').length / this.options.slideLength);
			if (this.counterControls < max - 1){
				fx.start($('gallery-slider').getStyle('left').toInt() - this.options.thumbWidth * this.options.slideLength);
				this.counterControls++;
			}
		}.bind(this));
		
		$('gallery-controls-previous').addEvent('click', function(){
			if (this.counterControls > 0){
				fx.start($('gallery-slider').getStyle('left').toInt() + this.options.thumbWidth * this.options.slideLength);
				this.counterControls--;
			}
		}.bind(this));
		
		$('gallery-controls-play').addEvent('click', function(){
			if (!this.autoPlay) {
				//start a periodical if not exist
				this.autoPlay = this.autoPlayer.periodical(this.options.playerSpeed, this, fx);
				//change image
				$('gallery-controls-play').addClass('p');
			} else {
				$('gallery-controls-play').removeClass('p');
				$clear(this.autoPlay);
				this.autoPlay = false;
			}
		
		}.bind(this));
	},
	
	autoPlayer : function(fx){
		this.activeThumb++
		
		if ($('gallery-thumb-' + this.activeThumb)) {
			$('gallery-thumb-' + this.activeThumb).fireEvent('click');
			//slide tous les 4
			if (this.activeThumb % this.options.slideLength == 0) $('gallery-controls-next').fireEvent('click');
		} else {
			this.activeThumb = 0;
			this.counterControls = 0;
			$('gallery-thumb-' + this.activeThumb).fireEvent('click');
			//slide au d�but
			fx.start(0);
		}
	},
	
	killAutoPlayer : function(){
		//kill autoplay if needed
		if (this.autoPlay) {
			$('gallery-controls-play').removeClass('p');
			$clear(this.autoPlay);
			this.autoPlay = false;
		}
	},
	
	loadGallery : function(id, li, pictID){
		//Clean previous if exist
		$('gallery-thumbs').empty();
		
		//return to left
		this.activeThumb = 0;
		this.counterControls = 0;
		$('gallery-slider').setStyle('left', 0);
		
		//fill with new elements
		var size = this.options.imageSize;
		
		this.sections[id][0].getChildren().each(function(img, i){
			var infos = this.options.fileManager ? img.getFirst().getFirst() : img.getFirst();
			var li = new Element('li').inject('gallery-thumbs');
			var thumb = new Element('img', {
				id: 'gallery-thumb-' + i,
				rel: i,
				styles : {
					opacity : 0
				},
				events : {
					load : function(){
						//setsize
						var ratio = this.height / this.width;
						if (ratio <= size.height / size.width) {
							//image is larger
							this.width = 96;
							this.height = 96 * ratio;
						} else {
							//image is heigher
							this.height = 72;
							this.width = 72 / ratio;
						}
						
						this.setStyle('marginTop', (72 - this.height) / 2);
						
						new Fx.Style(this, 'opacity').start(0, 1);
					}
				},
				src: infos.getProperty('src')
			}).inject(li);
			
			//add click event
			thumb.addEvent('click', function(){
				var pict = this.options.fileManager ? img.getFirst().getProperty('href') : img.getProperty('href');
				this.loadPicture(pict);
				this.setBorder(thumb);
				this.activeThumb = thumb.getProperty('rel');
			}.bind(this));
		}, this);
		
		
		//open first image
		if (!pictID) {
			$('gallery-thumbs').getElement('img').fireEvent('click', '', 500);
		} else {
			$('gallery-thumbs').getElements('img')[pictID].fireEvent('click', '', 500);
		}
			
		
		//set gallery active
		if (this.activeGallery) this.activeGallery.removeClass('s');
		this.activeGallery = li.addClass('s');
		this.activeThumb = 0;
	},
	
	loadPicture : function(url) {
		$('gallery-picture').empty();
		var size = this.options.imageSize;
		var viewSize = {
			width : $('gallery-picture').getStyle('width').toInt(),
			height : $('gallery-picture').getStyle('height').toInt()
		}
		var upscaling = this.options.upscaling;
		new Element('img', {
			styles : { opacity : 0 },
			events : {
				load : function(){
					//determine width & height if not standard
					if ((upscaling && (this.width < size.width || this.height < size.height)) || this.width >= size.width || this.height >= size.height) {
						var ratio = this.height / this.width;
						if (ratio <= size.height / size.width) {
							//image is larger
							this.width = size.width;
							this.height = size.width * ratio;
						} else {
							//image is heigher
							this.height = size.height;
							this.width = size.height / ratio;
						}
					}
					
					this.setStyles({
						'marginTop' : (viewSize.height - this.height) / 2,
						'marginLeft': (viewSize.width - this.width) / 2
					});
					
					//add the new image with a fade
					new Fx.Style(this, 'opacity').start(1);
				}
			},
			src : url
		}).inject('gallery-picture');
	},
	
	setBorder : function(target){
		if (!this.follower) {
			this.follower = new Element('div', {
				id : 'gallery-follower'
			}).inject('gallery-slider');
			
			this.follower.fx = new Fx.Style(this.follower, 'left');
		}
		var coord = target.getParent().getPosition().x - $('gallery-thumbs').getPosition().x;
		this.follower.fx.start(coord);
	},
	
	closeGallery : function(fx){
		//remove overlay
		fx.start(0);
		
		//hide gallery
		this.wrapperFx.start(0);
		
		this.killAutoPlayer();
	},
	
	setBehavior : function(){
		//get some elements
		this.root = $$(this.options.selector);
		this.opener = this.root.getElements(this.options.opener);
		this.sections = [];
		
		this.root.each(function(sel){
			this.sections.push(sel.getElements(this.options.gallerySelector));
		}, this);
		
		//add event on h4
		this.opener.each(function(el, i){
			if(!el.length) return
			el[0].addEvent('click', function(e){
				new Event(e).stop();
				this.build(false, i);
			}.bind(this));
		}, this)
	},
	
	setMiniGallery : function(){
		$$('.gcontainer').each(function(gcontainer){
			gcontainer.nb_steps = gcontainer.getElements('a').length-2;
			gcontainer.crt=0;
			gcontainer.step_width=71;
			gcontainer.slider = new Fx.Styles(gcontainer, {
				duration: 500, 
				wait:false, 
				transition: Fx.Transitions.Expo.easeIn
			});	
		});
		
		$$('.gboxbtright').each(function(btn){
			btn.addEvents({
				'mouseover': function(){
					this.addClass('overnext');
				},
				
				'mouseout': function(){
					this.removeClass('overnext');	
				},
				
				'mousedown': function(event){
					this.press=true;
					this.pressNext(false, btn.getPrevious().getFirst());
				}.bind(this),
				
				'mouseup': function(event){
					this.press=false;
				}.bind(this)
			});
		}, this);
		
		$$('.gboxbtleft').each(function(btn){
			btn.addEvents({
				'mouseover': function(){
					this.addClass('overprev');
				},
				
				'mouseout': function(){
					this.removeClass('overprev');	
				},
				
				'mousedown': function(event){
					this.press=true;
					this.pressPrev(false, btn.getNext().getFirst());
				}.bind(this),
				
				'mouseup': function(event){
					this.press=false;
				}.bind(this)
			});
		}, this);
		
		//$('previous').setStyle('opacity',0.4);
		
		this.bindThumbsWithGallery();
	},
	
	pressNext : function(wait, controller){
		if(controller.crt<controller.nb_steps){
			if (!this.press && wait) return;
			if (this.press && wait) this.timer = this.pressNext.delay(100, this, [false, controller]);
			else this.slideNext(controller);
		}
	},
	
	pressPrev : function(wait, controller){
		if(controller.crt > 0){
			if (!this.press && wait) return;
			if (this.press && wait) this.timer = this.pressPrev.delay(100,this);
			else this.slidePrev(controller);
		}
	},
		
	slidePrev : function(controller){
		$clear(this.timer);
		controller.crt--;
		controller.slider.start({
			'margin-left': -controller.crt*controller.step_width
		});
		if(controller.crt==0){
			$('previous').setStyle('opacity',0.4);
		}else if($('next').getStyle('opacity')==0.4) $('next').setStyle('opacity',1);
		
		if(this.press){
			this.pressPrev.delay(600,this, [true, controller]);
		}
	},
	
	slideNext : function(controller){
		$clear(this.timer);
		controller.crt++;
		controller.slider.start({
			'margin-left': -controller.crt*controller.step_width
		});
		if(controller.crt==controller.nb_steps){
			$('next').setStyle('opacity',0.4);
		}else if($('previous').getStyle('opacity')==0.4) $('previous').setStyle('opacity',1);
				
		if(this.press){
			this.pressNext.delay(600,this, [true, controller]);
		}
	},
	
	bindThumbsWithGallery : function(){
		this.sections.each(function(section, s){
			var target = this.options.fileManager ? section[0].getElements('li a.opener') : section[0].getChildren();
			target.each(function(thumb, i){
				thumb.addEvent('click', function(e){
					new Event(e).stop();
					//open gallery with pict ID and section ID
					this.build(i, s);
				}.bind(this));
			}, this);
		}, this);
	}
});

Gallery.implement(new Options());

Window.addEvent('domready', function(){
	if ($$('.gcontainer').length > 0) new Gallery();
	if ($$('.gallery_images').length)
		gal = new Gallery({
			selector : '.gallery_preview',
			gallerySelector : '.gallery_images',
			useSections: true
		});
	if ($$('.filemanager_picture').length)
		gal = new Gallery({
			selector : '.image_manager',
			gallerySelector : '.filemanager_picture',
			useSections: false,
			fileManager : true
		});
});