var Lightbox = Class.create({
	
	initialize: function( params ){
		
		this.bgcolor = params.bgcolor || "#000";
		this.bgopacity = params.bgopacity || 0.8;
		this.bordercolor = params.bordercolor || "#fff";
		this.borderwidth = params.borderwidth || 10;
		this.captionbgcolor = params.captionbgcolor || "#fff",
		this.captionclass = params.captionclass || "";
		
		this.root = $(document.getElementsByTagName('body')[0]);
		this.closeButton = $('lightboxCloseButton');
		this.nextButton = $('lightboxNextButton');
		this.prevButton = $('lightboxPrevButton');
		
		this.boundResize = this.resize.bind( this );
		this.boundClose = this.close.bind( this );
		this.items = [];
		this.currentIdx = -1;
		this.openSession = false;
		
		this.overlay = new Element( 'div', { id: 'lightboxBg' }).setStyle( {
			backgroundColor: this.bgcolor,
            position: "absolute",
            left: 0,
            top: 0
		}).setOpacity(0);
		
		this.content = new Element( 'div', { id: 'lightboxContent' }).setStyle( {
			position:"absolute",
			border: this.borderwidth + "px solid " + this.bordercolor,
			zIndex:10
		}).setOpacity(0).observe( 'mouseover', this.mouseover.bind(this)).observe('mouseout', this.mouseout.bind(this));
		
		this.caption = new Element( 'div', {"class": this.captionclass}).setStyle({
			backgroundColor: this.captionbgcolor,
			position: "absolute",
			left: -this.borderwidth+"px",
			bottom: -(this.borderwidth*3)+"px",
			zIndex:11
		});
		
		this.closeButton.setStyle({
			position:"absolute",
			zIndex:20,
			cursor: "pointer"
		}).observe('click', this.boundClose );
		
		this.nextButton.setStyle({
			position:"absolute",
			zIndex:21,
			cursor:"pointer"
		}).hide().observe('click', this.nextItem.bind(this));
		
		this.prevButton.setStyle({
			position:"absolute",
			zIndex:22,
			cursor:"pointer"
		}).hide().observe('click', this.prevItem.bind(this));
		
		this.overlay.observe( 'click', this.close.bind(this) );
		this.root.observe('keyup', this.handleKey.bind(this));
		this.close();
	},
	mouseover: function( e ){
		if( this.items.length <= 1 || this.items[this.currentIdx].isGoogleMap ) return;
		this.nextButton.show();
		this.prevButton.show();
	},
	mouseout: function( e ){
		if( this.items.length <= 1 || this.items[this.currentIdx].isGoogleMap ) return;
		this.nextButton.hide();
		this.prevButton.hide();
	},
	nextItem: function( e ){
		var newIdx = this.currentIdx + 1 < this.items.length ? this.currentIdx + 1 : 0;
		this.items[newIdx].load(e);
	},
	prevItem: function( e ){
		var newIdx = this.currentIdx - 1 >= 0 ? this.currentIdx - 1 : this.items.length-1;
		this.items[newIdx].load(e);
	},
	handleKey: function( e ){
		if (e.keyCode == Event.KEY_ESC ) return this.close();
	},
	open: function( item ){
		
		Event.observe( window, 'resize', this.boundResize );
		Event.observe( window, 'scroll', this.boundResize );
		
		// remove old content, can't use prototypes update because of IE issues
		if( this.currentIdx !=-1 ) this.items[this.currentIdx].destroy();
		for( var i = 0; i < this.items.length; i++ ) if( this.items[i] == item ) this.currentIdx = i;
		
		this.root.insert( this.overlay );
		this.root.insert(this.content);
		
		item.getCaption() ? this.caption.update(item.getCaption()).show() : this.caption.hide();
		this.content.insert( item.content ).insert( this.caption ).insert( this.closeButton.show() ).setStyle({width:item.getWidth()+"px", height:item.getHeight()+"px"});
		
		if( this.items.length > 1 ) this.content.insert(this.nextButton).insert(this.prevButton);
		this.resize();
		
		new Effect.Opacity( this.content, {to:1, duration:0.5})
		new Effect.Opacity( this.overlay, {to:this.bgopacity, duration:0.5})
	},
	close: function( ){
		Event.stopObserving( window, 'resize', this.boundResize );
		Event.stopObserving( window, 'scroll', this.boundResize );
		
		if( this.items.length > 0 ) this.items[this.currentIdx].destroy();
		if( this.overlay.parentNode ) this.overlay.remove();
		if( this.content.parentNode ) this.content.remove();
		if( this.closeButton ) this.closeButton.hide();
		if( this.nextButton ) this.nextButton.hide();
		if( this.prevButton ) this.prevButton.hide();
		this.currentIdx = -1;
	},
	getDimensions: function(){
	       
 		var w = 0;
		var h = 0;

		if(!window.innerWidth){
			if(!(document.documentElement.clientWidth == 0)){
				w = document.documentElement.clientWidth;
				h = document.documentElement.clientHeight;
			}
			else{
				w = document.body.clientWidth;
				h = document.body.clientHeight;
			}
		}
		else{
			w = window.innerWidth;
			h = window.innerHeight;
		}
		return {width:w,height:h};
		
	},
	resize: function(){
		var dim = document.body.getDimensions();
		var winDim = document.viewport.getDimensions();
		var off = document.viewport.getScrollOffsets();
		var left = (winDim.width / 2 -  this.content.getWidth() / 2 ) + off.left;
		var top = (winDim.height / 2 - this.content.getHeight() / 2) + off.top;
		//this.overlay.setStyle({ width: dim.width +"px", height: dim.height + "px", left: off.left+"px", top:off.top+"px"});		
		this.overlay.setStyle({width:winDim.width + off.left + "px", height: winDim.height + off.top + "px"});
		this.content.setStyle({ left: left+"px", top: top+"px" });
		this.caption.setStyle({width:this.content.getWidth()-(this.borderwidth*2)+"px"})
		this.closeButton.setStyle({left:this.content.getWidth()-this.closeButton.getWidth()-this.borderwidth+"px", top:-this.borderwidth+"px"})
		this.prevButton.setStyle({left:-this.borderwidth+"px", top:this.content.getHeight()/2+"px"});
		this.nextButton.setStyle({left:this.content.getWidth()-this.nextButton.getWidth()-this.borderwidth+"px", top:this.content.getHeight()/2+"px"});
	}
});

var LightboxItem = Class.create({
	
	initialize: function( link, lightbox ){
		
		var link = $(link);
		this.lightbox = lightbox;
		this.url = link.readAttribute('href');
		this.caption = link.readAttribute('title') || null;
		this.isGoogleMap = this.url.indexOf('maps.google') != -1;
		this.width = 0;
		this.height = 0;
		this.content = null;
		
		if( this.isGoogleMap ){
			this.width = 510;
			this.height = 510;
		}
		
		link.observe( 'click',  this.load.bind(this));
		lightbox.items.push(this);
		
	},
	load: function( e ){
		if( this.isGoogleMap ){
			this.content = new Element( 'iframe', { src: this.url, width: this.width, height: this.height, frameborder:0, marginheight:0, marginwidth:0, scrolling:"no"});
			this.lightbox.open( this );
		}
		else{
			this.content = $(new Image());
			this.content.observe( 'load', function( e ){
				var target = e.target || e.srcElement || this.content;
				this.width = target.width;
				this.height = target.height;
				this.lightbox.open( this );
			}.bind(this));
			this.content.writeAttribute( 'src', this.url );
		}
		Event.stop(e);
	},
	getWidth: function(){
		return this.width;
	},
	getHeight: function(){
		return this.height;
	},
	getCaption: function(){
		return this.caption;
	},
	getContent: function(){
		return this.content;
	},
	destroy: function(){
		if( this.content ){
			if( this.content.parentNode ) this.content.remove();
			this.content = null;
		}
	}
})