var ERROR_MESSAGE = "Es ist ein Fehler aufgetreten.";


var ContentLayer = {

	// initialize the ContentLayer
	initialize : function(width, height) {

		this.isLoaded = false;

		// init default options
		this.options = Object.extend( {
			contentsWidth :650,
			contentsHeight :400
		});
		clientWidth = ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) - 120;
		clientHeight = ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) - 120;
		
		aspect = width/height;

		if (width > clientWidth || height > clientHeight){
			
            if (Math.round(width*(1/aspect))<=clientHeight) {
            	width = clientWidth;
				height = Math.round(clientWidth*(1/aspect));
            }            
            else {
            	width = Math.round(clientHeight*aspect);
				height = clientHeight;
            }
		}
		

		this.options.contentsWidth = width;
		this.options.contentsHeight = height;
		
		// build background layer
		this.layer = new Element('div')
			.setProperty('id', 'layerBackground')
			.setStyles( {
				'width': '100%',
				'height': '100%',
				'padding-left': '10px',
				'padding-top': '10px',
				'top': '0px',
				'left': '0px',
				'background': '#333333 no-repeat center',
				'z-index': '4000',
				'position': 'fixed'
			})
			.injectTop(document.body);

		if (Browser.Engine.trident && Browser.Engine.version < 5) {
			this.layer.setStyles( {
				'position' :'absolute'
			});
		}
		
		this.layer.onclick = this.close.bind(this);		
		
		// build layer container as placeholder for elements
		this.layerContainer = new Element('div')
			.setProperty('id', 'layer')
			.setStyles( {
				width :this.options.contentsWidth + 'px',
				height :this.options.contentsHeight + 'px',
				marginLeft :'-' + (this.options.contentsWidth / 2) + 'px',
				marginTop :'-' + (this.options.contentsHeight / 2) + 'px',
				'opacity' :'1',
				'top' :'50%',
				'left' :'50%',
				'background' :'#ffffff no-repeat center',
				'border' :'solid 3px #000000',
				'overflow' :'auto',
				'z-index' :'5000',
				'position' :'fixed',
				'overflow' :'auto',
				'padding-top' : '25px'
			})
			.injectInside(document.body);

		//IE 6 Bugfix
		if (Browser.Engine.trident && Browser.Engine.version < 5) {
			this.layerContainer.setStyles( {
				'position' :'absolute'
			});
		}
		
		// add close icon to the top right of the window
		this.closer = new Element('img')
			.set( { 'src' :'/images/_12d_b_close.png' })
			.setStyles( { 
				'position' :'absolute', 
				'top' :'0px', 
				'right' :'0px', 
				'cursor' :'pointer',
				'padding' : '5px'
			})
			.injectTop(this.layerContainer);
		 
		this.closer.onclick = this.layer.onclick;
		
		// add loading indicator to content area
		this.indicator = new Element('img')
		.set( { 'src' :'/images/indicator.gif' })
		.setProperty('id', 'indicator')
		.setStyles( { 
			'position' :'absolute', 
			'top' : (this.options.contentsHeight / 2) + 'px',
			'left' : (this.options.contentsWidth / 2) + 'px', 
			'cursor' :'pointer',
			'padding' : '5px'
		})
		.injectTop(this.layerContainer);
		
		//container for image
		this.imageContainer = new Element('div', {
			'align': 'center'
		}).injectTop(this.layerContainer);
		
//		// add loading indicator to content area
//		this.layerImage = new Element('img')
//		.setProperty('id', 'layerImage')
//		.setStyles( { 
//			'display' :'none', 
//			'margin' : '10px'
//		})
//		.injectTop(this.imageContainer);		
				
		// add main content box to layer
		this.layerContent = new Element('div').setStyles( {
			'width' :'95%',
			'height' :(this.options.contentsHeight - 10 - 25) + 'px',
			'overflow' :'auto',
			'display' : 'none',
			'padding' : '5px'
		}).injectInside(this.layerContainer);

		// disable the browser scrollbar
		$(document.documentElement).setStyles( {
			'overflow' :'hidden'
		});

		// create Effects
		this.fx = {
			layer :new Fx.Tween(this.layer, {
				property :"opacity",
				duration :500
			}).set(0),
			layerContent :new Fx.Tween(this.layerContent, {
				property :"opacity",
				duration :500
			})
		}

		this.ajaxRequest = Class.empty;
		this.isLoaded = true;
	},

	open : function(linkUrl, width, height) {

		if (this.isLoaded != true) {
			this.initialize(width, height);
		}

		this.setup(true);

		this.fx.layer.start(0.8);
		return this.loadlayerContent(linkUrl);
	},
	
	openImage : function(linkUrl, width, height) {

		if (this.isLoaded != true) {
			this.initialize(width, height);
		}

		this.setup(true);

		this.fx.layer.start(0.8);
		
		return this.loadlayerImage(linkUrl);
	},
	
	openImageHead : function(linkUrl, headline, width, height) {

		if (this.isLoaded != true) {
			this.initialize(width, height);
		}

		this.setup(true);

		this.fx.layer.start(0.8);
		
		return this.loadlayerImageHead(linkUrl, headline);
	},
	
	openProposal : function(linkUrl, width, height, linkTitle) {

		if (this.isLoaded != true) {
			this.initialize(width, height);
		}

		this.setup(true);

		this.fx.layer.start(0.8);
		
//		this.layerImage.setStyles( {
//			'max-width' : '800px',
//			'max-height' : '600px'
//			});
				
		this.linkcontainer = new Element('a', {
		    'href': linkUrl,
		    'class': 'blue',
		    'target': '_blank',
		    'html': linkTitle,
		    'styles': {
				'position' :'absolute', 
				'top' : '0px',
				'left' : '0px', 
				'cursor' :'pointer',
				'padding' : '5px'
		    },
		    'events': {
//		        'click': function(){
//		            alert('clicked');
//		        },
		    }
		})
		.injectTop(this.layerContainer);

		return this.loadlayerImage(linkUrl);
	},	
	
	openSWF : function(linkUrl, width, height, allowscriptaccess) {

		if (this.isLoaded != true) {
			this.initialize(width, height);
		}

		this.setup(true);

		this.fx.layer.start(0.8);
		/*
		var htmlContent = '\
			<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="'+ width + '" height="'+ height + '">\
			<param name="movie" value="'+linkUrl+'">\
			<param name="quality" value="high">\
			<EMBED src="'+linkUrl+'" width="'+ (width-30) + '" height="'+ (height-35) + '" hidden="false" autostart="true"></embed>\
			</object>';
			
		*/
		var htmlContent = '\
				<div id=\"flashContent\"></div>';
			
		this.layerContent.set('html', htmlContent);
		
		var flashvars = {};
		var params = {};
		var attributes = {};
		
		if (allowscriptaccess == true){
			
			params.allowscriptaccess = "always";
		}
		else {
		
			params.allowscriptaccess = "never";
		}
		
		swfobject.embedSWF(linkUrl, "flashContent", "" + width-25, "" + height-35, "8.0.0", false, flashvars, params, attributes);
		
		this.showContent();				
	},	
	
	close : function() {
		for ( var f in this.fx){
			this.fx[f].cancel();
		}
		
		this.layerContainer.style.display = 'none';
		
		this.fx.layer.chain(this.setup.pass(false, this)).start(0);
		
		$(document.documentElement).setStyles( {
			'overflow' :'auto'
		});
		
//		<!-- komischer fehler -->
		this.layer.dispose();
		if ($('layer') != null)	$('layer').dispose();
		
		
		this.isLoaded = false;
		return false;
	},	

	setup : function(open) {
		var elements = $A($$('object'));
		elements.each( function(el) {
			el.style.display = open ? 'none' : 'block';
		});
	},

	loadlayerContent : function(linkUrl) {

		this.fx.layerContent.set(0);

		this.indicator.setStyles( {
			'display' : 'block'
		});		
		
		// AJAX call here
		var showContent = this.showContent.bind(this);
		var showError = this.showError.bind(this);
		var ajaxOptions = {
			method :'get',
			url :linkUrl,
			update :this.layerContent,
			onComplete : showContent,
			onFailure :showError
		};
		this.ajaxRequest = new Request.HTML(ajaxOptions).send();

		return false;
	},
	
	postlayerContent : function(linkUrl, postParameter) {

		this.fx.layerContent.set(0);

		this.indicator.setStyles( {
			'display' : 'block'
		});		
		
		// AJAX call here
		var showContent = this.showContent.bind(this);
		var showError = this.showError.bind(this);
		var ajaxOptions = {
			method :'post',
			data: postParameter,
			url :linkUrl,
			update :this.layerContent,
			onComplete : showContent,
			onFailure :showError
		};
		this.ajaxRequest = new Request.HTML(ajaxOptions).send();

		return false;
	},	
	
	loadlayerImage : function(linkUrl) {

		this.fx.layerContent.set(0);

		this.indicator.setStyles( {
			'display' : 'block'
		});		
		
		//this.layerImage.src = linkUrl;

		var imageAsset = new Asset.image(linkUrl, { onload:function(img){

			img.removeProperty('width');
			img.removeProperty('height');
			img.setStyles({
				'max-width' : '800px',
				'max-height' : '600px',
				'margin' : '10px'
			});

			this.indicator.setStyles( {
				'display' : 'none'
			});
			
			img.inject(this.imageContainer);
			
		}.bindWithEvent(this)});		
		
//		this.layerImage.setStyles( {
//			'display' : 'block'
//			});
		
		//new mooZoom({image:this.layerImage});
		
		return false;
	},
	
	loadlayerImageHead : function(linkUrl, headline) {

		this.fx.layerContent.set(0);

		this.indicator.setStyles( {
			'display' : 'block'
		});		
		
		//this.layerImage.src = linkUrl;
		
		var head = new Element('h2', {'html' : headline});
		
		head.inject(this.imageContainer);

		var imageAsset = new Asset.image(linkUrl, { onload:function(img){

			img.removeProperty('width');
			img.removeProperty('height');
			img.setStyles({
				'max-width' : '800px',
				'max-height' : '600px',
				'margin' : '10px'
			});

			this.indicator.setStyles( {
				'display' : 'none'
			});
			
			img.inject(this.imageContainer);
			
		}.bindWithEvent(this)});		
		
//		this.layerImage.setStyles( {
//			'display' : 'block'
//			});
		
		//new mooZoom({image:this.layerImage});
		
		return false;
	},
	
	// callback functions - show content
	showContent : function() {
		this.layerContent.setStyles( {
			'display' : 'block'
			});
		
		this.indicator.setStyles( {
			'display' : 'none'
		});
		
		this.fx.layerContent.start(1);
	},
	
	// callback functions - show request Error	
	showError : function() {
		this.layerContent.setStyles( {
			'display' : 'block'
			});
		
		this.indicator.setStyles( {
			'display' : 'none'
		});
		
		this.layerContent.set('html', ERROR_MESSAGE);

	}
};