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: 'transparent',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));
		}
		
		this.createImageElement();
		
		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({
				zIndex:980
			});
			this.image.appendChild(this.closeButton);
			Event.observe(this.closeButton,'click',this.closeImage.bind(this));
		}
		
		//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]();
				}
			}
		});
	},
	
	createImageElement: function() {
		if (!this.imageElement) {
			this.imageElement = new Element('img',{alt:'',id:'catbox_imageElement'});
			this.image.appendChild(this.imageElement);
			this.centrizeImage();
			//Event.observe(this.imageElement,'load',this.centrizeImage.bind(this));
			Event.observe(this.imageElement,'click',this.closeImage.bind(this));
		}
	},
	
	createHTMLElement: function() {
		if (!this.imageElement) {
			this.imageElement = new Element('div',{alt:'',id:'catbox_imageHTMLElement'});
			this.image.appendChild(this.imageElement);
			
			this.centrizeImage();
			//Event.observe(this.imageElement,'load',this.centrizeImage.bind(this));
		}
	},	
	
	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);
	},
	
	retativeVerticalAlign: function(element) {
		return (element.parentNode.getHeight()/2)-(element.getHeight()/2);
	},
	
	loadImage: function(imagePath,imageTitle) {
		//blur screen
		this.overlay.show();
		this.image.show();
		this.centrizeImage();
		
		
		//load image
		//какой был путь до этого
		
		if (this.imageElement.getAttribute('src') == imagePath) {
			return true;
		}
		
		if (this.imageElement.getAttribute('src')!=null) {
			//фиксируем ширину контейнера
			this.image.setStyle({width: this.imageElement.getWidth()+'px',height:this.imageElement.getHeight()+'px'});
		}
		
		
		this.imageElement.remove();
		this.image.setStyle({minWidth: '400px',minHeight:'200px'});
		this.image.addClassName("loaded");
		//this.centrizeImage();
		this.imageElement=false;
		this.createImageElement();
		this.currentImage=imagePath;
		this.imageElement.hide();
		this.imageElement.onload=this.resizeIFNeed.bind(this);
		this.imageElement.src=imagePath;
		
		if (CatboxConfig.allInOne) {
			this.loadBackAndForward();
		}
		
		//loadsubs
		$('catbox_title').innerHTML = imageTitle; 
	},
	loadHTML: function(url,type) {
		//blur screen
		this.image.addClassName("loaded");
		this.overlay.show();
		this.image.show();
		
		//load image
		this.imageElement.remove();
		this.image.setStyle({minWidth: '400px'/*,minHeight:'300px'*/});
		this.imageElement=false;
		this.createHTMLElement();
		this.currentImage=url;
		if(type&&type=='html'){
			this.imageElement.update(url);
		}else{	
			try{
				jQuery(this.imageElement).load(url,this._onload.bind(this));
			}catch(e){
				new Ajax.Updater(this.imageElement,url, {
					method: 'post',
					onComplete: this._onload.bind(this)
				});
			}
		}

	},
	_onload:function(addfunc){
		this.resizeIFNeed.bind(this)();
		if(CatboxConfig.load){
			CatboxConfig.load();
		}
		
	},
	resizeIFNeed:function() {
		this.imageElement.show();
		this.image.removeClassName("loaded");
		//console.log('resize');
		if (document.viewport.getHeight()-60<this.imageElement.getHeight()) {
			delta = this.imageElement.getHeight()-document.viewport.getHeight()+60;
			nh = this.imageElement.getHeight()-delta+'px';
			this.imageElement.setStyle({height: nh});
			
			this.imageElement.setStyle({width: this.imageElement.getWidth()+'px'});
			this.imageElement.setAttribute('width' ,this.imageElement.getWidth());
			
		} 
		/*this.image.setStyle({backgroundImage:'none'});*/
		this.image.setStyle({width: 'auto',height:'auto'});
		this.centrizeImage();
		
	},
	
	loadBackAndForward: function() {
		//create forward
		if (!this.forwardButton) {
			this.forwardButton = new Element('div',{id:'catbox_forward'});
			this.forwardButton.addClassName('catbox-arrow');
			this.image.appendChild(this.forwardButton,this.image);
			this.forwardButton.setStyle({
				position: 'absolute',
				zIndex: '922',
				display: 'none',
				top: this.retativeVerticalAlign(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'});
			this.backButton.addClassName('catbox-arrow');
			this.image.appendChild(this.backButton,this.image);
			this.backButton.setStyle({
				position: 'absolute',
				zIndex: '922',
				display: 'none',
				top: this.retativeVerticalAlign(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"
		});
		if (this.subs && this.imageElement) {
			this.subs.setStyle({width: this.imageElement.getWidth()+"px"});
		}
		
		
		if (this.backButton) {
			this.backButton.setStyle({
				top: this.retativeVerticalAlign(this.backButton)+'px'
			});
			this.forwardButton.setStyle({
				top: this.retativeVerticalAlign(this.backButton)+'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);
			if (CatboxConfig.onRelease!=null) {
				CatboxConfig.onRelease(element);
			}
			return false;
		};
	},
	ajax:function(element,param){
		if(param){
			CatboxConfigure(param);
		}
		load=this.loadHTML.bind(this);
		$(element).observe('click',function(evt) {
			load(Event.findElement(evt,"a").href);
			Event.stop(evt);
		});
	}
});

var CatboxInst;
function initCatbox() {
	CatboxInst = new Catbox();
	$$("a[rel='lightbox']").each(CatboxInst.observeElement.bind(CatboxInst));
	$$("a[rel='catbox']").each(CatboxInst.observeElement.bind(CatboxInst));
}

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