var p = Array();
document.addEvent('domready', function(){
	document.getElements('li.pop').each(function(obj){
		p[p.length] = new pop(obj);
	});
	
	// move drop shadow outside dom for easy positioning
	document.getElement('div.ds').inject(document.getElement('body'));
});

var pop = new Class({
	initialize: function(obj) {
		this.visible = false;
		if (obj.getElement('div.pop'))
		{
			this.li = obj;
			this.div = this.li.getElement('div.pop');
			this.ds = document.getElement('div.ds');

			this.fx = new Fx.Morph(this.div, {duration: 'normal', transition: Fx.Transitions.Sine.easeOut});

			this.coordinates = this.div.getStyles('width', 'height', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', 'border-top', 'border-right', 'border-bottom', 'border-left');
			this.coordinates = new Hash(this.coordinates).map(function(val, key){
				return val.toInt();
			});


			// move outside of wrappers for easy positioning
			this.div.inject(document.getElement('body'));

			var close = new Element('a', {'class': 'close', 'href': 'javascript:void(0);', 'html': 'Close'});
			var closeContainer = new Element('div', {'class': 'close'});
			close.inject(closeContainer);
			closeContainer.inject(this.div);

			this.setEvents();
		}
	},
	setEvents: function() {
		this.li.addEvent('click', this.toggle.bindWithEvent(this));
		this.div.getElement('div.close a.close').addEvent('click', this.hide.bindWithEvent(this));
		this.div.addEvent('click', this.hide.bindWithEvent(this));
		this.li.addEvent('mouseenter', this.mouseenter.bindWithEvent(this));
		this.li.addEvent('mouseleave', this.mouseleave.bindWithEvent(this));
	},
	mouseenter: function() {
		this.li.addClass('hovered');
	},
	mouseleave: function() {
		this.li.removeClass('hovered');
	},
	toggle: function() {
		if (this.visible)
			this.hide();
		else
			this.show();
	},
	show: function() {
		for (var i = 0; i < p.length; i++)
		{
			if (p[i].visible)
			{
				p[i].hide();
				break;
			}
		}

		this.position();
		this.fx.start({
			'visibility': ['hidden', 'visible'],
			'opacity': [0, 1]
		});
		this.showDropShadow();
		this.visible = true;
		IEPNGFix.update();
	},
	hide: function() {
		this.fx.start({
			'visibility': ['visible', 'hidden'],
			'opacity': [1, 0]
		});
		this.hideDropShadow();
		this.visible = false;
	},
	position: function() {
		this.div.setStyles({'display': 'block'});
		var p = this.getPosition();
		this.div.setStyles({'top': p.starttop - (this.div.getSize().x / 2), 'left': p.newleft});
	},
	showDropShadow: function() {
		if (!this.ds)
			return;

		var osize = this.div.getSize();
		var pos = this.div.getPosition();
		var width = osize.x;
		var height = osize.y;
		
		// set positioning of the drop shadow
		// set dimensions of drop shadow
		this.ds.setStyles({
					'display': 'block',
					'visibility': 'hidden',
					'position': 'absolute',
					'width': osize.x,
					'height': osize.y,
					'top': pos.y + 5,
					'left': pos.x + 5,
					'z-index': 99,
					'background': 'url(/assets/libs/roundedphp/rounded.php?sh=r&r=13&h=' + osize.y + '&w=' + osize.x + '&fgc=000&fgo=50&bgc=0&bgo=0) no-repeat center top'
				});

		// add a "fade in" effect to the drop shadow
		var dsFX = new Fx.Morph(this.ds, {duration: 'normal', transition: Fx.Transitions.Sine.easeOut});
		dsFX.start({
			'visibility': ['hidden', 'visible'],
			'display': ['none', 'block'],
			'opacity': [0, 1]
		});

	},
	hideDropShadow: function() {
		if (!this.ds)
			return;

		// add a "fade out" effect to the drop shadow
		var dsFX = new Fx.Morph(this.ds, {duration: 'normal', transition: Fx.Transitions.Sine.easeOut});
		dsFX.start({
			'visibility': ['visible', 'hidden'],
			'display': ['block', 'none'],
			'opacity': [0, 1]
		});
	},
	getPosition: function() {
		var wsize = window.getSize();
		var scrollsize = window.getScrollSize();
		var scrolledto = window.getScroll();
		
		var viewport = {left: scrolledto.x, right: scrolledto.x + wsize.x, bottom: scrolledto.y + wsize.y, top: scrolledto.y, middle_x: (wsize.x / 2) + scrolledto.x, middle_y: (wsize.y / 2) + scrolledto.y};
		newtop 		= viewport.middle_y - ((this.coordinates.get('height') + this.coordinates.get('padding-top') + this.coordinates.get('padding-bottom') + this.coordinates.get('border-top') + this.coordinates.get('border-bottom')) / 2)
		starttop 	= viewport.middle_y;
		newleft		= viewport.middle_x - ((this.coordinates.get('width') + this.coordinates.get('padding-left') + this.coordinates.get('padding-right') + this.coordinates.get('border-left') + this.coordinates.get('border-right')) / 2)
		startleft 	= viewport.middle_x;

		return {scrollsize: scrollsize, newtop: newtop, starttop: starttop, newleft: newleft, startleft: startleft};
	}
});