dojo.require("dojo.string")
dojo.require("dojo.dom")
dojo.require("dojo.html.layout")
dojo.require("dojo.html.style")
dojo.require("perse.*")
dojo.require("perse.animation")
dojo.require("perse.mvc")
dojo.require("lgz.web.animation")

dojo.provide("lgz.web.intro")

lgz.web.intro = new function(){

	this.toggleMoment = function(view, name, evt){
		var hide = view.getElement(name)
		//hide.style.backgroundColor = 'transparent'
		dojo.html.setOpacity(hide, 0.0)
		// evaluate moment
		var splits = name.split('.')
		var index = splits.slice(0,1).join('.')
		if (index){
			var moment = view.getElement(index)
			var title = dojo.html.getElementsByClass('moment_title', moment)[0]
			if (evt.type == 'mouseout') {
				title.style.display = 'none'
				moment.style.top = '0px'
				var color = moment.style.backgroundColor
				hide.style.backgroundColor = color
				dojo.html.setOpacity(hide, 1.0)
			} else if (evt.type == 'mouseover') {
				perse.mvc.models.update('lgz.web.animation.play', index)
				title.style.display = 'block'
				var first = view.lookup('first', 'first')
				if (!perse.helper.memberOf(splits[0], first)) {
					first.push(splits[0])
					view.update('first', {first: first})
				}
					
				moment.style.top = '-27px'
			} else {
				return
			}
		}
	}

	this.reloadWindow = function(view, name, evt){

		var index = name.split('.').slice(1,2).join('.')
		if (index) {
			var url = window.location
			window.location = url.toString().split('/').slice(0, -1).join('/') + '/werk/' + index+ '/'
		}
	}

	this.addMoment = function(element, interval, width, len){
		len += 1
		element.innerHTML = element.innerHTML + '<div class="red"></div>'
		var childs = element.childNodes
		var position = dojo.html.getAbsolutePosition(childs[childs.length-1])
		var window_width = perse.animation.windowSize().width
		if (len < 200 && (position.x + 2*width) < window_width) {
			window.setTimeout(function () {lgz.web.intro.addMoment(element, interval, width, len)}, interval)
		} else {
			element.innerHTML = element.innerHTML + '<div class="red"></div>'
			document.getElementById('page.center').style.display = 'block'
			document.getElementById('others').style.display = 'none'
		}
	}

	this.buildTimeBar = function(view, name, evt){
		document.getElementById('others').style.display = 'block'
		perse.animation.fade([document.getElementById('page.header.logo')], 100, 0.05, 0)
		lgz.web.intro.addMoment(document.getElementById('others.redbar'), 75, 57, 0)

	}

	// timebar view
	this.Content = new perse.mvc.View('page.center.content')
	this.Content.addModel('first', {first: []})
	this.Content.addSubscriber('first', function(view, name, model){
		if (model.first.length == 3) {
			perse.animation.fade([document.getElementById('page.header.topnav')], 100, 0.05, 0)
		}
	})
	this.Content.addModel('amount_of_moments', 'lgz.timebar')
	this.Content.addSubscriber('amount_of_moments', lgz.web.animation.extendWorks)
	this.Content.addListener('onmouseout', this.toggleMoment)
	this.Content.addListener('onmouseover', this.toggleMoment)
	this.Content.addListener('onclick', this.reloadWindow)	

	// Initialize the global registration
	this.init = function() {
		// view registration
		perse.mvc.view.register(lgz.web.intro.Content)

		// page animation
		perse.mvc.models.update('lgz.timebar', {amount: lgz.web.animation.amountOfShownMoments()})
		lgz.web.intro.buildTimeBar()
	}
}

dojo.addOnLoad(lgz.web.intro.init)