window.addEvent('domready', function(){
  makeDots();
  topBannerFade.init();
  searchBox.init();
  footerStrip.init();
});

function makeDots(){
	// find all h1, h3, & h5 tags. add dots before & after
	$$('h1','h3','h5').each(function(tag){
		// unless they have a special class
		if(!tag.className){
			tag.innerHTML=".:&nbsp;"+tag.innerHTML+"&nbsp;:.";
		}
	});
}

var topBannerFade = {
	// fade in and out the images at the top of the page
	init: function(){
		// it's an array so that we can do loops and shorten code
		this.slot = new Array();
		this.slot[0]=$('slot1');
		this.slot[0].images = $('slot1Images').getElements('img');
		this.slot[1]=$('slot2');
		this.slot[1].images = $('slot2Images').getElements('img');
		this.slot[2]=$('slot3');
		this.slot[2].images = $('slot3Images').getElements('img');
		this.slot[3]=$('slot4');
		this.slot[3].images = $('slot4Images').getElements('img');
		
		// this loops through each slot (1,2,3,4)
		this.slot.each(function(slot){
			// set the background image of each slot to the first image. this is just a safefy net
			slot.setStyle('background', 'url('+slot.images[0].src+')');
			slot.index = 0;
			slot.rev = slot.images.length;
			slot.image = new Array();
			slot.images.each(function(image){
				// create a div for every image. first one has highest z-index
				slot.image[slot.index] = new Element('div', {'class': 'image', 'styles': {'z-index': slot.rev, 'height':'100px', 'width':'200px','background':'url('+image.src+')'}}).injectInside(slot);
				slot.index++;
				slot.rev--;
			},topBannerFade);
			// every 5 seconds, fade out the current image
			slot.per = this.doFade.periodical(5050,topBannerFade,slot);
			// stop fading them after 20 seconds
			this.stopFade.delay(25000,topBannerFade,slot);
		},topBannerFade);
	},
	
	doFade: function(slot){
		// we are ease out morphing over 2.5 seconds
		slot.effect = new Fx.Morph(slot.image[slot.rev], {duration: '2500ms', transition: Fx.Transitions.Sine.easeOut});
		// go from current opacity to 0 (invisible)
		slot.effect.start({opacity: '0'});
		slot.rev++;
		// if we have faded out all images.
		if(slot.rev==slot.index){
			slot.rev = 0;
			slot.index=0;
			slot.image.each(function(image){
				// fade them all back in
				slot.effect = new Fx.Morph(slot.image[slot.index], {duration: '2500ms', transition: Fx.Transitions.Sine.easeOut});
				slot.effect.start({opacity: '1'});
				slot.index++;
			},topBannerFade);
		}
	},
	
	stopFade: function(slot){
		// stop fade
		$clear(slot.per);
	}
};

var searchBox = {
	init: function(){
		// text box we want to say something
		this.searchBox = $('searchInput');
		// until it is clicked
		if(this.searchBox) this.searchBox.onclick = this.clearText.bind(searchBox);
	},
	
	clearText: function(){
		this.searchBox.value = "";	
	}
};

var footerStrip = {
	init: function(){
		this.strip = $('footerStrip');
		this.strip.li = this.strip.getElements('li');
		// set width of LIs. 900 is width (50px padding each side), - borders / number of LIs
		this.strip.width = (900-(this.strip.li.length-1))/this.strip.li.length;
		this.strip.li.each(function(li){
			li.setStyle('width',this.strip.width+'px');
		},footerStrip);
	}
};

// should beable to remove all of this when I'm done
function pop_image(image,width,height) {
	window.open(escape(image),"","width="+width+",height="+height+",menubar=0,scrollbars=1,toolbar=0");
	return false;
	}

function pop_image2(image,width,height) {
	window.open(image,"","width="+width+",height="+height+",menubar=0,scrollbars=1,toolbar=0");
	return false;
	}

function pop(url) {
	var loc = window.location;
    window.open(url,'pop_resource','toolbar=0,menubar=0,location=0,scrollbars=1,height=500,width=600,resizable=1');
	return false;
	}

function pop_window(url,width,height) {
	window.open(url,"info",'toolbar=no,menubar=no,resizable=yes,location=no,scrollbars=yes,height='+height+',width='+width);
	return false;
	}
