function ProfilePageClass() {
	var spacerCounter = 0;
	var userSheetVisible = false;
	
	this.init = function() {
		// Initialise Variables
		this.activeTab = 0;

		// Initialise Tab-Container		
		this.tabController = new TabControllerClass();
		this.tabController.id = "tabBar";
		this.tabController.name = "profilePage.tabController";
		this.tabController.eventHandler = this;
		this.tabController.editable = true;
		this.tabController.addSpacer = true;
		this.tabController.init();
		
		this.tabs = getTabs();
		
		for(z1=0; z1<this.tabs.length; z1++) {
			this.tabController.addTab(z1, this.tabs[z1]["Title"]);			
		}
		
		this.tabController.setActiveTab(presetActiveTab);
		
		this.profilePageApps = new Array;
		
		this.editProfilePage = false;
		
		this.container = new Array;
		this.containerCounter = 0;
		
		this.spacer = new Array;
		
		this.appCounter = 0;
		
		clearProfile = window.setInterval("refreshContentContainer()", 1000);				
	}

	this.openUserSheet = function() {
		if(userSheetVisible) {
			this.closeUserSheet();
		} else {
			userSheetVisible = true;
			document.getElementById("userSheet").style.display = 'block';
		}
	}
	
	this.closeUserSheet = function() {
		userSheetVisible = false;
		document.getElementById("userSheet").style.display = 'none';
	}
	
	this.tabSelected = function(id) {
		if(sameFriendsContainerDisplayed) {
			if(id==0) {
				document.getElementById("sameFriendsContentContainer").style.display = 'block';
			} else {
				document.getElementById("sameFriendsContentContainer").style.display = 'none';
			}
		}
		
		if(activeTabId) {
			document.getElementById("userProfileTab" + activeTabId).style.display = 'none';
			window.location.hash = 'tabId=' + this.tabs[id]['ID'];
			
			this.tabs[this.activeTab]["appCounter"] = this.appCounter;
			this.tabs[this.activeTab]["containerCounter"] = this.containerCounter;
			this.tabs[this.activeTab]["apps"] = this.profilePageApps;
			this.tabs[this.activeTab]["container"] = this.container;
		}
		
		this.activeTab = id;
		activeTabId = this.tabs[id]["ID"];
		
		if(this.tabs[id]['loaded']) {
			document.getElementById("userProfileTab" + activeTabId).style.display = 'block';
			
			this.appCounter = this.tabs[id]["appCounter"];
			this.containerCounter = this.tabs[id]["containerCounter"];
			this.profilePageApps = this.tabs[id]["apps"];
			this.container = this.tabs[id]["container"];
		} else {
			this.appCounter = 0;
			this.containerCounter = 0;
			this.profilePageApps = new Array;
			this.container = new Array;
			
			tab = document.createElement("DIV");
			tab.className = 'userProfileTab';
			tab.id = "userProfileTab" + activeTabId;
			document.getElementById("content").appendChild(tab);
			this.tabs[id]['loaded'] = true;
			this.refreshActiveTab();	
		}
	}
	
	this.refreshActiveTab = function() {
		var tabId = this.tabs[this.activeTab]["ID"];
		jsonGetData('json/userProfile/getTabInfo.php?tabId=' + tabId, 'profilePage.refreshActiveTabInt');		
	}
	
	this.refreshActiveTabInt = function(Object) {
		var z2 = 0;		
		var sndSingleContainer = false;
		var topValueForLeftColumn = 25;
		var topValueForRightColumn = 25;
		
		if(Object) {
			// Check if Server-Status is OK
			if(Object["status"]=='ok') {
				// Check if tabId in Server-Response is current activeTab
				var tabId = this.tabs[this.activeTab]["ID"];
				if(tabId == Object["tabId"]) {
					// TabIds are the same
					// Delete currently displayed Content
					document.getElementById("userProfileTab" + tabId).innerHTML = '';

					spacer = document.createElement("DIV");
					spacer.id = 'spacer' + spacerCounter;
					spacer.className = 'contentContainerSpacer';

					this.spacer[spacerCounter] = new Array();
					this.spacer[spacerCounter]["id"] = 'spacer' + spacerCounter;
					this.spacer[spacerCounter]["type"] = 'double';
								
					spacerCounter++;
								
					leftSpacer = document.createElement("DIV");
					leftSpacer.id = 'spacer' + spacerCounter;
					leftSpacer.className = 'leftSpacer';
								
					this.spacer[spacerCounter] = new Array();
					this.spacer[spacerCounter]["id"] = 'spacer' + spacerCounter;
					this.spacer[spacerCounter]["type"] = 'single';
								
					spacerCounter++;								
								
					rightSpacer = document.createElement("DIV");
					rightSpacer.id = 'spacer' + spacerCounter;
					rightSpacer.className = 'rightSpacer';
								
					this.spacer[spacerCounter] = new Array();
					this.spacer[spacerCounter]["id"] = 'spacer' + spacerCounter;
					this.spacer[spacerCounter]["type"] = 'single';
								
					spacerCounter++;									
								
					spacer.appendChild(leftSpacer);
					spacer.appendChild(rightSpacer);
																
					document.getElementById("userProfileTab" + tabId).appendChild(spacer);								
  
					// Check if there are Apps for this Tab
					if(Object["apps"]) {					
						// There are Apps to display for this Tab
						this.row = 0;
						
						for(z9=0; z9 < Object["apps"].length; z9++) {
							// Foreach App ...
							addSpacer = false;
							
							if(Object["apps"][z9]['containerWidth'] == 'single') {
								containerType = 'single';	
															
								if(Object["apps"][z9]["row"] > this.row) {
									container = document.createElement("DIV");
									container.innerHTML = '<table style="position: relative;" cellpadding="0" cellspacing="0"><tr><td valign="top" class="leftDoubleBox"><div id="containerT' + this.activeTab + 'R' + Object["apps"][z9]["row"] + 'C0" class="contentContainer"> </div></td><td valign="top" class="rightDoubleBox"><div id="containerT' + this.activeTab + 'R' + Object["apps"][z9]["row"] + 'C1"class="contentContainer"> </div></td></tr></table>';		
									document.getElementById("userProfileTab" + tabId).appendChild(container);
									addSpacer = true;
								}
							} else {
								containerType = 'double';
								
								container = document.createElement("DIV");
								container.id = 'containerT' + this.activeTab + 'R' + Object["apps"][z9]["row"] + 'C0';
								container.className = 'contentContainer doubleWidth bright';									
								document.getElementById("userProfileTab" + tabId).appendChild(container);
								addSpacer = true;
							}
							
							if(addSpacer) {
								spacer = document.createElement("DIV");
								spacer.id = 'spacer' + spacerCounter;
								spacer.className = 'contentContainerSpacer';

								this.spacer[spacerCounter] = new Array();
								this.spacer[spacerCounter]["id"] = 'spacer' + spacerCounter;
								this.spacer[spacerCounter]["type"] = 'double';
								
								spacerCounter++;
								
								leftSpacer = document.createElement("DIV");
								leftSpacer.id = 'spacer' + spacerCounter;
								leftSpacer.className = 'leftSpacer';
								
								this.spacer[spacerCounter] = new Array();
								this.spacer[spacerCounter]["id"] = 'spacer' + spacerCounter;
								this.spacer[spacerCounter]["type"] = 'single';
								
								spacerCounter++;								
								
								rightSpacer = document.createElement("DIV");
								rightSpacer.id = 'spacer' + spacerCounter;
								rightSpacer.className = 'rightSpacer';
								
								this.spacer[spacerCounter] = new Array();
								this.spacer[spacerCounter]["id"] = 'spacer' + spacerCounter;
								this.spacer[spacerCounter]["type"] = 'single';
								
								spacerCounter++;									
								
								spacer.appendChild(leftSpacer);
								spacer.appendChild(rightSpacer);
								
								document.getElementById("userProfileTab" + tabId).appendChild(spacer);					
								
							}
							
							this.row = Object["apps"][z9]["row"];
														
							eval("document.getElementById('containerT" + this.activeTab + "R" + Object["apps"][z9]["row"] + "C" + Object["apps"][z9]["column"] + "').onmousedown = function(event) { profilePage.dragApp(event, document.getElementById('containerT" + this.activeTab + "R" + Object["apps"][z9]["row"] + "C" + Object["apps"][z9]["column"] + "')); };");

							if(Object["apps"][z9]['theme'] == 0) {
								document.getElementById('containerT' + this.activeTab + 'R' + Object["apps"][z9]["row"] + 'C' + Object["apps"][z9]["column"]).className = document.getElementById('containerT' + this.activeTab + 'R' + Object["apps"][z9]["row"] + 'C' + Object["apps"][z9]["column"]).className + '';
							} else {
								document.getElementById('containerT' + this.activeTab + 'R' + Object["apps"][z9]["row"] + 'C' + Object["apps"][z9]["column"]).className = document.getElementById('containerT' + this.activeTab + 'R' + Object["apps"][z9]["row"] + 'C' + Object["apps"][z9]["column"]).className + '';							
							}

							this.profilePageApps[this.appCounter] = new Array;
							this.profilePageApps[this.appCounter]['id'] = 'app' + this.appCounter;
							this.profilePageApps[this.appCounter]['startParam'] = Object["apps"][z9]["startParam"];
							this.profilePageApps[this.appCounter]['container'] = 'containerT' + this.activeTab + 'R' + Object["apps"][z9]["row"] + 'C' + Object["apps"][z9]["column"];
							this.profilePageApps[this.appCounter]['appId'] = Object["apps"][z9]["appId"];
							
							appManager.addApp(Object["apps"][z9]["appId"], Object["apps"][z9]["startParam"]);							
							appManager.startApp(Object["apps"][z9]["appId"]);
									
							// Add Container to Container-Array
							this.container[this.containerCounter] = new Array;
							this.container[this.containerCounter]['id'] = 'containerT' + this.activeTab + 'R' + Object["apps"][z9]["row"] + 'C' + Object["apps"][z9]["column"];
							this.container[this.containerCounter]['minTop'] = false;
							this.container[this.containerCounter]['minLeft'] = false;
							this.container[this.containerCounter]['maxTop'] = false;
							this.container[this.containerCounter]['maxLeft'] = false;
							this.container[this.containerCounter]['column'] = Object["apps"][z9]["column"];
							this.container[this.containerCounter]['type'] = containerType;								
							this.container[this.containerCounter]['app'] = 'app' + this.appCounter;
																		
							this.containerCounter++;
							this.appCounter++;					
						}
					} else {
						// No apps for this Tab => Display Information for User
						// TODO ...
						var tabMessage = document.createElement("DIV");
						tabMessage.className = 'tabMessage';
						tabMessage.innerHTML = 'Zu diesem Tab wurden noch keine Apps hinzugef&uuml;gt.';
						document.getElementById("userProfileTab" + tabId).appendChild(tabMessage)
					}
				}		
			}
		}
	}
	
	this.enableProfilePageEditing = function() {
		/*// enables the editing of the profile-page
		this.editProfilePage = true;
		this.refreshContainerInformation();
		
		document.getElementById("editProfilePageSwitch").innerHTML = '<a href="JavaScript:profilePage.disableProfilePageEditing();">&Auml;nderungen speichern &raquo;</a>';

		container = this.container;
		
		for(spCnt = 0; spCnt < this.spacer.length - 1; spCnt++) {	
			spacerPosition = getAbsoluteElementPosition(document.getElementById(this.spacer[spCnt]["id"]));
			this.spacer[spCnt]["minTop"] = spacerPosition["y"];
			this.spacer[spCnt]["maxTop"] = document.getElementById(this.spacer[spCnt]["id"]).offsetHeight + spacerPosition["y"];

			this.spacer[spCnt]["minLeft"] = spacerPosition["x"];
			this.spacer[spCnt]["maxLeft"] = document.getElementById(this.spacer[spCnt]["id"]).offsetWidth + spacerPosition["x"];
		}
		
		spacer = this.spacer;
		*/
	}
	
	this.disableProfilePageEditing = function() {
		var tabId = this.tabs[this.activeTab]["ID"]	
		// enables the editing of the profile-page
		this.editProfilePage = false;
		this.refreshContainerInformation();
		
		document.getElementById("editProfilePageSwitch").innerHTML = '<a href="JavaScript:profilePage.enableProfilePageEditing();">Profileseite bearbeiten &raquo;</a>';
		
		jsonString = '{"tab":"' + tabId + '","apps":[';
		
		for(z96 = 0; z96 < this.container.length; z96++) {
			containerId = this.container[z96]['id'];
			profilePageAppInfo = this.getAppInfoForContainerId(containerId);

			startParam = profilePageAppInfo['startParam'];
			appId = profilePageAppInfo['appId'];
			column = this.container[z96]['column'];
			topValue = this.container[z96]['minTop'];
			height = this.container[z96]['height'];
			
			if(z96 >= 1) {
				jsonString = jsonString + ', ';
			}
			
			jsonString = jsonString + '{"appId":"' + appId + '","column":"' + column + '","topValue":"' + topValue + '","height":"' + height + '","startParam":"' + startParam + '"}';			
		}
		jsonString = jsonString + ']}';		

		jsonPostData('json/userProfile/saveTabInfo.php', escape(jsonString), false);	
	}	
	
	this.getAppInfoForContainerId = function(containerId) {
		for(z1=0; z1 < this.profilePageApps.length; z1++) {
			if(this.profilePageApps[z1]['container'] == containerId) {
				return(this.profilePageApps[z1]);
			}
		}
		
		return(false);
	}
	
	this.dragApp = function(evt, container) {
		if(this.editProfilePage) {
			var mousePosition = getMousePosition(evt);
			var dragBox = document.getElementById("dragBox");
			
			draggedContainer = container;
			
			dragBox.style.width = container.offsetWidth + 'px';
			
			containerPositionRelativeToMousePosition = getElementPositionRelativeToMousePosition(container, mousePosition);
			
			mousePosition["x"] = mousePosition["x"] - containerPositionRelativeToMousePosition["x"];
			mousePosition["y"] = mousePosition["y"] - containerPositionRelativeToMousePosition["y"];

			// Reduce Element-Opacity
		    container.style.opacity = "0.85";

			containerInfo = profilePage.getContainerInformation(container.id);	    
		    
		    // Append Element To DragBox
			dragBox.appendChild(container);
			
			container.style.top = "0px";
			container.style.left = "0px";

			// Set DragBox-Position
		  	dragBox.style.top = mousePosition["y"] + "px";
		  	dragBox.style.left = mousePosition["x"] + "px";
		  	
		  	// Make DragBox visible
		    dragBox.style.visibility = "visible";
		    
		    // Set Event-Handler for Dragging
		  	document.onmousemove = profilePage.mousemoveEventHandler;
		  	document.onmouseup = profilePage.dropApp;
		  	
		  	// Disable Text-Selection
			disableTextSelection(container);
		}
	}

	this.mousemoveEventHandler = function(evt) {
		var dragBox = document.getElementById("dragBox");
		var mousePosition = getMousePosition(evt);
		var draggedContainerWidth = containerInfo["maxLeft"] - containerInfo["minLeft"];
		
		mousePosition["x"] = mousePosition["x"] - containerPositionRelativeToMousePosition["x"]; 
		mousePosition["y"] = mousePosition["y"] - 15;
		
		// Set DragBox-Position
		dragBox.style.top = mousePosition["y"] + "px";
		dragBox.style.left = mousePosition["x"] + "px";

		lastSelectedColumn = selectedColumn;

		if(mousePosition["x"] > 235) {
			selectedColumn = 1;
		} else {
			selectedColumn = 0;
		}
		
		hoveredSpacerInfo = false;
		
		mousePosition["x"] = mousePosition["x"] + Math.round(draggedContainerWidth / 2);
		
		for(z1=0; z1 < profilePage.spacer.length; z1++) {			
			minTopValue = profilePage.spacer[z1]['minTop'] - 20;
			minLeftValue = profilePage.spacer[z1]['minLeft'] - 10;
			maxTopValue = profilePage.spacer[z1]['maxTop'] + 20;
			maxLeftValue = profilePage.spacer[z1]['maxLeft'] + 20;
						
			if(mousePosition["x"] >= minLeftValue && mousePosition["x"] <= maxLeftValue) {
				if(mousePosition["y"] >= minTopValue && mousePosition["y"] <= maxTopValue) {
					hoveredSpacerInfo = profilePage.spacer[z1];
				}
			}
		}	
		
		
		if(hoveredSpacerInfo) {
			if(lastHoveredSpacerInfo) {
				if(lastHoveredSpacerInfo['id'] != hoveredSpacerInfo['id']) {
					// Spacer is displayed for false hovered Container		
					lastHoveredSpacerInfo = hoveredSpacerInfo;
					document.getElementById(hoveredSpacerInfo["id"]).style.visibility = 'visible';
				} 
			} else {
				lastHoveredSpacerInfo = hoveredSpacerInfo;		
				document.getElementById(hoveredSpacerInfo["id"]).style.visibility = 'visible';
			}
		} else {
			if(lastHoveredSpacerInfo) {
				document.getElementById(lastHoveredSpacerInfo["id"]).style.visibility = 'hidden';		
				lastHoveredSpacerInfo = false;
			}
		}
	}

	this.dropApp = function(evt) {
		dragBox = document.getElementById("dragBox");
		containerId = draggedContainer.id;
		containerInfo = profilePage.getContainerInformation(containerId);
				
		enableTextSelection(draggedContainer);
		
		document.getElementById("userProfileTab" + activeTabId).appendChild(draggedContainer);
		
		draggedContainer.style.top = Math.round(containerInfo["minTop"] - 132) + "px";
		draggedContainer.style.left = Math.round(containerInfo["minLeft"] - 30) + "px";
		
		draggedContainer.style.opacity = "1";
		
		dragBox.visibility = "hidden";
		
		profilePage.refreshContainerInformation();
		
 		document.onmouseup = null;
 		document.onmousemove = null;
 		
 		if(lasthoveredSpacerInfo) {
			profilePage.dropAppInt(containerId, lasthoveredSpacerInfo['id']);
			document.getElementsByTagName('body')[0].removeChild(document.getElementById('spacer'));
			lasthoveredSpacerInfo = false;	
		}		
	}

	this.dropAppInt = function(draggedContainerId, hoveredContainerId) {
		var z2 = 0;
		var nextContainerArray = new Array;
		var draggedContainerInfo = this.getContainerInformation(draggedContainerId);
		var topValueForLeftColumn = 20;
		var topValueForRightColumn = 20;
				
		draggedContainerInfo['column'] = selectedColumn;
		
		for (z1=0; z1 < this.container.length; z1++) {
			if(this.container[z1]['id'] != draggedContainerId) {
				nextContainerArray[z2] = this.container[z1];
				z2++;
			}
			
			if(this.container[z1]['id'] == hoveredContainerId) {
				nextContainerArray[z2] = draggedContainerInfo;
				z2++;
			}
		}
		this.container = nextContainerArray;
		
		for(z1=0; z1 < this.container.length; z1++) {
			if(this.container[z1]['id'] != 'topSpacer') {
				// Place Container in correct Column
				container = document.getElementById(this.container[z1]['id']);
				
				if(this.container[z1]["column"]=='0') {
					if(this.container[z1]['type'] == 'double') {
						if(topValueForRightColumn > topValueForLeftColumn) {
							topValueForLeftColumn = topValueForRightColumn;
						}
					}		
				
					// Place Container in left Column
					container.style.top = topValueForLeftColumn + "px";
					container.style.left = "48px";
					topValueForLeftColumn = topValueForLeftColumn + Math.round(this.container[z1]["height"]) + 25;				
				} else {
					// Place Container in right Column
					container.style.top = topValueForRightColumn + "px";
					container.style.left = "367px";
					topValueForRightColumn = topValueForRightColumn + Math.round(this.container[z1]["height"]) + 25;	
				}
								
				if(this.container[z1]["type"]=='double') {
					topValueForRightColumn = topValueForLeftColumn;				
				}
								
				if(topValueForRightColumn > topValueForLeftColumn) {
					this.tabs[this.activeTab]['height'] = topValueForRightColumn;					
				} else {
					this.tabs[this.activeTab]['height'] = topValueForLeftColumn;					
				}	
			}
		}
		this.refreshContainerInformation();
		
		container = this.container;	
	}
	
	this.getContainerInformation = function(containerId) {
		// returns container-information from container-array for a specific container
		for(z1=0; z1 < this.container.length; z1++) {
			if(this.container[z1]['id'] == containerId) {
				return(this.container[z1]);
			}
		}
		return(false);	
	}
	
	this.refreshContainerInformation = function() {
		var recalculating = false;
		var topValueForLeftColumn = 0;
		var topValueForRightColumn = 0;
		
		// refreshes Information (top-values, left-values) of each container in container-array
		for(z1=0; z1 < this.container.length; z1++) {
			if(this.container[z1]['id'] != 'topSpacer') {
				containerPosition = getAbsoluteElementPosition(document.getElementById(this.container[z1]['id']));
				currentHeight = this.container[z1]['height'];
				this.container[z1]['minTop'] = containerPosition["y"];
				this.container[z1]['minLeft'] = containerPosition["x"];
				this.container[z1]['maxTop'] = document.getElementById(this.container[z1]['id']).offsetHeight + containerPosition["y"];
				this.container[z1]['maxLeft'] = document.getElementById(this.container[z1]['id']).offsetWidth + containerPosition["x"];
				this.container[z1]['height'] = this.container[z1]['maxTop'] - this.container[z1]['minTop'];
			
				heightDiff = currentHeight - this.container[z1]['height'];
				
				if(Math.abs(heightDiff) > 2) {
					// If Height of Container has changed significantly
					recalculating = true;	
				}
			}
		}
		
		if(recalculating) {
			// Some Containers changed their Height significantly => Recalculate Position of Containers beneath current Container
			var topValueForLeftColumn = 25;
			var topValueForRightColumn = 25;
			
			for(z1=0; z1 < this.container.length; z1++) {
				if(this.container[z1]['id'] != 'topSpacer') {
					container = document.getElementById(this.container[z1]['id']);
					
					if(this.container[z1]["column"]=='0') {
						if(this.container[z1]['type'] == 'double') {
							if(topValueForRightColumn > topValueForLeftColumn) {
								topValueForLeftColumn = topValueForRightColumn;
							}
						}		
					
						// Place Container in left Column
						container.style.top = topValueForLeftColumn + "px";
						container.style.left = "48px";
						topValueForLeftColumn = topValueForLeftColumn + Math.round(this.container[z1]["height"]) + 25;				
					} else {
						// Place Container in right Column
						container.style.top = topValueForRightColumn + "px";
						container.style.left = "367px";
						topValueForRightColumn = topValueForRightColumn + Math.round(this.container[z1]["height"]) + 25;	
					}
									
					if(this.container[z1]["type"]=='double') {
						topValueForRightColumn = topValueForLeftColumn;				
					}
									
					if(topValueForRightColumn > topValueForLeftColumn) {
						this.tabs[this.activeTab]['height'] = topValueForRightColumn;						
					} else {
						this.tabs[this.activeTab]['height'] = topValueForLeftColumn;												
					}	
				}
			}
			
			if(topValueForRightColumn > topValueForLeftColumn) {
				this.tabs[this.activeTab]['height'] = topValueForRightColumn;				
			} else {
				this.tabs[this.activeTab]['height'] = topValueForLeftColumn;									
			}			
		}
	}
	
	this.getContainerForApp = function(startParam) {
		if(this.profilePageApps.length > 0) {
			for(z1=0; z1<this.profilePageApps.length; z1++) {
				if(this.profilePageApps[z1]['startParam'] == startParam) {
					return(this.profilePageApps[z1]['container']);
				}
			}
			return(false);
		} else {
			return(false);
		}
	}
}