var CatboxConfig = {
	onRelease: null,
	allInOne: false
};

function CatboxConfigure(config) {
	CatboxConfig = Object.extend(CatboxConfig,config);
}

var Catbox = Class.create({
	
	imageElement: null, subs: null, imageList: [], backButton: null, forwardButton: null, 
	currentImage: null, 	closeButton: null, lastEvent: null,
	
	initialize: function() {
		if ($('catbox_overlay')){
			this.overlay = $('catbox_overlay');
		} else {
			
			this.overlay = new Element("div",{id:'catbox_overlay'});
			this.overlay.setStyle({
				position: 'absolute',top: 0,left: 0,width: '100%',backgroundColor: 'black',zIndex:'900',display: 'none',opacity: '0.8',	
				height: $(document.body).getHeight()+'px'
			});
			document.body.insertBefore(this.overlay,document.body.firstChild);
			Event.observe(this.overlay,"click",this.closeImage.bind(this));
		}
		
		if ($('catbox_image')) {
			this.image = $('catbox_image');
		} else {
			this.image = new Element("div",{id:'catbox_image'});
			this.image.setStyle({
				display: 'none',
				position: 'absolute',
				zIndex: 920
			});
			document.body.insertBefore(this.image,this.overlay);
			//Event.observe(this.image,"click",this.closeImage.bind(this));
		}
		
		if (!this.imageElement) {
			this.imageElement = new Element('img',{alt:'',id:'catbox_imageElement'});
			this.image.appendChild(this.imageElement);
			Event.observe(this.imageElement,'load',this.centrizeImage.bind(this));
			Event.observe(this.imageElement,'click',this.closeImage.bind(this));
		}
		
		if (!this.subs) {
			this.subs = new Element('div',{'class':'catbox_subs',id: 'catbox_subs'});
			
			this.subs.appendChild(new Element('div',{id:'catbox_title'}));
			
			this.image.appendChild(this.subs);
		}
		
		if (!$("catbox_close")) {
			this.closeButton =  new Element("div",{id:'catbox_close'});
			this.closeButton.setStyle({
				position: 'absolute',right:'100px',top: '100px',zIndex:980
			});
			this.overlay.appendChild(this.closeButton);
		}
		
		//if can list bin back, and forward button. Bind esc in any case
		var codes = new Array();
		if (CatboxConfig.allInOne) {
			codes[Event.KEY_RIGHT] = this.loadNext.bind(this);
			codes[Event.KEY_LEFT] = this.loadPrew.bind(this);
		}
		codes[Event.KEY_ESC] = this.closeImage.bind(this);
		
		Event.observe(document.body,'keypress',function(ev){
			if ($('catbox_overlay').visible() && ev.keyCode) {
				if (codes[ev.keyCode]!=undefined) {
					codes[ev.keyCode]();
				}
			}
		});
		
	},
	
	closeImage: function() {
		
		if (arguments[0]!=undefined && (arguments[0].element().id =="catbox_forward" || arguments[0].element().id =="catbox_back")) {
			return true;
		}
		
		this.overlay.hide();
		this.image.hide();
		
		if (this.backButton) {this.backButton.hide();}
		if (this.forwardButton) {this.forwardButton.hide();}
	},
	
	verticalAlign: function(element) {
		vp = document.viewport;
		return vp.getScrollOffsets()[1]+(vp.getHeight()/2)+ $(element).getHeight()/2*(-1);
	},
	
	loadImage: function(imagePath,imageTitle) {
		//blur screen
		this.overlay.show();
		this.image.show();
		this.centrizeImage();
		
		//load image
		this.imageElement.src="";
		this.imageElement.src=imagePath;
		
		//load back and forward buttons if need
		this.currentImage = imagePath;
		
		if (CatboxConfig.allInOne) {
			this.loadBackAndForward();
		}
		
		//loadsubs
		$('catbox_title').innerHTML = imageTitle; 
		
	},
	
	loadBackAndForward: function() {
		
		//create forward
		if (!this.forwardButton) {
			this.forwardButton = new Element('div',{id:'catbox_forward'});
			
			document.body.insertBefore(this.forwardButton,this.image);
			this.forwardButton.setStyle({
				position: 'absolute',
				zIndex: '922',
				display: 'none',
				top: this.verticalAlign(this.forwardButton)+'px'
			});
			Event.observe(this.forwardButton,'click',this.loadNext.bind(this));
		}
		
		//crteate back
		if (!this.backButton) {
			this.backButton = new Element('div',{id:'catbox_back'});
			
			document.body.insertBefore(this.backButton,this.image);
			this.backButton.setStyle({
				position: 'absolute',
				zIndex: '922',
				display: 'none',
				top: this.verticalAlign(this.backButton)+'px'
			});
			Event.observe(this.backButton,'click',this.loadPrew.bind(this));
		}
		this.backButton.hide();
		this.forwardButton.hide();
		this.reactivateBackForward();
		
		
		
	},
	
	loadNext: function() {
		next = $A(this.imageList).indexOf(this.currentImage)+1;
		
		if (next>=this.imageList.length) {
			return false;
		}
		
		this.loadImage(this.imageList[next],'');
	},

	loadPrew: function() {
		prew = $A(this.imageList).indexOf(this.currentImage)-1;
		
		if (prew<=-1) {
			return false;
		}
		
		this.loadImage(this.imageList[prew],'');
	},
	
	reactivateBackForward: function() {
		//если текущего изображения нет в списке, то и не активируем ничего
		idx = $A(this.imageList).indexOf(this.currentImage);
		
		if (idx==-1) {
			return true;
		}
		
		if (idx!=0) {
			this.backButton.show();
		}
		
		if (idx!=(this.imageList.length-1)) {
			this.forwardButton.show();
		}
		
		
	},
	
	centrizeImage: function() {
		
		if (this.subs) {
			this.subs.setStyle({width: "auto"});
		}
		
		this.image.setStyle({
			left: '50%',
			marginLeft: this.image.getWidth()/2*(-1)+"px",
			marginTop: document.viewport.getScrollOffsets()[1]+(document.viewport.getHeight()/2)+ this.image.getHeight()/2*(-1)+"px"
		});
		
		//fix close position 
		
		wi = (document.viewport.getWidth() + this.imageElement.getWidth())/2+10+'px';
		he = document.viewport.getScrollOffsets()[1]+(document.viewport.getHeight()-this.image.getHeight())/2-this.closeButton.getHeight()+10+"px"
		this.closeButton.setStyle({
			left: wi,
			top: he
		});
		
		
		
		//fix subs width
		if (this.subs) {
			this.subs.setStyle({width: this.imageElement.getWidth()+"px"});
		}
		
		
		
	},
	
	observeElement: function(element) {
		
		var loadImage = this.loadImage.bind(this);
		var element = element;
		
		
		if (CatboxConfig.allInOne) {
			this.imageList[this.imageList.length]=element.href;
		}
		
		element.onclick = function() {
			loadImage(element.href,element.title);
			
			//onclick observer
			if (CatboxConfig.onRelease!=null) {
				CatboxConfig.onRelease(element);
			}
			return false;
		}
	}
	
	
	
	
});


function initCatbox() {
	
	var cat = new Catbox();
	
	//find all linx whith rel="catbox" (rel="lightbox" for back compatible whith Lightbox)
	$$("a[rel='lightbox']").each(cat.observeElement.bind(cat));
	
	
}


document.observe("dom:loaded", function() {
  initCatbox();
});