/*
 * Name:		xFrame - DOM, animations, and ajax framework library
 * Author:		Sandro (XAndE) Lain
 * Copyright:	Sandro (XAndE) Lain - All rights reserved
 */

var ViewPort = {
	config: {
		aAnimation: 'linear',
		time: 0.3
	},
	_onOpen: [],
	_onClose: [],
	init: function() {
		if(!I('xf_viewport')) {
			var o = Dom.create(['div',{
				style: {
					backgroundColor: '#000000',
					color: '#FFFFFF',
					width: '100%',
					position: 'absolute',
					top: '0px',
					left: '0px',
					display: 'none',
					zIndex: '25',
					opacity: '0'
				},
				id: 'xf_viewport',
				onclick: function() { ViewPort.close(); }
			}]);
			o._open = false;
			Dom.body().appendChild(o);
			ViewPort.setSizes();
			Event.add(window, 'resize', ViewPort.setSizes);
		}
	},
	setSizes: function() {
		var v = I('xf_viewport');
		if(v) {
			var s = Env.viewSizes();
			v.style.height = s[1] + 'px';
		}
	},
	open: function() {
		var c = ViewPort.config, a = ViewPort._onOpen, l = a.length, i, f;
		if(I('xf_viewport') && I('xf_viewport').style.display == 'none') {
			ViewPort.setSizes();
			Morph.set({
				element: 'xf_viewport',
				styles: {'opacity': [0, 0.8], 'display': ['block', 'block']},
				time: c.time,
				effect: Effects[c.animation]
			});
			for(i = 0; i < l; i++) {
				f = a[i];
				f[0].apply(f[1]);
			}
		}
	},
	close: function() {
		var c = ViewPort.config, a = ViewPort._onClose, l = a.length, i, f;
		if(I('xf_viewport') && I('xf_viewport').style.display == 'block') {
			Morph.set({
				element: 'xf_viewport',
				styles: {'opacity': [0.8, 0], 'display': ['block', 'none']},
				time: c.time,
				effect: Effects[c.animation]
			});
			for(i = 0; i < l; i++) {
				f = a[i];
				f[0].apply(f[1]);
			}
		}
	},
	addOpenEvent: function(e, b) {
		if(!b) b = null;
		ViewPort._onOpen.push([e, b]);
	},
	addCloseEvent: function(e, b) {
		if(!b) b = null;
		ViewPort._onClose.push([e, b]);
	}
};


var ShowCase = {
	config: {
		viewportAnimation: 'linear',
		viewportTime: 0.3,
		openAnimation: 'outElastic',
		openTime: 1,
		centeringAnimation: 'outCubic',
		centeringTime: 0.2,
		resizeAnimation: 'outBounce',
		resizeTime: 0.6
	},
	_widgets: [],
	closeHipHopUp: function() {
		if(I('xf_hiphopup') && I('xf_hiphopup').style.display == 'block')
			Morph.set({
				element: 'xf_hiphopup',
				styles: {'opacity': [1, 0], 'display': ['block', 'none']},
				time: c.viewportTime,
				effect: Effects[c.viewportAnimation]
			});
	},

	initHipHopUp: function() {
		if(!I('xf_hiphopup')) {
			var s = Env.clientSizes(), w = 640, h = 480;
			var t = (s[1] < h) ? 0 : Math.round((s[1] - h) / 2);
			var l = (s[0] < w) ? 0 : Math.round((s[0] - w) / 2);
			var o = Dom.create(['div',{
				style: {
					backgroundColor: '#FFFFFF',
					color: '#000000',
					width: w +'px',
					height: h + 'px',
					position: 'absolute',
					top: t + 'px',
					left: l + 'px',
					display: 'none',
					zIndex: '26',
					opacity: '0'
				},
				id: 'xf_hiphopup'
			},
			['div', {
				id: 'xf_hhu_content'
			}, 'Test!'],
			['span', {
				id: 'xf_hhu_close',
				onclick: function() { ShowCase.closeHipHopUp(); }
			}, ['strong', 'Close']],
			['p', ['a', {href: 'javascript:void(0);', onclick: function(){
						ShowCase.setHipHopUpSizes(900, 300);
					}
				}, 'Resize']],
			['p', ['a', {href: 'javascript:void(0);', onclick: function(){
						ShowCase.changeHipHopUpContent(Dom.create(['b', 'test']));
					}
				}, 'Change']],
			['div', {'class': 'shadow'}]
			]);
			Dom.body().appendChild(o);
		}
	},
	openHipHopUp: function() {
		ShowCase.openViewport();
		ShowCase.setHipHopUpSizes();
	},
	closeHipHopUp: function() {
		ShowCase.closeViewport();
	},
	setHipHopUpPosition: function() {
		if(I('xf_hiphopup') && I('xf_hiphopup').style.display == 'block') ShowCase.setHipHopUpSizes();
	},
	setHipHopUpSizes: function(x, y) {
		if(I('xf_hiphopup')) {
			if(x && !y) y = Morph.getRealHeight('xf_hiphopup', x);
			var z = Dom.getStyles('xf_hiphopup', 'width', 'height', 'top', 'left', 'display'),
			w = Tools.cleanSize(z.width), h = Tools.cleanSize(z.height),
			t = Tools.cleanSize(z.top), l = Tools.cleanSize(z.left),
			d = z.display, s = Env.clientSizes(), c = ShowCase.config,
			st, sl, fw, fh, m, e, a = {};
			if(d == 'block') {
				if(!x) {
					fw = w; fh = h; st = t; sl = l;
					m = c.centeringTime; e = Effects[c.centeringAnimation];
				} else {
					if(w != x) a.width = ['px', w, x];
					if(h != y) a.height = ['px', h, y];
					fw = x; fh = y; st = t; sl = l;
					m = c.resizeTime; e = Effects[c.resizeAnimation];
				}
			} else if(d == 'none') {
				a.width = ['px', 0, w];
				a.height = ['px', 0, h];
				a.display = ['block', 'block'];
				a.opacity = [0, 1];
				fw = w; fh = h; st = Event.mouse.y; sl = Event.mouse.x;
				m = c.openTime; e = Effects[c.openAnimation];
			}
			var fl = (s[0] < fw) ? 0 : Math.round((s[0] - fw) / 2);
			var ft = (s[1] < fh) ? 0 : Math.round((s[1] - fh) / 2);
			if(sl != fl) a.left = ['px', sl, fl];
			if(st != ft) a.top = ['px', st, ft];
			Morph.set({element: 'xf_hiphopup', styles: a, time: m, effect: e});
			if(s[1] < fh) {
				Morph.set({element: 'xf_viewport', styles: {height: ['px', fh]}, time: m});
				window.setTimeout('ShowCase.setViewportSizes();', m);
			}
		}
	},
	changeHipHopUpContent: function(c, r) {
		var h = I('xf_hiphopup');
		if(h) {
			if(h.style.display == 'block') {

				//c = '' + new Date().getTime();

				Morph.set({
					element: 'xf_hhu_content',
					styles: {opacity: [1, 0]},
					time: 0.2,
					onfinish: function() {
						if(!r) Dom.removeChilds('xf_hhu_content');
						Dom.append('xf_hhu_content', c);
					}
				},
				{
					element: 'xf_hhu_content',
					styles: {opacity: [0, 1]},
					time: 0.2
				});


			}
		}
	},

	newWidget : function() {

		var i = Dom.generateId();

		var w = Dom.create(['div',
			{
				id : i
			}
		]);
	}
};