var contextHelp = {
init: function(){
var helpLinks = $$('a.contextHelp');
	helpLinks.each(function(el){
		Event.observe(el, 'click', contextHelp.getHelp);
	});
},
getHelp: function(ev){
	var el = Event.element( ev );
	if( el.nodeName != 'A' ){
		el = el.up();
	}
	Event.stop(ev);
	var divId = contextHelp.dragWindow.make( "Trwa ładowanie pomocy", "proszę czekać...", ev );
	new Ajax.Request(el.href, {
		method: 'post', 
		postBody: 'ajax=1', 
		onSuccess: function(t){
			if(t.responseText=='404'){
				$$('#'+divId+' .titleText')[0].update('Błąd...');
				$$('#'+divId+' .content')[0].update('Nie znaleziono opisu dla tego elementu...<br/>Możesz nas poinformować o błędzie poprzez <a href="/kontakt/problemy-techniczne">formularz kontaktowy</a>');
			} else {
				var helpTopic = t.responseText.evalJSON();
				$$('#'+divId+' .titleText')[0].update( helpTopic.title );
				$$('#'+divId+' .content')[0].update( helpTopic.content );
			}
		}
	});
},
dragWindow : 
	{
	make : function( title, content, event ){
		var mouseX = Event.pointerX( event );
		var mouseY = Event.pointerY( event );
		var topOffset = mouseY + 20;
		var leftOffset = mouseX + 10;
		var dimensions = contextHelp.dragWindow.getPageDimensions();
		if( topOffset+140 > dimensions.pageHeight ){
			topOffset = dimensions.pageHeight-140;
		}
		if( leftOffset+360 > dimensions.pageWidth ){
			leftOffset = dimensions.pageWidth-360;
		}
		var divId = 'dragWindow_'+Math.round(Math.random()*10000);
		var div = '<div id="'+divId+'" class="contextHelpWindow" style="display:none; top: '+topOffset+'px; left: '+leftOffset+'px"></div>';
		new Insertion.Bottom( document.body, div );
				
		templ = new Template( contextHelp.dragWindowTemplate );
		$(divId).update( templ.evaluate( {'title':title, 'content':content} ) );
		new Draggable( $(divId), {handle:$$('div#'+divId+' div.title')[0], starteffect: false, endeffect: false} );
		$$('div#'+divId+' .dragWindowClose')[0].observe( 'click', contextHelp.dragWindow.close.bindAsEventListener(contextHelp, divId) );
		new Effect.Appear( $(divId), { duration:0.2 } );
		return divId;
	},
	close : function( event, id ){
		if( event ){
			Event.stop(event);
		}
		new Effect.Fade( $(id), { duration:0.4, afterFinish: function(eff){ if(eff.element){ eff.element.remove() } } } );
	},
	getPageDimensions : function()
	{
		var xScroll, yScroll;
		
		if (window.innerHeight && window.scrollMaxY) {	
			xScroll = window.innerWidth + window.scrollMaxX;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}
		
		var windowWidth, windowHeight;
	
		if (self.innerHeight) {	// all except Explorer
			if(document.documentElement.clientWidth){
				windowWidth = document.documentElement.clientWidth; 
			} else {
				windowWidth = self.innerWidth;
			}
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) { // other Explorers
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}	
		
		// for small pages with total height less then height of the viewport
		if(yScroll < windowHeight){
			pageHeight = windowHeight;
		} else { 
			pageHeight = yScroll;
		}
		// for small pages with total width less then width of the viewport
		if(xScroll < windowWidth){	
			pageWidth = xScroll;		
		} else {
			pageWidth = windowWidth;
		}
		return {
				'pageWidth'		: pageWidth,
				'pageHeight'	: pageHeight,
				'windowWidth'	: windowWidth,
				'windowHeight'	: windowHeight
			};
	}
},
dragWindowTemplate : '<div class="title"><a href="#" class="dragWindowClose"><img src="/images/index/panelClose.png" alt="[x]"/></a>' +
	'<span class="titleText">#{title}</span>' +
	'</div>' +
	'<div style="clear: both"></div>'+
	'<div class="content">' +
	'#{content}' +
	'</div>'
};
Event.observe(window, 'load', contextHelp.init);