// create application
PersonalHomePagePartBrowser = function() {
	var activeCategory = 0;
	var initialLoad = true;
	var ready = false;
	var categories = {};
	var labelIndex = {};
	var checkIndex = {};
	var links = null;
	var browserId = null;
	var rootAnchor = null;
	var columns = 0;
	var partBrowserState = null;
	
	// Create a checkbox and label pair for a portlet
	function create(thisItem, categoryInfo, standard) {
		// Standard part
		var itemName = 'pbi' + thisItem.uid;
		
		// Add a border
		var wrap = document.createElement('div');
		wrap.className = 'part-browser-column-item';
		categoryInfo.columns[categoryInfo.nextColumn].appendChild(wrap);
		
		// Add the item 
		var check = document.createElement('input');
		checkIndex[thisItem.uid] = itemName;
		check.setAttribute('type', 'checkbox');
		check.setAttribute('name', itemName);
		check.setAttribute('id', itemName);
		wrap.appendChild(check);
		if (!thisItem.close) {
			check.setAttribute('disabled', 'disabled');
		}
		if (thisItem.v == 'V') {
			check.setAttribute('checked', 'checked');
		}

		// Add a label for the item
		var labelName = 'lbl' + itemName;
		var label = document.createElement('label');
		label.setAttribute('for', itemName);
		label.setAttribute('id', labelName);
		label.className = (thisItem.v == 'V') ? 'parton' : 'partoff';
		label.innerHTML = thisItem.ttl;
		labelIndex[thisItem.uid] = labelName;
		wrap.appendChild(label);
		
		if (standard) {
			check.onclick = new Function('args', 'iCM.PersonalHomePagePartBrowser.TogglePanel("' + itemName + '","' + labelName + '",' + thisItem.uid + ', false, false);');
		} else {
			check.onclick = new Function('args', 'iCM.PersonalHomePagePartBrowser.Delete(' + thisItem.uid + ');');
		}
		
		// Enable category
		categoryInfo.item.style.display = 'block';
	}
	
	return {
		// public space
		Initialise: function(htmlId, columnCount, anchor) {
			browserId = htmlId;
			columns = columnCount;
			rootAnchor = anchor;
			ready = true;
			
			if (partBrowserState) {
				iCM.PersonalHomePagePartBrowser.Build(partBrowserState);
			}
		},
		
		// Add a new part to the personal home page
		Add: function(id) {
			iCM.PersonalHomePage.Add(id);
		},
		
		// Build the graphical user interface
		Build: function(state) {
			partBrowserState = state;
			if (!ready) 
				return;
		
			var area = document.getElementById(browserId);
			categories = {};
			links = null;
			labelIndex = {};
			checkIndex = {};
			categoryCount = 0;
			state.items.sort(function (first, second) {
				if (first.cat < second.cat) {
					return -1;
				} else if (first.cat > second.cat) {
					return 1;
				} else if (first.ttl < second.ttl) {
					return -1;
				} else if (first.ttl > second.ttl) {
					return 1;
				} else {
					return 0;
				}
			});
			if (area) {
				area.innerHTML = '';
				for (var itm in state.items) {
					var thisItem = state.items[itm];
					if (!thisItem || !thisItem.catid) {
						continue;
					}
					
					if (activeCategory < 1) {
						activeCategory = thisItem.catid;
					}
					
					if (!categories[thisItem.catid]) {
						// New Category - Add a link to this category in the title bar
						categories[thisItem.catid] = {
							panel: null,
							nextColumn: 0,
							columns: [],
							item: null,
							anchor: null
						};
						
						if (!links) {
							links = document.createElement("ul");
							links.setAttribute("class", "part-browser-categorylinks");
							area.appendChild(links);
						}
						var eventItem = document.createElement("li");
						eventItem.className = thisItem.cls;
						eventItem.style.display = 'block';
						links.appendChild(eventItem);
						categories[thisItem.catid].item = eventItem;
						
						var eventLink = document.createElement("a");
						eventLink.innerHTML = thisItem.cat;
						eventLink.href = '#' + rootAnchor;
						eventLink.onclick = new Function('args', 'iCM.PersonalHomePagePartBrowser.ShowCategory(' + thisItem.catid + ')');
						eventItem.appendChild(eventLink);
						categories[thisItem.catid].anchor = eventLink;
						
						// New Category - Add a panel for this category 
						var panelDiv = document.createElement('div');
						panelDiv.className = 'part-browser-category';
						area.appendChild(panelDiv);
						categories[thisItem.catid].panel = panelDiv;
						
						// Add a series of columns to the new panel
						var colwidth = (100.0 / (columns * 1.0)) * 0.95;
						for (var c=0; c < columns; c++) {
							var panelCol = document.createElement('div');
							panelDiv.appendChild(panelCol);
							panelCol.className = 'part-browser-column';
							panelCol.style.width = colwidth + '%';
							categories[thisItem.catid].columns.push(panelCol);
						}
					}
					
					// Find the column
					var categoryInfo = categories[thisItem.catid];
					if (categoryInfo.nextColumn >= categoryInfo.columns.length)
						categoryInfo.nextColumn = 0;

					// Check for templated part
					var moveOn = true;
					if (!thisItem.reuse) {
						// Standard part
						create(thisItem, categoryInfo, true);
					} else if (state.userid > 0) {
						// Templated part, and user is logged in
						if (thisItem.seq > 0) {
							// Template part instance
							create(thisItem, categoryInfo, false);
						} else {
							// Link to allow users to create instances
							var createLink = document.createElement('a');
							createLink.href = '#' + rootAnchor;
							createLink.innerHTML = thisItem.ttl;
							createLink.className = 'partoff';
							createLink.onclick = new Function('args', 'iCM.PersonalHomePagePartBrowser.Add(' + thisItem.uid + ');');
							categoryInfo.columns[categoryInfo.nextColumn].appendChild(createLink);
							categoryInfo.item.style.display = 'block';
						}
					} else {
						moveOn = false;
					}
					
					// Move to next column for next item
					if (moveOn) {
						categoryInfo.nextColumn++;
					}
				}
				
				// Set widths of categories
				var categoryCount = 0;
				for (var catid in categories) {
					if (categories[catid].item.style.display == 'block') {
						categoryCount++;
					}
				}
				var width = (100.0 / (categoryCount * 1.0)) * 0.95;
				for (var catid in categories) {
					if (categories[catid].item.style.display == 'block') {
						categories[catid].item.style.width = width + '%';
					}
				}
				
				// Show the active category
				iCM.PersonalHomePagePartBrowser.ShowCategory(activeCategory);
				
				// Mark that the initial load has taken place
				initialLoad = false;
			}
		},
		
		// Create a new portlet
		CreateItem: function(portlet) {
			var categoryInfo = categories[portlet.catid];
			create(portlet, categoryInfo, false);
		},
		
		// Delete a part from the personal home page
		Delete: function(id) {
			iCM.PersonalHomePage.Remove(id);
		},
		
		// Show a Category		
		ShowCategory: function(categoryId) {
			for (var key in categories) {
				categories[key].panel.className = (key == categoryId) ? 'active' : 'inactive';
			}
			activeCategory = categoryId;
		},
		
		// Switch a part on or off - called by the home page
		SwitchOnOff: function(id, checked) {
			var checkId = checkIndex[id];
			var labelId = labelIndex[id];
			iCM.PersonalHomePagePartBrowser.TogglePanel(checkId, labelId, id, true, checked);
		},
		
		// Refresh display
		Refresh: function() {
			var state = iCM.PersonalHomePage.GetState();
			iCM.PersonalHomePagePartBrowser.Build(state);
		},
		
		// Toggle a part's visibility in the personal home page
		TogglePanel: function(checkId, lblId, uniqueId, homePage, shown) {
			var ele = document.getElementById(checkId);
			var lbl = document.getElementById(lblId);
			var checked
			if (!homePage) {
				// If this event originated in the browser, let the home page know of the change
				shown = ele.checked;
				iCM.PersonalHomePage.Toggle(uniqueId, false);
			} 
			
			if (ele && lbl) {
				cls = shown ? 'parton' : 'partoff';
				ele.checked = shown;
				lbl.className = cls;
			}
		}
	}
}();

iCM.PersonalHomePagePartBrowser = PersonalHomePagePartBrowser;