dojo.require("dojo.string")
dojo.require("perse.*")
dojo.require("perse.animation")
dojo.require("perse.mvc")

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

lgz.web.typo = new function(){

	this.toggleImage = function(view, name, evt){
		// evaluate parts
		if (name == 'x.img' || name == 'g.img') {
			var images = ['x.img', 'g.img']
		} else if (name == 'l.img' || name == 'z.img') {
			var images = [name]
		} else {
			return
		}
		// evaluate display paramters for different mouse events
		if (evt.type == 'mouseout') {
			var previous = '_over.gif'; var next = '.gif'; var display = 'none'
		} else if (evt.type == 'mouseover') {
			var previous = '.gif'; var next = '_over.gif'; var display = 'block'
		} else {
			return
		}

		for (var i in images) {
			var img_name = images[i]
			// change image source
			var img = view.getElement(img_name)
			img.src = img.src.slice(0, img.src.length - previous.length) + next
			// show or hide comment div
			if (img_name != 'g.img') {
				var subview_name = img_name.slice(0, -4)
				var element = view.getElement(subview_name + '.comment')
				var subview = view.subviews[subview_name]
				if (display == 'block') {
					subview.update('fade', {fade: true})
					perse.animation.fade([element], 50, 0.05, 0, null, function(){return subview.lookup('fade', 'fade')})
					//element.style.display = display
					
				} else {
					subview.update('fade', {fade: false})
					perse.animation.fade([element], 50, -0.05, 1, null, function(){return !(subview.lookup('fade', 'fade'))})
					//element.style.display = display
				}
			}
		}								
	}

	this.fadeOutAndRedirect = function(view, name, evt){
		var elements = []
		elements.push(document.getElementById('page.typo.l'))
		elements.push(document.getElementById('page.typo.g'))
		elements.push(document.getElementById('page.typo.z'))
		elements.push(document.getElementById('page.typo.x'))
		perse.animation.fade(elements, 100, -0.05, 1, function() {
			var url = window.location.toString()
			window.location = (dojo.string.endsWith(url, '/')) ? url + '@@intro.html':url + '/@@intro.html'
		})					
	}

	window.onresize = function(evt) {
		perse.mvc.models.update('screen', perse.animation.windowSize())
	}

	// page view
	this.TypoView = new perse.mvc.View('page.typo')
	this.TypoView.addListener('onmouseout', this.toggleImage)
	this.TypoView.addListener('onmouseover', this.toggleImage)
	this.TypoView.addSubview('x')
	this.TypoView.subviews.x.addModel('fade', {fade: false})
	this.TypoView.subviews.x.addListener('onclick', this.fadeOutAndRedirect)
	this.TypoView.addSubview('l')
	this.TypoView.subviews.l.addModel('fade', {fade: false})
	this.TypoView.subviews.l.addListener('onclick', this.fadeOutAndRedirect)
	this.TypoView.addSubview('g')
	this.TypoView.subviews.g.addModel('screen', 'screen')
	this.TypoView.subviews.g.addListener('onclick', this.fadeOutAndRedirect)
	this.TypoView.subviews.g.addSubscriber('screen', function(view, name, model){
		if (dojo.render.html.ie60 || dojo.render.html.ie55 || dojo.render.html.ie50 || dojo.render.html.safari) {
			var element = view.getElement()
			var top = (model.height <= 700) ? '96px' : Math.ceil(model.height - 604).toString() + 'px'
			var left = Math.ceil(model.width/100*27).toString() + 'px'
			element.style.top = top
			element.style.left = left
		}
	})
	this.TypoView.addSubview('z')
	this.TypoView.subviews.z.addModel('screen', 'screen')
	this.TypoView.subviews.z.addModel('fade', {fade: false})
	this.TypoView.subviews.z.addListener('onclick', this.fadeOutAndRedirect)
	this.TypoView.subviews.z.addSubscriber('screen', function(view, name, model){
		if (dojo.render.html.ie60 || dojo.render.html.ie55 || dojo.render.html.ie50 || dojo.render.html.safari) {
			var element = view.getElement()
			var top = (model.height <= 700) ? '291px' : Math.ceil((model.height - model.height/10) - 339).toString() + 'px'
			var left = (model.width <= 910) ? '649px' : (model.width - 261).toString() + 'px'
			element.style.top = top
			element.style.left = left
		}
	})

	// Initialize the global registration
	this.init = function() {
		// VIEWS REGISTRATION
		perse.mvc.models.register('screen')
		perse.mvc.view.register(lgz.web.typo.TypoView)
		perse.mvc.models.update('screen', perse.animation.windowSize())
	}
}

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