if (!cx) var cx = {};
if (!cx.controls) cx.controls = {};
cx.controls.SpotlightWindow = Class.create();
cx.controls.SpotlightWindow.prototype = {
	
	classname: 'cx.controls.SpotlightWindow',
		
	rawConfig: {
		closeButtonStyle: {
			width: '19px',
			height: '19px',
			borderLeft: '2px solid #fff',
			borderBottom: '2px solid #fff',
			borderTop: '2px solid #fff',
			borderRight: '2px solid #fff',
			backgroundImage: 'url(/_libs/cx/assets/gfx/close.png)',
			backgroundPosition: '0px 0px',
			toolTip: (location.href.split("/")[3] != "de") ? 'Chiudere' : 'Fenster schließen'
		},
		blindStyle: {
			backgroundColor: '#000',
			alpha: 0.7
		},	
		windowStyle: {
			alpha: 1,
			backgroundColor: '#fff',
			width: '150px',
			height: '100px'
		},
		bodyStyle: {
			margin: '9px',
			backgroundImage: '',
			backgroundPosition: '',
			backgroundRepeat: ''
		}
	},
	usrConfig: {},

	initialize: function(content, usrConfig) {
	
		if (usrConfig) this.usrConfig = usrConfig;
		if (content.classname == 'cx.utils.ContentLoader') {
			this.loading = true;
			this.content = null;
			content.load(this.onContentReady.bind(this));
		}
		else {
			this.loading = false;
			this.content = content;
		}
		
		this.render();
		this.setupListeners();
		this.appear();
				
		Event.observe(window, "resize", this.onWindowResize.bind(this));
		cx.controls.SpotlightWindow.instance = this;
	},
	
	onContentReady: function(html, opt) {
		
		this.loading = false;
		if (opt && (opt.width || opt.height)) {
			this.resize(opt.width, opt.height);
		}
		
		this.updateContent(html);
	},
	
	render: function() {
		
		var body = $(document.body);
		var height = '100%';
		if (this.getBrowserInnerWindowHeight() < 770) {
			height = '770px';
		}
		
		var blindStyle = cx.utils.Helpers.mergeObjects(
			this.rawConfig.blindStyle,
			this.usrConfig.blindStyle,  {
				width: '100%',
				height: height,
				position: 'absolute',
				zIndex: 1000
			}
		);
		this.blind = new Element('div').setStyle(blindStyle).setOpacity(blindStyle.alpha);
		body.insert(this.blind);
		
				
		var windowStyle = cx.utils.Helpers.mergeObjects(
			this.rawConfig.windowStyle,
			this.usrConfig.windowStyle
		);		
		windowStyle = cx.utils.Helpers.mergeObjects(
			windowStyle, {
				position: 'absolute',
				top: '50%',
				left: '50%',
				marginTop: Math.round(-parseInt(windowStyle.height.split('px').shift())/2) + "px",
				marginLeft: Math.round(-parseInt(windowStyle.width.split('px').shift())/2) + "px",
				zIndex: 1001,
				display: 'none'
			}
		);
		
		this.window = new Element('div').setStyle(windowStyle).setOpacity(windowStyle.alpha);
		body.insert(this.window);
		
		var closeButtonStyle = cx.utils.Helpers.mergeObjects(
			this.rawConfig.closeButtonStyle,
			this.usrConfig.closeButtonStyle, {
				position: 'absolute',
				right: '0px',
				cursor: 'pointer',
				zIndex: 1002
			}
		);
		this.closeButton = new Element('div').setStyle(closeButtonStyle);
		this.closeButton.title = closeButtonStyle.toolTip;
		this.window.insert(this.closeButton);
		
		var bodyStyle = cx.utils.Helpers.mergeObjects(
			this.rawConfig.bodyStyle,
			this.usrConfig.bodyStyle
		);
		bodyStyle = cx.utils.Helpers.mergeObjects(
			bodyStyle,{
				position: 'relative',
				width: parseInt(this.window.style.width.split("px").shift()) - (parseInt(bodyStyle.margin.split("px").shift())*2) + "px",
				height: parseInt(this.window.style.height.split("px").shift()) - (parseInt(bodyStyle.margin.split("px").shift())*2) + "px"
			}
		);
		
		this.body = new Element('div').setStyle(bodyStyle);
		this.window.insert(this.body);
		this.updateContent();
	},
	
	resize: function(w, h) {
		
		this.body.hide();
		var bodyStyle = cx.utils.Helpers.mergeObjects(
			this.rawConfig.bodyStyle,
			this.usrConfig.bodyStyle
		);
		
		
		var _marginTop = -Math.round(parseInt(h)/2);
		
		if (h > getInnerWindowHeight()) {			
			_marginTop = Math.round(-(getInnerWindowHeight()/2));
		}		
		
		new Effect.Parallel([
	        new Effect.Morph(this.window, {
	        	style: {
					width: w+'px',
					height: h+'px',
					marginLeft: -Math.round(parseInt(w)/2)+'px',
					marginTop: _marginTop+'px'
				},
				duration: 0.8
			}),
			new Effect.Morph(this.body, {
	        	style: {
					width: w - (parseInt(bodyStyle.margin.split("px").shift())*2) + "px",
					height: h - (parseInt(bodyStyle.margin.split("px").shift())*2) + "px"
				},
				duration: 0.8,
				afterFinish: function() {
					Effect.Appear(this.body, {
						duration: 0.3
					});
				}.bind(this)
			})
	    ]);
	},
	
	updateContent: function(content) {
		
		if (content) {
			this.content = content;
			this.loading = false;
		}
		if (this.body && this.content && !this.loading) {
			
			var bodyStyle = cx.utils.Helpers.mergeObjects(
				this.rawConfig.bodyStyle,
				this.usrConfig.bodyStyle
			);
			
			this.body.setStyle({
				backgroundImage: bodyStyle.backgroundImage,
				backgroundPosition: bodyStyle.backgroundPosition,
				backgroundRepeat: bodyStyle.backgroundRepeat
			});
			this.body.update(this.content);
		}
		else {
			this.showLoadingIndicator();
		}
	},
	
	showLoadingIndicator: function() {
		
		this.loading = true;
		this.body.update('');
		this.body.setStyle({
			backgroundImage: 'url(/_libs/cx/assets/gfx/spinner.gif)',
			backgroundPosition: 'center',
			backgroundRepeat: 'no-repeat'
		});
	},
	
	close: function() {
		
		Effect.Fade(this.window, {
			duration: 0.3,
			afterFinish: function() {
				this.closeButton.remove();
				this.body.remove();
				this.window.remove();
				this.blind.remove();
			}.bind(this)
		});
	},
	
	appear: function() {
		
		var windowStyle = cx.utils.Helpers.mergeObjects(
			this.rawConfig.windowStyle,
			this.usrConfig.windowStyle
		);
		
		Effect.Appear(this.window, {
			duration: 0.3,
			to: windowStyle.alpha
		});
	},
	
	setupListeners: function() {
		
		this.closeButton.observe('mouseover', function() {
			this.closeButton.setStyle({
				backgroundPosition: this.closeButton.style.width + ' 0px'
			});
		}.bind(this));
		
		this.closeButton.observe('mouseout', function() {
			this.closeButton.setStyle({
				backgroundPosition: '0px 0px'
			});
		}.bind(this));
		
		this.closeButton.observe('click', this.close.bind(this));
	},
	
	onWindowResize: function() {
		
		var clientHeight = this.getBrowserInnerWindowHeight();			
		var _marginTop = parseInt(this.window.getStyle("height").split("px").shift());
		
		if (Math.abs(_marginTop / 2) > (clientHeight/2)) {
			
			this.window.setStyle({marginTop: Math.round(-clientHeight/2) + "px"});
			
		}
		else {
			
			this.window.setStyle({marginTop: Math.round(-_marginTop/2) + "px"});
		}
	},
	
	getBrowserInnerWindowHeight: function() {
		
		var y;
		if (self.innerHeight) 
		{
			y = self.innerHeight;
		}
		else if (document.documentElement && document.documentElement.clientHeight)
		{
			y = document.documentElement.clientHeight;
		}
		else if (document.body) 
		{
			y = document.body.clientHeight;
		}
		
		return(y);
	}
};
cx.controls.SpotlightWindow.openImageWindow = function(url, width, height) {
	
	return new cx.controls.SpotlightWindow(" ", {
		windowStyle: {
			width: width,
			height: height
		},
		bodyStyle: {
			margin: '9px',
			backgroundImage: 'url('+url+')',
			backgroundPosition: 'center',
			backgroundRepeart: 'no-repeat'
		}
	});
};