var Balafia_Gallery = Class.create(
{
	node:		false,
	cache:		false,
	load:		false,
	image:		false,
	ratioImage:	false,
	mutex:		false,
	
	initialize: function(node)
	{
		this.node = node;
		this.setupResize();
		this.setupMouse();
		
		this.cache	=	this.node.down(".gallery_cache");
		this.load	=	this.node.down(".gallery_load");
		this.mutex	=	false;
	},
	
	setupResize: function()
	{
		this.setupImageRatio();
		
		Event.observe(document.onresize ? document : window, "resize", function() {
			var dimensionsGallery	=	this.node.getDimensions();
			var ratioGallery		=	dimensionsGallery.width / dimensionsGallery.height;
			
			this.image.className = "";
			
			if(ratioGallery > this.ratioImage){
				this.image.addClassName("expand_horizontal");
			}else{
				this.image.addClassName("expand_vertical");
			}
		}.bind(this));
	},
	
	setupImageRatio: function()
	{
		this.image			=	this.node.down("img");
		var dimensionsImage	=	this.image.getDimensions();
		
		this.ratioImage		=	dimensionsImage.width / dimensionsImage.height;	
	},
	
	setupMouse: function()
	{
		var button_prev = $(document.body).down(".button_prev");
		var button_next = $(document.body).down(".button_next");
		
		if(!button_prev || !button_next) return false;
		
		var button_prev_img = button_prev.down("img");
		var button_next_img = button_next.down("img");
		
		button_prev.observe("mousemove",function(event){
			var x = Event.pointerX(event);
			var y = Event.pointerY(event);
			
			x -= (button_prev_img.offsetWidth/2);
			y -= (button_prev_img.offsetHeight/2);
			button_prev_img.setStyle({top:y+"px",left:x+"px"});
		}).observe("click",this.changePrevImage.bindAsEventListener(this));
		
		button_next.observe("mousemove",function(event){
			var x = Event.pointerX(event);
			var y = Event.pointerY(event);
			
			x -= ((button_next_img.offsetWidth/2)+button_next.offsetLeft);
			y -= (button_next_img.offsetHeight/2);
			button_next_img.setStyle({top:y+"px",left:x+"px"});
		}).observe("click",this.changeNextImage.bindAsEventListener(this));
	},
	
	changePrevImage: function(event){
		if(this.mutex) return;
		this.mutex = true;
		
		var old_image = this.node.down("img");
		var new_image = this.loadPrevImage(old_image);
		
		if(old_image && new_image){
			new_image.className = old_image.className;
			
			old_image.morph("opacity:0",{
				duration: 1,
				after: function(){
					old_image.setStyle({display:"none"});
					this.cache.insert({top:old_image.remove()});
				}.bind(this)
			});
			
			new_image.setStyle({display:"none",opacity:0.01});
			this.image = new_image.remove();
			this.image.morph("opacity:1",{
				duration: 1,
				before: function(){
					new_image.setStyle({display:"block"});
					this.node.insert({top:this.image});
					this.setupImageRatio();
					this.mutex = false;
					Balafia_Textbox.instance.prevItemNumber();
				}.bind(this)
			});
		}
		
		if(event) event.stop();
		return false;
	},
	
	changeNextImage: function(event){
		if(this.mutex) return false;
		this.mutex = true;
		
		var old_image = this.node.down("img");
		var new_image = this.loadNextImage(old_image);
		
		if(old_image && new_image){
			new_image.className = old_image.className;
			
			old_image.morph("opacity:0",{
				duration: 1,
				after: function(){
					old_image.setStyle({display:"none"});
					this.cache.insert({bottom:old_image.remove()});
				}.bind(this)
			});
			
			new_image.setStyle({display:"none",opacity:0.01});
			this.image = new_image.remove();
			this.image.morph("opacity:1",{
				duration: 1,
				before: function(){
					new_image.setStyle({display:"block"});
					this.node.insert({top:this.image});
					this.setupImageRatio();
					this.mutex = false;
					Balafia_Textbox.instance.nextItemNumber();
				}.bind(this)
			});
		}
		
		if(event) event.stop();
		return false;
	},
	
	loadPrevImage: function(old_image)
	{
		var loadItem = this.load.down("a[href='"+old_image.src+"']");
		//	Do we have this image loaded? if so, return it
		var prev = loadItem.previous("a");
		if(!prev) prev = this.load.select("a").last();
		//	This should never happen, but if it does, return false
		if(!prev) return false;
		
		//	Now look in the cache for that image, if found, return it
		var new_image = this.cache.down("img[src='"+prev.href+"']")
		if(new_image) return new_image;
		
		this.mutex = false;
		
		//	We didn't find it, so we have to load it now, insert it and recall the change prev image function
		new_image = new Element("img",{src:prev.href});
		new_image.observe("load",function(){ this.changePrevImage(); }.bind(this));
		this.cache.insert({top:new_image});
		
		return false;
	},
	
	loadNextImage: function(old_image)
	{
		var loadItem = this.load.down("a[href='"+old_image.src+"']");
		//	Do we have this image loaded? if so, return it
		var next = loadItem.next("a");
		if(!next) next = this.load.select("a").first();
		//	This should never happen, but if it does, return false
		if(!next) return false;
		
		//	Now look in the cache for that image, if found, return it
		var new_image = this.cache.down("img[src='"+next.href+"']")
		if(new_image) return new_image;
		
		this.mutex = false;
		
		//	We didn't find it, so we have to load it now, insert it and recall the change prev image function
		new_image = new Element("img",{src:next.href});
		new_image.observe("load",function(){ this.changeNextImage(); }.bind(this));
		this.cache.insert({bottom:new_image});
		
		return false;
	}
	
});