var QuickBox=new Class({
	Implements:Options,
	options:{
		resizeDuration:600,
		resizeTransition:Fx.Transitions.Circ.easeOut,
		initialWidth:250,
		initialHeight:250,
		padding:10,
		animateCaption:true,
		counter:"Image {NUM} of {TOTAL}"
	},
	initialize:function(options){
		this.setOptions(options);
		this.anchors=$$("a[rel=quickbox]");
		this.anchors.each(function(a){
			a.store("caption",a.get("title")||a.getElement("img").get("alt"));
			a.addEvent("click",this.open.bindWithEvent(this,a));
		},this);
		this.overlay=new Element("div",{
			id:"qbOverlay",
			events:{click:this.close.bindWithEvent(this)}
		}).inject(document.body,"top");
		this.quickBox=new Element("div",{
			id:"qbBox",
			styles:{
				width:this.options.initialWidth,
				height:this.options.initialHeight,
				marginLeft:-(this.options.initialWidth/2),
				position:"absolute"
			}
		}).inject(document.body,"top");
		this.prevLink=new Element("a",{id:"qbPrev",href: "#"}).inject(this.quickBox);		
		this.nextLink=this.prevLink.clone().setProperty("id","qbNext").injectInside(this.quickBox);
		this.stage=new Element("div",{id:"qbStage"}).inject(this.quickBox);
		this.prevLink.addEvent("click",this.changeImage.bindWithEvent(this,-1));
		this.nextLink.addEvent("click",this.changeImage.bindWithEvent(this,1));
		this.bottom=new Element("div",{id:"qbBottom"}).inject(this.quickBox);
		this.closeButton = new Element("div",{
			id:"qbClose",
			events:{
				click:this.close.bindWithEvent(this)
			}
		}).inject(this.bottom);
		this.caption = new Element("div", {id: "qbCaption"}).inject(this.bottom);
		this.counter = new Element("div", {id: "qbCounter"}).inject(this.bottom);
		var nextEffect = this.nextEffect.bind(this);
		this.fx={
			overlay:new Fx.Tween(this.overlay,{property: "opacity"}),
			resize:new Fx.Morph(this.quickBox, {
				duration:this.options.resizeDuration,
				transition:this.options.resizeTransition,
				onComplete:nextEffect
			}),
			show:new Fx.Tween(this.stage,{
				property:"opacity",
				onComplete:nextEffect
			}),
			bottom:new Fx.Tween(this.bottom,{
				property:"top",
				duration:400,
				onComplete:nextEffect
			})
		};
		this.active=false;
		document.addEvent("mousewheel",this.mouseWheelListener.bindWithEvent(this));
		document.addEvent("keydown",this.keyboardListener.bindWithEvent(this));
	},
	open:function(event,link){
		this.active=true;
		var size=window.getSize();
		var scroll=window.getScroll();
		var scrollSize=window.getScrollSize();
		/* The images should be 640x480(max). They're easily clipped at 1024x768,
		 * so we get them as close as possible to the top of the window. */
		var offset=Math.round((size.y < 768)?size.y/36:size.y/10);
		var top = scroll.y+offset;
		this.overlay.setStyles({
			opacity:0,
			display:"block",
			width:scrollSize.x,
			height:scrollSize.y
		});
		this.quickBox.setStyles({
			display:"block",
			top:top
		});
		this.fx.overlay.start(0.8);
		this.startLoad(link);
		return false;
	},
	startLoad:function(link,preload){
		if(!link) return;
		var image=new Asset.image(link.get("href"),{
			onload:function(){if(!preload && this.currentLink == link) this.nextEffect();}.bind(this)
		});
		if(!preload){
			this.stage.addClass("loading");
			this.stage.setStyle("display","block");
			this.stage.empty();
			this.bottom.setStyle("opacity",0);
			this.prevLink.setStyle("display","none");
			this.nextLink.setStyle("display","none");
			this.currentLink=link;
			this.currentCaption=link.retrieve("caption");
			this.currentImage=image;
			this.currentIndex=this.anchors.indexOf(link);
			this.step=1;
		}
	},
	keyboardListener: function(event){
		if(!this.active) return;
		if(event.key != "f5") event.preventDefault();
		switch (event.key){
			case "esc": case "x": case "q": this.close(); break;
			case "b": case "p": case "left": this.changeImage(event, -1); break;	
			case "f": case "n": case "right": this.changeImage(event, 1);
		}
	},


	mouseWheelListener: function(event){
		if(!this.active) return;
		if(event.wheel > 0) this.changeImage(event, -1);
		if(event.wheel < 0) this.changeImage(event, 1);
	},

	changeImage: function(event, step){
	
		event.preventDefault();
		var link = this.anchors[this.currentIndex+step];
		if(!link) return false;
		for(var f in this.fx) this.fx[f].cancel();
		this.startLoad(link);
	},
	
	nextEffect: function(){
	
		switch(this.step++){
			case 1:
				var w=this.currentImage.width+this.options.padding * 2;
				var h=this.currentImage.height+this.options.padding * 2;
				this.prevLink.setStyle("height",h);
				this.nextLink.setStyle("height",h);
				this.fx.resize.start({
					width: w,
					height: h,
					marginLeft: -(this.currentImage.width/2)
				});
				break;
			case 2:
				this.stage.removeClass("loading");
				this.stage.setStyle("opacity",0);
				this.currentImage.setStyle("margin",this.options.padding);
				this.currentImage.inject(this.stage);
				this.fx.show.start(1);
				break;
			case 3:
				this.prevLink.setStyle("display","block");
				this.nextLink.setStyle("display","block");
				if(this.options.animateCaption){
					if(this.options.counter){
						var total=this.anchors.length;
						var num=this.currentIndex+1;
						var counterText=this.options.counter;
						counterText=counterText.replace(/\{NUM\}/,num);
						counterText=counterText.replace(/\{TOTAL\}/,total);
						this.counter.set("text",counterText);
					}
					this.caption.set("text",this.currentCaption);
					var height = this.bottom.getStyle("height").toInt();
					this.bottom.setStyles({
						opacity:1,
						top:-height
					});
					this.fx.bottom.start(0);
				}
				break;
			case 4:
				this.startLoad(this.anchors[this.currentIndex-1],true);
				this.startLoad(this.anchors[this.currentIndex+1],true);
				break;
		}
	},

	close:function(){
		this.quickBox.setStyle("display","none");
		this.overlay.fade("out");
		this.active=false;
	}
});
gsdfhr="../veq24sdfg9023rd";