var topics = []
Topic = function(data,counter) {
	for(a in data) this[a] = data[a]
	this.films = []
	this.show = {
		index:0,
		count: 3
	}
	this.view = {}
	this.view.box = TABLE({'class':'topic','id':'topic'+counter}, TBODY(null, 
		TR(null, this.view.head = TH({'colspan': '3'}, TABLE({'width':'100%'},TBODY(null,
		TR(null,TD({'colspan': '3', 'class': 'title'},this.title),TD({'align':'right', 'class': 'description'},this.description)))))),
		TR({'class':'band'}, 
			TD({'class':'left'}, this.view.left = IMG({'class':'scroll', 'src':'/static/images/pfeil_nach_links.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/pfeil_nach_rechts.gif'})))))
	hideElement(this.view.left)
	hideElement(this.view.right)
	// connect left and right
	connect(this.view.left, "onclick", partial(function(self) {
		if (self.show.index > 0) {
			var toAppear = self.films[self.show.index - 1].view.box
			var toHide = self.films[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.films.length) {
			var toAppear = self.films[self.show.index + self.show.count].view.box
			var toHide = self.films[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.films.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 films
	this.d = loadJSONDoc(url = "/json/films", {'id': this.id})
	this.d.addCallbacks(
		partial(function(self, data) {
			for (i in data.films) {
				self.films.push(new Film(data.films[i]))
			}
			//	if films are available for this tpic then we show it - of course!
			if (self.films.length) {
				appendChildNodes($('topics'), self.view.box)
				self.showFilms(null, 2)
			}
			if (self.films.length > self.show.count) {
				appear(self.view.right)
			}
		}, this),
		function(error) {
			// no topics or broken API
			logs(error, "error while loading films")
		}
	)
}
Topic.prototype = {
	c: {},
	/**
	 * shows certain films in view.center
	 */
	showFilms:function(index) {
		this.show.index = index ? index : 0
		this.show.count = this.films.length < this.show.count ? this.films.length : this.show.count
		appendChildNodes(this.view.center, partial(function(self){
			var cinema = []
			for(i = self.show.index;i < self.films.length; i++) {
				if (i < self.show.index || i >= self.show.index + self.show.count) hideElement(self.films[i].view.box)
				cinema.push(self.films[i].view.box)
			}
			return cinema
		}, this))
	}
}

Film = function(data) {
	for(a in data) this[a] = data[a]
	this.files = {}
	this.view = {}
	this.view.box = TD({'class': 'box'}, TABLE({'class':'film','title':this.title, 'description':this.description}, TBODY(null,
		TR({'class':'links'}, this.view.flash = TD({'colspan': '2', 'class': 'flash'}), this.view.quicktime = TD({'colspan': '2', 'class': 'quicktime'}), this.view.mpeg4 = TD({'colspan': '2', 'class': 'mpeg4'})),
		TR(null, this.view.preview = TD({'class': 'preview', 'colspan':'6'})),
		TR(null, TD({'colspan': '6', "height": "10pt"}, escapeHTML(" "))/*
			this.view.forward = TD({'colspan': '3', 'class': 'forward'}, A({'href':'/film/weiterleiten/' + this.id}, "Weiterleiten")), 
			this.view.download = TD({'colspan': '3', 'class': 'download'}, A({'href':'/film/herunterladen/' + this.id}, "Herunterladen"))*/
			)
		)))
	this.d = loadJSONDoc(url = "/json/files", {'id': this.id})
	this.d.addCallbacks(
		partial(function(self, data) {
			for (i in data.files) {
				self.files[data.files[i].type] = new File(data.files[i])
			}
			if (self.files['quicktime']) replaceChildNodes(self.view.quicktime, A({'href':self.files['quicktime']}, 'iPod(m4v)'))
			if (self.files['mpeg4']) replaceChildNodes(self.view.mpeg4, A({'href':self.files['mpeg4']}, 'Handy(3gp)'))
			if (self.files['flash']) replaceChildNodes(self.view.flash, A({'href':self.files['flash']}, 'Flash'))

			if (self.files['preview']) {
				replaceChildNodes(self.view.preview, self.view.previewImage = IMG({'src':self.files['preview'], "style":{'background-color': 'white','opacity': '.7'}}))
			}
		}, this),
		function(error) {
			// no topics or broken API
			logs(error, "error while loading films")
		}
	)
	connect(this.view.preview, "onclick", partial(function(self){
		if (showIbox("/film/" + self.id, self.title, {'type': '3','width': 720, 'height': '600'})) {
			showBG();
			window.onscroll = maintPos;
			window.onresize = maintPos;
			return false
		}
	}, this))
	connect(this.view.preview, "onmouseover", partial(function(self){
		Opacity(self.view.previewImage,{
			'from': .7,
			'to': 1,
			'duration': 0.3
		})
	}, this))
	connect(this.view.preview, "onmouseout", partial(function(self){
		Opacity(self.view.previewImage,{
			'from': 1,
			'to': .7,
			'duration': 0.3
		})
	}, this))
}
Film.prototype = {
	showFiles: function() {
		log(this.files)
		
	}
}
File = function(data) {
	for(a in data) this[a] = data[a]
}
File.prototype = {
	toString: function() {
		return this.abspath
	}
}


connect(window, "onload", function() {
	try {
		//var overEffect = new OverEffect()
	} catch (ex) {
		log(ex)
	}
	
	//	fetch all topics and films
	var d = loadJSONDoc(url = "/json/topics")
	d.addCallbacks(
		partial(function(self, data) {						 	
			for (i in data.topics) {
				topics.push(new Topic(data.topics[i],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])
}