Gallery = function(content, container) {
	this.items = {}
	this.view = {}
	this.active = false
	this.view.root = DIV({'class':'gallery'},
		this.view.stage = DIV({'class':'stage'}),
		this.view.title = DIV({'class':'title','style':{'opacity':1}}),
		this.view.toggles = DIV({'class':'toggles'}, LABEL(null, 'Image:')))
	replaceChildNodes(container, this.view.root)
	this.load(content)
}
Gallery.prototype = {
	load:function(work) {
		//	first start the data fetching
		d = loadJSONDoc("/json/content/" + work, {'tg_format':'json'})
		d.addCallbacks(bind(function(data) {
			this.data = data
			for (var i = 0; i < data.content.length; i++) {
				try {
					/**
					 * the div is for placing differing sizes of images in the
					 * stage and keep them aligned in the center
					 */
					var item = {
						i: i,
						next_id: (i >= data.content.length - 1 ? null : data.content[i + 1].id),
						prev_id: (i <= 0 ? null : data.content[i - 1].id),
						gallery: this,
						content: data.content[i]
					}
					item.element = DIV({'class':'picture','style': {
										'display':'none'
									}}, SPAN({'class':'wrap'},
										item.element_browser = SPAN({'class':'browser'},
											IMG({'src': data.content[i].filename,
											'title': data.content[i].title,
											'alt': data.content[i].title
											}),
											item.element_next = DIV({'class':'button next'},
												item.element_next_hover = DIV()),
											item.element_prev = DIV({'class':'button prev'},
												item.element_prev_hover = DIV())
										))/*, DIV({'class':'title'}, data.content[i].title)*/
									)
					// the counted links
					item.toggle = SPAN({'class':'toggle'}, i+1)
					// connect the counted links
					connect(item.toggle, 'onclick', partial(bind(this.onclick, this), item))


					connect(item.element_prev, 'onclick', bind(function(){
						if (this.prev_id) item.gallery.show(this.gallery.items[this.prev_id])
					}, item))
					connect(item.element_prev, 'onmouseover', bind(function(){
						if (this.prev_id) addElementClass(this.element_prev_hover, 'hover')
					}, item))
					connect(item.element_prev, 'onmouseout', bind(function(){
						removeElementClass(this.element_prev_hover, 'hover')
					}, item))

					connect(item.element_next, 'onclick', bind(function(){
						if (this.next_id) item.gallery.show(this.gallery.items[this.next_id])
					}, item))
					connect(item.element_next, 'onmouseover', bind(function(){
						if (this.next_id) addElementClass(this.element_next_hover, 'hover')
					}, item))
					connect(item.element_next, 'onmouseout', bind(function(){
						removeElementClass(this.element_next_hover, 'hover')
					}, item))


					appendChildNodes(this.view.toggles, item.toggle)
					appendChildNodes(this.view.stage, item.element)
					if (!this.active) this.show(item)
					this.items[data.content[i].id] = item
				} catch (ex) {
					log(ex)
				}
			}
		}, this), function(error) {})
	},
	onclick: function(item, ev) {
		this.show(item)
	},
	show: function(item) {
		if (this.active == item) return
		else try {
			if (this.active) {
				fade(this.active.element)
				removeElementClass(this.active.toggle, 'selected')
			}
			this.active = item
			appear(item.element)
			appear(this.view.title, {'to': 0, from: 1, 'afterFinish': bind(partial(function(item){
				replaceChildNodes(this.view.title, item.content.title)
				appear(this.view.title, {from:0, to:1})
			}, item), this)})
			appear(item.element)
			addElementClass(item.toggle, 'selected')
		} catch (ex) {
			log("show error: " + ex)
		}
	}
}