function CompositionPAFSetup( formId , installationPath ) {
	var form = document.getElementById(formId);
	form.onsubmit = function() {
		return CompositionPAFSubmit(this);
	}
	form.workspace = getFormElement( form.id , "workspace" );
	form.patternSelector = form.elements[ "data[Composition][pattern_id]" ];
	form.baseCompositionSelector = form.elements[ "data[Composition][baseComposition_id]" ];
	form.isExtendedSelector = form.elements[ "data[Composition][isExtended]" ];
	form.frameExtendableSelector = getChildrenWithId( form, "frameExtendableSelector" )[0];
	form.frameExtendableSelector.onchange = function() {
		if( this.form.pattern.current ) this.form.pattern.current.setExtendable( this.value == "1" );
	}

	form.loadPattern = function() {
		var location = installationPath+"/ajax.php?action=getCompositionData&isExtended="+this.isExtendedSelector.value+"&pattern_id="+this.patternSelector.value+"&baseComposition_id="+this.baseCompositionSelector.value+"&composition_id="+this.elements["data[Composition][id]"].value ;
		var ajax = new AJAX(location, true);
		ajax.form = this;
		ajax.onload = function() {
			var doc = this.http_request.responseXML;
			if( ! doc ) return alert("Problem z ładowaniem poprzez moduł AJAX !");
			var file;
			o = doc.getElementsByTagName("pattern");
			if( o[0] ) file = o[0].getAttribute("file");
			if( ! file ) return alert( "Problem z załadowaniem szablonu !" );

			var extendableFrames = [];
			var o = doc.getElementsByTagName("extendableframes");

			if( o[0] && o[0].childNodes ) for( var i = 0 ; i < o[0].childNodes.length ; i++ ) 
				extendableFrames.push( o[0].childNodes[i].getAttribute("nr") );

			var extendedFrames = [];
			var o = doc.getElementsByTagName("extendedframes");
			if( o[0] && o[0].childNodes ) for( var i = 0 ; i < o[0].childNodes.length ; i++ ) 
				extendedFrames.push( o[0].childNodes[i].getAttribute("nr") );

			var frameDescription = [];
			var o = doc.getElementsByTagName("framedescription");
			if( o[0] && o[0].childNodes ) for( var i = 0 ; i < o[0].childNodes.length ; i++ ) 
				frameDescription.push( [ o[0].childNodes[i].getAttribute("nr") , o[0].childNodes[i].getAttribute("title") ] );

			var moduleList = [];
			var o = doc.getElementsByTagName("modulelist");
			if( o[0] && o[0].childNodes ) for( var i = 0 ; i < o[0].childNodes.length ; i++ ) 
				moduleList.push( { id:o[0].childNodes[i].getAttribute("id") , frame:o[0].childNodes[i].getAttribute("frame") , name:o[0].childNodes[i].getAttribute("name") } );
			CompositionPAFLoadPattern( this.form.id , file , moduleList , frameDescription , extendableFrames , extendedFrames );
		}
	}
	form.loadPattern();
	form.moduleList = getFormElementsById( form.id , "moduleList" )[0] ;
	form.moduleList.container = getChildrenWithId( form.moduleList , "container" )[0];
	form.moduleList.getClassId = function() {
		return getChildrenWithId( this , "class_id")[0].value;
	}
	form.moduleList.load = function() {
		while( this.container.childNodes.length > 0 ) this.container.removeChild(this.container.firstChild);
//TODO	tutaj powinna być pobrana ścieżka dostępu do pliku, bo nie wiadomo gdzie będzie ta klasa zainstalowana
		var ajax = new AJAX("modules/CMS/Composition/ajax.php?action=getModuleList&class_id="+this.getClassId());
		ajax.target = this.container;
		ajax.onload = function() {
			var doc = this.http_request.responseXML;
			if( ! doc ) return alert("Problem z ładowaniem poprzez moduł AJAX !");
			var o = doc.getElementsByTagName("modulelist");
			if( o[0] && o[0].childNodes ) for( var i = 0 ; i < o[0].childNodes.length ; i++ ) {
				var module = o[0].childNodes[i];
				var node = document.createElement("div");
				node.innerHTML = module.getAttribute("name");
				node.setAttribute("moduleId", module.getAttribute("id"));
				this.target.appendChild(node);
				node.form = form;
				node.onclick = function() {
					this.form.pattern.addItem(this);
				}
			}
			var o = doc.getElementsByTagName("moduletypes");
			if( o[0] && o[0].childNodes ) for( var i = 0 ; i < o[0].childNodes.length ; i++ ) {
				var module = o[0].childNodes[i];
				var node = document.createElement("div");
				node.innerHTML = module.getAttribute("name");
				this.target.appendChild(node);
			}
		}
	}
	form.moduleList.roll = function() {
		if( this.container.offsetHeight < container.scrollHeight )
			this.container.style.height = container.scrollHeight + "px";
		else
			this.container.style.height = "200px";
	}
	form.moduleList.load();
}
function CompositionPAFLoadPattern( formId , file , data , frameDescription , extendableFrames , extendedFrames ) {
	var ajax = new AJAX( file, true );
	ajax.formId = formId;
	ajax.onload = function() { 
		var workspace = getFormElement( this.formId , "workspace" );
		workspace.innerHTML = this.document;	
		var pattern = getFormElement( this.formId , "pattern" );
		removeTextNodes( pattern );
		var form = document.getElementById(this.formId);
		if( pattern ) {
			removeTextNodes( pattern );
			pattern.className = "pattern";
			pattern.form = form;
			form.pattern = pattern;
			CompositionPAFSetPatternFrameActions( pattern , frameDescription );
			pattern.setDragged = function( v ) {
				v=(v)?1:0;
				this.setAttribute( "dragged" , v );
			}
			pattern.isDragged = function() {
				return this.getAttribute("dragged") == 1;
			}
			pattern.getFrame = function( nr ) {
				this.current = null;
				if( this.frames ) for( var j = 0 ; j < this.frames.length ; j++ ) if( this.frames[j].getAttribute("nr") == nr ) {
					this.frames[j].setSelected(true);
					break;
				} 
				return this.current;
			}
			for( var i = 0 ; i < extendableFrames.length ; i++ ) if( pattern.getFrame( extendableFrames[i] ) )
				pattern.getFrame( extendableFrames[i] ).setExtendable(true);
			
			for( var i = 0 ; i < pattern.frames.length ; i++ ) pattern.frames[i].setEnabled(extendedFrames.length == 0); 
			for( var i = 0 ; i < extendedFrames.length ; i++ )
				pattern.getFrame( extendedFrames[i] ).setEnabled(true);

			for( var i = 0 ; i < data.length ; i++ ) {
				var node = document.createElement( "div" );
				node.className = "module";
				node.setAttribute( "moduleId" , data[i].id );
				node.innerHTML = data[i].name;
				pattern.getFrame( data[i].frame );
				if( pattern.current ) pattern.current.addItem( node );
			}
			document.getElementById( this.formId ).pattern = pattern;
			pattern.setExtended = function(v,silent) {
				v = (v)?1:0;
				this.setAttribute("extended",v);
				this.form.patternSelector.className = (v)?"disabled":"";
				this.form.baseCompositionSelector.className = (!v)?"disabled":"";
				this.form.patternSelector.disabled = (v)?true:false;
				this.form.baseCompositionSelector.disabled = (!v)?true:false;
			}
			pattern.setExtended( getFormElementValue( form.id , "data[Composition][isExtended]" ) == "true" , true );
			pattern.addItem = function( item ) {
				if( ! this.current ) return alert( "Wybierz ramkę !" );
				else this.current.addItem( item );
			}
		}
	};
}
function CompositionPAFSetPatternFrameActions( pattern , frameDescription , node ) {
	if( ! node ) node = pattern;
	if( node.getAttribute( "static" ) ) {
		node.className = "static";
	}
	if( node.getAttribute( "frame" ) ) {
		if( ! pattern.frames ) pattern.frames = [ node ];
		else pattern.frames.push( node );
		for( var i = 0 ; i < frameDescription.length ; i++ ) if( frameDescription[i][0] == node.getAttribute("nr") ) 
		node.name = frameDescription[i][1];
		node.title = node.name;
		node.parent = pattern;
		node.onmouseover = function() {
			window.status = this.name;
			if( pattern.isDragged() && this.isEnabled() ) this.setSelected(true);
		}
		node.onmouseout = function() {
			window.status = "";
		}
		node.onclick = function(e) {
			if( ! this.isEnabled() ) return;
			if( pattern.isDragged()  ) {
				document.body.removeEventListener( "mousemove", pattern.draggedModule.bodyMouseMoveListener, true );
				pattern.draggedModule.style.position = "";
				pattern.setDragged(false);
				pattern.draggedModule.setDragged(false);
				if( this != pattern.draggedModule.parentNode ) pattern.draggedModule.parentNode.selectedItem = null;
				pattern.draggedModule.parentNode.removeChild(pattern.draggedModule);
				this.addItem(pattern.draggedModule,true);
			} else this.setSelected(true);
		}
		node.setSelected = function( v ) {
			v = (v)?1:0;
			this.setAttribute( "selected" , v );
			if( v == 1 ) {
				//TODO	to powinno być w funkcji pattern.selectFrame()
				this.parent.current = this;
				for( var i = 0 ; i < this.parent.frames.length ; i++ ) if( this.parent.frames[i] != this )
					pattern.frames[i].setSelected( false );
				this.parent.form.frameExtendableSelector.value = ( this.isExtendable() ) ? 1 : 0;
			} else {
			}
			this.getClassName();
		}
		node.isSelected = function() {
			return this.getAttribute("selected") == 1;
		}
		node.setExtendable = function( v ) {
			v = (v)?1:0;
			this.setAttribute( "extendable" , v );
			node.getClassName();
		}
		node.isExtendable = function() {
			return this.getAttribute("extendable") == 1;
		}
		node.setEnabled = function( v ) {
			v = (v)?1:0;
			this.setAttribute( "enabled" , v );
			node.getClassName();
		}
		node.isEnabled = function() {
			return this.getAttribute("enabled") == 1;
		}
		node.getClassName = function() {
			this.className = "frame";
			if( ! this.isEnabled() ) this.className = this.className + "_disabled";	
			else {
				if( this.isExtendable() ) this.className = this.className + "_extendable";	
				if( this.isSelected() ) this.className = this.className + "_active";	
			}
			return this.className;
		}
		node.selectItem = function( node ) {
			var frames = this.parent.frames;
			for( var j = 0 ; j < frames.length ; j++ ) for( var i = 0 ; i < frames[j].childNodes.length ; i++ ) 
				if( frames[j].childNodes[i] != node && ! frames[j].childNodes[i].isDragged() ) frames[j].childNodes[i].className = "";
			if( node ) node.className = "active";
			this.selectedItem = node;
		}
		node.removeItem = function() {
			if( ! this.selectedItem ) return alert( "Wybierz moduł ");
			if( ! window.confirm( "Czy na pewno usunąć moduł "+this.selectedItem.innerHTML+" ?" ) ) return;
			var node;
			if( this.selectedItem.nextSibling ) node = this.selectedItem.nextSibling;
			else if( this.selectedItem.previousSibling ) node = this.selectedItem.previousSibling;
			var removedChild = this.removeChild( this.selectedItem );
			this.selectItem( node );
			return removedChild;
		}
		node.addItem = function( item , noCloning ) {
			var module;
			module = (!noCloning) ? item.cloneNode(true) : item;
			module.onclick = function(e) {
				if( ! node.isEnabled() ) return;
				this.parentNode.selectItem(this);
				if( pattern.isDragged() ) {
				} else {
					e = getEvent(e);
					if( e.ctrlKey ) node.removeItem();
					else {
						e.stopPropagation();
						this.setDragged(true);
						this.style.position = "absolute";
						document.body.addEventListener( "mousemove", module.bodyMouseMoveListener, true );
					}
				}
			}
			module.bodyMouseMoveListener = function(e) {
					if( ! module.isDragged() ) return;
					e = getEvent(e);
					module.style.left = e.clientX + 10 + "px";
					module.style.top = e.clientY  + "px";
				}
			module.onmouseover = function() {
				if( pattern.isDragged() ) this.parentNode.selectItem(this);
			}
			module.onmouseout = function() {
				window.status = "";
			}
			module.setDragged = function( v ) {
				if( pattern.isDragged() ) return;
				v = (v)?1:0;
				this.setAttribute( "dragged" , v );
				pattern.setDragged( this.isDragged() );
				if( this.isDragged() ) {
					pattern.draggedModule = this;
				}
			}
			module.isDragged = function() {
				return this.getAttribute("dragged") == 1;
			}

			if( this.selectedItem && this.parent.current.selectedItem.nextSibling )
				this.insertBefore( module , this.parent.current.selectedItem.nextSibling );
			else this.appendChild( module );
			this.selectItem(module);
		}
		node.shiftItem = function( direction ) {
			if( ! this.selectedItem ) return;
			if( direction < 0 && this.selectedItem.previousSibling )
				this.insertBefore( this.selectedItem , this.selectedItem.previousSibling );
			else if( direction > 0 && this.selectedItem.nextSibling ) {
				if( this.selectedItem.nextSibling.nextSibling )
					this.insertBefore( this.selectedItem , this.selectedItem.nextSibling.nextSibling );
				else this.appendChild( this.selectedItem );
			}
		}
		node.getClassName();
	} else for( var i = 0 ; i < node.childNodes.length ; i++ ) CompositionPAFSetPatternFrameActions( pattern , frameDescription , node.childNodes[i] );
}
function CompositionPAFSubmit( form ) {
	if( ! form.pattern || ! form.pattern.frames ) return alert( "Nie ma ramek, nie ma czego zapisać !" );
	for( var i = 0 ; i < form.pattern.frames.length ; i++ ) if( form.pattern.frames[i].isEnabled() ) {
		var frameNr = form.pattern.frames[i].getAttribute( "nr");
		form.appendChild( document.createTextNode( frameNr ) );
		form.appendChild( document.createElement( "br" ) );
		var node = document.createElement( "input" );
		if( form.pattern.frames[i].isExtendable() ) {
			node.value = frameNr;
			node.name = "data[Composition][extendableFrames][]";
			form.appendChild( node );
			//node.type = "hidden";
		}
		var items = form.pattern.frames[i].childNodes;
		for( var z = 0 ; z < items.length ; z++ ) {
			var node = document.createElement( "input" );
			node.value = items[z].getAttribute("moduleId");
			node.name = "data[Composition][children]["+frameNr+"][]";
			//node.type = "hidden";
			form.appendChild( node );
			
			//following lines are for debuging purpose only
			form.appendChild( document.createTextNode( node.name ) );
			form.appendChild( document.createElement( "br" ) );
			/**/
		}
	}
	form.submitted.value = 1;
	//return false;
}