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

	SUNCHIPS.COM
	-----------------------------
	agency: teehan+lax 
	author: chris erwin
	date: March 17, 2008 
	contact: chris@teehanlax.com

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



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

	PROMO CONTROLLER
	-----------------------------------------------------------
	handles the showing and hiding of the promo panels
	
********************************************************************/
var promoOpen = false;

var Promo = new Class({
	initialize: function(options){
		this.options = options; //save our options.
			
		// set the properties for the object
		this.promoElement = this.options.promoElement;
		this.openPos = this.options.openPos;
		this.closePos = this.options.closePos;
		this.activePromo = this.options.activePromo;
		this.animation = new Fx.Tween(this.promoElement,  { property:'top',
								duration: 700, 
								transition: Fx.Transitions.Back.easeOut
							});
		
		if (this.activePromo && window.ie7 != true) {
			this.promoElement.setStyle('opacity',0.6);	
		}
		
		// add event listeners to the object
		window.addEvent('domready', this.fullHide.bind(this));
		window.addEvent('load',this.peek.bind(this));
		this.promoElement.addEvent('mouseover', this.show.bind(this));
		this.promoElement.addEvent('mouseleave', this.hide.bind(this));
	},
	fullHide : function() {
		this.promoElement.setStyle('top', '365px');	
	},
	peek: function() {
		this.animation.start(this.closePos);
	},
	show: function(){
		promoOpen = true;
		if (this.activePromo && window.ie7 != true) {
			this.promoElement.setStyle('opacity',1);	
		}
		$('promo_container').setStyle('z-index',1100);
		this.animation.cancel()
		this.animation.start(this.openPos);
	},
	hide: function(){
		promoOpen = false;
		if(this.activePromo && window.ie7 != true) {
			this.promoElement.setStyle('opacity',0.6);	
		}
		this.resetZIndex.delay(300);
		this.animation.cancel();
		this.animation.start(this.closePos);
	},
	resetZIndex : function() {
		/* 
			when we open a promo we set the z-index of the promo
			container higher than the content container, and we
			reverse this when we close the promo. 
		*/
		if (promoOpen == false) {
			$('promo_container').setStyle('z-index',199);
		}
	}
});



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

	NAV LINK CONTROLLER
	-----------------------------------------------------------
	handles the hover states for the main nav
	
********************************************************************/
var NavLink = new Class({
	initialize: function(options) {
		this.options = options;
		
		this.navElement = this.options.navElement;
		this.bgElement = $(this.navElement.getParent().id + '_bg');
		
		this.navElement.addEvent('mouseover', this.setHover.bind(this));
		this.navElement.addEvent('mouseleave', this.unsetHover.bind(this));
	},
	setHover : function() {
		if (! this.bgElement.hasClass('active')) {
			this.bgElement.addClass('hover');	
		}
	},
	unsetHover : function() {
		if (! this.bgElement.hasClass('active')) {
			this.bgElement.removeClass('hover');
		}
	}
});

var arrNavLinkObjects = [];

function NavLinkInit() {
	var arrNavLinks = $('main_nav_content').getElementsByTagName('A');
	
	for(i=0; i<arrNavLinks.length; i++) {
		var navLink = $(arrNavLinks[i]);
		arrNavLinkObjects[i] = new NavLink({ navElement: navLink });
	}
	
	if (currActivePageLinkBG != null) {
		$(currActivePageLinkBG).addClass('active');
	}
}

window.addEvent('domready', NavLinkInit);



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

	MESSAGE POP
	-----------------------------------------------------------
	this handles the overlay popup used on the healthier you page
	
********************************************************************/
var messagePop = {
	popElement : null,
	animation : null,
	
	init : function() {
		messagePop.popElement = $('info_overlay_wrap');			
		
		messagePop.popElement.setStyle('opacity',0);
		
		messagePop.animation = new Fx.Morph(messagePop.popElement, {
					duration: 400, 
					transition: Fx.Transitions.Back.easeOut
				});
	},
	
	
	showPop : function(contentToDisplay, xPos, yPos) {
		messagePop.hideContent();
		var contentElement = $(contentToDisplay);
		contentElement.setStyle('display','block');
		
		yPosStart = yPos + 100;
		
		messagePop.popElement.setStyles({
			'top': yPosStart + 'px',
			'left': xPos + 'px',
			'display': 'block'
		});			
		
		// IE7 doesn't like opacity being set on transparent pngs
		if (window.ie7) {
			messagePop.popElement.setStyle('opacity', 1);
			messagePop.animation.start({
				'top':[yPosStart, yPos]
			});
		}
		else {
			messagePop.animation.start({
				'opacity':[0,1],
				'top':[yPosStart, yPos]
			});
		}
	},
	
	
	closePop : function() {
		var currYPos = messagePop.popElement.getStyle('top').toInt();	
		
		yPosFinish = currYPos + 100;		
		
		// IE7 doesn't like opacity being set on transparent pngs
		if (window.ie7) {
			messagePop.popElement.setStyle('opacity', 0);
			messagePop.popElement.setStyle('display', 'none');
		}
		else {
			messagePop.animation.start({
				'opacity':[1,0],
				'top':[currYPos, yPosFinish]
			});	
		}
		
		messagePop.hideContent.delay(405);	
	},
	
	
	hideContent : function() {		
		var arrContents = $$('#info_overlay_wrap .content');
		
		for (i=0; i<arrContents.length; i++) {
			arrContents[i].setStyle('display','none');	
		}
	}
}



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

	HEALTHIER PLANET FADER
	-----------------------------------------------------------
	this handles the content section fades on the healthier planet page
	
********************************************************************/

var subContentFade = {
	
	currSection : null,
	animation : null,
	bgAnimation: null,
	currAnimating : false,	
	
	fadeSection : function(newSectionID) {
		if ((subContentFade.currAnimating == false) && (subContentFade.currSection != newSectionID)) {
			
			subContentFade.currAnimating = true;
			
			
			// PREPARE OLD CONTENT
			if (subContentFade.currSection != null) {				
				var oldSection = $(subContentFade.currSection);
				var oldSectionBG = $(subContentFade.currSection + '_bg');
				var oldSectionLink = $(subContentFade.currSection + '_link');			
				
				oldSection.setStyle('z-index', 121);
				oldSectionBG.setStyle('z-index', 120);
				oldSectionLink.src = oldSectionLink.src.replace('_active.gif','_off.gif');	
			}
			else {
				$('content_container').setStyle('display','none');	
			}
			
			
			//PREPARE NEW CONTENT
			var newSection = $(newSectionID);
			var newSectionBG = $(newSectionID + '_bg');
			var newSectionLink = $(newSectionID + '_link');		
			
			
			if(newSectionLink.src.indexOf('_off.gif') > 0) {
				newSectionLink.src = newSectionLink.src.replace('_off.gif','_active.gif');	
			}
			else {
				newSectionLink.src = newSectionLink.src.replace('_hover.gif','_active.gif');
			}
			
			newSectionBG.setStyles({
				'z-index': 130,
				'opacity': 0,
				'display': 'block'
			});
			newSection.setStyles({
				'z-index': 201,
				'opacity': 0,
				'display': 'block'
			});
			
			
			// FADE IN NEW CONTENT
			// no need for global animation object
			subContentFade.bgAnimation = new Fx.Tween(newSectionBG, { 
				property:'opacity',
				duration: 500, 
				transition: Fx.Transitions.Quart.easeInOut,
				onComplete: function() {
								subContentFade.animation.start(1);	
							}
			});		
			
			subContentFade.animation = new Fx.Tween(newSection, {
				property:'opacity',
				duration: 500, 
				transition: Fx.Transitions.Quart.easeInOut,
				onComplete: function() {
								if (subContentFade.currSection != null) {
									oldSection.setStyle('opacity', 0);
								}
								subContentFade.currAnimating = false;
								subContentFade.currSection = newSectionID;
							}
			});
			
			subContentFade.bgAnimation.start(1);		
			
		}// if animating
	}// fade section
}


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

	HOVER BUTTONS
	-----------------------------------------------------------
	this handles the rollover states for images with the "hover_button" class
	
********************************************************************/
var hoverButton = {
	init : function() {		
		arrButtons = $$('.hover_button');
		
		for (var i=0; i<arrButtons.length; i++) {
			arrButtons[i].addEvent('mouseover', hoverButton.setOver);	
			arrButtons[i].addEvent('mouseout', hoverButton.setOff);
		}
		
	},
	setOver : function() {
		buttonImageSource = this.src;
		if (buttonImageSource.indexOf('_off.') != -1) {
			this.src = buttonImageSource.replace('_off.', '_hover.');
		}
	}, 
	setOff : function() {
		buttonImageSource = this.src;
		if (buttonImageSource.indexOf('_hover.') != -1) {
			this.src = buttonImageSource.replace('_hover.', '_off.');
		}
	}
}

window.addEvent('load', hoverButton.init);




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

	NUTRITION INFO POP-UPS
	-----------------------------------------------------------------
	This handles the nutrition info pop-ups on the flavor pages
	
********************************************************************/
function showNutrition(flavor) {
	$('flash_container').setStyle('top', '-100000000px');
	$('fake_flash_screen').setStyle('display', 'block');
	
	nutritionPanel.openPop();
}

function hideNutrition() {
	nutritionPanel.closePop();
	
	$('flash_container').setStyle('top', '');
	$('fake_flash_screen').setStyle('display', 'none');
	
	
}




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

	POP LAYER
	------------------------------------------------------------------------
	This controls the popup layer with the faded background (full page fade)
	
********************************************************************/

var PopLayer = new Class({
	initialize : function(options) {
		this.options = options;
		
		this.popContent = this.options.popContent;
		
		this.useShadow = this.options.useShadow;
		this.fadeAnimation = new Fx.Tween($('popLayerFade'), {property:'opacity',
							duration: 300, 
							transition: Fx.Transitions.Quart.easeOut
						});
		//$('popLayerFade').setStyle('opacity',0);
	},
	openPop : function() {		
		this.resizeFade();
		//this.fadeAnimation.start(0.8);
		$('popLayerFade').setStyle('visibility','visible');
		
		this.openPopContent();//.delay(300, this);					
	},
	openPopContent : function() {
		if(this.useShadow) {
			this.resizeShadow();
			$('popLayerShadow').setStyles({
				'visibility':'visible'
			});
		}
		
		this.recenterElement(this.popContent);
		
		this.popContent.setStyles({
			'visibility':'visible'
		});	
	},
	closePop : function() {
		this.popContent.setStyles({
			'visibility':'hidden',
			'top': -100000000
		});	
		
		if(this.useShadow) {
			$('popLayerShadow').setStyles({
				'visibility':'hidden'
			});
		}
		
		$('popLayerFade').setStyle('visibility','hidden');
		//this.fadeAnimation.start(0);
	},
	resizeShadow : function() {	
		var shadowInnerWidth = this.popContent.getCoordinates().width;
		var shadowInnerHeight = this.popContent.getCoordinates().height;
		var shadowCornerWidth = $$('#popLayerShadow .corner')[0].getCoordinates().width;
		var shadowCornerHeight = $$('#popLayerShadow .corner')[0].getCoordinates().height;
		var shadowWidth = shadowInnerWidth + (shadowCornerWidth * 2);
		var shadowHeight = shadowInnerHeight + (shadowCornerHeight * 2);
		
		$$('#popLayerShadow .topbottom').each(function(element){
			element.setStyle('width', (shadowInnerWidth-5));
		});
		
		$$('#popLayerShadow .side').each(function(element){
			element.setStyle('height', (shadowInnerHeight-5));
		});
		
		$$('#popLayerShadow .center')[0].setStyles({
			'height' : shadowInnerHeight,
			'width' : shadowInnerWidth
		});
		
		$('popLayerShadow').setStyles({
			'height' : shadowHeight,
			'width' : shadowWidth
		});
		
		this.recenterElement($('popLayerShadow'));
	},
	recenterElement : function(element) {
		elementWidth = element.getCoordinates().width;
		elementHeight = element.getCoordinates().height;
		windowWidth = window.getWidth();
		windowHeight = window.getHeight();
		scrollPos = window.getScrollTop();
		
		newElementLeftPos = (windowWidth / 2) - (elementWidth / 2);
		newElementTopPos = ((windowHeight / 2) + scrollPos) - (elementHeight / 2);
		
		if (newElementLeftPos < 0) {
			newElementLeftPos = 0;
		}
		
		if (newElementTopPos < 0) {
			newElementTopPos = 0;
		}
		
		element.setStyles({
			'left': newElementLeftPos,
			'top': newElementTopPos
		});
	},
	resizeFade : function() {
		var scrollWidth = window.getScrollWidth();
		var scrollHeight = window.getScrollHeight();
		
		$('popLayerFade').setStyles({
			'width' : scrollWidth,
			'height' : scrollHeight
		});
	}
});



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

	AD SCROLLER
	----------------------------------------------------------------
	This handles the horizontal scroller for multiple pages in the
	advertising page
	
********************************************************************/
var adScroller = {
	numPages : 1,
	currPage : 1,
	animating : false,
	sliderContent : null,
	sliderWidth: null,
	animation: null,
	
	init : function(numPerPage) {
		var arrAdThumbs = $$('#slider_content .ad_thumb');
		var numAdThumbs = arrAdThumbs.length;
		
		adScroller.sliderContent = $('slider_content');
		adScroller.sliderWidth = adScroller.sliderContent.getCoordinates().width;
		adScroller.animation = adScroller.sliderContent.effect('left',{
				duration: 700,
				transition: Fx.Transitions.Quart.easeOut,
				onComplete: function(){adScroller.animating = false;}
			});
		
		if (numAdThumbs > numPerPage) {
			adScroller.numPages = Math.ceil(numAdThumbs / numPerPage);
			$('next_slide').setStyle('display', 'block');
		}
	},
	nextPage : function() {
		if(! adScroller.animating) {
			adScroller.currPage++;
			
			if(adScroller.currPage >= adScroller.numPages) {
				$('next_slide').setStyle('display', 'none');
				adScroller.currPage = adScroller.numPages;
			}	
			
			$('previous_slide').setStyle('display', 'block');				
			
			nextSliderPos = (adScroller.sliderWidth * (adScroller.currPage - 1)) * -1;
			
			adScroller.animating = true;
			
			adScroller.animation.start(nextSliderPos);
		}
	},
	previousPage : function() {
		if(! adScroller.animating) {
			adScroller.currPage--;
			
			if(adScroller.currPage <= 1) {
				$('previous_slide').setStyle('display', 'none');
				adScroller.currPage = 1;
			}
			
			$('next_slide').setStyle('display', 'block');									
			
			nextSliderPos = adScroller.sliderContent.getStyle('left').toInt() + adScroller.sliderWidth;
			
			adScroller.animating = true;
			
			adScroller.animation.start(nextSliderPos);
		}
	}
}



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

	ADVERTISING POP-UP
	----------------------------------------------------------------
	This handles the pop-ups for the advertising page.
	
********************************************************************/
var printAdPopContent = {
	change : function(id) {
		
		var title = "";
		var image = "";
		
		switch (id)
		{
		   	case 'healthier_planet' :
				title = "Can a Chip be Healthier for the Planet";
				image = "resources/images/pages/advertising/print/healthier_planet_ad.jpg";				
			  	break;
		  	case 'no_guilt' :
				title = "Guilty Mothers";
				image = "resources/images/pages/advertising/print/no_guilt_ad.jpg";
			  	break;			  
			case 'living_up' :
				title = "We're Living up to Our Name";
				image = "resources/images/pages/advertising/print/living_up_name_ad.jpg";
				break;
			case 'nutrition_original':
				title = "";
				image = "resources/images/pages/flavors/nutrition_panel_original.gif";
				break;
			case 'nutrition_harvest_cheddar':
				title = '';
				image = "resources/images/pages/flavors/nutrition_panel_cheddar.gif";
				break;
			case 'nutrition_garden_salsa':
				title = '';
				image = "resources/images/pages/flavors/nutrition_panel_salsa.gif";
				break;
			case 'nutrition_french_onion':
				title = '';
				image = "resources/images/pages/flavors/nutrition_panel_onion.gif";
				break;
			case 'i_am_the_sum':
				title = 'I am the Sum - 1';
				image = "resources/images/pages/advertising/print/i_am_the_sum.jpg";
				break;
			case 'steps_take_me':
				title = 'Small Steps - 1';
				image = "resources/images/pages/advertising/print/small_steps_take_me.jpg";
				break;
			case 'i_am_the_sum_blue':
				title = 'I am the Sum - 2';
				image = "resources/images/pages/advertising/print/i_am_the_sum_blue.jpg";
				break;
			case 'steps_take_me_red':
				title = 'Small Steps - 2';
				image = "resources/images/pages/advertising/print/small_steps_take_me_red.jpg";
				break;
			case 'guilt':
				title = 'Guilt';
				image = "resources/images/pages/advertising/print/guilt.jpg";
				break;
			case 'solar_power':
				title = 'Solar';
				image = "resources/images/pages/advertising/print/solar_power.jpg";
				break;
			case 'snack_choice':
				title = 'Snack Choice';
				image = "resources/images/pages/advertising/print/snack_choice.jpg";
				break;
			case 'whole_grains':
				title = 'Whole Grains';
				image = "resources/images/pages/advertising/print/whole_grains.jpg";
				break;
				
			case 'harvest_cheddar':
				title = 'Harvest Cheddar';
				image = "resources/images/pages/advertising/print/Harvest-Cheddar.jpg";
			break;
			case 'hungry_change':
				title = 'Hungry for Change';
				image = "resources/images/pages/advertising/print/Hungry-for-Change.jpg";
			break;
			case 'nurture_nature':
				title = 'Nurture Nature';
				image = "resources/images/pages/advertising/print/Nurture-Nature.jpg";
			break;
			case 'yummy':
				title = 'Yummy';
				image = "resources/images/pages/advertising/print/Yummy.jpg";
			break;
			case 'yummy':
				title = 'Yummy';
				image = "resources/images/pages/advertising/print/Yummy.jpg";
			break;
			
			
			default :	// Do Your Heart a Favor (the first one)
				title = "Do Your Heart a Favor";
				image = "resources/images/pages/advertising/print/bike_ad.jpg";
		}	
	
		$('ad_title').innerHTML = title;
		//$('ad_container').innerHTML = image;
		$('ad_image').src = 'resources/images/blank.gif';
		$('ad_image').src = image;
		$('ad_image').setStyle('height', 546);
		$('ad_image').setStyle('width', 408);
		
		printAdPop.openPop();
	}
};


var televisionAdPopContent = {
	change : function(id) {
		var title = "";
		var video ="";
		
		switch(id) {
			case 'biobag' :
				title = "";
				video = "Biobag_traffic.flv";
				break;
			case 'green_effect_butterflies' :
				title = "";
				video = "GreenEffect_butterflies.flv";
				break;
			case 'generations' :
				title = "";
				video = "SunChips_HD30.flv";
				break;				
			case 'compostingWhat' :
				title = "";
				video = "Sunchips_vig1.flv";
				break;
			case 'compostingKeys' :
				title = "";
				video = "Sunchips_vig3.flv";
				break;	
			case 'compostingFAQs' :
				title = "";
				video = "Sunchips_vig4.flv";
				break;	
			case 'compostingwhat' :
				title = "";
				video = "Sunchips_vig3.flv";
				break;	
			default :
				title = "";
				video = "Biobag_traffic.flv";
		}
		
		sendToActionScript(video, title);
		televisionAdPop.openPop();
	}
}

function thisMovie(movieName) {
		
	if (navigator.appName.indexOf("Microsoft") != -1) {
		return window[movieName];
	} else {
		return document[movieName];
	}
}

function sendToActionScript(value, title) {
	thisMovie("videoPlayer").sendToActionScript(value, title);
}