var topics = []
var selectedTopic = undefined
Topic = function(data) {
	for(a in data) this[a] = data[a]
	this.photos = []
	this.show = {
		index:0,
		count: 6
	}
	this.view = {}
	this.view.box = DIV({'style':{'display': "block"}}, TABLE({'class':'topic'}, TBODY(null, 
		TR(null, this.view.head = TH({'colspan': '3', 'class': 'title'}, TABLE({'width':'100%'},TBODY(null,
		TR(null,TD({'colspan': '3', 'class': 'title'},this.title),TD({'align':'right', 'class': 'description'},this.description)))))),
		TR(null, TD(null, TABLE({'class':'band'}, TBODY(null, TR(null, 
			TD({'class':'left'}, this.view.left = IMG({'class':'scroll', 'src':'/static/images/left_small.gif'})), 
			TD({'class':'center'}, TABLE({'class':'cinema'}, TBODY(null, this.view.center = TR(null)))),
			TD({'class':'right'}, this.view.right = IMG({'class':'scroll', 'src':'/static/images/right_small.gif'}))
		))))
		))))
	hideElement(this.view.left)
	hideElement(this.view.right)
	this.view.toggle = DIV(null, this.title)
	// connect left and right
	connect(this.view.left, "onclick", partial(function(self) {
		if (self.show.index > 0) {
			var toAppear = self.photos[self.show.index - 1].view.box
			var toHide = self.photos[self.show.index + self.show.count - 1].view.box
			//shrink(toHide)
			hideElement(toHide)
			appear(toAppear, {afterFinish: partial(function (toAppear) {
		    	toAppear.style.display = ''
			}, toAppear)})
			self.show.index--
			if (self.show.index == 0) {
				fade(self.view.left)
				self.c.leftAppear = connect(self.view.right, "onclick", partial(function(self) {
					appear(self.view.left)
					disconnect(self.c.leftAppear)
				}, self))
			}
		}
	}, this))
	connect(this.view.right, "onclick", partial(function(self) {
		if (self.show.index == 0) {
			log("appear left")
			appear(self.view.left)
		}
		if (self.show.index + self.show.count < self.photos.length) {
			var toAppear = self.photos[self.show.index + self.show.count].view.box
			var toHide = self.photos[self.show.index].view.box
			//shrink(toHide)
			hideElement(toHide)
			appear(toAppear, {afterFinish: partial(function (toAppear) {
		    	toAppear.style.display = ''
			}, toAppear)})
			self.show.index++
			if (self.show.index + self.show.count == self.photos.length) {
				fade(self.view.right)
				self.c.rightAppear = connect(self.view.left, "onclick", partial(function(self) {
					appear(self.view.right)
					disconnect(self.c.rightAppear)
				}, self))
			}
		}
	}, this))
	
	//	load photos
	this.d = loadJSONDoc(url = "/json/photos", {'id': this.id})
	this.d.addCallbacks(
		partial(function(self, data) {
			for (i in data.photos) {
				self.photos.push(new Photo(data.photos[i]))
			}
			//	if photos are available for this topic then we show it - of course!
			if (self.photos.length) {
				appendChildNodes($('topics'), self.view.box)
				// out : appendChildNodes($('selection'), self.view.toggle)
				connect(self.view.toggle, "onclick", partial(function(self){
					self.select()
				}, self))
				self.showPhotos(0)
			}
			if (self.photos.length > self.show.count) {
				appear(self.view.right)
			}
		}, this),
		function(error) {
			// no topics or broken API
			logs(error, "error while loading photos")
		}
	)
	//out: if (ttypeof selectedTopic == 'undefined') this.select();
}
Topic.prototype = {
	c: {},
	/**
	 * shows certain photos in view.center
	 */
	showPhotos:function(index) {
		this.show.index = index ? index : 0
		this.show.count = this.photos.length < this.show.count ? this.photos.length : this.show.count
		appendChildNodes(this.view.center, partial(function(self){
			var cinema = []
			for(i = self.show.index;i < self.photos.length; i++) {
				if (i < self.show.index || i >= self.show.index + self.show.count) hideElement(self.photos[i].view.box)
				cinema.push(self.photos[i].view.box)
			}
			return cinema
		}, this))
	},
	select: function() {
		if (selectedTopic != this) {
			if (typeof selectedTopic == 'undefined') {
				log("preselect")
				showElement(this.view.box)
				logs(this.view)
				addElementClass(this.view.toggle, 'selected')
				selectedTopic = this
			} else {
				fade(selectedTopic.view.box, {
					'afterFinish': partial(appear, this.view.box)
				})
				removeElementClass(selectedTopic.view.toggle, 'selected')
				selectedTopic = this
				addElementClass(selectedTopic.view.toggle, 'selected')
			}
		}
	}
}
Photo = function(data) {
	for(a in data) this[a] = data[a]
	this.view = {}
	//	'rel':'ibox?height=450&width=1024', 
	this.view.box = TD({'class': 'box'}, this.view.preview = DIV(null, this.view.previewImage = IMG({'class': 'preview', 'src':this.abspreviewpath, "style":{'background-color': 'black','opacity': '.7'}})))
	connect(this.view.preview, "onclick", partial(function(self){
		if (showIbox("/photo/" + self.id, self.title, {'type': '3','width': 720, 'height': 600})) {
			showBG();
			window.onscroll = maintPos;
			window.onresize = maintPos;
			return false
		}
	}, this))
	connect(this.view.box, "onmouseover", partial(function(self){
		Opacity(self.view.previewImage,{
			'from': .7,
			'to': 1,
			'duration': 0.3
		})
	}, this))
	connect(this.view.box, "onmouseout", partial(function(self){
		Opacity(self.view.previewImage,{
			'from': 1,
			'to': .7,
			'duration': 0.3
		})
	}, this))
}

connect(window, "onload", function() {
	//	fetch all topics and photos
	var d = loadJSONDoc(url = "/json/topics")
	d.addCallbacks(
		partial(function(self, data) {
			for (i in data.topics) {
				topics.push(new Topic(data.topics[i]))
			}
		}, self),
		function(error) {
			// no topics or broken API
			logs(error, "error while loading topics")
		}
	)
})
function logs(object, title) {
	if (title) log(title)
	for (i in object) log("\t\t" + i + "[" + typeof object[i] + "]" + ": " + object[i])
}