// ControlDepo Widget Commonent
// @date 29.08.2008
// @version 0.1
// @todo -> keyboard access, track mousewheel

if (!CD3) var CD3 = {};

CD3.Lightbox = Class.create({
	initialize: function(images){
		this.build();
		this.images			= images;
		this.activeImage	= -1;
		this.loading		= null;
		
		this.images.invoke('observe', 'click', function(e){
			var image = e.findElement('a');
			this.activeImage = this.images.indexOf(image);
			if (this.activeImage == -1){
				this.activeImage = this.images.length;
				this.images.push(image);
			}
			this.show(image);
			e.stop();
		}.bind(this));
	},
	build: function(){
		
		
	 	var promche  =	$$('body')[0].getAttribute('lang');
		var my_single = $('mainimage');
		
		if ( my_single ){
			 var soso = "display:none";
		};
		
		if ( promche == 'bg' ){
				var	prom_back = 'Предишна';
				var	prom_next = 'Следваща';
		}else if ( promche == 'en' || promche == 'ru' ){
				var	prom_back = 'Previous';
				var	prom_next = 'Next';
		}else {
				var	prom_back = 'Предишна';
				var	prom_next = 'Следваща';
		};
		
		if (!$('lightbox'))
			$$('body')[0].insert([
				'<div id="lightbox">',
					'<div class="bkg"></div>',
					'<div class="content">',
						'<h1 class="header"><span></span></h1>',
						'<a href="javascript:;" class="close"></a>',
						'<p class="pic"><span></span></p>',
						'<div style="'+ soso +'" class="navigation ">',
							'<ul>',
								'<li class="prev"><a href="javascript:;">'+ prom_back +'</a></li>',
								'<li class="next"><a href="javascript:;">'+ prom_next +'</a></li>',
							'</ul>',
						'</div>',
						'<div class="footer">',
							'<div></div>',
						'</div>',
					'</div>',
				'</div>'
			].join(''));
		
		
		var box =  $('lightbox');
		
		this.offset				= 24;
		this.titleMinHeight		= 12;
		this.titleMaxHeight		= 48;
		this.navigationHeight	= 48;
		
		
		this.background = box.down('.bkg').hide().observe('click', this.hide.bind(this));
		this.title		= box.down('.header span').setStyle({height : this.titleMinHeight + 'px'});
		this.close		= box.down('.close').hide().observe('click', this.hide.bind(this));
		this.pic		= box.down('.pic span');
		this.content	= box.down('.content').hide();
		this.navigation	= box.down('.navigation').setStyle({height : '0px'});
		
		box.down('.prev').observe('click', this.gotoImage.bind(this, -1));
		box.down('.next').observe('click', this.gotoImage.bind(this, 1));	
	},
	gotoImage: function(pos){
		if (pos > 0)	this.activeImage = this.images.length > this.activeImage + 1 ? this.activeImage + 1 : 0;
		else			this.activeImage = this.activeImage > 0 ? this.activeImage - 1 : this.images.length - 1;
			
		this.show(this.images[this.activeImage]);	
	},
	hide: function(e){
		if (e && e.stop()) e.stop();
		
		this.clearLoader();
		
		this.background.hide();
		this.content.hide();
		this.close.hide();
		this.navigation.setStyle({height : '0px'});
		//this.title.setStyle({height : this.titleMinHeight + 'px'}).innerHTML = '';
		
		$$('select', 'object', 'embed').each(function(node){ 
			if (node.style){
				node.style.visibility = node._visibility;
				delete node._visibility;
			}
		});
	},
	show: function(image){
		this[this.background.visible() ? 'pack' : 'start'](image);
	},
	start: function(image){
		$$('select', 'object', 'embed').each(function(node){ 
			if (node.style){
				node._visibility = node.style.visibility;
				node.style.visibility = 'hidden';
			}
		});
		
		var xScroll, yScroll, dim = document.viewport.getDimensions();
		
		if (window.innerHeight && window.scrollMaxY) {	
			xScroll = window.innerWidth + window.scrollMaxX;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}
		
		var offset = this.offset;
		
		this.background.setStyle({
			width: Math.min(xScroll, dim.width) + 'px',
			height: Math.max(dim.height, yScroll) + 'px'
		}).appear();
		
		this.content.clonePosition(image, {setHeight: false}).appear();
		this.pic.style.height = image.offsetHeight - offset + 'px';
		this.pic.innerHTML = '';
		this.loadImage(image.href, this.flyIn.bind(this, {width: image.offsetWidth - offset, height: image.offsetHeight - offset}));
	},
	pack: function(image){
		this.pic.style.height	= this.pic.offsetHeight + 'px';
		this.pic.style.width	= this.pic.offsetWidth + 'px';
		this.pic.innerHTML		= '';
		this.title.innerHTML	= '';
		this.close.hide();
			
		new Effect.Parallel([
			new Effect.Morph(this.navigation, {sync: true,style: {height: '0px'}}),
			new Effect.Morph(this.title, {sync: true,style: {height: this.titleMinHeight + 'px'}})
		],{
			duration: 0.4,
			afterFinish: this.loadImage.bind(this, image.href, this.expand.bind(this))
		});
	},	
	expand: function(){		
		new Effect.Parallel([
			this.resizePanelEffect(),
			this.resizeImageEffect(this.pic)
		],{ afterFinish: function () {
			this.pic.innerHTML = '<img src="' + this.loading.src + '" />';
			this.finish();
		}.bind(this) });
	},
	flyIn: function(start){
		this.pic.style.height = null;
		this.pic.innerHTML = '<img src="' + this.loading.src + '"style="width: ' + start.width + 'px; height: ' + start.height + 'px;" />';
		new Effect.Parallel([
			this.resizePanelEffect(),
			this.resizeImageEffect(this.pic.down('img'))
		],{ afterFinish: this.finish.bind(this) });
	},
	finish: function(){
		var img = this.pic.down('img');

		img.style.width = img.style.height = null;
		this.pic.style.height = this.pic.style.width = null;
		
		this.clearLoader();
		
		new Effect.Parallel([
			new Effect.Morph(this.navigation, {sync: true,style: {height: this.navigationHeight + 'px'}}),
			new Effect.Morph(this.title, {sync: true,style: {height: this.titleMaxHeight + 'px'}})
		],{
			duration: 0.4,
			afterFinish: function () {
				var image = this.images[this.activeImage];
				this.title.innerHTML = image.getAttribute('title') || image.getAttribute('alt');
				this.close.appear();
			}.bind(this)
		});
	},
	resizePanelEffect: function(){
		var dim		= document.viewport.getDimensions(), 
			scroll	= document.viewport.getScrollOffsets(),
			width	= this.loading.width + this.offset,
			height	= this.loading.height + this.offset;

		return new Effect.Morph(this.content, {
			sync: true,
			style: {
				top:	Math.max(0, parseInt(scroll.top  + (dim.height - (height + this.navigationHeight + this.titleMaxHeight))/2))  + 'px',
				//top:	10 + 'px',
				left:	parseInt(scroll.left + (dim.width - width)/2 ) + 'px',
				width:	width + 'px',
				height:	height + 'px'
			}
		});
	},
	resizeImageEffect: function(conatiner){
		return new Effect.Morph(conatiner, {
			sync: true,
			style: {
				width:	this.loading.width + 'px',
				height:	this.loading.height + 'px'
			}
		});
	},
	loadImage: function(src, callback){
		this.clearLoader();
		this.loading		= new Image();	
		this.loading.onload	= callback;
		this.loading.src	= src;
	},
	clearLoader: function(){
		if (this.loading != null){
			this.loading.onload = null;
			this.loading = null;
		}
	}
});