/********************************************************************

	JOHNHANCOCK.COM - INTERFACE BEHAVIOURS
	-----------------------------
	agency: teehan+lax 
	author: chris erwin
	date: May 20, 2008 
	contact: chris@teehanlax.com

*********************************************************************/





/******************************************************************************************************

	INITIALIZER
	-------------------------------------------------------------------------------------------
	this function gets fired on domready and fires the various interface initializations

******************************************************************************************************/
function init() {
	navController.init('main_nav');
	hoverButtonHandler.init();
}
window.addEvent('domready', init );




/******************************************************************************************************

	HOVER BUTTON - CLASS
	-------------------------------------------------------------------------------------------
	searches for images with the class="hover_button" and adds event listeners to toggle over 
	and down states. 
	
	The images need be named yourImageName_off.gif, yourImageName_hover.gif, yourImageName_down.gif
	the file extension doesn't matter, just the _off. _hover. & _down.
	
	DEPENDECIES
	- mootools 1.11 (element.event, elements.selectors, window.domready, assets)

******************************************************************************************************/

var hoverButton = new Class({
	initialize: function(options){
		this.options = options; //save our options.
		
		// set the properties for the object
		this.buttonElement = this.options.buttonElement;
		this.doDown = this.options.blnDownState;
		
		this.preloadArray = [];
		
		this.offState = this.buttonElement.src;
		this.hoverState = this.offState.replace('_off.', '_hover.');
		this.preloadArray.push(this.hoverState);		
		
		if (this.doDown) {
			this.downState = this.offState.replace('_off.', '_down.');
			this.preloadArray.push(this.downState);	
		}
		
		this.preloadImage(this.preloadArray);			
	},
	setState : function(newState) {
		this.buttonElement.src = newState;	
	},
	preloadImage : function(arrImagePaths) {
		var parentObject = this;
		var img = new Asset.images(arrImagePaths, { onComplete: function(){parentObject.addListeners()} });	
	},
	addListeners : function() {
		this.buttonElement.addEvent('mouseover', this.setState.pass(this.hoverState, this));
		this.buttonElement.addEvent('mouseleave', this.setState.pass(this.offState, this));
		if (this.doDown) {
			this.buttonElement.addEvent('mousedown', this.setState.pass(this.downState, this));
			this.buttonElement.addEvent('mouseup', this.setState.pass(this.offState, this));	
		}
	}
});


// looks for images with hover_button class and creates hoverButtons for them without the down state
var hoverButtonHandler = {
	arrHoverButtons : [],
	
	init : function() {
		var arrButtons = $$('img.hover_button');
	
		for (i=0; i<arrButtons.length; i++) {		
			hoverButtonHandler.arrHoverButtons[i] = new hoverButton({buttonElement: arrButtons[i], doDown: false});		
		}	
	}
}


/******************************************************************************************************

	CONTENT TOGGLE - CLASS
	-------------------------------------------------------------------------------------------
		
	DEPENDECIES
	- mootools 1.11 (element.event, elements.selectors, fx.elements, fx.style)

******************************************************************************************************/
var contentToggle = new Class({
	initialize : function(options) {
		this.options = options;
		
		this.toggleContainerID = this.options.toggleContainerID;
		this.orientation = this.options.orientation;
		
		this.toggleContainer = $(this.toggleContainerID);																										// the toggle container element
		this.toggleContentWrap = $$('#'+ this.toggleContainerID + ' .toggle_content_wrap')[0];																// the toggle content wrapper element
		this.toggleNavContainer = $$('#'+ this.toggleContainerID + ' .toggle_nav')[0];																		// the toggle nav element
		this.toggleNavOffset = (this.orientation == 'horizontal') ? this.toggleNavContainer.getPosition().x : this.toggleNavContainer.getPosition().y ;		// the position of the nav element used for animating the arrow indicator
		this.arrow = $$('#'+ this.toggleContainerID + ' .arrow_indicator')[0];																				// the arrow indicator element
		this.arrToggleLinks =  $$('#'+ this.toggleContainerID + ' .toggle_link');																				// array of toggle links
		this.arrActiveToggleLinks = $$('#'+ this.toggleContainerID + ' .toggle_nav .active');																	// array of 'active' toggle link, ie links with an active class applied by default
		this.arrToggleContents = $$('#'+ this.toggleContainerID + ' .toggle_content');																			// arry of toggle content items
		
		this.currLink = null;					// the currently active link
		this.currContent = null;				// the currently active content
		this.contentAnimation = null;			// the content animation effect
		this.arrowAnimationProperty = null;	// the property we change when animating the arrow indicator
		this.arrowAnimation = null;			// the arrow indicator animation effect
		this.animating = false;				// animation flag
		
		// set the arrow animation property based on the orientation
		this.arrowAnimationProperty = (this.orientation == "horizontal") ? "margin-left" : "margin-top";			
		
		// arrow animation
		this.arrowAnimation = new Fx.Style(this.arrow, this.arrowAnimationProperty, {
			duration: 500, 
			transition: Fx.Transitions.Quart.easeInOut
		});
		
		// content animation
		this.contentAnimation = new Fx.Style(this.toggleContentWrap, 'opacity', {
			duration: 500, 
			transition: Fx.Transitions.Quart.easeInOut
		});
		
		// add event listeners
		this.arrToggleLinks.addEvent('click', this.handleClick.bind(this));
		
		// set the default content if it isn't already set via HTML
		if (this.arrActiveToggleLinks.length == 0) {			
			this.switchContent(this.arrToggleLinks[0].id);
		}
		else {			
			this.currLink = $(this.arrActiveToggleLinks[0]);
			this.currContent = $(this.arrActiveToggleLinks[0].id + '_content');
			this.positionArrow(this.arrActiveToggleLinks[0], false);	
		}
		
	},
	handleClick : function(e) {		
		var clickLink = (e.srcElement) ? e.srcElement : e.target ;
		
		this.switchContent(clickLink.id);
	},
	switchContent : function(newLinkID) {	
		if(! this.animating && this.currLink != $(newLinkID)) {
				this.animating = true;
				this.contentAnimation.start(0);
				this.setActiveLink(newLinkID);
				this.hideContent.delay(540, this);
				this.showContent.delay(540, this, newLinkID);
		}		
	},
	hideContent : function() {
		if(this.currContent != null) {			
			this.currContent.removeClass('active');
		}
	},
	setActiveLink : function(newLinkID) {
		var linkElement = $(newLinkID);
		
		linkElement.addClass('active');
		this.positionArrow(linkElement, true);
		
		if(this.currLink != null) {
			this.currLink.removeClass('active');	
		}
	},
	showContent : function(newLinkID) {
		var linkElement = $(newLinkID);
		var contentElement = $(newLinkID + '_content');
		
		contentElement.addClass('active');		
		
		this.currLink = linkElement;
		this.currContent = contentElement;
		
		this.contentAnimation.start(1);		// fade in content
		this.doneAnimation.delay(520, this);	// reset or animation flag	
	},
	positionArrow : function(linkElement, animate) {		
		this.toggleNavOffset = (this.orientation == 'horizontal') ? this.toggleNavContainer.getPosition().x : this.toggleNavContainer.getPosition().y ;		// the position of the nav element used for animating the arrow indicator
		linkPosition = (this.orientation == 'horizontal') ? (linkElement.getPosition().x - this.toggleNavOffset + (linkElement.getCoordinates().width / 2) - 13) : (linkElement.getPosition().y - this.toggleNavOffset - 4);
		
		if (animate) {
			this.arrowAnimation.start(linkPosition);
		}
		else {
			this.arrow.setStyle(this.arrowAnimationProperty, linkPosition);	
		}		
	},
	doneAnimation : function() {
		this.animating = false;
	}
});




/******************************************************************************************************

	NAV CONTROLLER
	-------------------------------------------------------------------------------------------
	this handles the rollovers for the main navigation items. 
	
	DEPENDECIES
	- mootools 1.11 (element.event, elements.selectors, window.domready)

******************************************************************************************************/
var navController = {
	
	currPopNav : null,
	popNavTimer : null,
	
	init : function(navContainer) {
		
		$(document.getElementsByTagName('body')[0]).addEvent('click', navController.closePopNav);
		
		//var mainNav = $('main_nav');
		arrMainNavLinks = $$('#'+navContainer+' a');
		
		for (var i=0; i<arrMainNavLinks.length; i++) {
			
			navCell = arrMainNavLinks[i].getParent();
			
			// set up the active nav item style
			if (arrMainNavLinks[i].hasClass('active')) {
				arrMainNavLinks[i].addClass(' rollover');				
				navCell.addClass('rollover');
				navCell.addClass('active');
				
				var previousCell = navCell.getPrevious();
						
				if (previousCell != null) {
					previousCell.firstChild.addClass('rollover');
				}
				
				navCell.addEvent('click', this.clickCell);
				
			// set up mouse behaviors
			} else {
				navCell.addEvent('click', this.clickCell);
				navCell.addEvent('mouseover', this.hoverCell);
				navCell.addEvent('mouseover', this.toggleRollover);
				navCell.addEvent('mouseout' , this.toggleRollover);
			}
		}		
	},
	
	toggleRollover : function() {
		
		//set up DOM access points
		linkCell = $(this); // the table cell for the link
		linkElement = linkCell.childNodes[0]; // the link element
		
		previousLinkCell = linkCell.getPrevious(); 	// the table cell for the previous link
		nextLinkCell = linkCell.getNext();			// the table cell for the next link
		
		if (previousLinkCell != null) {
			previousLink = previousLinkCell.firstChild; // previous link
		}
		if (nextLinkCell != null) {
			nextLink = nextLinkCell.firstChild // next link
		}
		
		// MOUSEOUT
		if (linkCell.hasClass('rollover')) {
			linkCell.removeClass('rollover');
			if (previousLinkCell != null) {				
				if (! previousLink.hasClass('active')) {
					previousLink.removeClass('rollover'); // the previous link	
				}
			} 
			if (nextLinkCell != null) {
				if (! nextLink.hasClass('active')) {
					linkElement.removeClass('rollover'); // the link
				}	
			}
		} 
		// MOUSEOVER
		else {
			linkCell.addClass('rollover'); // the table cell for the link
			if (previousLinkCell != null) {
				if (! previousLink.hasClass('active')) {
					previousLink.addClass('rollover'); // the previous link
				}
			}
			linkElement.addClass('rollover'); // the link
		}
	},
	
	// when the user clicks on the table cell, redirect them to the location in the child link's href.
	clickCell : function() {
		var arrClickedLink = this.getElementsByTagName('A');
		
		if (! arrClickedLink.length < 1) {
			/*if (arrClickedLink[0].hasClass('subnav_link')) {
				
				if(navController.currPopNav == arrClickedLink[0]) {
					navController.closePopNav;	
				}
				else {
					navController.showPopNav.delay(50, null, arrClickedLink[0]);
				}
			}
			else {*/
				if (arrClickedLink[0].getAttribute('HREF')) {
					var clickedHref = arrClickedLink[0].getAttribute('HREF');
					window.location = clickedHref;
				}
			//}
		}
	},
	
	hoverCell : function() {
		
		var arrHoverLink = this.getElementsByTagName('A');
		
		if (arrHoverLink[0].hasClass('subnav_link')) {
			//console.log('hover cell');
			navController.showPopNav.delay(150, null, arrHoverLink[0]);			
			this.addEvent('mouseover', navController.cancelHoverOutCell);
			this.addEvent('mouseout', navController.hoverOutCell);
		}
	},
	
	hoverOutCell : function() {
		//console.log('start timer');
		// start a close timer
		navController.popNavTimer = window.setTimeout("navController.closePopNav()", 250);
	},
	
	cancelHoverOutCell : function() {
		//console.log('cancel timer');
		// cancel the close timer
		clearTimeout(navController.popNavTimer);
	},
	
	showPopNav : function(clickedLink) {
		
		if (navController.currPopNav != clickedLink) {
			//console.log('open pop nav');
			//quickly close any open pop navs
			clearTimeout(navController.popNavTimer);
			navController.closePopNav();		
			
			clickedCell = clickedLink.getParent();
			clickedCell.addClass('clicked');
			
			if (clickedCell.getPrevious()) {
				clickedCell.getPrevious().addClass('before_click');	
			}
			
			if (clickedCell.getNext()) {
				clickedCell.getNext().addClass('after_click');	
			}
			
			var popNavElement = $(clickedLink.getParent().id + '_sub_nav');
			popNavElement.setStyle('display', 'block');
			popNavElement.addEvent('mouseout', navController.hoverOutCell);
			popNavElement.addEvent('mouseover', navController.cancelHoverOutCell);		
			
			//console.log('set curr nav');
			navController.currPopNav = clickedLink;
		}
	},
	
	closePopNav : function() {
		
		if (navController.currPopNav != null) {
			
			$(navController.currPopNav.getParent().id + '_sub_nav').setStyle('display', 'none');
			$(navController.currPopNav.getParent()).removeClass('clicked');
			
			if (clickedCell.getPrevious()) {
				clickedCell.getPrevious().removeClass('before_click');	
			}
			
			if (clickedCell.getNext()) {
				clickedCell.getNext().removeClass('after_click');	
			}
			
			navController.currPopNav = null;
		}
	}
}



/******************************************************************************************************

	SITES NAV TOGGLE
	-------------------------------------------------------------------------------------------
	this handles the sites nav toggle panel at the bottom of the page on the home and sitemap pages
	
******************************************************************************************************/
var sitesNav = {
	navOpenHeight : 275,
	blnNavOpen : false,
	blnAnimating : false,
	navAnimation: null,
	currLink : null,
	
	init : function() {
		arrSitesNavLinks = $$('.sites_nav_link');
		arrSitesNavLinks.addEvent('click', sitesNav.openNav);
		
		sitesNav.navAnimation = new Fx.Style('sites_subnav', 'height', {
			duration: 500, 
			transition: Fx.Transitions.Quart.easeInOut,
			onComplete: function() {
				sitesNav.blnAnimating = !sitesNav.blnAnimating;
				if ($('sites_subnav').getStyle('height').toInt() == 0) {
					sitesNav.blnNavOpen = false;
				}
				else {
					sitesNav.blnNavOpen = true;
				}
			}
		});
	},
	
	openNav : function() {
		if (! sitesNav.blnAnimating) {	
					
			clickedLink = this.id;		
						
				if (sitesNav.blnNavOpen && clickedLink == sitesNav.currLink) {
					sitesNav.closeNav();
				}
				else {
					sitesNav.blnAnimating = true;
					sitesNav.currLink = clickedLink;					
					sitesNav.navAnimation.start(sitesNav.navOpenHeight);
					$('sites_nav_toggle').addClass('active');
				}
			
		}
	},
	
	closeNav : function() {
		if (! sitesNav.blnAnimating) {
			sitesNav.blnAnimating = true;
			sitesNav.currLink = null;
			sitesNav.navAnimation.start(0);
			$('sites_nav_toggle').removeClass('active');
		}
	}
}



/******************************************************************************************************

	CONVERSATION
	-------------------------------------------------------------------------------------------
	this handles the continue reading behaviour for the conversations
	
	DEPENDECIES
	- mootools 1.11 (element.event, elements.selectors, window.domready, fx.style)

******************************************************************************************************/
var conversation = new Class({
	initialize: function(options){
		
		this.options = options; //save our options.
		
		// set the properties for the object
		this.conversationID = this.options.conversationID;
		
		this.readMoreLink = $$('#' + this.conversationID + ' .continue_reading a')[0];
		
		this.hiddenConversation = $$('#' + this.conversationID + ' .hidden_conversation')[0];
		this.hiddenHeight = this.hiddenConversation.getCoordinates().height;
		
		this.hiddenConversation.setStyle('height', 0);
		this.hiddenConversation.setStyle('display', 'none');
		
		this.hiddenAnimation = new Fx.Style(this.hiddenConversation, 'height', {
			duration: 500, 
			transition: Fx.Transitions.Quart.easeInOut,
			onComplete: this.reveal.bind(this)
		});	
		
		this.readMoreLink.addEvent('click', this.showHidden.bind(this));
	},
	showHidden : function() {
		this.hiddenConversation.setStyle('display', 'block');
		this.hiddenAnimation.start(this.hiddenHeight);
	},
	reveal : function() {
		var arrHiddenItems = $$('#' + this.conversationID + ' .hidden_conversation .actor_speak');
		
		arrHiddenItems.setStyle('opacity', 0);	
		
		this.hiddenConversation.setStyle('visibility', 'visible');
		
		this.readMoreLink.setStyle('display', 'none');
		
		for(i=0; i< arrHiddenItems.length; i++) {
			delayTime = i * 250;
			this.revealItem.delay(delayTime, null, arrHiddenItems[i]);
		}
	},
	revealItem : function(element) {
		new Fx.Style(element,'opacity').start(1);
	}
});


/******************************************************************************************************

	DATE PICKER
	-------------------------------------------------------------------------------------------
	this handles the date selector on the news page

******************************************************************************************************/
var datePicker = {
	currSelectedYear : null,
	
	init : function() {
		arrYearLinks = $$('.date_selector li a');
		arrYearLinks.addEvent('click', datePicker.toggleMonth);
	},
	toggleMonth : function() {
		selectedYear = this.id;
		
		$(datePicker.currSelectedYear).getParent().removeClass('active');
		$(datePicker.currSelectedYear+'_months').setStyle('display', 'none');
		
		$(selectedYear).getParent().addClass('active');
		$(selectedYear+'_months').setStyle('display', 'block');
		
		datePicker.currSelectedYear = selectedYear;
	}
}

/******************************************************************************************************

	DATE PICKER
	-------------------------------------------------------------------------------------------
	this handles the date selector on the news page

******************************************************************************************************/
var datePick = {
	
	currSelectedYear : null,
	sYear : null,
	
	init : function() {		
		arrYearLinks = $$('.date_selector li a');
		arrYearLinks.addEvent('click', datePick.toggleMonth);
	},
	toggleMonth : function() {
		selectedYear = this.id;
		
		$(datePick.currSelectedYear).getParent().removeClass('active');
		$(datePick.currSelectedYear+'_months').setStyle('display', 'none');
		
		$(selectedYear).getParent().addClass('active');
		$(selectedYear+'_months').setStyle('display', 'block');
		
		datePick.currSelectedYear = selectedYear;
	},
	onLoad : function(cYear,selYear) {
		
		cYear = 'h'+cYear;
		document.getElementById(cYear).className = "";
		//document.getElementById(cYear+'_months').style.display = "none";
		//$(datePick.currSelectedYear).getParent().removeClass('active');
		$(datePick.currSelectedYear+'_months').setStyle('display', 'none');
		
		document.getElementById('h'+selYear).className = "active";
		//$(selYear).getParent().addClass('active');
		$(selYear+'_months').setStyle('display', 'block');
		
		datePick.currSelectedYear = selYear;
		
		//datePick.init();
		
	},
	getYear : function() {
		var now = new Date();
		var yr = now.getFullYear();
		return yr;
	}
}

/******************************************************************************************************

	CONTACT INFO
	-------------------------------------------------------------------------------------------
	this handles the hiding and showing or contact information on the contact pages

******************************************************************************************************/
var contactInfo = {
	init : function() {
		var arrContactLinks = $$('.contact_option_link');
		
		for(i=0; i<arrContactLinks.length; i++) {
			arrContactLinks.addEvent('click', contactInfo.toggle);	
		}
	},
	
	toggle : function() {
		
		contactItemID = this.id;
		contactRow = $(this).getParent();
		var contactInfo = $(contactItemID + '_info');
		
		if(contactInfo.getStyle('display') != 'block') {			
			contactInfo.setStyle('display', 'block');
			contactRow.addClass('open');
		}
		else {
			contactInfo.setStyle('display', 'none');
			contactRow.removeClass('open');	
		}
	}
}


/******************************************************************************************************

	CAROUSEL
	-------------------------------------------------------------------------------------------
	this handles carousels

******************************************************************************************************/
var carousel = {
	
	arrSlides : null,
	arrButtons : null,
	currSlide : null,
	animating : false,
	
	init : function(carouselID) {
		carousel.arrSlides = $$('#'+carouselID+' .slide');
		carousel.arrButtons = $$('#'+carouselID+' .button');
		
		carousel.arrSlides[0].setStyle('margin-left', 0);
		carousel.arrButtons[0].addClass('on');
		carousel.currSlide = 0;
		
		for (i=0; i<carousel.arrButtons.length; i++)
		{
		 carousel.arrButtons[i].id = i;
		}
		
		carousel.arrButtons.addEvent('click', carousel.pickslide);
		
		$$('#'+carouselID+' #next').addEvent('click', carousel.next);
		$$('#'+carouselID+' #previous').addEvent('click', carousel.previous);
		
	},
	
	goToSlide : function(slideNumber, direction) {
		if(carousel.currSlide != slideNumber && carousel.animating != true) {
			carousel.animating = true;
			
			if(direction == 'prev') {
				currEndPos = 455;
				nextStartPos = -455;
			}
			else {
				currEndPos = -455;
				nextStartPos = 455;	
			}
			
			// move out current slide
			$(carousel.arrSlides[carousel.currSlide]).effect('margin-left',{
				duration: 1000,
				transition: Fx.Transitions.Quad.easeOut
			}).start(0,currEndPos);
			
			// move in new slide
			$(carousel.arrSlides[slideNumber]).effect('margin-left',{
				duration: 1000,
				transition: Fx.Transitions.Quad.easeOut,
				onComplete: function(){carousel.animating = false;}
			}).start(nextStartPos,0);
			
			carousel.arrButtons[carousel.currSlide].removeClass('on');
			carousel.arrButtons[slideNumber].addClass('on');
			
			carousel.currSlide = slideNumber;
		}	
	},
	
	next : function() {
		if((carousel.currSlide + 1) >= carousel.arrSlides.length) {
			nextSlide = 0;	
		}
		else {
			nextSlide = carousel.currSlide + 1;
		}
		carousel.goToSlide(nextSlide, 'next');
	},
	
	previous : function() {
		if(carousel.currSlide <= 0) {
			prevSlide = carousel.arrSlides.length - 1;	
		}
		else {
			prevSlide = carousel.currSlide - 1;
		}
		carousel.goToSlide(prevSlide, 'prev');	
	},
	pickslide : function() {				
		picNum = this.id * 1;
		if (carousel.currSlide < picNum){
		carousel.goToSlide(picNum,'next');}
		else {
		carousel.goToSlide(picNum, 'prev');
		}
		
	}
		
}



/******************************************************************************************************

	PHOTO CAROUSEL
	-------------------------------------------------------------------------------------------
	this handles photo carousels

******************************************************************************************************/
var photoCarousel = {
	
	arrPhotos : null,
	arrThumbs : null,
	arrThumbSets : null,
	currPhoto: null,
	currThumbSet : null,
	
	init : function(carouselName) {
		photoCarousel.arrPhotos = $$('#' + carouselName + ' .photo');	
		photoCarousel.arrThumbs = $$('#' + carouselName + ' .thumb');
		photoCarousel.arrThumbSets = $$('#' + carouselName + ' .thumbset');	
		
		for (i=0; i<photoCarousel.arrThumbs.length; i++) {
			photoCarousel.arrThumbs[i].id = i;	
		}
		
		photoCarousel.arrThumbs.addEvent('click', photoCarousel.thumbClick);
		$$('#'+carouselName+' #next').addEvent('click', photoCarousel.next);
		$$('#'+carouselName+' #previous').addEvent('click', photoCarousel.previous);
		$('next_thumbset').addEvent('click', photoCarousel.nextThumbSet);
		$('prev_thumbset').addEvent('click', photoCarousel.prevThumbSet);
		
		photoCarousel.showPhoto(0);
	},
	
	showPhoto : function(photoNum) {
		if (photoCarousel.currPhoto != null) {
			photoCarousel.arrPhotos[photoCarousel.currPhoto].setStyle('display', 'none');	
			photoCarousel.arrThumbs[photoCarousel.currPhoto].removeClass('active');
		}
		
		photoCarousel.arrPhotos[photoNum].setStyle('display', 'block');
		photoCarousel.arrThumbs[photoNum].addClass('active');
		photoCarousel.showThumbSet(photoNum);
		photoCarousel.currPhoto = photoNum;
	},
	
	showThumbSet : function(photoNum) {
		newThumbSetNum = Math.ceil((photoNum + 1) / 12) - 1;
		
		if (photoCarousel.currThumbSet != newThumbSetNum) {
			if (photoCarousel.currThumbSet != null) {
				photoCarousel.arrThumbSets[photoCarousel.currThumbSet].setStyle('display', 'none');	
			}
			photoCarousel.arrThumbSets[newThumbSetNum].setStyle('display', 'block');
			
			photoCarousel.currThumbSet = newThumbSetNum;
			
			// show hide next - previous thumb set links
			if ((newThumbSetNum + 1) == photoCarousel.arrThumbSets.length) {
				$('next_thumbset').setStyle('display', 'none');	
			}
			else {
				$('next_thumbset').setStyle('display', 'block');	
			}
			
			if (newThumbSetNum == 0) {
				$('prev_thumbset').setStyle('display', 'none');	
			}
			else {
				$('prev_thumbset').setStyle('display', 'block');		
			}
		}
	},
	
	next : function() {
		if((photoCarousel.currPhoto + 1) >= photoCarousel.arrPhotos.length) {
			nextPhoto = 0;	
		}
		else {
			nextPhoto = photoCarousel.currPhoto + 1;
		}	
		photoCarousel.showPhoto(nextPhoto);
	},
	
	previous : function() {
		if(photoCarousel.currPhoto <= 0) {
			prevPhoto = photoCarousel.arrPhotos.length - 1;	
		}
		else {
			prevPhoto = photoCarousel.currPhoto - 1;
		}
		photoCarousel.showPhoto(prevPhoto);	
	},
	
	nextThumbSet : function() {
		if((photoCarousel.currThumbSet + 1) >= photoCarousel.arrThumbSets.length) {
			nextThumbSet = 0;	
		}
		else {
			nextThumbSet = ((photoCarousel.currThumbSet + 1) * 12) + 1;
		}
		photoCarousel.showThumbSet(nextThumbSet);
	},
	
	prevThumbSet : function() {
		if(photoCarousel.currThumbSet <= 0) {
			prevThumbSet = (photoCarousel.arrThumbSets.length * 12) - 1;		
		}
		else {
			prevThumbSet = (photoCarousel.currThumbSet * 12) - 1;	
		}
		photoCarousel.showThumbSet(prevThumbSet);
	},
	
	thumbClick : function() {
		photoNum = this.id * 1;
		photoCarousel.showPhoto(photoNum);	
	}
	
}



/******************************************************************************************************

	BROWSER DETECT
	-------------------------------------------------------------------------------------------
	this detects which browser and platform you are on

******************************************************************************************************/
var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.indexOf(data[i].subString) != -1)
					return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
		{ 	string: navigator.userAgent,
			subString: "OmniWeb",
			versionSearch: "OmniWeb/",
			identity: "OmniWeb"
		},
		{
			string: navigator.vendor,
			subString: "Apple",
			identity: "Safari"
		},
		{
			prop: window.opera,
			identity: "Opera"
		},
		{
			string: navigator.vendor,
			subString: "iCab",
			identity: "iCab"
		},
		{
			string: navigator.vendor,
			subString: "KDE",
			identity: "Konqueror"
		},
		{
			string: navigator.userAgent,
			subString: "Firefox",
			identity: "Firefox"
		},
		{
			string: navigator.vendor,
			subString: "Camino",
			identity: "Camino"
		},
		{		// for newer Netscapes (6+)
			string: navigator.userAgent,
			subString: "Netscape",
			identity: "Netscape"
		},
		{
			string: navigator.userAgent,
			subString: "MSIE",
			identity: "Explorer",
			versionSearch: "MSIE"
		},
		{
			string: navigator.userAgent,
			subString: "Gecko",
			identity: "Mozilla",
			versionSearch: "rv"
		},
		{ 		// for older Netscapes (4-)
			string: navigator.userAgent,
			subString: "Mozilla",
			identity: "Netscape",
			versionSearch: "Mozilla"
		}
	],
	dataOS : [
		{
			string: navigator.platform,
			subString: "Win",
			identity: "Windows"
		},
		{
			string: navigator.platform,
			subString: "Mac",
			identity: "Mac"
		},
		{
			string: navigator.platform,
			subString: "Linux",
			identity: "Linux"
		}
	]

};
BrowserDetect.init();



/******************************************************************************************************

	VIDEO ZOOM
	-------------------------------------------------------------------------------------------
	this handles showing full size video overlays

******************************************************************************************************/
var videoZoom = {
	show : function(flvPath) {
		
		var videoPlayerFade = $('video_fade');
		var videoPlayer = $('video_zoom_container');
		
		var scrollWidth = window.getScrollWidth();
		var scrollHeight = window.getScrollHeight();
		
		var videoPlayerWidth = videoPlayer.getCoordinates().width;
		var videoPlayerHeight = videoPlayer.getCoordinates().height;
		var windowWidth = window.getWidth();
		var windowHeight = window.getHeight();
		var scrollPos = window.getScrollTop();
		
		var newVideoPlayerLeftPos = (windowWidth / 2) - (videoPlayerWidth / 2);
		var newVideoPlayerTopPos = (windowHeight / 2) - (videoPlayerHeight / 2) + scrollPos;
		
		newVideoPlayerLeftPos = (newVideoPlayerLeftPos < 0) ? 0 : newVideoPlayerLeftPos;
		newVideoPlayerTopPos = (newVideoPlayerTopPos < 0) ? 0 : newVideoPlayerTopPos;
		
		
		if (!(BrowserDetect.browser == 'Firefox' && BrowserDetect.version <= 2)) {
			videoPlayerFade.setStyles({
				'width' : scrollWidth,
				'height' : scrollHeight,
				'opacity' : 0.5,
				'visibility' : 'visible',
				'textAlign' : 'center'
			});
		}
		
		videoPlayer.setStyles({
			'top' : newVideoPlayerTopPos,
			'left' : newVideoPlayerLeftPos,
			'visibility' : 'visible',
			'textAlign' : 'center'
		});	
		
		// Load Video And Play
		var flashvars = {
			w: "640",
			h: "360",
			fn: flvPath,
			fs: "true",
			auto: "true"
		};
		var params = { 
			wmode: "transparent",
			menu: "false",
			allowFullScreen: "true"
		};								
		var attributes = {};
		//swfobject.embedSWF("/resources/swf/MediaPlayer.swf", "video_zoom_player", "640", "360", "9.0.0", "/resources/swf/expressInstall.swf", flashvars, params, attributes);
		swfobject.embedSWF("/resources/swf/MediaPlayer_8.swf", "video_zoom_player", "540", "360", "8.0.0", false, flashvars, params, attributes); 
		
		
	},
	showOne : function(flvPath,wid,hei) {
		
		var videoPlayerFade = $('video_fade');
		var videoPlayer = $('video_zoom_container');
		
		var scrollWidth = window.getScrollWidth();
		var scrollHeight = window.getScrollHeight();
		
		var videoPlayerWidth = videoPlayer.getCoordinates().width;
		var videoPlayerHeight = videoPlayer.getCoordinates().height;
		var windowWidth = window.getWidth();
		var windowHeight = window.getHeight();
		var scrollPos = window.getScrollTop();
		
		var newVideoPlayerLeftPos = (windowWidth / 2) - (videoPlayerWidth / 2);
		var newVideoPlayerTopPos = (windowHeight / 2) - (videoPlayerHeight / 2) + scrollPos;
		
		newVideoPlayerLeftPos = (newVideoPlayerLeftPos < 0) ? 0 : newVideoPlayerLeftPos;
		newVideoPlayerTopPos = (newVideoPlayerTopPos < 0) ? 0 : newVideoPlayerTopPos;
		
		
		if (!(BrowserDetect.browser == 'Firefox' && BrowserDetect.version <= 2)) {
			videoPlayerFade.setStyles({
				'width' : scrollWidth,
				'height' : scrollHeight,
				'opacity' : 0.5,
				'visibility' : 'visible',
				'textAlign' : 'center'
			});
		}
		
		videoPlayer.setStyles({
			'top' : newVideoPlayerTopPos,
			'left' : newVideoPlayerLeftPos,
			'visibility' : 'visible',
			'textAlign' : 'center'
		});	
		
		// Load Video And Play
		var flashvars = {
			w: wid,
			h: hei,
			fn: flvPath,
			fs: "true",
			auto: "true"
		};
		var params = { 
			wmode: "transparent",
			menu: "false",
			allowFullScreen: "true"
		};								
		var attributes = {};
		vpWidth = wid + 120;
		vpHeight = hei + 120;
		//swfobject.embedSWF("/resources/swf/MediaPlayer.swf", "video_zoom_player", "640", "360", "9.0.0", "/resources/swf/expressInstall.swf", flashvars, params, attributes);
		swfobject.embedSWF("/resources/swf/MediaPlayer_8.swf", "video_zoom_player", wid, hei, "8.0.0", false, flashvars, params, attributes); 
		
		
	},
	hide : function() {
		
		//swfobject.embedSWF("/resources/swf/MediaPlayer.swf", "video_zoom_player", "640", "360", "9.0.0", "/resources/swf/expressInstall.swf", {}, {}, {});
		swfobject.embedSWF("/resources/swf/MediaPlayer_8.swf", "video_zoom_player", "640", "360", "8.0.0", false, {},{},{}); 
		
		var videoPlayerFade = $('video_fade');
		var videoPlayer = $('video_zoom_container');
		
		videoPlayerFade.setStyle('visibility', 'hidden');
		videoPlayer.setStyles({
			'visibility': 'hidden',
			'top': -100000000
		});		
	}
}