/**
 * browses through thumbnails
 * @param {Object} options
 */
var Thumbnailbrowser = new Class({
	Implements: Options,
	current: null,
	options:{
		/**
		 * stage shows the original material
		 */
		stage: null,
		/**
		 * contains the loaded thumbnails
		 */
		target: null,
		contents: null,
		columns: 5
	},
	// we track our clicks
	pageTracker: null,
	initialize: function(options, pageTracker){
		this.pageTracker = pageTracker
		this.setOptions(options);
		(this.contents = this.options.contents.filter(function(cnt){
			if (cnt.type.type.test('^image/')) return true
			else if (cnt.type.type.test('^video/')) return true
			else return false 
		})).each(function(cnt, i, v) {
			this.options.target.grab(toggle = new Element('span',{'class':'toggle'}).grab(new Element('img',{src:cnt.thumbnail})))
			if (i%this.options.columns == 0) toggle.addClass('first')
			if ((i+1)%this.options.columns == 0) toggle.addClass('last')
			if (i<this.options.columns) toggle.addClass('front')
			cnt._toggle = toggle
			cnt._toggle.addEvent('click', function(e, cnt){
				this.show(cnt)
			}.bindWithEvent(this, [cnt]))
			if (i == 0) this.show(cnt);
		}.bind(this))
	},
	/**
	 * just show the cnt
	 * @param {Object} cnt
	 */
	show: function(cnt) {
		if (this.current != cnt) {
			if (this.current) {
				var last_current = this.current
			}
			this.current = cnt
			if (!$defined(this.current._show)) { // we create the show
				var h = 406, f = cnt.height / h, w = cnt.width / f;
				this.current._stage = new Element('div', {
					'class': 'stage',
					styles:{display:'inline-block',opacity:0}
				})
				.grab(this.current._show = new Element('div',{'class':'show'}))
				.grab(new Element('div',{'class':'description', html:cnt.description})).inject(this.options.stage);
				if (cnt.type.type.test('^image/')) {
					new Asset.image(cnt.media_url, {width: w,height: h}).inject(this.current._show);
				} else if (cnt.type.type.test('^video/')) {
					new Swiff(cnt.media_url, {
						container: this.current._show,
						width: w,
						height: h
					})
				}
				
			}
			// interchange the two materials
			if ($defined(last_current)) {
				last_current._toggle.removeClass('selected')
				last_current._stage.opacity({}, 0);
			}
			this.current._stage.opacity({}, 1);
			this.current._toggle.addClass('selected')
			
			if ($defined(this.pageTracker)) this.pageTracker._trackPageview(cnt.title ? document.location.href+cnt.title: cnt.media_url)
		}		
	}
})

/**
 * initializes the thumbnails by fetching stuff
 * @param {Object} params
 */
init_thumbnailbrowser = function(params) {
	try {
		var fetch_url = params.fetch || "/movies/index";
		var target = $(params.target) || new Element('div').inject(document.body);
		var stage = $(params.stage) || new Element('div').inject(document.body);
		var tb_fetch = new Request.JSON({
			url: fetch_url,
			onSuccess: function(data){
				var tb = new Thumbnailbrowser({
					contents: data.contents,
					target: target,
					stage: stage
				},
				params.pageTracker)
			}
		}).get()
	} catch(ex) {
		dbug.log(ex);
	}
}