var FixKlix = new Class({
	initialize: function (id) {
		//set init
		this.element = $(id);
		this.fx = new Fx.Tween(this.element, {duration: 'short', wait:false});
		this.fx.set('opacity', 1);
	},
	start: function (action) {
		//get your roll on, baby
		var fx = this.fx;
		var a = action;
		//fade out
		fx.start('opacity', 0.01).chain(function () {
			//run function
			a();
			//fade in again
			this.start('opacity', 1);
		});
	}
});

var HoverWindow = new Class({
	initialize: function (content, width) {
		//set init
		this.c = content;
		this.w = new Element ('div', {
			'class': 'hover-window'
		});
		this.i = new Element ('div', {
				'class': 'hover-window-inner',
				'html': this.c
			});
		
		this.b = new Element ('a', {
			'class': 'close-button',
			'href': '#',
			'text': 'x'
		});
		
		var papa = this;
		this.b.addEvent('click', function (e) {
			var se = new Event(e).stop();
			papa.close();
		});

		this.b.inject(this.w);
		this.i.inject(this.w);
		this.i.set('styles', {
			'width': width
		});
		

		this.w.set('styles', {
			'position': 'absolute',
			'z-index': 6000,
			'left': ((window.getSize().x-500)/2) + 'px',
			'top': ((window.getSize().y-500)/2) + (document.body.getScroll().y) + 'px',
		});
		this.w = this.w.inject(document.body);
		var w = this.w;
		window.addEvent('resize', function () {
			w.set('styles', {'left': ((window.getSize().x-w.getSize().x)/2) + 'px'});
		});
		
		this.fx = new Fx.Tween(this.w, {duration: 500, wait: false, transition: Fx.Transitions.Back.easeOut});
		this.fx.set('opacity', 0);
		
	},
	close: function () {
		//this.w.set('styles', {'display': 'none'});
		this.fx.start('opacity', 1, 0);
	},
	refresh: function () {
		
		var windows = $$('.hover-window');
		var lastWindow = windows[windows.length-1];
		
		var zindex = lastWindow.getStyle('z-index') + 1;
		this.w.set('styles', {'z-index': zindex});
		
		var y = this.i.getSize().y;
		var x = this.i.getSize().x;
		var tar = 0;
		var a = 900;
		var p = 63;
		
		if (y > x) {
			tar = x/y;
			var s = (p*y/a);
			var e = (p*tar*y/a);
			
			this.w.set('styles', {
				'padding-left': e,
				'padding-right': e,
				'padding-top': s,
				'padding-bottom': s,
			});
		}
		else {
			tar = y/x;
			var s = (p*x/a);
			var e = (p*tar*x/a);
			
			this.w.set('styles', {
				'padding-top': e,
				'padding-bottom': e,
				'padding-left': s,
				'padding-right': s
			});
		}
		this.w.set('styles', {
			'height': y,
			'width': x,
			'background-image': 'url(./thumb.php?un=true&width='+x*1.14+'&height='+y*1.14+'&img=./images/shadow.png)',
		});
		
		window.fireEvent('resize');
	},
	open: function() {
		$$('.hover-window').each(function(win) {
			if (win.getStyle('opacity') > 0) {
				win.getElement('a.close-button').fireEvent('click');
			}
		});
		
		this.fx.set('margin-top', -window.getSize().y);
		this.fx.set('opacity', 1);
		this.fx.start('margin-top', 0);
		
		window.fireEvent('resize');
		this.w.set('styles', {
			'top': ((window.getSize().y-this.i.getSize().y)/4) + (document.body.getScroll().y) + 'px',
		});
		this.refresh();
		
		
	}
});