/**
 * see template:
 * var selectedChunk = 0
 * var chunkCount = ${len(characters)}
 */

/**
 * a character derived from the element id
 */
character = function (id) {
	this.view = {
		img: $('char_' + id),
		title: $('title_' + id)
	}
}

chunk = function(id) {
	this.view = {
		chars: $('chunk_' + id),
		titles: $('titles_' + id)
	}
	//	get count of characters
	log(this.view.titles.childNodes.length)
}
/**
 * usurping character chunks
 * we want a special hover effect ->
 */
usurpChunks = function() {
	this.chunks = []
	for(i = 0; i < chunkCount; i++) {
		this.chunks[i] = new chunk(i)
	}
}

/**
 * chunk navigation
 */
selectChunk = function(i)  {
	if (typeof selectedChunk == 'undefined') {
		selectedChunk = 0
	}
	fade($('chunk_' + selectedChunk), {beforeStart : function() {
		fade($('titles_' + selectedChunk))
	}})
	selectedChunk = i
	appear($('chunk_' + selectedChunk), {beforeStart : function () {
		appear($('titles_' + selectedChunk))
	}})
}



Abouts = function(characters, target, scrollable, intro) {
	this.characters = {}
	this.load(characters)
	this.target = $(target)
	this.scrollable = $(scrollable)
	this.intro = $(intro)
	this.defaultContent = this.target.innerHTML
}
Abouts.prototype = {
	load:function(list) {
		//	first start the data fetching
		forEach(list, bind(function(id){
			d = loadJSONDoc("", {'id': id, 'tg_format':'json'})
			d.addCallbacks(bind(function(data) {
				this.characters[data.character.id] = data.character

				//	noew we cann connect the links with the content
				connect($('char_' + data.character.id), 'onclick', partial(bind(this.onclick, this), data.character.id))
				connect($('title_' + data.character.id), 'onclick', partial(bind(this.onclick, this), data.character.id))
			}, this), function(error) {
				log(error)
			})
		}, this))
	},
	onclick: function(id, ev) {
		this.scrollable.scrollTo(0)
		try {
			// highlighting and selecting
			if (typeof this.selection != 'undefined') {
				removeElementClass($('char_' + this.selection), 'selected')
				removeElementClass($('title_' + this.selection), 'selected')
				fade($('char_' + this.selection), {'from': 1.0, 'to': 0.3})
			} else {
				//	here is our first selection: we blend down all thumbs a little bit
				setDisplayForElement('none', this.intro)
				chars = getElementsByTagAndClassName(null, 'char')
				for (i = 0; i <  chars.length; i++) {
					if (chars[i].id == 'char_' + id) chars.splice(i, 1)
				}
				multiple(chars, fade, {'from': 1.0, 'to': 0.3})
			}
			if (typeof this.selection != 'undefined') fade($('char_' + id), {'from': 0.3, 'to': 1.0})
			this.selection = id
			addElementClass($('char_' + this.selection), 'selected')
			addElementClass($('title_' + this.selection), 'selected')

			//	a hack to please IESucks
			d = DIV()
			d.innerHTML = this.characters[id].description
			replaceChildNodes(this.target, d)

			if (typeof this.deeper != "undefined") replaceChildNodes(this.deeper, null)

			if (this.scrollable.isVerticalBounded()) {
				showElement($('scroll')) // show scroll controlls
				this.deeper = $('divedeeper_out')
			} else {
				hideElement($('scroll')) // hide scroll controlls
				this.deeper = $('divedeeper_in')
			}

			if (this.characters[id].active)
				replaceChildNodes(this.deeper,
					A({'href':character_url + this.characters[id].slug},
						SPAN({'style': {'font-weight':'bold'}}, '» dive deeper '),
						this.characters[id].deeper
					)
				)
		} catch (ex) {
			alert(ex.description)
		}
	}
}

//	variables
var chunks = null

/**
 * bootstrap
 */
addLoadEvent(function () {

	return;
	connect($('prevChunk'), 'onclick', function(ev) {
		if (selectedChunk > 0) {
			selectChunk(selectedChunk - 1)
			if (selectedChunk == 0) {
				fade($('prevChunk'))
			}
			if (selectedChunk == chunkCount - 2) {
				appear($('nextChunk'))
			}
		}
	})
	connect($('nextChunk'), 'onclick', function(ev) {
		if (selectedChunk < chunkCount - 1) {
			selectChunk(selectedChunk + 1)
			if (selectedChunk == 1) {
				appear($('prevChunk'))
			}
			if (selectedChunk == chunkCount - 1) {
				fade($('nextChunk'))
			}
		}
	})


	//	connect the hover stuff
	chunks = new usurpChunks()

	forEach(getElementsByTagAndClassName('img', 'char'), function(char){
		connect(char, 'onclick', function() {
			log('click')
		})
		connect(char, 'onmouseover', function() {
			log('over')
		})
		connect(char, 'onmouseout', function() {
			log('out')
		})
	})
})