ImageGallery = {}

ImageGallery.Gallery = function(containerId) {
	this.containerId = containerId;
	this.containerObj = null;
	this.blockerId = "image-gallery-blocker";
	this.blockerObj = null;
	this.blockerContentId = "image-gallery-blocker-content";
	this.blockerContentObj = null;
	this.contentObj = null;
	this.tabsObj = null;
	this.tabs = new Array();
	this.tabsCount = 0;
	this.currentTab;
	this.tabPrefix = "gallery-tab--{0}";
	this.tabContentPrefix = "gallery-content--{0}";
	this.onclickPrefix = "galleryInstance.showTab('{0}');";
	this.allowOnClicks = false;
	this.selectedImage = null;
	this.blockerContentLoading = "loading...";
	
	this.init = function() {		
		this.containerObj = document.getElementById(this.containerId);
		this.blockerObj = document.getElementById(this.blockerId);
		this.blockerContentObj = document.getElementById(this.blockerContentId);
		this.contentObj = this.getContentObj(this.containerObj);
		
		this.showBlocker(this.blockerContentLoading);
		
		this.tabsObj = this.getTabsObj(this.containerObj);
		
		if (this.contentObj == null) {
			alert("gallery[content] obj could not be found!");
			return;
		}
		
		if (this.tabsObj != null) {
			this.tabsObj.id = "gallery-tabs";
			this.tabsObj.removeAttribute("title");
		}
		
		this.contentObj.id = "gallery-content";
		this.contentObj.removeAttribute("title");
		
		// Build content tabs
		this.buildContentTabs(this.contentObj);
		
		// Build tabs
		this.buildTabs(this.tabsObj);
		
		this.hideBlocker();
	};
	
	this.getContentObj = function(obj) {
		var childNodes = obj.childNodes;
		for(var index=0; index<childNodes.length; index++) {
			obj = childNodes[index];
			if(obj.title == "gallery[content]")
				return obj;
		};
		return null;
	};
	
	this.getTabsObj = function(obj) {
		var childNodes = obj.childNodes;
		for(var index=0; index<childNodes.length; index++) {
			obj = childNodes[index];
			if(obj.title == "gallery[tabs]")
				return obj;
		};
		return null;		
	}
	
	this.buildContentTabs = function(obj) {
		var childNodes = obj.childNodes;
		for(var index=0; index<childNodes.length; index++) {
			var regex = /^gallery\[(\w+):(.*)\]([,]{0,1})([\w]*)$/i;
			var tab = childNodes[index];
			if (tab.title != undefined) {
				var groups = regex.exec(tab.title);
				if (groups != null) {
					type = groups[1];
					name = groups[2];
					invoke = groups[4];
					if (type == "tab") {
						this.tabs[this.tabsCount++] = this.buildTab(tab, name, invoke);
					};
				};
			};
		};
	};
	
	this.buildTab = function(obj, name, invoke) {
		obj.removeAttribute("title");
		obj.id = format(this.tabContentPrefix, name);
		var tab = new ImageGallery.Tab(name, invoke);
		tab.domObj = obj;
		tab.buildSections();
		return tab;
	};
	
	this.buildTabs = function(obj) {
		var childNodes = obj.childNodes;
		for(var index=0; index<childNodes.length; index++) {
			var regex = /^gallery\[(\w+):(.*)\]$/i;
			var tab = childNodes[index];
			if (tab.title != undefined) {
				var groups = regex.exec(tab.title);
				if (groups != null) {
					type = groups[1];
					name = groups[2];
					if (type == "tab") {
						tab.id = format(this.tabPrefix, name);
						tab.removeAttribute("title");
						// Add href and onclick to the <a> tag inside.
						anchor = tab.getElementsByTagName("a")[0];
						anchor.setAttribute("href", "javascript://");
						if (this.allowOnClicks)
							anchor.setAttribute("onclick", format(this.onclickPrefix, name));
					};
				};
			};
		};		
	};
	
	this.addTab = function(tab) {
		this.tabs[this.tabsCount++] = tab;
	};
	
	this.showTab = function(tabName) {
		this.selectImage(null);
		for (var index=0; index<this.tabsCount; index++) {
			if (this.tabs[index].name == tabName) {
				document.getElementById(format(this.tabPrefix, tabName)).className = "selected";
				document.getElementById(format(this.tabContentPrefix, tabName)).style["display"] = "block";
				this.currentTab = this.tabs[index];
				this.currentTab.invoke();
			} else {
				document.getElementById(format(this.tabPrefix, this.tabs[index].name)).className = "";
				document.getElementById(format(this.tabContentPrefix, this.tabs[index].name)).style["display"] = "none";
			};
		};
	};
	
	this.hideCurrentTab = function() {
		if (this.currentTab != null) {
			this.currentTab.domObj.style["display"] = "none";
		};
	};
	
	this.showCurrentTab = function() {
		if (this.currentTab != null) {
			this.currentTab.domObj.style["display"] = "block";
		};
	};
	
	this.showSection = function(tabName, sectionName) {
		this.selectImage(null);
		if (this.currentTab.name != tabName)
			this.showTab(tabName);
			
		this.currentTab.showSection(sectionName);
	};
	
	this.selectImage = function(obj) {
		if (this.selectedImage != null) {
			this.selectedImage.deselect();
			this.selectedImage = null;
		};
		if (obj != null) {
			this.selectedImage = new ImageGallery.Image(obj);
			this.selectedImage.select();
		};
	};
	
	this.deselectImage = function() {
		if (this.selectedImage != null) {
			this.selectedImage.deselect();
		};
	};
	
	this.showBlocker = function(content) {
		if (this.blockerContentObj != null) {
			this.hideCurrentTab();
			this.blockerContentObj.innerHTML = content;
			this.containerObj.className += " block";
		};
	};
	
	this.hideBlocker = function() {
		if (this.blockerContentObj != null) {
			this.containerObj.className = this.containerObj.className.replace(" block", "");
			this.containerObj.className = this.containerObj.className.replace("block", "");
			this.blockerContentObj.innerHTML = "";
			this.showCurrentTab();
		};
	};
	
	this.hideSelectedImage = function() {
		if (this.selectedImage != null) {
			this.selectedImage.hide();
			this.selectedImage = null;
		};
	};
};

/* ImageGallery tab class */
ImageGallery.Tab = function(name, invokeFunc) {
	this.name = name;
	this.domObj;
	this.sectionsObj;
	this.sections = new Array();
	this.sectionsCount = 0;
	this.currentSection;
	this.sectionPrefix = "gallery-section--{0}--{1}";
	this.sectionContentPrefix = "gallery-section-content--{0}--{1}";
	this.invokeFunc = invokeFunc;
	
	this.buildSections = function() {
		this.sectionsObj = this.getSectionsObj(this.domObj);
		if (this.sectionsObj == null)
			return;
					
		var childNodes = this.sectionsObj.childNodes;
		for(var index=0; index<childNodes.length; index++) {
			var regex = /^gallery\[(\w+):(.*)\]([,]{0,1})([\w]*)$/i;
			var section = childNodes[index];
			if (section.title != undefined) {
				var groups = regex.exec(section.title);
				if (groups != null) {
					stype = groups[1];
					sname = groups[2];
					sinvoke = groups[4];
					//editMode = group[5];
					if (stype == "section") {
						section.id = format(this.sectionPrefix, this.name, sname);
						section.removeAttribute("title");
						
						// Create a new section object and add it to the sections collection.
						this.addSection(new ImageGallery.Section(sname, sinvoke, section));
					};
				};
			};
		};		
	};
	
	this.getSectionsObj = function(obj) {
		var childNodes = obj.childNodes;
		for(var index=0; index<childNodes.length; index++) {
			obj = childNodes[index];
			if (obj.title != undefined && obj.title == "gallery[sections]") {
				obj.removeAttribute("title");
				return obj;
			};
		};
		return null;
	};
	
	this.addSection = function(section) {
		this.sections[this.sectionsCount++] = section;			
	};
	
	this.showSection = function(sectionName, editMode) {
		this.currentSection = null;
		
		for (var index=0; index<this.sectionsCount; index++) {
			if (this.sections[index].name == sectionName) {
				document.getElementById(format(this.sectionPrefix, this.name, sectionName)).style["display"] = "block";
				this.currentSection = this.sections[index];
			} else {
				document.getElementById(format(this.sectionPrefix, this.name, this.sections[index].name)).style["display"] = "none";
			};
		};
		
		if (this.currentSection == null) {
			alert(format("section undefined: {0} / {1}", this.name, sectionName));
		} else {
			// Invoke
			this.currentSection.invoke();
		};
	};
	
	this.invoke = function(section) {
		if (section == undefined) {
			// show first section.
			if (this.sectionsCount > 0)
				this.showSection(this.sections[0].name);
		};

		if (this.invokeFunc != "")
			eval(format("ImageGallery.{0}(this, parent, editMode)", this.invokeFunc));
	};
};

ImageGallery.Section = function(name, invokeFunc, domObj, editMode) {
	this.name = name;
	this.invokeFunc = invokeFunc;
	this.domObj = domObj;
	this.editMode = editMode;
	this.loaded = false;
	
	this.invoke = function(parent) {
		if (this.invokeFunc != "")
			eval(format("ImageGallery.{0}(this, parent)", this.invokeFunc));
	};
};

ImageGallery.Image = function(domObj) {
	this.domObj			= null;
	this.wrpObj			= null;
	this.imgObj			= null;
	this.serverId		= null;
	this.originalSrc	= null;
	this.editorSrc		= null;
	this.strOriginal	= "original";
	this.strEditor		= "galleryEditor";
	this.strThumb		= "galleryThumb";
	this.width			= null;
	this.height			= null;
	this.editMode		= null;
	
	this.init = function() {
		if (domObj != null) {
			this.domObj			= domObj;
			this.wrpObj			= this.domObj.getElementsByTagName("div")[0];
			this.imgObj			= this.wrpObj.getElementsByTagName("img")[0];
			this.originalSrc	= this.imgObj.src.replace(this.strThumb, this.strOriginal);
			this.editorSrc		= this.imgObj.src.replace(this.strThumb, this.strEditor);
			this.serverId		= this.wrpObj.className.split(",")[0];
			this.width			= this.wrpObj.className.split(",")[1];
			this.height			= this.wrpObj.className.split(",")[2];
			this.editMode		= this.wrpObj.className.split(",")[3];
		};
	};
	this.select = function() {
		if (this.domObj != null) {
			this.domObj.className = "selected";
		};
	};
	this.deselect = function() {
		if (this.domObj != null) {
			this.domObj.className = "";
		};
	};
	this.hide = function() {
		if (this.domObj != null) {
			this.domObj.style["display"] = "none";
		};
	};
	this.init();	
};

function format(str) {
	for(i = 1; i < arguments.length; i++) {
		str = str.replace('{' + (i - 1) + '}', arguments[i]);
	};
	return str;
};