//////////////////////////////////////////////////////
//
//	The purpose of this file is to
//	apply a hover class on mouseover
//	on the <li> elements in the nav.
//	This is because IE doesn't put
//	the pseudo class :hover on <li> elements
//
//	This is code that uses the
//	jquery javascript library (http://jquery.com/)
//
//////////////////////////////////////////////////////

var backgroundColors = new Array();

backgroundColors['almond'] = '#eee6c5';
backgroundColors['aloe'] = '#dafac0';
backgroundColors['best_protection'] = '#97d7ff';
backgroundColors['blue_fusion'] =  '#b6deff';
backgroundColors['coolplum'] = '#eaddf2';
backgroundColors['country_orchard'] = '#c5f4b2';
backgroundColors['cranberry'] = '#f99fae';
backgroundColors['for_kitchen'] =  '#f9f7b7';
backgroundColors['for_men'] =  '#acc1cc';
backgroundColors['fresh_pear'] = '#b7f9b7';
backgroundColors['gold'] = '#f8e2aa';
backgroundColors['green_fusion'] =  '#b9f4b2';
backgroundColors['lavendar'] = '#c4d0eb';
backgroundColors['mandarine'] = '#fbddca';
backgroundColors['mountain_fresh'] =  '#b1e5b3';
backgroundColors['pommegranate'] = '#f6c4ca';
backgroundColors['sanitizer'] = '#d8f2d3';
backgroundColors['spa_mineral'] =  '#e8fafb';
backgroundColors['spring_water'] = '#bfe8fa';
backgroundColors['tropical_escape'] = '#ffd79d';
backgroundColors['white_tea'] =  '#e4f6df';
backgroundColors['white'] = '#d8eaf2';
backgroundColors['yogurt_aloe'] = '#ccf2c2';
backgroundColors['yogurt_honey'] = '#eee6c5';
backgroundColors['yogurt_apricot'] = '#ffcfb0';
backgroundColors['cranberry'] = '#ffbcc3';

$(document).ready(function() {
	$('#superOverlay').show();
    $('img[@src$=.png]').ifixpng(); 

});

$(window).load(function() {

	$('img[@src$=.png], div#modal_content, div#modal_bottom, div.introLink').ifixpng();
	$('#modal').hide();
	var scrolling = false;
	var maxProductnavWidth = 750; // 770
	var numProducts = $('#productnav ul li').length;
	var p0 = 0;
	var p1 = numProducts - 1;
	var paddingOffset = 20;
	var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/;

	var productMaxHeight = 368;
	var timingOffset = 1000;
	
	//var firstImage = $('#productnav ul li img')[0];
	var increment = 10;
	var maxHeight = 155;
	$('#productnav ul li img').each(function(){
		this.width0 = this.width;
		this.height0 = this.height;
		$(this).attr("width", this.width0);
		$(this).attr("height", this.height0);
		this.height1 = this.height + increment;
		//calculate width/height ratio.. for pngs in ie6
		this.width1 = Math.round(( (this.height1) / this.height) * this.width);
	});
	
	$('#productnav ul li').each(function(){
		var h = $(this).children().children('img')[0].height;
		var padding = maxHeight - h;
		$(this).css("height",h);
		$(this).css("paddingTop", padding);
		
	});
	var productList = $('#productnav ul li');
	var total_width = 0;
	
	for(var i = 0; i < productList.length; i++)
	{
		
		total_width = total_width + $(productList[i]).width() + paddingOffset;
		//$(productList[i]).css('width',$(productList[i]).width());
	}
	
	var tooFat = false;
	if( total_width > maxProductnavWidth )
	{
		scrolling = true;
		tooFat = true;
		$('div#next a').removeClass('limit');
		
	}
	while(tooFat)
	{
		total_width = total_width - $(productList[p1]).width() - 20;
		$(productList[p1]).children('a').children('img').animate({width: '0'}, 0);
		$(productList[p1]).animate({paddingLeft: '0px', paddingRight: '0px'}, 0);
		p1 = p1 - 1;
		if(total_width < maxProductnavWidth)
			tooFat = false;
	}
	
	$('div#next a').click(function(){
		if(numProducts - 1 < p1 + 1)
			return false;
		if(numProducts - 1 == p1 + 1)
			$(this).addClass('limit');
		
		$('div#prev a').removeClass('limit');
		p1 = p1 + 1;
		$(productList[p0]).children('a').children('img').animate({width: '0'}, 500);
		$(productList[p0]).animate({paddingLeft: '0px', paddingRight: '0px'}, 500);
		$(productList[p1]).children('a').children('img').animate({width: $(productList[p1]).children('a').children('img')[0].width0},500);
		$(productList[p1]).animate({paddingLeft: '10px', paddingRight: '10px'}, 500);
		p0 = p0 + 1;
		return false;
	});
	$('div#prev a').click(function(){
		if(p0 == 0)
			return false;
		if(p0 - 1 == 0)
			$(this).addClass('limit');
			
		$('div#next a').removeClass('limit');
		p0 = p0 - 1;
		$(productList[p1]).children('a').children('img').animate({width: '0'}, 500);
		$(productList[p1]).animate({paddingLeft: '0px', paddingRight: '0px'}, 500);
		$(productList[p0]).children('a').children('img').animate({width: $(productList[p0]).children('a').children('img')[0].width0}, 500);
		$(productList[p0]).animate({paddingLeft: '10px', paddingRight: '10px'}, 500);
		p1 = p1 - 1;
		return false;
	});
	
	
	if (document.all&&document.getElementById) {
		// this is needed for the IE 6 pseudo hover class bug
		$(".navtop > li").hover(function() {
			$(this).addClass("hover");
		},
		function () {
			$(this).removeClass("hover");
		});
		
		$(".navtop > li li ").hover(
		function () {
			$(this).addClass("hover");
		},
		function () {
			$(this).removeClass("hover");
			
		});
		
		
	} else {
		// this is need for safari when nav covers flash
		$(".navtop li ul").mouseover(function () {
			$(this).addClass("redraw");
		});
		$(".navtop li ul").mouseout(function () {
			$(this).removeClass("redraw");
		});
	}
	
	//initial load
	if( $('#productnav').length > 0)
	{
		$("#overlay").fadeIn(1);
		$("#overlay2").fadeIn(1);
		
		var sa = $("#productnav li.selected a");
		var a = '';
		if( sa.length > 0 )
		{
			a = sa[0];
		}
		else
		{
			a = $("#productnav li a")[0];
		}
		var bgColorChange = getBgColor(a);
		$('#bodyBG').animate( {backgroundColor: bgColorChange}, timingOffset);
		if(inTweakcms())
		{
			$("#overlay, #overlay2, #superOverlay").hide();
		}
		else
		{
			animateIn(a, bgColorChange);
		}
	}
	
	function inTweakcms()
	{
		if( window.location.hostname.indexOf("cms") < 0)
			return false;
		else 
			return true;
	}
	
	function getBgColor(a)
	{
		var li = $(a).parent()[0];
		var classList = li.className.split(" ");
		var bgColor = '#000000';
		for(var i = 0; i < classList.length; i++)
		{
			if(  backgroundColors[classList[i]] != undefined)
				bgColor = backgroundColors[classList[i]];
		}
		return bgColor;
	}
	
	function animateOut(a, bgColorChange)
	{
		
		//animate background color
		$('#bodyBG').animate( {backgroundColor: '#ffffff'}, timingOffset);
		//animate large product image
		$('#body #topRightText').slideUp(1000, 'easeOutCirc');
		$('#body #topLeftText').slideUp(1000, 'easeOutCirc');
		
		$('#overlay2').fadeIn(timingOffset + 500);
		$('#overlay').fadeIn(timingOffset, function() {
			animateIn(a, bgColorChange);
		});
		
	}
	
	function animateIn(a, bgColorChange)
	{
		$.ajaxSetup({ scriptCharset: "iso-8859-1" , contentType: "text/html; charset=iso-8859-1"});
		//$.ajaxSetup({ scriptCharset: "utf-8" , contentType: "text/html; charset=utf-8"});
		
		var href = a.href;
		$('#body #topRightText').load(href + ' #body > #topRightText > div');
		$('#body #topLeftText').load(href + ' #body > #topLeftText > div', function(){
			
			$('#product').load(href + ' #body #product p', function(){
				$('title').load(href + ' title', function(){
					title = $(this).find('title').text();
					$(this).html(title);
					$(document).attr('title', title);
				});
				preLoadedImage = new Image(); 
				preLoadedImage.onload = function() {
					$('#superOverlay').fadeOut(500);
					$('#body #topLeftText').slideDown(500);
					$('#body #topRightText').slideDown(500, function(){
						if(IE6){
							$('img[@src$=.png]').ifixpng();
						}
					});	
					var margTop = productMaxHeight - this.height;
					$('#product p img').css({marginTop: margTop + 'px'});
					$('#overlay2').fadeOut(timingOffset - 500);
					$('#overlay').fadeOut(timingOffset );
					$('#bodyBG').animate({backgroundColor: bgColorChange},timingOffset);
				};
				preLoadedImage.src = $('#product p img')[0].src;
				
				 $(".modalOpen").click(function(){
						$("#modal #modal_content").html($('div.ingredients').html());
						$("#modal").slideDown('slow', function(){
						});
						return false;
					});
			});
		});
	}
	
	/* modal close */
	$('#closeModal').click(function(){
		$('#modal').hide();
		$('#modal_content').html('');
		return false;
	});
	
	$("#productnav li a").click(function(){
		var bgColorChange = getBgColor(this);
		animateOut(this, bgColorChange);
		return false;
	});
	
	$("#productnav li a img").hover(function() {
			var width1 = this.width1; 
			var height1 = this.height1;
			$(this).animate({
			width: width1,
			height: height1 },200);
		},
		function () {
			var width0 = this.width0; 
			var height0 =  this.height0; 
			$(this).animate({
			width: width0,
			height: height0},200);
		});
	$("div.introLink").hover(function(){
		$(this).addClass('hover');
	},function(){
		$(this).removeClass('hover');
	});
	
	$("div.introLink").click(function(){
                var myLink = $(this).find('a');
                var target = myLink.attr('target');
                if(target == "_blank")
                 {
                     window.open(myLink[0].href);
                     return false;
                 }
                  else
                 {
	          window.location.href=myLink[0].href;
                  }
		
	});
	
	
});