jQuery(function() {
			ContainerManager.renderAll();
		});

ContainerManager = {
	containers : {},
	overlayInitialized : false,
	createContainer : function(containerName, components, associations) {
		var container = new Container(containerName, components, associations);
		return container;
	},
	addContainer : function(container) {
		this.containers[container.getName()] = container;
	},
	removeContainer : function(name) {
		delete this.containers[name];
	},
	getContainer : function(name) {
		return this.containers[name];
	},
	registerContainer : function(containerName, components, associations) {
		var container = this.createContainer(containerName, components,
				associations);
		this.addContainer(container);
		return container;
	},
	renderAll : function() {
		for (var i in this.containers) {
			this.containers[i].render();
		}
	},
	showOverlay : function(url) {
		if (url === '') {
			return;
		}
		if (!this.overlayInitialized) {
			this.setupOverlay();
		}
		var popupLeft = (jQuery("body").width() - 720) / 2;
		jQuery('#containerOverlay').css({
					'padding-left' : popupLeft + 'px'
				}).removeClass('showElement').addClass('hideLayer');
		/*
		 * 21px - subtracted from documnt width in case of IE browser to
		 * get rid of horizontal scrollbar while showing the mask
		 */
		var winWidth = (jQuery.browser.msie)
				? jQuery(document).width() - 21
				: jQuery(document).width();
		jQuery('#pageMask').css({
					'height' : jQuery(document).height() + 'px',
					'width' : winWidth + 'px'
				}).removeClass('hideLayer').addClass('showElement');
		// Load content into overlay
		WSCore.load("containerOverlay", "showOverlay.ajax?contentUrl="
						+ encodeURIComponent(url));		
	},
	setupOverlay : function() {
		jQuery('body')
				.append('<div id="containerOverlay" class="containerOverlay hideLayer"></div><div id="pageMask" class="hideLayer"></div>');
		jQuery('#containerOverlay, #pageMask').click(function() {
			jQuery('#containerOverlay').removeClass('showElement')
					.addClass('hideLayer');
			jQuery('#pageMask').removeClass('showElement')
					.addClass('hideLayer');
			jQuery('#containerOverlay').empty();
		});
		this.overlayInitialized = true;
	}
};

function Container(containerName, components, associations) {
	this.name = containerName;
	this.components = (components) ? components : [];
	this.associations = (associations) ? associations : [];
}
Container.prototype.getName = function() {
	return this.name;
};
Container.prototype.getComponents = function() {
	return this.components;
};
Container.prototype.getAssociations = function() {
	return this.associations;
};
Container.prototype.render = function() {
	this.renderAssociations();
	this.renderControls();
};
Container.prototype.renderAssociations = function() {
	var associations = this.getAssociations();
	if (!associations) {
		return;
	}
	for (var i in associations) {
		this.renderAssociation(this, associations[i]);
	}
};
Container.prototype.renderControls = function() {
	var components = this.getComponents();
	if (!components) {
		return;
	}
	for (var i in components) {
		if (components[i]['type'] == 'control') {
			this.renderControl(this, components[i]);
		}
	}
};
Container.prototype.renderAssociation = function(container, association) {
	if (association['location'] == 'overlay') {
		ContainerManager.showOverlay(association['content']);
		return;
	}
	var selector = this.getContainerLocationSelector(container, association['location']);
	if (association['operation'] == 'load' && association['content'] !== '') {
		jQuery(selector).load(association['content']);
	} else if (association['operation'] == 'toggle') {
		jQuery(selector).toggle();
	} else if (association['operation'] == 'empty') {
		jQuery(selector).empty();
	}
};
Container.prototype.renderControl = function(container, control) {
	var selector;
	if (control['associations']) {
		selector = this.getContainerControlAnchorSelector(container,
				control['id']);
	} else {
		selector = this.getContainerLocationSelector(container, control['id']);
	}
	jQuery(selector).load(control['content'], function() {
		if (control['associations']) {
			for (var i in control['associations']) {
				container.renderContainerControlAssociation(container, control,
						control['associations'][i]);
			}
		}
	});
};
Container.prototype.getContainerSelector = function(container) {
	return '#' + container.getName();
};
Container.prototype.getContainerLocationSelector = function(container,
		locationId) {
	return this.getContainerSelector(container) + '_' + locationId;
};
Container.prototype.getContainerControlImageSelector = function(container,
		controlId) {
	return this.getContainerLocationSelector(container, controlId) + ' img';
};
Container.prototype.getContainerControlAnchorSelector = function(container,
		controlId) {
	return this.getContainerLocationSelector(container, controlId) + ' a';
};
Container.prototype.renderContainerControlAssociation = function(container,
		control, association) {
	jQuery(this.getContainerControlImageSelector(container, control['id']))
			.bind(association['event'], {}, function() {
						container.renderAssociation(container, association);
						if (association['event'] == 'click') {
							return false;
						}
					});
};