var isIOS = navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod';
var maxTextHeight = 0;
var stageDimentions;

$(window).ready(function()
{	
	var PADDING_TOP = 103;
	var RWATGG_AREA_WIDTH = 516;
	var SCROLL_ITEM_WIDTH = 835;
	
	var showingTopContent = false;
	
	var scrollFaker = $("#scroll-faker");
	var slider = $("#slide-container");
	$(slider).width($(".slide-item").length * SCROLL_ITEM_WIDTH);
	
	stageDimentions = {w: 0, h: 0, widthDiffer: 0};
	var sliderWidth = $(slider).width();
	var scrollFakerHeight = 0;
	var oldSlideXposition = 0;
	
	//define canvas
	var lineCanvas = document.getElementById('line');
	var wavePoints;
	
	if(isIOS)
	{
		$("#content").css("position", "static");
		$("#content").css("overflow", "visible");
	}
	
	//define scroll item VO's
	
	var scrollVOs = [];
	$(".slide-item").each(function()
	{
		scrollVOs.push(new ScrollItemVO($(this)));
	});
	
	$("#scrollbar-informer").animate({"opacity": 1}, 1000, "easeOutExpo");
	$("#scrollbar-informer").delay(4000).animate({"opacity": 0}, 1000, "easeOutExpo", function(){
			$(this).css("display", "none");
	});
	
	function updateDimentionsOfSlider()
	{
		stageDimentions.widthDiffer = (($("body").innerWidth() - RWATGG_AREA_WIDTH) / slider.width()) * 15;  
		stageDimentions.w = $(window).width();
		stageDimentions.h = $(window).height();
		
		if(isIOS)
			scrollFakerHeight = 0;
		else
			scrollFakerHeight = (slider.width() * stageDimentions.widthDiffer);
		
		$(scrollFaker).css("height", scrollFakerHeight);
	};
	
	function onStageResize()
	{
		updateDimentionsOfSlider();
		sliderMinX = -(sliderWidth-stageDimentions.w) - RWATGG_AREA_WIDTH;
		lineCanvas.width = 10;//$(window).width();
		
		contentAlignPosition = stageDimentions.h-((maxTextHeight + 540));
		
		for(var i = 0; i < scrollVOs.length; ++i)
		{
			scrollVOs[i].updateAlignment();
		}
		
		contentAlignPosition += 100;
		$("#rwatggcontainer").css("top", contentAlignPosition > 103 ? contentAlignPosition : 103);
	}
	
	$(window).resize(onStageResize);
	
	$(window).scrollTop(0);
	
	$(window).scroll(function()
	{
		doSlide(false);
		
		if(showingTopContent)
			hideTopContent();
	});
	
	onStageResize();
	
	function doSlide(introSlide)
	{
		//$(window).scrollTop() instead of pageYOffset
		var scrollPercentage = window.pageYOffset / (scrollFakerHeight-stageDimentions.h); 
		var xpos = -scrollPercentage * (sliderWidth-stageDimentions.w);
		
		oldSlideXposition = xpos;
		
		$(slider).stop();
		$(slider).animate({"left": RWATGG_AREA_WIDTH + xpos}, introSlide ? 1000 : 100, "easeOutExpo");
		
		var slideItemXPos = 0;
		var halfOfScrollItemWidth = SCROLL_ITEM_WIDTH * .5;
		var tempScrollItem;
		
		for(var i = 0; i < scrollVOs.length; ++i)
		{
			tempScrollItem = scrollVOs[i].scrollItem
			
			slideItemXPos = xpos+$(tempScrollItem).position().left;
			
			if(slideItemXPos >= -400 && slideItemXPos < halfOfScrollItemWidth)
			{
				scrollVOs[i].showText();
			}else
			{
				scrollVOs[i].hideText();
			}
			
			if((slideItemXPos < -(SCROLL_ITEM_WIDTH+RWATGG_AREA_WIDTH) || slideItemXPos > stageDimentions.w) && !scrollVOs[i].isHidden)
			{
				scrollVOs[i].hide();
			}else if(slideItemXPos >= -(SCROLL_ITEM_WIDTH+RWATGG_AREA_WIDTH) && slideItemXPos < stageDimentions.w && scrollVOs[i].isHidden)
			{
				scrollVOs[i].show();
			}
		};
	};
	
	$(slider).animate({"left": stageDimentions.w}, 0, "easeOutExpo");
	doSlide(true);
	
	/* MENU ************************************/
	var currentMenuIndex = -1;
	var menuHeaderContent = $("#header-content");
	var TOP_AREAS = [$("#header-content-contact"), $("#header-content-clientlist")];
	$(".menu-item").each(function()
	{
		if(!$(this).hasClass("externallink"))
			$(this).click(onMenuItemToggle);
	});
	
	function onMenuItemToggle(event)
	{
		if(currentMenuIndex != -1)
		{
			$($(".menu-item")[currentMenuIndex]).removeClass("active");
			$(TOP_AREAS[currentMenuIndex]).css("display", "none");
		}
			
		currentMenuIndex = $(event.currentTarget).index();
		$($(".menu-item")[currentMenuIndex]).addClass("active");
		
		$(TOP_AREAS[currentMenuIndex]).stop();
		$(TOP_AREAS[currentMenuIndex]).css("opacity", 0);
		$(TOP_AREAS[currentMenuIndex]).delay(150).animate({"opacity": 1}, 500, "easeOutExpo");
			
		showTopContent();
	};
	
	function onTopContentMouseLeave(event)
	{
		if(event.pageY > 50)
			hideTopContent();
	}
	
	function showTopContent()
	{
		showingTopContent = true;
		$(TOP_AREAS[currentMenuIndex]).css("display", "block");
		
		var tempHeight = $(TOP_AREAS[currentMenuIndex]).height()+40;
		$(menuHeaderContent).bind("mouseleave", onTopContentMouseLeave);
		
		$(menuHeaderContent).stop();
		$("#content").stop();
		$("#rwatggcontainer").stop();
		
		$(menuHeaderContent).animate({"height": tempHeight}, 500, "easeOutExpo");
		$("#content").animate({"margin-top": tempHeight}, 500, "easeOutExpo");
		var tempY = contentAlignPosition > 103 ? contentAlignPosition : 103;
		$("#rwatggcontainer").animate({"top": tempHeight+tempY}, 500, "easeOutExpo");
		
		$("#overlay").css("display", "block");		
	};
	
	function hideTopContent()
	{
		showingTopContent = false;
		$(menuHeaderContent).unbind("mouseleave", onTopContentMouseLeave);
		
		$(menuHeaderContent).stop();
		$("#content").stop();
		$("#rwatggcontainer").stop();
		
		$(menuHeaderContent).animate({"height": 0}, 500, "easeOutExpo");
		$("#content").animate({"margin-top": 0}, 500, "easeOutExpo");
		var tempY = contentAlignPosition > 103 ? contentAlignPosition : 103;
		$("#rwatggcontainer").animate({"top": tempY}, 500, "easeOutExpo");
		
		$(".menu-item").each(function()
		{
			$(this).removeClass("active");
		});
		
		$("#overlay").css("display", "none");
	};
	
	$("#rwatggcontainer").css("display", "block");
	
	/* CANVAS **************************************************
	author: felix.nielsen@relaxwearethegoodguys.dk
	
	* */
	/*
	function buildPoints()
	{
		wavePoints = new Array();
		var p;
		var stageDiffer = stageDimentions.w / 29;
		for(var i = 0; i < 30; ++i)
		{
			p = {	startx: i == 0 ? 0 : stageDiffer * i-1, 
					endx: stageDiffer * i, 
					y: -20 + (Math.random() *40 )
				};
			wavePoints.push(p);
		};
	};
	buildPoints();*/
	
	//var lineContext = lineCanvas.getContext('2d');
	//lineCanvas.height = 100;
	//setInterval( render, 50 )// set the animation into motion
	
	/*function render()
	{
		//clears up the canvas object.
		lineCanvas.width = lineCanvas.width+1;
		lineCanvas.width = lineCanvas.width-1;
		
		lineContext.beginPath();
		lineContext.moveTo(0, 35); // start point
		
		//controlx, controly, xpos, ypos
		var halfP;
		for(var j = 0; j < wavePoints.length; ++j)
		{
			lineContext.quadraticCurveTo(wavePoints[j].startx, 35+(wavePoints[j].y*2), wavePoints[j].endx, 35+(wavePoints[j].y)); // 400, 50 : end point , 300, 300 : curve point
		}
		
		lineContext.stroke();
	}*/
});


function ScrollItemVO(scrollItem)
{
	this.scrollItem = scrollItem;
	this.textContainer = $(scrollItem).find(".slide-item-text");
	this.isShowingText = false;
	this.textHeight = [];
	this.isHidden = true;
	var that = this;
	
	$(this.textContainer).each(function()
	{
		that.textHeight.push($(this).height());
		
		if($(this).height() > maxTextHeight)
			maxTextHeight = $(this).height();
		
		if(!isIOS) 
			$(this).css("height", 0);
	});
	
	
	this.textIsShowing = false;
	var instance = this;
	
	var mediaItems = [];
	
	var temp = $(scrollItem).find(".slide-item-media");
	var count = 0;
	
	$(temp).each(function()
	{
		mediaItems.push($(this));
		count++;
	});
	
	if(mediaItems.length > 1)
	{
		$(temp).click(function()
		{
			instance.mediaHandler.goToNext();
		});
	}else
	{
		$(scrollItem).find(".slide-item-media").css("cursor", "default")
	}	
	
	this.mediaHandler = new ScrollItemMediaHandler(this, mediaItems, $(scrollItem).find(".slide-item-media-container-paging"));
	
	if(isIOS) 
	{
		$(this.scrollItem).css("visibility", "visible");
		$(this.textContainer).css("display", "block");
	}else
	{
		$(this.textContainer).css("display", "none");
	}
};

ScrollItemVO.prototype.updateAlignment = function()
{
	$(this.scrollItem).find(".slide-line").css("height", contentAlignPosition);
}

ScrollItemVO.prototype.show = function()
{
	this.isHidden = false;
	$(this.scrollItem).css("visibility", "visible");
}

ScrollItemVO.prototype.hide = function()
{
	this.isHidden = true;
	if(!isIOS) $(this.scrollItem).css("visibility", "hidden");
}

ScrollItemVO.prototype.showText = function()
{
	if(!this.textIsShowing)
	{		
		var that = this;
		var count = 0;
		$(this.textContainer).each(function()
		{
			$(this).css("height", 0);
			$(this).stop();
			$(this).delay(count * 200).animate({"height": that.textHeight[count]}, 500, "easeOutExpo");
			count++;
		});
	}
	this.textIsShowing = true;
};

ScrollItemVO.prototype.hideText = function()
{
	if(this.textIsShowing)
	{
		var count = this.textHeight.length-1;
		
		$(this.textContainer).each(function()
		{
			$(this).stop();
			$(this).delay(count * 200).animate({"height": 0}, 500, "easeOutExpo");
			count--;
		});
	}
	
	this.textIsShowing = false;
};

// Handler of the media items asociated to the list items.
// desc:
	// handles the timer and changing of the items (visible:true/false)
function ScrollItemMediaHandler(itemVO, mediaItems, pagingItemContainer)
{
	this.itemVO = itemVO;
	this.mediaItems = mediaItems;
	this.pagingItemContainer = pagingItemContainer;
	this.currentPageItemIndex = 0;
	this.maxIndex = this.mediaItems.length-1;
	
	var instance = this;
	
	//build paging items.
	if(this.mediaItems.length>1)
	{
		this.onPagingItemClick = function(e)
		{
			if(instance.currentPageItemIndex == $(e.currentTarget).index()) return;
			
			instance.updateIndex($(e.currentTarget).index());
		};
		
		for(var i = 0; i < this.mediaItems.length; i++)
		{
			$(this.pagingItemContainer).append("<div class='slide-item-media-container-pagingitem'></div>");
			
			if(i==0) 
				$($(this.pagingItemContainer).children()[i]).addClass("active");
			
			$($(this.pagingItemContainer).children()[i]).click(this.onPagingItemClick);
		}
	}
};

ScrollItemMediaHandler.prototype.updateIndex = function(newIndex)
{
	//remove old one.
	var tempItem;
	var img;		
	
	tempItem = $($(this.mediaItems)[this.currentPageItemIndex]);
	$(tempItem).css("z-index", 49);
	$(img).stop(true); 
	img = $(tempItem).find("img"); 
	$(img).delay(50).animate({"margin-top": 400}, 800, "easeInOutExpo", function()
	{
		$(this).parent().removeClass("active");
	});
	
	tempItem = $($(this.pagingItemContainer).children()[this.currentPageItemIndex]); 
	tempItem.removeClass("active");
	
	//update to new stuff.
	this.currentPageItemIndex = newIndex;
	
	tempItem = $($(this.mediaItems)[this.currentPageItemIndex]);
	tempItem.addClass("active");
	
	img = $(tempItem).find("img");
	$(img).stop(true);
	$(img).css("margin-top", "-400px");
	$(img).animate({"margin-top": 0}, 800, "easeInOutExpo");
	
	tempItem = $($(this.pagingItemContainer).children()[this.currentPageItemIndex]);
	tempItem.addClass("active");
}


ScrollItemMediaHandler.prototype.goToNext = function()
{
	var index = this.currentPageItemIndex + 1;
	if(index > this.maxIndex)
		index = 0;
	this.updateIndex(index);
};
/*
 * 
 * 
 * 
getBezier = function getBez(percent,p1,cp1,cp2,p2) {
	function b1(t) { return t*t*t }
	function b2(t) { return 3*t*t*(1-t) }
	function b3(t) { return 3*t*(1-t)*(1-t) }
	function b4(t) { return (1-t)*(1-t)*(1-t) }
	return {x: p1.x*b1(percent) + cp1.x*b2(percent) + cp2.x*b3(percent) + p2.x*b4(percent)
		, y: p1.y*b1(percent) + cp1.y*b2(percent) + cp2.y*b3(percent) + p2.y*b4(percent) }
};
 * 
 * 
 * 
 */