window.addEvent('domready', function(){
new QuickBox();
}); 

var QuickBox = new Class({

	initialize: function(){
		this.anchors = $$("a[rel=NaMoo]");
		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.body = $(document.body);
		
		this.overlay = new Element("div", {
			styles: {
				background:'#000',
				position: "absolute",
				index:100,
				opacity:0,
				left:0,
				top:0
			},
			events: {
				click: this.close.bindWithEvent(this)
			}
		}).injectInside(this.body);
			
		this.quickBox = new Element("div", {
			styles: {			
				width:10,
				height:10,
				background:'#fff',
				position: "absolute",
				index:101,
				opacity:0,
				display:'block',
				marginTop:-5,
				marginLeft:-5,
				top: window.getScrollTop() + (window.getHeight()/2), 
				left: window.getScrollLeft() + (window.getWidth()/2)
			}
		}).injectInside(this.body);

		this.top = new Element("div", {
		styles: {			
				'position': 'absolute',
				'index': 104,
				'width': '100%',
				'height': 30,
				'display': 'block',
				'color':'#fff',
				'font-size':'12px',
				'font-family':'Arial',
				'top':-30,
				'left':0,
				'background':'#000',
				'cursor':'pointer'
			},
			events: {
				click:this.close.bindWithEvent(this)
			}
		}).inject(this.quickBox);
		
		this.prevLink = new Element("div", {
			styles: {			
				'position': 'absolute',
				'index': 104,
				'width': '50%',
				'height': '100%',
				'display': 'block',
				'color':'#fff',
				'font-size':'40px',
				'text-decoration':'none',
				'font-weight':700,
				'opacity':0.7,
				'cursor':'pointer',
				'font-family':'Arial'
			}
			
		}).inject(this.quickBox);
		
		this.prevLink.addEvent("click", this.changeImage.bindWithEvent(this, -1));
		
		this.nextLink = this.prevLink.clone().setProperty("id", "qbNext").injectInside(this.quickBox);
		this.nextLink.setStyles({'left':'50%'});
		
		this.nextLink.addEvent("click", this.changeImage.bindWithEvent(this, 1));
			
		this.stage = new Element("div", {id: "qbStage"}).inject(this.quickBox);
		
		var nextEffect = this.nextEffect.bind(this);
		var nextEffect2 = this.nextEffect2.bind(this);
		
		this.fx = {
			overlay: new Fx.Tween(this.overlay, {
				property: "opacity"
			}),
			quickBox: new Fx.Tween(this.quickBox, {
				property: "opacity"
			}),
			resize: new Fx.Morph(this.quickBox, {
				duration: 600,
				transition: Fx.Transitions.Circ.easeOut,
				onComplete: nextEffect2
			}),
			show: new Fx.Tween(this.stage, {
				property: "opacity"
			})
		};
	},
	
	open: function(event, link){
		this.active = true;
		
		this.overlay.setStyles({
			width:window.getScrollSize().x,
			height:window.getScrollSize().y,
			display: "block"
		}); 
		
		this.quickBox.setStyles({
			display: "block"
		});
	
		this.fx.overlay.start(0.8);
		this.fx.quickBox.start(1);
		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.empty();
			this.top.set("html", '<div style="position:absolute;top:8px;left:10px;">Loading...</div>');
			this.currentLink = link;
			this.currentImage = image;
			this.currentIndex = this.anchors.indexOf(link);
			this.currentCaption = link.retrieve("caption");
		}
	},
		
	changeImage: function(event, step){
		event.preventDefault();
		var link = this.anchors[this.currentIndex+step];
		if(!link) return false;
		this.startLoad(link);
	},
	
	nextEffect: function(){
				var w = this.currentImage.width;
				var h = this.currentImage.height;
				var ratio = w/h;
						
				var wi = window.getSize().x;
				var hi = window.getSize().y;
				var ratio_w = wi/hi;
						
				if(w > wi && ratio > ratio_w){
				w = wi-20;
				h = w/ratio;
				this.currentImage.width = w;
				this.currentImage.height = h;				
				} 
				
				if(h > hi && ratio < ratio_w){
				h = hi-80;
				w = h*ratio;
				this.currentImage.width = w;
				this.currentImage.height = h;
				}
				
				this.fx.resize.start({
					width: w,
					height: h,
					marginTop:-(h/2),
					marginLeft:-(w/2),
					opacity:1,
					top: window.getScrollTop() + (window.getHeight()/2), 
					left: window.getScrollLeft() + (window.getWidth()/2)
				});
				
				var total = this.anchors.length;
				var num = this.currentIndex + 1;
				if(total != 1){
				this.prevLink.set('html','<div style="position:absolute;top:45%;left:0;background:#000">&lt;</div>');
				this.nextLink.set('html','<div style="position:absolute;top:45%;right:0;background:#000">&gt;</div>');
				}
				var bottom_text1 = "<div style='position:absolute;top:8px;left:10px;'><b>"+this.currentCaption+"</b> &nbsp; &nbsp; ("+num+"/"+total+")</div>";
				var bottom_text2 = "<div style='position:absolute;top:8px;right:10px;'><b>X</b></div>";
				this.top.set("html", bottom_text1+bottom_text2);
				
	},
	
	nextEffect2: function(){
				this.stage.empty();
				this.currentImage.inject(this.stage);
				this.fx.show.start(1);
	},

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