// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults

index = 0;

$(document).observe('dom:loaded', function() {
	$$("div.images a").each(function(el) { new FancyZoom(el, {width: 500}); })
	$$("div#gallery a").each(function(el) { new FancyZoom(el, {width: 500}); })
		
  if($('scroll-contents')){
	  var container = $('scroll-contents');
	  var items = container.childElements();
		setInterval(function() { shift_elements(items); }, 10000 )
	}
	var header = new Headers();
	if($('about-menu')) {
		var menu = new Menu();
	}
});

function shift_elements(items) {
	items[index].style.display = "none";
	if(index == items.length - 1) {
		index = 0;
		items[index].style.display = "block";
		return;
	}
	items[index + 1].style.display = "block"
  index += 1;
}

var Headers = Class.create({
	initialize: function(){
		this.image_base = "/images/bg_";
		this.header = $('header-image');
		this.strip  = $('top-content-bar');
		this.images = []
		this.index = 0;
		//build out all of the image urls.
		for(var i = 1; i < 8; i++) {
			this.images.push({
				top: "url(" + this.image_base + "content_top_bar_0" + i + ".png)",
				header: "url(" + this.image_base + "main_content_top_0" + i + ".jpg)"
			})
		}
		//randomize array order.
		this.images.shuffle();
		this.apply_image()
		preload(this.images);
		var self = this
		setInterval(function() { self.apply_image(); }, 20000 )
	},
	apply_image: function() {
		this.header.setStyle({backgroundImage: this.images[this.index].header})
		this.strip.setStyle({backgroundImage: this.images[this.index].top})
		if(this.index == 6)
			this.index = 0
		else
			this.index++
	}
})

var Menu = Class.create({
	initialize: function() {
		this.triggers = $$('.list-header')
		this.triggers.each(function(t){
			t.childElements().each(function(ul) {
				if(ul.tagName == "UL")
					ul.style.display = 'none';
			})
		})
		for(var i = 0; i < this.triggers.length; i++) {
			var a = $(document.createElement("a"));
			a.addClassName('menu-toggle');
			a.update("+");
			a.href = "#"
			this.triggers[i].insert({top: a});
			var merged = { trigger: this.triggers[i], plus: a };
			Event.observe(a, 'click', this.toggle_children.bindAsEventListener(merged))
		}
	},
	toggle_children: function(event) {
		Event.stop(event);
		var target = this.trigger.select('ul.sub-menu')
		if(target && !target[0].visible()){
			new Effect.Appear(target[0], {duration: 0.5})
			this.plus.update("-");
		} else {
			new Effect.Fade(target[0], {duration: 0.2})
			this.plus.update("+");
		}
		
	}
})

function preload(images) {
	images.each(function(i, index){
		var img = new Image();
		img.src = i.top.replace(/\(|\)/, '').replace(/url/, '')
		img.src = i.header.replace(/\(|\)/, '').replace(/url/, '')
	})
}

Array.prototype.shuffle = function() {
	var len = this.length;
	var rand,temp,i;
	for (i=0; i < len; i++) {
		rand = Math.floor(Math.random()*len);
		temp = this[i];
		this[i] = this[rand];
		this[rand] = temp;
	}
}