/*
 * NM_Layer
 * Class for all "Layer-Popups"
 * NM_Layer.js
 *
 * @author		Steffen Abel <steffen.abel@dmc.de>
 * @version 	$Id: NM_Layer.js 55198 2009-10-23 07:05:41Z wburger $
 */

var NM_LayerClass = new Class ({

	/**
	 * NM_Layer.initialize
	 */
	initialize: function( objParam ) {
		this.opacity = objParam.opacity;
		this.width = 710;
		this.height = 410;

		if( false !== $type( $E( '.langNL' ) ) ){
			this.strClose = 'Sluiten';
		}
		else{
			this.strClose = 'Fermer';;
		}

		if(!this.opacity) {
			this.opacity = 0.8;
		}

		// Create Background Layer
		this.bgLayer = new Element('div', {
			'styles': {
				'position': 'absolute',
				'left': '0px',
				'top': '0px',
				'width': this.getWindowWidth(),
				'height': this.getWindowHeight(),
				'background-color': '#333333',
				'z-index': 10,
				'opacity': '0'
			},
			'id': 'NM_LayerBg'
		});

		this.bgLayer.addEvent('click', function() {
			this.hide();
		}.bind(this));

		// Create Close Button
		this.close = new Element('a', {
			'href': '#',
			'styles': {
				'width': '80px',
				'float': 'right',
				'text-align': 'right'
			}
		});
		this.close.appendText(this.strClose);
		this.close.addEvent('click', function() {
			this.hide();
		}.bind(this));

		// Create Iframe (IE6 Hack to hide Combo-Boxes)
		this.bgIframe = new Element('iframe', {
			'id': 'bskCoverer',
			'frameborder': '0',
			'src': '',
			'styles': {
				'position': 'absolute',
				'left': '0px',
				'top': '0px',
				'width': this.getWindowWidth(),
				'height': this.getWindowHeight(),
				'opacity': 0.01
			}
		});

		// Fade Effect for Background Layer / Iframe
		this.bgLayerFade = this.bgLayer.effects( {duration: 250, transition: Fx.Transitions.sineInOut } );

		this.funcPosition = function() { this.position(); }.bind(this);
	},

	/**
	 * NM_Layer.showUrl
	 * opens a new Layer with Iframe and displays the submitted url in the iframe
	 */
	showUrl: function ( url, width, height, scrolling ) {

		var iframewidth = width;
		var iframeheight = height - 24;

		this.width = width;
		this.height = height;

		var left =  (window.getScrollLeft() + (window.getWidth() - this.width)/2) + 'px';
		var top = (window.getScrollTop() + (window.getHeight() - this.height)/2);

		if(top<10) {
			top = 10;
		}

		top = top + 'px'

		if(!scrolling) scrolling = 'auto'

		// Create Content-Iframe
		this.iframe = new Element('iframe', {
							src: url,
							frameborder: 0,
							width: iframewidth,
							height: iframeheight,
							id: 'NM_LayerIframe',
							scrolling: scrolling
						});

		// Create Content Layer
		this.contentLayer = new Element('div', {
			'styles': {
				'width': width+'px',
				'height': height+'px',
				'left': left,
				'top': top,
				'background-color': '#EEEEEE',
				'border': '4px solid #555555',
				'position': 'absolute',
				'opacity': 0,
				'z-index': 11
			},
			'id': 'NM_LayerContent'
		});

		this.setBGLayerDimension();


		this.close.inject(this.contentLayer);
		this.iframe.inject(this.contentLayer);

		if(window.ie6) {
			// IE6 Hack
			this.bgIframe.inject(document.body);
		}

		this.bgLayer.inject(document.body);
		this.contentLayer.inject(document.body);

		this.bgLayerFade.start( { 'opacity': [0, this.opacity] } );
		this.contentLayer.setStyle( 'opacity', 1 );

		window.addEvent( 'scroll', this.funcPosition );
	},
	/**
	 * NN_Layer.showLayer()
	 *
	 * displays a given Layer as Lightbox
	 **/
	showLayer: function (title, layerID, width, height ) {

		this.width = width;
		this.height = height;

		var left =  (window.getScrollLeft() + (window.getWidth() - this.width)/2) + 'px';
		var top = (window.getScrollTop() + (window.getHeight() - this.height)/2);

		if(top<10) {
			top = 10;
		}

		top = top + 'px';

		// Create Content Layer
		this.contentLayer = new Element('div', {
			'styles': {
				'width': this.width+'px',
				'height': this.height+'px',
				'left': left,
				'top': top,
				'background-color': '#EEEEEE',
				'border': '4px solid #555555',
				'position': 'absolute',
				'opacity': 0,
				'z-index': 11
			},
			'id': 'NM_LayerContent'
		});

		// Create Headline Layer + Span
		this.headlineLayer = new Element('div', {
			'styles': {
				'position': 'absolute',
				'width': (this.width-20)+'px',
				'top': '0px',
				'padding': '3px 3px 10px 10px'
			}
		});

		this.headlineSpan = new Element('span', {
			'styles': {
				'width': (this.width-120)+'px',
				'float': 'left',
				'font-weight': 'bold',
				'margin-bottom' : '10px'
			}
		});
		this.headlineSpan.appendText( title );
		this.headlineSpan.inject(this.headlineLayer);



		// Set bgLayer-Size
		this.setBGLayerDimension();

		//create new Content

		this.textLayer = $(layerID).clone();
		this.close.inject(this.headlineLayer);
		this.headlineLayer.inject(this.contentLayer);
		this.textLayer.inject(this.contentLayer);
		this.textLayer.setStyles({
				'top': '20px',
				'padding': '10px',
				'position': 'relative',
				'overflow': 'auto',
				'display' : 'block'
		});
		if(window.ie6) {
			this.bgIframe.inject(document.body);
			this.bgIframe.setStyle( 'height', window.getScrollHeight() + 'px' ),
			this.bgIframe.setStyle( 'width', window.getScrollWidth() +'px' );
		}

		// Inject bgLayer and contentLayer to body
		this.bgLayer.inject(document.body);
		this.contentLayer.inject(document.body);

		// Start Fade
		this.bgLayerFade.start( { 'opacity': [0, this.opacity] } );
		this.contentLayer.setStyle( 'opacity', 1 );

		// add Eventlistener for Scrolling
		window.addEvent('scroll', this.funcPosition);
	},

	/**
	 * NM_Layer.showMessage
	 * displays the given html-content as a new layer
	 */
	showMessage: function( title, message, width, height ) {
		this.width = width;
		this.height = height;

		var left =  (window.getScrollLeft() + (window.getWidth() - this.width)/2) + 'px';
		var top = (window.getScrollTop() + (window.getHeight() - this.height)/2);

		if(top<10) {
			top = 10;
		}

		top = top + 'px';

		// Create Content Layer
		this.contentLayer = new Element('div', {
			'styles': {
				'width': this.width+'px',
				'height': this.height+'px',
				'left': left,
				'top': top,
				'background-color': '#EEEEEE',
				'border': '4px solid #555555',
				'position': 'absolute',
				'opacity': 0,
				'z-index': 11
			},
			'id': 'NM_LayerContent'
		});

		// Create Headline Layer + Span
		this.headlineLayer = new Element('div', {
			'styles': {
				'position': 'absolute',
				'width': (this.width-20)+'px',
				'top': '0px',
				'padding': '3px 3px 3px 10px'
			}
		});

		this.headlineSpan = new Element('span', {
			'styles': {
				'width': (this.width-120)+'px',
				'float': 'left',
				'font-weight': 'bold'
			}
		});
		this.headlineSpan.appendText( title );
		this.headlineSpan.inject(this.headlineLayer);

		// Create Text Layer
		this.textLayer = new Element('div', {
			'styles': {
				'width': (this.width-20)+'px',
				'height': (this.height-40)+'px',
				'background-color': '#FFFFFF',
				'top': '20px',
				'padding': '10px',
				'position': 'relative',
				'overflow': 'auto'
			}
		});

		// Set HTML in Textlayer
		this.textLayer.innerHTML = message;

		// Set bgLayer-Size
		this.setBGLayerDimension();


		// Inject CloseButton and TextLayer
		this.close.inject(this.headlineLayer);
		this.headlineLayer.inject(this.contentLayer);
		this.textLayer.inject(this.contentLayer);

		if(window.ie6) {
			// IE6 Iframe Hack
			this.bgIframe.setStyle( 'height', window.getScrollHeight()+'px' ),
			this.bgIframe.setStyle( 'width', window.getScrollWidth() + 'px' );
			this.bgIframe.inject(document.body);
		}

		// Inject bgLayer and contentLayer to body
		this.bgLayer.inject(document.body);
		this.contentLayer.inject(document.body);

		// Start Fade
		this.bgLayerFade.start( { 'opacity': [0, this.opacity] } );
		this.contentLayer.setStyle( 'opacity', 1 );

		// add Eventlistener for Scrolling
		window.addEvent('scroll', this.funcPosition);
	},

	/**
	 * NM_Layer.updateContent
	 */
	updateContent: function( content ) {
		this.textLayer.innerHTML = content;
	},

	/**
	 * NM_Layer.hide
	 * hides an opened layer
	 */
	hide: function() {
		this.bgLayerFade.start( { 'opacity': [this.opacity, 0] } ).chain( this.removeLayers.bind(this) );
		this.contentLayer.setStyle( 'opacity', 0 );
	},

	/**
	 * NM_Layer.removeLayers
	 * helper function for hide; removes the created layers after fadeout
	 */
	removeLayers: function( ) {
		window.removeEvent( 'scroll', this.funcPosition );
		this.contentLayer.remove();
		this.bgLayer.remove();
		if(window.ie6) {
			// IE6 Hack
			this.bgIframe.remove();
		}
	},

	/**
	 * NM_Layer.position
	 * positions the layers when the user uses the scrollbar
	 */
	position: function() {
		var top = (window.getScrollTop() + (window.getHeight() - this.height)/2);
		if(top<10) {
			top = 10;
		}
		top = top + 'px'

		new Fx.Styles('NM_LayerContent', {duration: 75, transition: Fx.Transitions.sineInOut}).start({
			'left':(window.getScrollLeft() + (window.getWidth() - this.width)/2)+'px',
			'top': top});

	},

	/**
	 * NM_Layer.getWindowHeight()
	 * set the Background Layer Dimensions
	 **/
	setBGLayerDimension : function() {
		var intBgWidth = window.getScrollWidth();
		if(window.ie6) {
			intBgWidth -= 28;
		}
		this.bgLayer.setStyle( 'height', window.getScrollHeight()+'px' );
		this.bgLayer.setStyle( 'width', intBgWidth+'px' );
	},

	/**
	 * NM_Layer.getWindowHeight()
	 * returns the Window Height
	 **/
	getWindowHeight: function()	{
		if( document.body && document.body.offsetHeight )
		{
			return document.body.offsetHeight;
		}
		else if( window.innerHeight > 0 )
		{
			return window.innerHeight;
		}
		else
		{
			return 0;
		}
	},

	/**
	 * NM_Layer.getWindowWidth()
	 * returns the window Width
	 **/
	getWindowWidth: function()	{
		var intWidth = window.getWidth();
		if( intWidth > 0 )
		{
			return intWidth;
		}
		else if( document.body && document.body.offsetWidth )
		{
			return document.body.offsetWidth;
		}
		else if( window.innerWidth > 0 )
		{
			return window.innerWidth;
		}
		else
		{
			return 0;
		}
	}
});

var NM_Layer = null;

window.addEvent('load', function() {

	if( null == NM_Layer )
	{
		NM_Layer = new NM_LayerClass( {} );
	}
});