/* 
  This program is free software. It comes without any warranty, to
  the extent permitted by applicable law. You can redistribute it
  and/or modify it under the terms of the Do What The Fuck You Want
  To Public License, Version 2, as published by Sam Hocevar. See
  http://sam.zoy.org/wtfpl/COPYING for more details.
*/

/* I'm sorry I never got around to beautifying the code, but I was
 * simply more focused on encoding and subbing my films.
 */

function empty(){}


HTMLElement.prototype.set_opacity = function(val) {
	this.style.opacity = val
	this.style.filter = 'alpha(opacity=' + val*100 + ')'
}

HTMLElement.prototype.fade = function(fade_in, increase, speed, afterfunc) {
	if (increase == undefined || increase == -1)
		var increase = 5
	if (speed = undefined || speed == -1)
		var speed = 50
	if (afterfunc == undefined)
		var afterfunc = empty
	
	this.style.display = 'block'
	if (fade_in) {
		this.fade_opacity = 0
		this.set_opacity(0)
	}
	else {
		this.fade_opacity = 100
		this.set_opacity(1)
	}
	this.fade_increase = increase
	this.fade_afterfunc = afterfunc
	this.fade_in = fade_in
	this.fade_interval = setInterval(this.fade_run, speed, this)
}

HTMLElement.prototype.fade_in = function(increase, speed, afterfunc) {
	this.fade(true, increase, speed, afterfunc)
}

HTMLElement.prototype.fade_out = function(increase, speed, afterfunc) {
	this.fade(false, increase, speed, afterfunc)
}

HTMLElement.prototype.fade_run = function(obj) {
	var end
	if (obj.fade_in) {
		obj.fade_opacity += obj.fade_increase
		end = obj.fade_opacity >= 100
	}
	else {
		obj.fade_opacity -= obj.fade_increase
		end = obj.fade_opacity <= 0
	}
	if (!end)
		obj.set_opacity(obj.fade_opacity/100)
	else
		obj.fade_end()
}

HTMLElement.prototype.fade_end = function() {
	clearInterval(this.fade_interval)
	if (this.fade_in)
		this.set_opacity(1)
	else {
		this.set_opacity(0)
		this.style.display = 'none'
	}
	delete this.fade_interval
	delete this.fade_opacity
	delete this.fade_increase
	delete this.fade_in
	var func = this.fade_afterfunc
	delete this.fade_afterfunc
	func()
}


function get_window_size() {
	if (window.innerWidth) {
		w = window.innerWidth
		h = window.innerHeight
	}
	else if (document.body.clientWidth) {
		w = document.body.clientWidth
		h = document.body.clientHeight
	}
}

function update_csssvg() {
	get_window_size()
	
	try {
		// More logical resize
		if (h < w * 0.45)
			svg.setAttribute('preserveAspectRatio', 'xMidYMid slice')
		else
			svg.setAttribute('preserveAspectRatio', 'xMidYMid meet')
    } catch (error) {}
    // Just for looks
    text_box.style.minHeight = h - 101 + 'px'
    text_content.style.minHeight = h - 215 - menu_height + 'px'
}

function in_list(obj, lst) {
	for (var x in lst) {
		if (lst[x] == obj)
			return x
	}
	
	return -1
}

function set_title_based_on_page(num) {
	if (pages_titles[num])
		document.title = root_title + ' :: ' + pages_titles[num]
}





function pagescroll_start() {
	if (page_scrolling)
		return false
	
	var newelem = pages_elems[new_num]
	var oldelem = pages_elems[old_num]
	
	newelem.style.position = 'absolute'
	newelem.style.top = '6px'
	newelem.style.marginLeft = '525px'
	newelem.className = 'focus'
	
	if (newelem.scrollHeight > oldelem.scrollHeight) {
		newelem.style.position = ''
		newelem.style.marginLeft = '525px'
		oldelem.style.position = 'absolute'
		oldelem.style.top = '6px'
	}
	
	page_moved = 0
	
	increase = 10
	page_change_increase = 400
	
	page_scrolling = true
	pagescroll()
}

function pagescroll() {
	var tmp_increase = increase + 15
	if (page_moved + tmp_increase < page_change_increase)
		increase = tmp_increase
	else
		increase -= 25
	mv = page_moved + increase
	if (mv < PAGE_WIDTH) {
		page_moved = mv
		text_content.style.left = -mv + 'px'
		setTimeout("pagescroll()", 50)
	}
	else
		pagescroll_end()
}

function pagescroll_end() {
	var newelem = pages_elems[new_num]
	var oldelem = pages_elems[old_num]
	
	current_page = pages_refs[new_num]
	set_title_based_on_page(new_num)
	
	text_content.removeAttribute('style')
	newelem.removeAttribute('style')
	oldelem.removeAttribute('style')
	oldelem.className = 'hidden'
	
	text_content.style.left = '0'
	newelem.style.left = '0'
	oldelem.style.left = '0'
	
	pages_menu_elems[old_num].className = ''
	pages_menu_elems[new_num].className = 'focus'
	
	page_scrolling = false
}






function cinema_start(num, subs_lang) {
	if (video_playing) {
		if (num != video_playing) {
			video_playing = num
			cininf.fade_out(10, -1, function() {cinema_set_description(); cininf.fade_in(10)})
			cinema_play()
		}
		return
	}
		
	if (subs_lang) {
		var ok = false
		for (var x in subtitles) {
			if (subtitles[x][0] == num) {
				ok = true
				subtitles[x][1].resume()
				break
			}
		}
		if (!ok)
			subtitles.push([num, new subtitle(cinvid, 'vid/niels-natur'+num+'-'+subs_lang+'.srt', cinelm)])
	}
	video_playing = num
	cinema_set_description()
	cinelm.fade_in(7, -1, cinema_start_continue)
}

function cinema_set_description() {
	cininf.innerHTML = root_title + ' ' + video_playing
}

function cinema_start_continue() {
	cininf.fade_in(10)
	cinelm_close.fade_in(10)
	
	text_wrapper.style.display = 'none'
	bgflow.style.display = 'none'
	
	cinema_play()
}

function cinema_play() {
	var url = 'vid/niels-natur' + video_playing + '-small.ogv'
	
	if (cinvid.currentTime != undefined) {
		cinvid.src = url
		cinvid.play()
	}
	else {
		add_cortado(url)
	}
}

function cinema_end() {
	text_wrapper.style.display = ''
	bgflow.style.display = ''
	
	if (cinvid.currentTime != undefined) {
		cinvid.pause()
	}
	else {
		remove_cortado()
	}
	for (var x in subtitles) {
		if (subtitles[x][0] == video_playing) {
			subtitles[x][1].stop()
			break
		}
	}
	video_playing = 0
	
	cininf.fade_out(7)
	cinelm_close.fade_out()
	cinelm.fade_out(-1, -1, function(){})
}




function do_action(href) {
	var action, x
	action = href.substr(href.indexOf('#')+1)
	if (!page_scrolling && action != current_page && in_list(action, pages_refs) != -1) {
		// It is a hidden page (to be shown)
		
		var name, elem, menu_elem, parent
		for (x in pages_refs) {
			name = pages_refs[x]
			elem = pages_elems[x]
			menu_elem = pages_menu_elems[x]
			if (name == action) {
				// Put element after other elements
				parent = elem.parentNode
				parent.removeChild(elem)
				parent.appendChild(elem)
				
				new_num = x
			}
			else if (name == current_page) {
				old_num = x
			}
		}
		
		pagescroll_start()
	}
	else if (action.indexOf('play') == 0) {
		var play = action.substr(4)
		var dot = play.indexOf('.')
		var subs
		if (dot != -1) {
			subs = play.substr(dot+1)
			play = play.substr(0, dot)
		}
		else
			subs = false
		play = play*1
		if (play) {
			do_action(pages_refs[1])
			cinema_start(play, subs)
		}
	}
}

function remove_cortado(url) {
	cinvid.removeChild(cinapp)
	delete cinapp
}

function add_cortado(url) {
	cinapp = document.createElement('applet')
	cinapp.setAttribute('code', 'com.fluendo.player.Cortado.class')
	cinapp.setAttribute('archive', 'http://theora.org/cortado.jar')
	cinapp.width = '640'
	cinapp.height = '360'
	
	namval = {
	    'url': url,
	    'local': 'false',
	    'duration': '',
	    'bufferSize': '200',
	    'autoPlay': 'true',
	    'statusHeight': '16'
	}
	
	for (x in namval) {
		elem = document.createElement('param')
		elem.setAttribute('name', x)
		elem.setAttribute('value', namval[x])
		if (x == 'url')
			cinapp_url = elem
		cinapp.appendChild(elem)
	}
	
	cinvid.appendChild(cinapp)
}


window.onload = function() {
	// Get elements
	bgflow = document.getElementById('bgflow')
	text_wrapper = document.getElementById('text_wrapper')
	text_box = document.getElementById('text_box')
	text_menu = document.getElementById('text_menu')
	text_content = document.getElementById('text_content')
	
	
	PAGE_WIDTH = 525
	HALF_PAGE = Math.round(PAGE_WIDTH / 2) + 10 // With a little extra
	
	// Set default values (also for debugging)
	w = -1
	h = -1
	old_num = -1
	new_num = -1
	page_scrolling = false
	video_playing = 0
	
	// Get menu height if menu exists
	try {
		menu_height = text_menu.offsetHeight
	} catch(err) {
		menu_height = 0
	}
	
	// Get root element of background SVG
	try {
		svg = bgflow.getSVGDocument().rootElement
	} catch (error) {}
	
	root_title = document.title
	
	var elems, elem, x, y, name, urlhash, hash_in_list, elem_num, menu_elem
	var elems2, elem2
	urlhash = window.location.hash.substr(1)
	
	pages_refs = new Array()
	pages_elems = new Array()
	pages_menu_elems = new Array()
	pages_titles = new Array()
	
	elems = text_menu.childNodes
	for (x in elems) {
		elem = elems[x]
		if (elem.nodeName && elem.nodeName.toLowerCase() == 'li') {
			pages_menu_elems.push(elem)
			elem = elem.childNodes[0]
			pages_titles.push(elem.innerHTML)
			pages_refs.push(elem.href.substr(elem.href.indexOf('#')+1))
		}
	}
	
	hash_in_list = in_list(urlhash, pages_refs)
	if (hash_in_list != -1) {
		current_page = urlhash
		elem_num = hash_in_list
	}
	else {
		current_page = pages_refs[0]
		elem_num = 0
	}
	
	// Hide non-current pages
	for (x in pages_refs) {
		name = pages_refs[x]
		elem = document.getElementById('content_' + name)
		menu_elem = pages_menu_elems[x]
		pages_elems.push(elem)
		if (name == current_page) {
			elem.className = 'focus'
			menu_elem.className = 'focus'
		}
		else {
			elem.className = 'hidden'
			menu_elem.className = ''
		}
	}
	
	set_title_based_on_page(elem_num)
	
	// Set up alternate handling of '#' links and prepare video shots
	elems = document.getElementsByTagName('a')
	for (x in elems) {
		elem = elems[x]
		if (elem.href != undefined && elem.href.indexOf('#') != -1)
			elem.onclick = function() {do_action(this.href)}
	}
	
	// Prepare page for viewing video
	cinelm = document.createElement('div')
	cinelm.id = 'cinema'
	
	cinelm_close = document.createElement('div')
	cinelm_close.id = 'cinema-close'
	cinelm_close.onclick = function() {cinema_end()}
	cinelm.appendChild(cinelm_close)
	
	cinvid = document.createElement('video')
	cinvid.id = 'cinema-film'
	cinvid.width = '640'
	cinvid.height = '360'
	cinvid.setAttribute('controls', 'controls')
	cinvid.addEventListener('ended', function() {cinema_end()}, true)
	
	cinelm.appendChild(cinvid)
	
	cininf = document.createElement('div')
	cininf.id = 'cinema-info'
	cinelm.appendChild(cininf)

	document.body.appendChild(cinelm)
	
	// Prepare for loading of subtitles
	subtitles = new Array()
	
	// Do whatever the hash tells you to do
	do_action(urlhash)
	
	// Prepare to update css and svg (and do it)
	window.onresize = function() {update_csssvg()}
	update_csssvg()
}