FolderGallery = function(work, container) {
	this.items = {}
	this.view = {}
	this.active = false
	this.view.root = DIV({'class':'gallery'},
		this.view.stage = DIV({'class':'stage'},
			this.view.player = DIV({'class':'player', 'style':{'display':'none'}}),
			this.view.click2play = SPAN({'class': 'playButton'}, 'Click to Play')
		),this.view.controls = DIV({'class':'controls'},
			this.view.title = DIV({'class':'title','style':{'opacity':1}}),
			this.view.toggles = DIV({'class':'toggles'}, LABEL(null, 'Film:')))
		)
	this.view.backdrops = DIV({'id':'backdrops'})
	appendChildNodes(currentDocument().body, this.view.backdrops)

	// connecting click2play
	connect(this.view.click2play, 'onclick', bind(function() {
		setStyle(this.view.backdrops, {'background-image':'none', 'z-index':-1})
		this.view.click2play.style.display = 'none'
		this.view.player.innerHTML = QT_GenerateOBJECTText(
			this.active.child.video ? this.active.child.video.filename : '',
			'768', '592', '',
			'controller', 'true',
			'autoplay', 'true',
			'bgcolor', 'black',
			'scale', 'aspect')
		showElement(this.view.player)
	}, this))

	replaceChildNodes(container, this.view.root)
	this.load(work)
}
FolderGallery.prototype = {
	load:function(work) {
		//	first start the data fetching
		d = loadJSONDoc("/json/children/" + work, {'tg_format':'json'})
		d.addCallbacks(bind(function(data) {
			this.data = data
			for (var i = 0; i < data.children.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.children.length - 1 ? null : data.children[i + 1].id),
						prev_id: (i <= 0 ? null : data.children[i - 1].id),
						gallery: this,
						child: data.children[i],
						backdrop_preload: IMG({'src':data.children[i].backdrop ? data.children[i].backdrop.filename : ''})
					}
					item.element = DIV({'class':'movie','style': {
										'display':'none'
									}},
										item.element_browser = SPAN({'class':'browser'}/*,
											item.element_test = SPAN(),
											item.element_show = IMG({'src': item.child.preview ? item.child.preview.filename : '',
											'title': item.child.name,
											'alt': item.child.name
											}),
											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'}, item.child.name)*/
									)

					// the counted links
					item.toggle = SPAN({'class':'toggle'}, i+1)
					// connect the counted links
					connect(item.toggle, 'onclick', partial(bind(this.onclick, this), item))
					appendChildNodes(this.view.toggles, item.toggle)
					if (!this.active) this.show(item)
					this.items[data.children[i].id] = item
				} catch (ex) {
					for (i in ex) log(i, ': ', ex[i])
				}
			}
		}, this), function(error) {})
	},
	onclick: function(item, ev) {
		this.view.player.innerHTML = ''
		this.view.click2play.style.display = ''
		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')
				// apply_classes
				if (this.active.child.apply_classes) {
					removeElementClass(document.body, this.active.child.apply_classes.text)
				}
			}
			// if backdrop we show it as the background of body
			if (item.child.backdrop) {
				setStyle(this.view.backdrops, {'background-image':'url(\''+ item.child.backdrop.filename + '\')', 'z-index':'1'})
			} else {
				setStyle(this.view.backdrops, {'background-image':'none'})
			}

			this.active = item
			// apply_classes
			if (this.active.child.apply_classes) {
				addElementClass(document.body, this.active.child.apply_classes.text)
			}
			appear(this.view.title, {'to': 0, from: 1, 'afterFinish': bind(partial(function(item){
				replaceChildNodes(this.view.title, item.child.video.title)
				appear(this.view.title, {from:0, to:1})

			}, item), this)})
			appear(item.element)
			addElementClass(item.toggle, 'selected')
		} catch (ex) {
			for (i in ex) log(i, ': ', ex[i])
		}
	}
}