
function roundCorners(container){	
// this function makes it so Divs with a class of 'roundBox' get rounded corners.
	// first find all of Divs inside of element with id of 'container'
	$(container).getElements('div').each(function(ele){
		if(ele.hasClass('roundBox')){
			// if the first div inside of roundBox div has a class of background, we have to do some special stuff
			if((ele.getFirst('div'))&&(ele.getFirst('div').hasClass('background'))){
				// get the div with background class, store its contents, then empty it.
				backg = ele.getFirst('div');
				backg.store('current',backg.getProperty('html'));
				backg.empty();
				// insert the sides in the background div, giving it the stored contents
				sides = new Element('div',{'class':'sides','html':backg.retrieve('current') }).inject(backg);
				// insert the Divs that will contain the corners
				ct = new Element('b',{'class':'corners'}).inject(backg,'top');
				cb = new Element('b',{'class':'corners'}).inject(backg,'bottom');
			}else{
				// store the contents of the roundBox then remove them
				ele.store('current',ele.getProperty('html'));
				ele.empty();
				// insert the sides, giving them the stored contents
				sides = new Element('div',{'class':'sides','html':ele.retrieve('current') }).inject(ele);
				// insert the Divs that will contain the corners
				ct = new Element('b',{'class':'corners'}).inject(ele,'top');
				cb = new Element('b',{'class':'corners'}).inject(ele,'bottom');
			}
			// do a loop to create the round corners effect. top and bottom are done at the same time.
			for(i=1;i<9;i++){
				new Element('b',{'class':'c'+i,'html':'<b></b>'}).inject(ct,'bottom');
				new Element('b',{'class':'c'+i,'html':'<b></b>'}).inject(cb,'top');
			}
		}
	});
}

function menuDo(menu){
// this script make the menus work in ie6, and adds a slight delay on mouse off, which is ignored if switching to a new menu
	// only do this if the menu exists
	if($(menu)){
		// only do this do the direct LI children of the first UL
		$(menu).getFirst('ul').getChildren('li').each(function(ele){
			// add a mouse over function
			ele.addEvent('mouseover', function(){
				// add the class of mhover to the li
				this.addClass('mhover');
				// get which LI the script thinks we're dealing with
				pStat = this.getParent('ul').retrieve('status');
				// if the script thinks we are over something, and it is not what we are really over....
				if((pStat)&&(pStat!=this)){
					// removethe mhover class from the element it thinks we are over, and hide it's submenus
					(pStat).removeClass('mhover');
				}
				// set my status to on and also let my parent now I'm on
				this.store('status','on');
				this.getParent('ul').store('status',this);
			});
			// a mouse out funciton
			ele.addEvent('mouseout', function(){
				// set my status to off
				this.store('status','off');
				// in half of a second, run the menu off script
				menuDoOff.delay(500,this);

			});
			if(ele.getFirst('ul')){
				// this is here just in case.
			}
		});
	}
}

function menuDoOff(){
	// get my status, i might have been turned back on
	if(this.retrieve('status')=='off'){
		// if I'm off, turn me off
		this.removeClass('mhover');
	}
}

imageShow = {
	init: function(className){
		this.fxTime = '500';
		this.slideShowTime = '5000';
		this.maxImageWidth = 760;
		this.maxImageHeight= 400;
		this.topContainer = $('box');
		this.created = new Array(false,false,false,false);
		this.slideShow = new Object();
		this.slideNum = this.slideShowOn = this.slideShowRunning = 0;
		this.topContainer.getElements('div').each(function(div){
			if(div.hasClass('largeYellow')){
				div.getElements('a').each(function(a){
					if((a.href.test(/jpg/i))||(a.href.test(/gif/i))||(a.href.test(/png/i))){
						a.addClass('gallery');
					}
				});
			}
		},imageShow);
		this.links = this.topContainer.getElements('a');
		this.links.each(function(ele,i){
			if(ele.hasClass(className)){
				ele.onclick = this.clickImage.pass(i,imageShow);
				if (ele.rel && ele.rel.test(/^slideshow/i)){
					if(!this.slideShow[ele.rel]){
						this.slideShow[ele.rel]=new Array();
					}
					this.slideShow[ele.rel].push(i);
				}
			}
		},imageShow);
	},
	
	createMainDivs: function(){
		if(!this.created[0]){
			this.overlay = new Element('div', {'id':'overlay', 'styles':{'opacity':0.8}}).injectInside(this.topContainer);
			this.imageBox = new Element('div', {'id':'imageBox','styles':{'overflow':'hidden'}}).injectInside(this.topContainer);
			this.topSide = new Element('div', {'class':'topSide Middles'}).injectInside(this.imageBox);
			this.middle = new Element('div', {'class':'mainContents Middles'}).injectInside(this.imageBox);
			this.bottomSide = new Element('div', {'class':'bottomSide Middles'}).injectInside(this.imageBox);
			this.leftSide = new Element('div', {'class':'leftSide Sides'}).injectInside(this.imageBox);
			this.rightSide = new Element('div', {'class':'rightSide Sides'}).injectInside(this.imageBox);
			this.topLeft = new Element('div', {'class':'topLeft Corners'}).injectInside(this.imageBox);
			this.topRight = new Element('div', {'class':'topRight Corners'}).injectInside(this.imageBox);
			this.bottomLeft = new Element('div', {'class':'bottomLeft Corners'}).injectInside(this.imageBox);
			this.bottomRight = new Element('div', {'class':'bottomRight Corners'}).injectInside(this.imageBox);
			this.loading = new Element('p', {'class':'loading','html':'<img src="/siteflow/gif/loading.gif" alt="loading" title="loading" />'}).injectInside(this.middle);
			this.topRight.onmouseover = function(){this.topRight.addClass('topRightOver')}.bind(imageShow);
			this.topRight.onmouseout  = function(){this.topRight.removeClass('topRightOver')}.bind(imageShow);
			this.overlay.onclick = this.topRight.onclick = this.close.bind(imageShow);
			this.addFX(this.fxTime);
			this.created[0]=true;
		}
	},
	
	addFX: function(length){
			this.overlay.effect = new Fx.Morph(this.overlay, {duration: length, transition: Fx.Transitions.Sine.easeIn});
			this.imageBox.effect = new Fx.Morph(this.imageBox, {duration: length, transition: Fx.Transitions.Sine.easeIn});
			this.imageBox.effectPos = new Fx.Morph(this.imageBox, {duration: length, transition: Fx.Transitions.Sine.easeIn});
			this.topSide.effect = new Fx.Morph(this.topSide, {duration: length, transition: Fx.Transitions.Sine.easeIn});
			this.middle.effect = new Fx.Morph(this.middle, {duration: length, transition: Fx.Transitions.Sine.easeIn});
			this.bottomSide.effect = new Fx.Morph(this.bottomSide, {duration: length, transition: Fx.Transitions.Sine.easeIn});
			this.leftSide.effect = new Fx.Morph(this.leftSide, {duration: length, transition: Fx.Transitions.Sine.easeIn});
			this.rightSide.effect = new Fx.Morph(this.rightSide, {duration: length, transition: Fx.Transitions.Sine.easeIn});
			this.loading.effect = new Fx.Morph(this.loading, {duration: length, transition: Fx.Transitions.Sine.easeIn, 'link':'cancel'});
		},
	
	createImageDivs: function(){
		if(!this.created[1]){
			this.imageBoxImageContainer = new Element('div', {'id':'imageBoxImageContainer'}).injectInside(this.middle);
			this.imageBoxImageContainer.effect = new Fx.Morph(this.imageBoxImageContainer, {duration: this.fxTime, transition: Fx.Transitions.Sine.easeIn, 'link':'cancel'});
			this.imageBoxImage = new Element('img').injectInside(this.imageBoxImageContainer);
			this.caption = new Element('p', {'class':'caption'}).injectInside(this.imageBoxImageContainer);
			this.created[1]=true;
		}
	},
	
	createFrameDivs: function(){
		if(!this.created[2]){
			this.imageBoxFrameContainer = new Element('div', {'id':'imageBoxFrameContainer'}).injectInside(this.middle);
			this.imageBoxFrameContainer.effect = new Fx.Morph(this.imageBoxFrameContainer, {duration: this.fxTime, transition: Fx.Transitions.Sine.easeIn});
			this.imageBoxframe = new IFrame({'width':'599','height':'550','scrolling':'auto','frameborder':'0'}).injectInside(this.imageBoxFrameContainer);
			this.created[2]=true;
		}
	},
	
	createSlideShowDivs: function(){
		if(!this.created[3]){
			this.slideController = new Element('div', {'id':'slideController'}).injectInside(this.imageBoxImageContainer);
			this.slideCaption = new Element('p', {'class':'caption'}).injectInside(this.slideController);
			this.slideNext = new Element('div', {'class':'slideButton','html':'Next Slide'}).injectInside(this.slideController);
			this.slidePrevious = new Element('div', {'class':'slideButton','html':'Previous Slide'}).injectInside(this.slideController);
			this.slideStartStop = new Element('div', {'class':'slideButton','html':'Start Slide Show'}).injectInside(this.slideController);
			this.slideStartStop.onclick = this.startStopSlideShow.bind(imageShow);
			this.slideNext.onclick = this.nextSlideShow.bind(imageShow);
			this.slidePrevious.onclick = this.previousSlideShow.bind(imageShow);
			this.slideNext.onmouseover = function(){this.slideNext.addClass('slideButtonOver')}.bind(imageShow);
			this.slideNext.onmouseout  = function(){this.slideNext.removeClass('slideButtonOver')}.bind(imageShow);
			this.slidePrevious.onmouseover = function(){this.slidePrevious.addClass('slideButtonOver')}.bind(imageShow);
			this.slidePrevious.onmouseout  = function(){this.slidePrevious.removeClass('slideButtonOver')}.bind(imageShow);
			this.slideStartStop.onmouseover = function(){this.slideStartStop.addClass('slideButtonOver')}.bind(imageShow);
			this.slideStartStop.onmouseout  = function(){this.slideStartStop.removeClass('slideButtonOver')}.bind(imageShow);
			this.created[3]=true;
		}
	},
	
	clickImage: function(link){
		this.linkNum = link;
		this.link = this.links[link] ;
		this.createMainDivs();
		this.createImageDivs();
		if (this.link.rel && this.link.rel.test(/^slideshow/i)){
			this.createSlideShowDivs();
		}
		this.loadImage();
		return false;
	},
	
	resetStyles: function(){
		this.windowDimentions = document.window.getSize();
		this.windowSize = document.window.getScrollSize();
		this.windowScrolled =  document.window.getScroll();
		this.topSide.style.width = this.middle.style.width = this.bottomSide.style.width = "405px";
		this.leftSide.style.height = this.middle.style.height = this.rightSide.style.height = "24px";
		this.overlay.effect.start({'display':'block','height':this.windowSize.y+'px','opacity':'0.8'});
		this.loading.style.display = 'block';
		this.imageBox.setStyles({'display':'block','top':this.windowScrolled.y+100+'px','left':'275px',opacity: '0'});
		this.imageBox.effect.start({opacity: '1'});
	},
	
	setDimensions: function(width,height){
		width=parseInt(width);
		height=parseInt(height);
		this.doResize(width,height);
		this.imageBox.effectPos.start({'left':(950-(width+60))/2+'px','top':this.windowScrolled.y+(this.windowDimentions.y-(height+60))/2+'px'});
	},
	
	doResize: function(width,height){
		this.topSide.effect.start({'width': width+'px'});
		this.bottomSide.effect.start({'width': width+'px'});
		this.middle.effect.start({'width': width+'px','height': height+'px'});
		this.leftSide.effect.start({'height': height+'px'});
		this.rightSide.effect.start({'height': height+'px'});
		
	},
	
	loadImage: function(){
		this.resetStyles();
		this.bigImage = new Image();
		this.bigImage.onload = this.viewImage.bind(imageShow);
		this.bigImage.src = this.link.href;
	},
	
	viewImage: function(){
		this.imageBoxImage.src = this.bigImage.src;
		this.caption.set('html',this.link.title.replace('&','&amp;'));
		this.loading.effect.start({'opacity': 0});
		this.imageBoxImageContainer.setStyles({'display':'block','visbility':'hidden',opacity: '0'});
		if (this.link.rel && this.link.rel.test(/^slideshow/i) && this.slideShow[this.link.rel].length>1){
			this.setupSlideShow();
			this.slideShowOn = this.slideShowRunning = 0;
			this.slideStartStop.set('html','Start Slide Show');
			myHeight = this.maxImageHeight + this.caption.getScrollSize().y + 40;
			myWidth = this.maxImageWidth+20;
		}else{
			myHeight = parseInt(this.bigImage.height) + this.caption.getScrollSize().y;
			myWidth = this.bigImage.width;
		}
		this.setDimensions(myWidth,myHeight);
		this.imageBoxImageContainer.style.visibility = 'visible';
		this.imageBoxImageContainer.effect.start({opacity: '1'});
	},
	
	setupSlideShow: function(){
		this.slideController.style.display = 'block';
		this.slideNum = this.slideShow[this.link.rel].indexOf(this.linkNum);
		this.slideCaption.set('html',this.slideNum+1+" of "+this.slideShow[this.link.rel].length);
	},
	
	loadSlideShow: function(){
		this.bigImage = new Image();
		this.bigImage.onload = this.showSlide.bind(imageShow);
		this.bigImage.src = this.link.href;
	},
	
	hideSlide: function(){
		this.imageBoxImageContainer.effect.start({'opacity':'0'});
	},
	
	showSlide: function(){
		this.imageBoxImage.src = this.bigImage.src;
		this.caption.set('html',this.link.title.replace('&','&amp;'));
		this.loading.effect.start({'opacity': 0});
		this.setupSlideShow();
		myHeight = this.maxImageHeight + this.caption.getScrollSize().y + 40;
		myWidth = this.maxImageWidth+20;
		this.setDimensions(myWidth,myHeight);
		this.imageBoxImageContainer.effect.start({opacity: '1'});
	},
	
	startStopSlideShow: function(){
		if(this.slideShowOn){
			$clear(this.slideShowRunning);
			this.slideStartStop.set('html','Start Slide Show');
			this.slideShowOn = false;
		}else{
			this.nextSlideShow();
			this.slideShowRunning = this.nextSlideShow.periodical(this.slideShowTime, this);
			this.slideStartStop.set('html','Stop Slide Show');
			this.slideShowOn = true;
		}
	},
	
	nextSlideShow: function(){
		nextSlide = (this.slideNum + 1 == this.slideShow[this.link.rel].length) ? this.slideShow[this.link.rel][0] : this.slideShow[this.link.rel][this.slideNum + 1] ;
		this.linkNum = nextSlide;
		this.link = this.links[nextSlide];
		this.hideSlide();
		this.loading.effect.start({'opacity': 1});
		this.loadSlideShow.delay(this.fxTime,imageShow);
	},
	
	previousSlideShow: function(){
		nextSlide = (this.slideNum - 1 < 0) ? this.slideShow[this.link.rel][this.slideShow[this.link.rel].length -1] : this.slideShow[this.link.rel][this.slideNum - 1] ;
		this.linkNum = nextSlide;
		this.link = this.links[nextSlide];
		this.hideSlide();
		this.loading.effect.start({'opacity': 1});
		this.loadSlideShow.delay(this.fxTime,imageShow);
	},
	
	viewFrame: function(frameSource){
		this.setDimensions(600,550);
		this.imageBoxframe.src = frameSource;
		this.loading.effect.start({display: 'none'});
		this.imageBoxFrameContainer.setStyles({'display':'block',opacity: '0'});
		this.imageBoxFrameContainer.effect.start({opacity: '1'});
		
	},
	
	close: function(){
		this.imageBox.effect.start({'opacity':'0'});
		this.loading.effect.start({'opacity':'0'});
		this.overlay.effect.start({'opacity':'0'});
		if(this.imageBoxImageContainer){
			this.imageBoxImageContainer.effect.start({'opacity':'0'});
		}
		if(this.imageBoxFrameContainer){
			this.imageBoxFrameContainer.effect.start({'opacity':'0'});
		}
		$clear(this.slideShowRunning);
		this.shutdown.delay(this.fxTime,imageShow);
	},
	
	shutdown: function(){
		this.overlay.style.display = this.imageBox.style.display = this.loading.style.display = 'none';
		if(this.imageBoxImageContainer){
			this.imageBoxImageContainer.style.display = 'none';
		}
		if(this.imageBoxFrameContainer){
			this.imageBoxFrameContainer.style.display = 'none';
		}
		if(this.slideController){
			this.slideController.style.display = 'none';
		}
	},
	
	sendToFriend: function(){
		myLocation = this.getHost(document.location);
		myLocation+= "/cgi-bin/send_page/send.pl?url=";
		myLocation+= escape(document.URL);
		myLocation+= "&title=";
		myLocation+= escape(document.title);
		this.createMainDivs();
		this.createFrameDivs();
		this.resetStyles();
		this.viewFrame(myLocation);
	},
	
	sendToFriendSPA: function(){
		myLocation = this.getHost(document.location);
		myLocation+= "/cgi-bin/send_page/send.pl?lang=spa&url=";
		myLocation+= escape(document.URL);
		myLocation+= "&title=";
		myLocation+= escape(document.title);
		this.createMainDivs();
		this.createFrameDivs();
		this.resetStyles();
		this.viewFrame(myLocation);
	},
	
	timelineWarning: function(){
		this.createMainDivs();
		this.createImageDivs();
		this.resetStyles();
		this.loading.store('orig', this.loading.get('html'));
		this.loading.set('html',"Roll over the models to the left to view a picture.<br>Click on a model to get more information");
		this.timelineWarningClose.delay(7000,imageShow);
	},
	
	timelineWarningClose: function(){
		this.close();
		this.timelineWarningRevert.delay(1000,imageShow);
	},
	
	timelineWarningRevert: function(){
		this.loading.set('html',this.loading.retrieve('orig'));
	},
	
	getHost: function(location){
		count = location.search.length;
		count+= location.hash.length;
		count+= location.pathname.length;
		return location.href.substring(0,(location.href.length-count));
	}
};


function printPage(){
	window.print();
}

window.addEvent('domready', function(){
	roundCorners('middle');  // 'middle' is the id of the element that contains corners you want rounded. if you want all body, give body tag an id, and use that here.
	menuDo('menu'); // makes the  menus work for ie, and adds a slight delay on mouse off
	imageShow.init('gallery'); // find all links with 'gallery' as a class name, and make them use imageShow
});


