var config = {
	baseUrl:'http://kalenderwoche.net/ajax/comment.php',
	width:300,
	title: "Hallo, eine Frage...",
	titleColor:'#fff',
	question:"Wie könnte kalenderwoche.net deiner Meinung nach besser werden?",
	element: null,
	isVisible:false
};

var feedbackr = {
	
	element:null,
	
	init:function(){
		this.element = document.createElement('div');
		this.element.id = 'feedbackr';
		this.element.setStyle({
			width: 		config.width + 'px',
			position:	'fixed',
			right:		'100px',
			top:		'170px',
  			fontSize: 	'12px'
		});
		
		
		var headDiv = document.createElement('div');
		headDiv.setStyle({
			width: 		(config.width) + 'px',
			height:		'50px',
			padding:	'0px',
  			fontSize: 	'12px',
			fontFamily:	'sans-serif',
			color:		'#eee',
			background:	'url(pics/bg_top.png)'
		});
		
		var titleDiv = document.createElement('div');
		titleDiv.setStyle({
			height:		'25px',
			margin:		'0px 0px 0px 10px',
			display:	'block',
			float:		'left',
			padding:	'5px 10px 0px 0px',
  			fontSize: 	'12px',
			fontFamily:	'sans-serif',
			fontWeight:	'bold',
			color:		'#eee',
			background:	'url(pics/bg_top_title.png)',
			backgroundPosition:'right top',
			cursor:		'pointer'
		});
		titleDiv.innerHTML=config.title;
		
		
		var closeDiv = document.createElement('div');
		closeDiv.setStyle({
			position:	'absolute',
			height:		'20px',
			width:		'20px',
			top:		'30px',
			right:		'5px',
			cursor:		'pointer'
		});
		
		
		contentDiv = document.createElement('div');
		contentDiv.setStyle({
			width: 		(config.width) + 'px',
			padding:	'0px',
  			fontSize: 	'12px',
			fontFamily:	'sans-serif',
			color:		'#eee',
			textAlign: 	'right',
			background:	'#2a2a2a'
		});
		
		
		qP = document.createElement('p');
		qP.setStyle({
			margin:		'0px',
			padding:	'10px',
  			fontSize: 	'14px',
			textAlign: 	'left',
			fontFamily:	'sans-serif',
			color:		'#eee',
			background:	'#2a2a2a'
		});
		qP.innerHTML=config.question;
		
		
		aT = document.createElement('textarea');
		aT.id = 'fbrComment';
		aT.setStyle({
			width: 		(config.width-20) + 'px',
			height:		'70px',
			margin:		'10px',
			border:		'none',
  			fontSize: 	'14px',
			fontFamily:	'sans-serif',
			color:		'#2a2a2a',
			background:	'#fff'
		});
		
		aA = document.createElement('a');
		aA.id = 'fbrSend';
		aA.href='Javascript:void(0);';
		aA.setStyle({
			margin:		'10px',
			border:		'none',
  			fontSize: 	'14px',
			fontFamily:	'sans-serif',
			color:		'#fff',
		});
		aA.innerHTML='Abschicken';
		
		
		var bottomDiv = document.createElement('div');
		bottomDiv.setStyle({
			width: 		(config.width) + 'px',
			height:		'10px',
			padding:	'0px',
			background:	'url(pics/bg_bottom.png)'
		});
		
		
		headDiv.appendChild(titleDiv);
		headDiv.appendChild(closeDiv);
		
		contentDiv.appendChild(qP);
		contentDiv.appendChild(aT);
		contentDiv.appendChild(aA);
		
		this.element.appendChild(headDiv);
		this.element.appendChild(contentDiv);
		this.element.appendChild(bottomDiv);

		
		document.body.appendChild(this.element);
		
		
		
		this.element.setStyle({
			top: 		(document.viewport.getDimensions().height-25) + 'px'
		});
		
		config.element = this.element;

		Event.observe(titleDiv, 'click', this.moveBox);
		Event.observe(closeDiv, 'click', this.moveBox);
		Event.observe(aA, 'click', this.sendComment);
   		Event.observe(document.onresize ? document : window, "resize", this.doResize);
	},
	
	doResize:function(){
		if(!config.isVisible){
			config.element.setStyle({
				top: 		(document.viewport.getDimensions().height-25) + 'px'
			});
		}
	},
	
	moveBox:function(){
		//alert('test');
		var height = config.element.getHeight();
		//alert(height);
		if(config.isVisible){		
			new Effect.Move('feedbackr', { 
					x: 0, 
					y: height, 
					mode: 'relative', 
					afterFinish:function(){
						config.isVisible = false;
						feedbackr.doResize();																		
					}
				}
			);
			
		}else{
			new Effect.Move('feedbackr', { x: 0, y: -height, mode: 'relative' });
			config.isVisible = true;
		}
	},
	
	sendComment:function(){
		new Ajax.Request(config.baseUrl, {
  			parameters: 'comment='+$('fbrComment').value
		});
		
		$('fbrSend').innerHTML = 'Danke!';
		feedbackr.element.fade({ duration: 3.0});

	}
};


Event.observe(window, 'load', function() {
	var userAgent = navigator.userAgent.toLowerCase();
   if(/mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )){
	   //feedbackr.init();
   }
});