Event.observe(window, 'load', selectBackground, false);
var foo = 0;
var numImages = 11
var image = new Image()
var selected = null
window.onload = function() {
	centerImage("main")
}

function preload(path){
	var pre = new Image()
	pre.src = path
}

function centerImage(name, offsetX, offsetY) {

	objImage = document.all ? document.all[name] : document.getElementById(name)
	var width = objImage.offsetWidth
	var height = objImage.offsetHeight
	objImage.style.position = "absolute"
	objImage.style.visibility = "visible"
	objImage.style.top = "50%"
	objImage.style.left = "50%"
	if(typeof(offsetX) == 'number') {
		objImage.style.marginLeft = (offsetX - (width/2)) + "px"
	} else {
		objImage.style.marginLeft = (-width/2) + "px"
	}	
	if(typeof(offsetY) == 'number') {
		objImage.style.marginTop = (offsetY - (height/2)) + "px"
	} else {
		objImage.style.marginTop = (-height/2)+ "px"
	}
	objImage.style.visibility = "visible"
}

function alertId(obj){
	alert(obj.id)
}

function selectBackground() {
	//var index = parseInt(Math.random() * (numImages-1)) +1
	var path = "images/background/"
	image.src=path + index + ".png"
	$('mainImage').src = image.src
	//setupGalleries();
	setupButtons()
	//setupButtons()

}
function setupSlide() {
	slides = document.getElementsByClassName('slideIn')
	for(i = 0; i < slides.length; i++){
		ns = new slide(slides[i])
	}
}

var slide = Class.create()

slide.prototype = {
	initialize: function(host) {
		this.content = host.href;
		Event.observe(host, 'click', this.slideIn.bindAsEventListener(this), false);
		host.onclick = function(){return false};

	},
	slideIn: function() {
		AjaxHandler.sendRequest(this.content, this.processResults)
	},

	processResults: function(results) {
		$('slideContent').innerHTML = results;
		$('slideIn').style.display = "block";
		$('slideIn').morph('width:750px; margin-left:-375px;', {duration:0.08});
	}
}

function closeSlide() {
	if($('slideIn').style.display == "block") {
		$('slideIn').morph('margin-left:463px; width:0px;', {duration:0.08, afterFinish: function() {
			$('slideIn').style.display = "none";		
		}});
	}
}

/*
function setupGalleries() {
	galleries = document.getElementsByClassName('gallery')
	for(i = 0; i < galleries.length; i++){
		ng = new gallery(galleries[i])
	}

}
*/
function setupButtons() {
	buttons = document.getElementsByClassName('buttonLink')
	for(i = 0; i < buttons.length; i++){
		nb = new button(buttons[i])
		if( i == buttons.length-1 ){
			selected = nb;
			nb.processClick();
		}
	}
}

var button = Class.create()

button.prototype = {
	initialize: function(host) {
		this.front = host.rel;
		this.back = host.rel + "b";
		this.content = host.href;
		this.clicked = false;
		Event.observe(host, 'click', this.processClick.bindAsEventListener(this), false);
		host.onclick = function(){return false};

	},

	processClick: function() {

		if(!this.clicked) {
			closeSlide()
			$(selected).unClick();
			selected = this;
			new Effect.Parallel([
				new Effect.Morph(this.back, {style: 'margin-top: 240px;', sync: true}),
				new Effect.Morph(this.front, {style: 'margin-top: 240px;' , sync: true})
			], { 
				duration: 0.1, 
				afterFinish: this.snapUp()
			});
			this.clicked = true;

		}

	},

	snapUp: function() {
		new Effect.Parallel([
			new Effect.Morph(this.back, {style: 'margin-top: 220px;', sync: true}),
			new Effect.Morph(this.front, {style: 'margin-top: 220px;' , sync: true})
		], { 
			duration: 0.1, 
			queue: 'end',
			//afterFinish: this.draw()
			afterFinish: function() {
				selected.draw()
			}
		});
	},

	unClick: function() {

		$(this.back).morph('margin-top:230px;', {duration:0.2});
		$(this.front).morph('margin-top:230px;', {duration:0.2});
		this.clicked = false;

	},
	draw: function() {
		AjaxHandler.sendRequest(this.content, this.processResults)
	},
	processResults: function(results) {
		switchContents(results);
	}

}

function switchContents(content) {
	if($('play')) {
		$('play').style.visibility = "hidden";
	}
	$('contents').morph('margin-top: 260px;', {duration:0.2, afterFinish: function() {
		$('contents').innerHTML = content
		$('contents').morph('margin-top: 0px', {duration:0.1, afterFinish: function() {
			if($('play')) {
				$('play').style.visibility = "visible";
			}
		}});
		setupSlide()
	}});
}