barAnimSpeed = 200;
contentBoxAnimSpeed = 500;
bgAnimSpeed = 0;

mouseX = 0;
sliderInterval = "";
sliderWidth = 0
sliderWidth = 0;
distanceRatio = 0;

$(document).ready(function(){
	
	viewportWidth = $(window).width();
	viewportHeight = $(window).height();
	
	$(".content-box").each(function(index){
		$(this).css("width", viewportWidth);
		$(this).css("height", 0);
	});
	
	$(".title-bar").each(function(index){
		$(this).data("startWidth", $(this).width());
		$(this).css("display", "block");
		$(this).css("width",$(this).data("startWidth"));
		$(this).data("active", false);
	});
	
	$(".title-bar").bind('mouseover', extendBar);
	
	$(".title-bar").bind('mouseout', retractBar);
	
	$(".title-bar").click(function(index){
		var theBox = $(this).parents(".page-layer").find(".content-box");
		var theBar = $(this);
		
		$(".title-bar").not(this).each(function(){
			var theBox = $(this).parents(".page-layer").find(".content-box");
			var theBar = $(this);
			$(theBox).animate({"height":0}, {duration:contentBoxAnimSpeed, easing:"easeInOutExpo", queue:false, complete:function(){
					$(theBar).animate({"width":$(theBar).data("startWidth")}, {duration:barAnimSpeed, easing:"easeInOutExpo", queue:false});
					$(theBar).bind('mouseout', retractBar);
					
				}
			});
			$(this).data("active", false);
		});
		
		if ($(theBox).height() == 0) {
			$(theBar).animate({"width":viewportWidth}, {duration:barAnimSpeed, easing:"easeInOutExpo", queue:false, complete:function(){
					//$(theBox).animate({"height":400}, {duration:contentBoxAnimSpeed, easing:"easeInOutExpo", queue:false});
					resizeBox($(theBar).attr("id"), theBox)
				}
			});
			$(theBar).unbind('mouseout', retractBar);
			$(this).data("active", true);
		} else {
			$(theBox).animate({"height":0}, {duration:contentBoxAnimSpeed, easing:"easeInOutExpo", queue:false, complete:function(){
					$(theBar).animate({"width":$(theBar).data("startWidth")}, {duration:barAnimSpeed, easing:"easeInOutExpo", queue:false});
					$(theBar).bind('mouseout', retractBar);
				}
			});
			$(this).data("active", false);
		}
		//alert($(this).attr("id"));
		changeBackground($(this).attr("id"));
	});
	
	$('.bg-img-div').each(function(index){
		$(this).css("width", viewportWidth);
	});
	
	$('.product-img').each(function(index){
		$(this).data("index", index + 1);
		$(this).mouseover(function(){
			$(this).addClass('product'+$(this).data("index")+'hover');
		});
		$(this).mouseout(function(){
			$(this).removeClass('product'+$(this).data("index")+'hover');
		});
		
		$(this).click(function(){
			textBox = $(this).parent('.product-block').prev('.product-block').children('.div-product-text-wrapper');
			if ($(textBox).width() < 50) {
				$(textBox).animate({"width":281}, {duration:contentBoxAnimSpeed, easing:"easeInOutExpo", queue:false, complete:moveSlider });
			} else {
				$(textBox).animate({"width":1}, {duration:contentBoxAnimSpeed, easing:"easeInOutExpo", queue:false, complete:moveSlider });
			}
		});
	});
	
	resizeAll();
	
	//debugging
	
	
	$('#product-slider').mouseover(function(e){
		dataOut();
		sliderInterval = setInterval(dataOut, 100);
	});
	
	$('#product-slider').mouseout(function(e){
		clearInterval(sliderInterval);
	});
	
	$('#product-slider').mousemove(function(e){
		mouseX = e.pageX;
	});
	
	//Set Background Anim Speed
	if (BrowserDetect.browser == 'Explorer') {
		bgAnimSpeed = 0;
		barAnimSpeed = 100;
		$(".title-bar").each(function(index){
			$(this).animate({"width":viewportWidth}, {duration:0, easing:"easeInOutExpo", queue:false, complete:function(){
				$(this).animate({"width":$(this).data("startWidth")}, {duration:0, easing:"easeInOutExpo", queue:false});
				changeBackground();
			}});
		});
	} else {
		bgAnimSpeed = 5000;
	}
	
});

$(window).resize(function(){
	
	resizeAll();
	
});

function moveSlider() {
	tempX = mouseX / viewportWidth;
	
	$('.slider-table').clearQueue();
	if (viewportWidth > sliderWidth) {
		$('.slider-table').animate({"left":0}, {duration:100, easing:"easeOutQuad", queue:true });
	} else {
		//$('.slider-table').css({"left":-((sliderWidth-(viewportWidth-130))*tempX)+45});
		$('.slider-table').animate({"left":-((sliderWidth-(viewportWidth-130))*tempX)+45}, {duration:500, easing:"easeOutExpo", queue:true });
	}
}

//debug function
function dataOut() {
	sliderWidth = $('.slider-table').width();
	distanceRatio = sliderWidth / viewportWidth;
	htmlOut = "";
	htmlOut += "Table Width = "+sliderWidth;
	htmlOut += "<br />";
	htmlOut += "Mouse Position = "+mouseX;
	htmlOut += "<br />";
	htmlOut += "User Agent = "+BrowserDetect.browser;
	htmlOut += "<br />";
	//$('#dataout').html(htmlOut);
	moveSlider();
}

function resizeAll(){
	
	viewportWidth = $(window).width();
	viewportHeight = $(window).height();
	
	if (viewportWidth <= 1040) { viewportWidth = 1040 }
	
	$(".content-box").each(function(index){
		$(this).css("width", viewportWidth);
	});
	
	$(".title-bar").each(function(){
		if($(this).data("active") == true) {
			$(this).animate({"width":viewportWidth}, {duration:barAnimSpeed, easing:"easeInOutExpo", queue:false});
		}
	});
	
	$('.bg-img-div').each(function(index){
		$(this).css("width", viewportWidth);
	});
	
	$('#bg-div').css("width", viewportWidth);
	
}

function extendBar() {
	$(this).animate({"width":viewportWidth}, {duration:barAnimSpeed, easing:"easeInOutExpo", queue:false});
}

function retractBar() {
	$(this).animate({"width":$(this).data("startWidth")}, {duration:barAnimSpeed, easing:"easeInOutExpo", queue:false});
}

function resizeBox(pageName, boxLayer) {
	//alert(pageName);
	switch (pageName)
	{
		case 'pageAbout':
			boxSize = 420;
		break;
		case 'pageDetoxing':
			boxSize = 400;
		break;
		case 'pageAllNatural':
			boxSize = 400;
		break;
		case 'pageProducts':
			boxSize = 389;
		break;
		case 'pageWhereToBuy':
			boxSize = 400;
		break;
		case 'pageGuarantee':
			boxSize = 300;
		break;
		case 'pageContact':
			boxSize = 260;
		break;
	}
	
	$(boxLayer).animate({"height":boxSize}, {duration:contentBoxAnimSpeed, easing:"easeInOutExpo", queue:false});
}

function changeBackground(pageName) {
	//alert(pageName);
	switch (pageName)
	{
		case 'pageAbout':
			activeBg = $('.bg-img-div').eq(1);
		break;
		case 'pageDetoxing':
			activeBg = $('.bg-img-div').eq(2);
		break;
		case 'pageAllNatural':
			activeBg = $('.bg-img-div').eq(3);
		break;
		case 'pageProducts':
			activeBg = $('.bg-img-div').eq(4);
		break;
		case 'pageWhereToBuy':
			activeBg = $('.bg-img-div').eq(5);
		break;
		case 'pageGuarantee':
			activeBg = $('.bg-img-div').eq(6);
		break;
		default:
			activeBg = $('.bg-img-div').eq(7);
		break;
	}
	
	$(".bg-img-div").not(activeBg).each(function(){
		//alert($(this).attr('src'));
		$(this).animate({"opacity":0}, {duration:bgAnimSpeed, easing:"swing", queue:false});
		$(this).css({"z-index":-5});
	});
	
	$(activeBg).animate({"opacity":1}, {duration:bgAnimSpeed, easing:"swing", queue:false});
	$(activeBg).css({"z-index":-4});
}



//Browser Detection
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: "Chrome",
			identity: "Chrome"
		},
		{ 	string: navigator.userAgent,
			subString: "OmniWeb",
			versionSearch: "OmniWeb/",
			identity: "OmniWeb"
		},
		{
			string: navigator.vendor,
			subString: "Apple",
			identity: "Safari",
			versionSearch: "Version"
		},
		{
			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.userAgent,
			   subString: "iPhone",
			   identity: "iPhone/iPod"
	    },
		{
			string: navigator.platform,
			subString: "Linux",
			identity: "Linux"
		}
	]

};
BrowserDetect.init();