/* Плагин для Mootools */
/*
 * Использование
 * 
 * <script type="text/javascript" src="giBox/script.js"></script>
 * <script>giBox.init([classname])</script>
 * onclick="return giBox.expand(this);" 
 * */

document.write("<style>");
document.write("#gi-ovarlay {z-index:9000; width:100%; height:100%; background-color:black; position:fixed; left:0; top:0; visibility:hidden;}");
document.write("#gi-window {z-index:9001; position:fixed; left:30%; top:20%; padding:3px 3px 0 3px; border:solid 2px white; background-color:white; visibility:hidden}");
document.write("#giTtl {font-family:'Trebuchet MS'; margin:3px 2px 2px 2px; font-size:13px; color:black}");
document.write("#giBtns {margin:0px 0 5px 0; text-align:center;}");
document.write("#giImg {border:solid 2px black}");
document.write("</style>");

window.giBox = {
	config:{
		root:'/templates/base/giBox/'
	},
	isPlay:false,
	current:null,
	prefix:null,
	init:function(className){
		className = className ? className : 'giBox';
		window.addEvent('domready', function() {
			var elements = $(document.body).getElements('.'+className);
			var elementsCount = elements.length;
			$each(elements,function(el){
				$extend(el,{
					onclick:function(){
						this.show();
						return false;
					},
					show:function(){
						giBox.current = this;
						giBox.prefix = className;
						
						var src = this.get('href') ? this.get('href') : (this.get('src') ? this.get('src') : '');
						var ttl = this.get('title') ? this.get('title') : (this.get('alt') ? this.get('alt') : '');
						if (src){ giWindow.show(src,ttl); }
						
						giWindow.buttons.prew.fade(this.getPrevious('.'+className)?1:0);
						giWindow.buttons.next.fade(this.getNext('.'+className)?1:0);
						giWindow.buttons.play.fade(1);
						$('giBtns').setStyle('display',elementsCount==1?'none':'');
					},
				});
			});
		});
	},
	nextPlaying:function(){
		if (giBox.isPlay){
			if (giBox.next()){
				(function(){giBox.nextPlaying()}).delay(4000);
			}
			else {
				this.stop();
			}
		}
	},
	preload:function(el){
		if (el){
			var src = el.get('href') ? el.get('href') : (el.get('src') ? el.get('src') : '');
			$(document.body).adopt(new Element('img',{
				src:src,
				styles:{'display':'none'},
				events:{
					'load':function(){
						this.destroy();
					}
				}
			}));
		}
	},
	play:function(){
		giBox.isPlay = true;
		giWindow.buttons.play.src = giWindow.buttons.play.src.replace('play','pause');
		(function(){ giBox.nextPlaying(); }).delay(4000);
	},
	stop:function(){
		giBox.isPlay = false;
		giWindow.buttons.play.src = giWindow.buttons.play.src.replace('pause','play');
	},
	prew:function(){
		var obj = this.current.getPrevious('.'+this.prefix);
		this.preload(obj.getPrevious('.'+this.prefix));
		if (obj){obj.show(); return true;}
		else return false;
	},
	next:function(){
		var obj = this.current.getNext('.'+this.prefix);
		this.preload(obj.getNext('.'+this.prefix));
		if (obj){obj.show(); return true;}
		else return false;
	},
	expand:function(obj){
		var src = obj.get('href') ? obj.get('href') : (obj.get('src') ? obj.get('src') : '');
		var ttl = obj.get('title') ? obj.get('title') : (obj.get('alt') ? obj.get('alt') : '');
		$('giBtns').setStyle('display','none');
		if (src){ giWindow.show(src,ttl); }
		
		return false;
	}
};

window.addEvent('domready', function() {

	// Overlay
	window.giOverlay = new Element('div',{
		id:'gi-ovarlay',
		events:{ click:function(){ giWindow.hide(); } }
	});
	
	// Window
	window.giWindow = new Element('div',{id:'gi-window'}).adopt([
	    new Element('img',{id:'giImg'}),
		new Element('div',{id:'giTtl', html:'Текст описание'})
	]);
	
	$extend(giWindow,{
		buttons:{
			prew:new Element('img',{'id':'gi-btn-prew', 'src':giBox.config.root+'img/left.png',styles:{cursor:'pointer'},events:{
				'click':function(){ giBox.stop(); giBox.prew(); }}
			}),
			next:new Element('img',{'id':'gi-btn-next', 'src':giBox.config.root+'img/right.png',styles:{cursor:'pointer'},events:{
				'click':function(){ giBox.stop(); giBox.next(); }}
			}),
			play:new Element('img',{'id':'gi-btn-play', 'src':giBox.config.root+'img/play.png',styles:{cursor:'pointer'},events:{
				'click':function(){ giBox.isPlay ? giBox.stop() : giBox.play() }}
			})
		},		
		setTitle:function(value){
			$('giTtl').set('html',value);
		},
		setImage:function(value){
			$('giImg').set('src',value);
			var left = (getClientWidth() - $('gi-window').offsetWidth) / 2;
			var top = '10%';
			$('gi-window').setStyles({ left:left, top:top });
		},
		hide:function(){
			giBox.stop();
			new Fx.Tween(giWindow).start('opacity',1,0);
			new Fx.Tween(giOverlay).start('opacity',0.7,0);
		},
		show:function(src,title){
			var s = giOverlay.style.opacity != 0.7 ? 0 : 1; 
			if (!s){ new Fx.Tween('gi-ovarlay').start('opacity',0,0.7); }
			new Fx.Tween('gi-window').start('opacity',s,0).addEvents({'onComplete':function(){
				giWindow.setTitle(title);
				giWindow.setImage(src);
				new Fx.Tween('gi-window').start('opacity',0,1);
			}});
		}		
	});
	
	giWindow.adopt(new Element('div',{id:'giBtns'})
		.adopt([
			giWindow.buttons.prew,
			giWindow.buttons.play,
			giWindow.buttons.next,
		])
	);
	
	$(document.body).adopt([giOverlay,giWindow]);
});

function getClientWidth() { return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth; }
function getClientHeight() { return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight; }

giBox.init();