var SlideBox = new Class({
	
	
	Implements: Options,
	options:{
		resizeDuration: 600,
		resizeTransition: Fx.Transitions.Circ.easeOut,
		initialWidth: 250,
		initialHeight: 250,
		padding: 10,		
	},
	
	initialize:function(options){
		this.setOptions(options);
		this.currentPanel=0;
		this.panels=[];

		
		this.anchors = $$("a[rel=slidebox]");
		this.anchors.each(function(a){
			a.addEvent("click",this.open.bindWithEvent(this,a));
			
		},this);
		
		this.overlay = new Element("div",{
			id:"slideBoxOverlay",
			styles:{
				top:'0',
				position:'absolute'
			},
			events:{
				click:this.close.bindWithEvent(this)
			}
		}).inject(document.body,"top");
		
		this.slideBox = new Element("div",{
			id:"slideBox",
			styles:{
				top:'0'
			},
			events:{
				click:this.close.bindWithEvent(this)
			}
		}).inject(document.body,"top");		

		var panA=new Element("div",{
			'class':"slideboxPanel",
			styles: {
				position:'absolute',
				opacity:0,
				
			}
		}).inject(this.slideBox,"top");
		var panB=panA.clone().inject(this.slideBox,"top");
		var panC=panA.clone().inject(this.slideBox,"top");
		var panD=panA.clone().inject(this.slideBox,"top");
		this.panels.push(panA);
		this.panels.push(panB);	
		this.panels.push(panC);	
		this.panels.push(panD);		
		this.active=false;
		this.step=1;
		//add keyboard events
		document.addEvent("keydown",this.keyboardListener.bindWithEvent(this));
		
		this.prevLink = new Element("a", {id: "slideBoxPrev", 
										  href: "#",title:"Give your mouse a break, use your left arrow."}).inject(this.slideBox);		
		this.nextLink = this.prevLink.clone().setProperties({id:"slideBoxNext",
		 													 title:"Give your mouse a break, use your right arrow."}).injectInside(this.slideBox);
		this.prevLink.addEvent("click", this.changeImage.bindWithEvent(this, -1));
		this.nextLink.addEvent("click", this.changeImage.bindWithEvent(this, 1));		
				
	},
	open: function(event,link){
		this.active = true;
		var size = window.getSize();
		var scroll = window.getScroll();
		var scrollSize = window.getScrollSize();
		this.overlay.setStyles({
			display: "block",
			opacity:0,
			width: scrollSize.x,
			height: scrollSize.y
		});
		this.overlay.set("tween",{transition:'sine:in'});	
		
		this.slideBox.setStyles({
			display: "block",
			opacity:1,
			width: scrollSize.x,
			height: scrollSize.y
		});
		//this.setNavLinks(link).bind(this);
		this.prevLink.setPosition({x:0,y:(size.y + this.prevLink.getSize().y + scroll.y)/2});
		this.nextLink.setPosition({x:size.x-this.nextLink.getSize().x,y:(size.y + this.prevLink.getSize().y + scroll.y)/2});
		
							
		this.overlay.fade(0.8);
		this.startX=size.x + 100;
		this.startLoad(link);
		this.setNavLinks(link);
		return false;
	},

		
	startLoad: function(link){
		if(!link) return;
		this.currentPanel=this.currentPanel + 1;
		if(this.currentPanel>1) this.currentPanel=0;
		this.panel=this.panels[this.currentPanel];
		this.panel.hide();
		var dataRequest=new Request.JSON({url: link.get("href"),onSuccess: function(photo){
			this.loadImage(photo);
		}.bind(this)}).get();
		this.currentIndex = this.anchors.indexOf(link);
		
	},
	
	loadImage:function(photo){
		var image = new Asset.image(photo.url, {
				onload: function(){
					this.imageLoaded(this);
				}.bind(this)
			});
			this.panel.empty();
			//image.addClass((parseInt(photo.portrait)==1 ? "grid_5" : "grid_10"));
			image.injectInside(this.panel);
			this.createMetaData(photo);
	},
	
	createMetaData:function(photo){
		var div=new Element("div",{
			"class":'caption'
			
		});
		div.addEvent("mouseover",function(){
			this.fade(1);
		});
		div.addEvent("mouseout",function(){
			this.fade(0.5);
		});		
		div.setOpacity(0.5);
		div.set("html",'<a href="/photos/'+ photo.permalink + '">' + photo.title + "</a> " + " &mdash; " + photo.description);
		div.injectInside(this.panel);
		
	},
	
	imageLoaded:function(){
		this.panel.show();
		var size=window.getSize();
		var ws=window.getScroll();
		var curSize=this.panel.getSize();
		this.panel.setPosition({
			x:this.startX,
			y:(size.y - curSize.y)/2 + ws.y
		})
		this.curFx=new Fx.Tween(this.panel,{link:'chain',transition:Fx.Transitions.Cubic.easeIn,duration:300});
		this.curFx.start('opacity',0.7);
		this.curFx.start('left', (size.x - curSize.x)/2);
		this.curFx.start('opacity',1);
		
	},
	
	
	
	
	changeImage: function(event, step){
		
		event.preventDefault();
		var size = window.getSize();
		var pSize= this.panel.getSize();
		var link = this.anchors[this.currentIndex+step];
		if(!link) return false;	
		
		this.curFx.addEvent("chainComplete",function(){
			this.startLoad(link);
		}.bind(this));
		if(link!=this.anchors.getLast() && link!=this.anchors[0]){
			this.nextLink.fade(1);
			this.prevLink.fade(1);
		}		
		if(link==this.anchors.getLast()){
			this.nextLink.fade(0);
		}
		if(link==this.anchors[0]){
			this.prevLink.fade(0);
		}	
		this.curFx.start('opacity',0.5);
		if(step>=0){
			this.curFx.start('left',0 - pSize.x );
			this.startX=size.x + 100;
		}else{
			this.curFx.start('left',size.x + 100);
			this.startX=-1000;
		}
		
		//this.setNavLinks(link).bind(this);
		//this.startLoad(link);
		return false;
	},	
	
	
	
	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);
	},
	close: function(){

		this.panel.fade("out");
		this.overlay.fade("out");
		this.slideBox.fade("out");
		this.active = false;
	},
	setNavLinks: function(link){
		
		if(link==this.anchors.getLast()){
			this.nextLink.fade(0);
		}
		if(link==this.anchors[0]){
			this.prevLink.fade(0);
		}
		if(link!=this.anchors.getLast() && link!=this.anchors[0]){
			this.nextLink.fade(1);
			this.prevLink.fade(1);
		}
		
	}	
	
	
});