Event.observe(window, 'load', function() {
	if ($('startpage')) {
		ImageResize.init()
		StartImage.init()
	}
	
	if ($$('html')[0].hasClassName("ie7")) {
		$$('body')[0].descendants().each(function(d) {
			if (d.getStyle("display") == "inline-block") {
				d.setStyle({display: "inline"})
			}
		})
	}
})

var ImageResize = {
	init: function() {
		this.image = $('startImage').down('img')
		this.imageContainer = $('startImage')
		$('startImage').show()
		this.originalWidth = this.image.width
		this.originalHeight = this.image.height
		this.resize()
		Event.observe(document.onresize ? document : window, "resize", this.resize.bind(this))
	},

	resize: function() {
		var docWidth = document.viewport.getWidth()
		var docHeight = document.viewport.getHeight()
		
		if (docWidth > docHeight + 500) {
			this.image.writeAttribute("height", this.imageContainer.getWidth()*this.originalHeight/this.originalWidth)
			this.image.writeAttribute("width", this.imageContainer.getWidth())
		} else {
			this.image.writeAttribute("width", this.imageContainer.getHeight()*this.originalWidth/this.originalHeight)
			this.image.writeAttribute("height", this.imageContainer.getHeight())
		}

		this.image.setStyle({
			marginLeft: (-this.image.getWidth()/2) + 'px',
			marginTop: (-this.image.getHeight()/2) + 'px'
		})
	}
}

var StartImage = {
	init: function() {
		$('content').hide()
		Effect.Fade('startImage', { to: 0.25, delay: 0.5, afterFinish: this.appearBody })
	},
	
	appearBody: function() {
		$('content').setStyle({display: 'block', opacity: 0})
		Effect.Fade('content', { from: 0, to: 1, duration: 0.3 })
		Titles.init()
		Menu.init()
		GoToStart.init()
	}
}

var Titles = {
	init: function() {
		this.control = $('toggleTitlesControl')
		this.enableButton = this.control.down("span.on")
		this.disableButton = this.control.down("span.off")
		
		this.setStartPadding()
		
		this.enableButton.observe("click", this.start.bind(this))
		this.disableButton.observe("click", this.stop.bind(this))
		this.scrollPosition = 0
		this.scrollStep = 0.7
		this.handler = null
		this.start()
		
		if (window.addEventListener) window.addEventListener('DOMMouseScroll', this.handleMouseScroll.bind(this), false)
		window.onmousewheel = document.onmousewheel = this.handleMouseScroll.bind(this);
	},
	
	setStartPadding: function() {
		height = document.viewport.getHeight() - parseInt($('flow').getStyle("padding-top"))

		$('content').setStyle({
			"top": height + 'px',
			"position": "relative"
		})
	},
	
	start: function() {
		if (!this.handler) {
			this.toggleButtons("on")
			this.scrollPosition = this.getCurrentScrollPosition()
			this.handler = setInterval(this.processScroll.bind(this), 5)
		}
	},
	
	stop: function() {
		this.toggleButtons("off")
		clearInterval(this.handler)
		this.handler = null
	},
	
	toggleButtons: function(state) {
		if (state == "on") {
			this.enableButton.addClassName("active")
			this.disableButton.removeClassName("active")
		} else if (state == "off") {
			this.disableButton.addClassName("active")
			this.enableButton.removeClassName("active")
		}
	}, 
	
	processScroll: function() {
		if (Math.floor(this.scrollPosition) == document.viewport.getScrollOffsets().top) {
			this.scrollPosition += this.scrollStep
			window.scrollTo(0, this.scrollPosition)
		} else {
			this.stop()
		}
	},
	
	handleMouseScroll: function() {
		this.stop()
	},
	
	getCurrentScrollPosition: function() {
		return document.viewport.getScrollOffsets().top
	}
}

var Menu = {
	init: function() {
		this.elements = $('menu').select("a")
		this.elements.each(function(e) {
			e.observe("click", this.processClick.bind(this))
		}.bind(this))
	},
	
	processClick: function(event) {
		event.stop()
		element = event.findElement("a")
		Titles.stop()
		Effect.ScrollTo(element.readAttribute("href"), {
			offset: -30
		})
	}
}

var GoToStart = {
	init: function() {
		$('goToStart').observe("click", function() {
			Effect.ScrollTo("menu", { offset: -50 })
		})
	}
}