/* HoverDelay
----------------------------------------------------------------------------------------*/
var HoverDelay = Class.create({
	initialize : function(trigger, options){
		this.options = Object.extend({closeSelector : '.close', enterCb : function(){},	leaveCb : function(){},	delay : 0.5}, options || {});
		
		this.trigger = $(trigger);
		this.timeout = null; 
		this.active = false;
		this.setup();
	},
	setup : function(){
		var eEvt = this.open.bindAsEventListener(this);
		var lEvt = this.close.bindAsEventListener(this);
		this.trigger.observe('mouseenter', eEvt);
		this.trigger.observe('mouseleave', lEvt);
		this.trigger.observe('hoverdelay:stop', function(){
			this.trigger.stopObserving('mouseenter', eEvt);
			this.trigger.stopObserving('mouseleave', lEvt);
		}.bind(this));
		document.observe('pop:active', function(){this.inactive=true;}.bind(this));
		document.observe('pop:inactive', function(){this.inactive=false;}.bind(this));
	}, 
	open : function(event){
		if (this.inactive) return;
		this.timeout = (function(){
			this.trigger.addClassName("active");
			this.options.enterCb.bind(this)();
			this.active = true;
		}).bind(this).delay(this.options.delay);
	},
	close : function(){
		if (this.inactive) return;
		if (this.timeout) {
			window.clearTimeout(this.timeout);
			this.timeout = null;
		}
		if (this.active){
			this.options.leaveCb.bind(this)();
			this.active = false;
			this.trigger.removeClassName("active");
		}
	}
});

/* PopUp
----------------------------------------------------------------------------------------*/
var PopUp = Class.create({
	initialize : function(link, pop, opts){
		this.options = Object.extend({closeSelector : '.close', modal: false, fade: false}, opts || {});
		this.pop = pop.setStyle({display:'none'});
		this.link = link;
		this.setup();
		this.pop.observe('pop:close', this.close.bind(this));
	},
	setup : function(){
		this.link.observe('click', this.open.bind(this));
		this.pop.select(this.options.closeSelector).each(function(el){
			el.observe('click', this.close.bind(this));
		}.bind(this));
	},
	open : function(ev){
		if (ev) ev.stop();
		this.link.addClassName("active");
		if(this.options.modal) {
			$('modal_overlay').show();
			Position.Center(this.pop);
		}
		if(this.options.fade)
			this.pop.appear({duration:.2});
		else
			this.pop.show();
		if (this.options.modal)document.fire('pop:active');
	},
	close : function(ev){
		if (ev) ev.stop();
		this.link.removeClassName("active");
		if(this.options.modal)
			$('modal_overlay').hide();
		if(this.options.fade)
			this.pop.fade({duration:.2});
		else
			this.pop.hide();
		if (this.options.modal) document.fire('pop:inactive');
	}
});

/* KickOut
----------------------------------------------------------------------------------------*/
var KickOut = Class.create(PopUp, {
	setup : function(){
		new HoverDelay(this.link, {
			delay   : 0.1,
			enterCb : this.open.bind(this),
			leaveCb : this.close.bind(this)
		});
	}
});

/* Prototype-based javascript window dimensions
http://textsnippets.com/posts/show/835 
----------------------------------------------------------------------------------------*/
Position.GetWindowSize = function(w) {
        w = w ? w : window;
        var width = w.innerWidth || (w.document.documentElement.clientWidth || w.document.body.clientWidth);
        var height = w.innerHeight || (w.document.documentElement.clientHeight || w.document.body.clientHeight);
        return [width, height]
}

/* Center a DOM element, prototype based
http://textsnippets.com/posts/show/836
----------------------------------------------------------------------------------------*/
Position.Center = function(element, parent) {
	var w, h, pw, ph;
	var d = Element.getDimensions(element);
	w = d.width;
	h = d.height;
	Position.prepare();
	if (!parent) {
			var ws = Position.GetWindowSize();
			pw = ws[0];
			ph = ws[1];
	} else {
			pw = parent.offsetWidth;
			ph = parent.offsetHeight;
	}
	element.style.top = (ph/2) - (h/2) +  Position.deltaY + "px";
	element.style.left = (pw/2) - (w/2) +  Position.deltaX + "px";
}

/* CenteredPop
----------------------------------------------------------------------------------------*/
var CenteredPop = Class.create({
	initialize : function(trigger, pop, options){
		this.trigger = trigger;
		this.pop = pop;
		
		this.options = Object.extend({
			modal: false,
			cancel: false
		}, options);		
		
		if(this.options.cancel)
			this.options.cancel.observe('click', this.close.bind(this));
		
		this.trigger.observe('click', this.open.bind(this));
		this.pop.down('.close').observe('click', this.close.bind(this));
		this.bound_close = this.close.bind(this);	

	},
	open : function(ev){
		ev.stop();
		document.fire("pop:active");
		Position.Center(this.pop);
		this.pop.appear({duration:.1});
		if(this.options.modal) {	
			$('modal_overlay').style.height = $$('body').first().getHeight() + "px";
			$('modal_overlay').show();
		}
	},
	close : function(ev){
		ev.stop();
		document.stopObserving('pop:active', this.bound_close);
		this.pop.fade({duration:.1});
		if(this.options.modal) 
			$('modal_overlay').hide()
	}
});

/* ModalSlideShow
----------------------------------------------------------------------------------------*/
var ModalSlideShow = Class.create();
ModalSlideShow.prototype = {
	initialize : function(initial, trigger, container, contents, prev, next, delay){
		this.initial = initial;
		this.trigger = trigger;
		this.container = container;
		this.contents = contents;
		this.delay = delay;
		this.showOnly(this.contents[this.initial]);
		this.current = initial;
		//this.start();
		this.show = null, this.hide = null;
		this.close = this.container.down('.close');
		
		//this.trigger.observe('click', this.start.bind(this));
		this.close.observe('click', this.pause.bind(this));
		prev.observe('click', this.back.bind(this));
		next.observe('click', this.forward.bind(this));
		
	},
	back: function(ev){
		ev.stop(); 
		if (this.show || this.hide) return;
		this.pause(); 
		if (this.current ==0 )
			this.goTo(this.contents.length-1);
		else
			this.goTo(this.current-1);
	},
	forward: function(ev){
		ev.stop(); 
		if (this.show || this.hide) return;
		this.pause();
		this.next();
	}, 
	start : function(){
		if (this.timer) return;
		this.timer = setTimeout(this.next.bind(this), this.delay * 1000); //new PeriodicalExecuter(this.next.bind(this), this.delay);
	},
	showOnly : function(el){
		this.contents.each(Element.hide);
		el.show();
	},
	pause : function(){
		if (this.timer){
			clearTimeout(this.timer);
			this.timer = false;
		}
		//this.hide ? this.hide.cancel() : 0; 
		//this.show ? this.show.cancel() : 0;
	},
	next : function(){
		this.timer = false;
		if (this.current == this.contents.length-1)
			this.goTo(0);
		else
			this.goTo(this.current+1);
		//this.start();
	},
	goTo : function(idx, dur){
		if (idx == this.current) return;
		this.hide = new Effect.Fade(this.contents[this.current], {duration : dur || 1, afterFinish:function(){this.hide=null;}.bind(this)});
		this.current = idx;
		this.show = new Effect.Appear(this.contents[this.current],{duration: dur || 1, afterFinish:function(){this.show=null;}.bind(this)});
		this.start();
	},
	getCurrent : function(){
		return this.current;
	}
};


/*----------------------------------------------------------------------------------------*/
document.observe('dom:loaded', function(){	
	$$('.gallery ul li a').each(function(el) {
		new CenteredPop(el, $('overlay_gallery'), { modal: true });
		new ModalSlideShow(0, el, $('overlay_gallery'), $$('#overlay_gallery .slide'), $('btn_prev'), $('btn_next'), 3);
	});
	
});