// JavaScript Document

<!-- Get the current scroll values of the page -->
function detectGetWindowScrollValues() {
  var fn, body, doc;

	if( typeof( window.pageYOffset ) == 'number' ) {
	fn = function () {
		return [ window.pageXOffset, window.pageYOffset ];
	}

  }else if( document.body && typeof(document.body.scrollLeft) !== "undefined" && typeof(document.body.scrollTop) !== "undefined" ) {
    //DOM compliant
	bod = document.documentElement;
	fn = function () {
		//alert("bod.scrollTop == " + document.documentElement.scrollTop);
		
		return [ document.documentElement.scrollLeft, document.documentElement.scrollTop ];
	}
  	} else if( document.documentElement && typeof( document.documentElement.scrollLeft) !== "undefined" ) {
    //IE6 standards compliant mode
	doc = document.documentElement;
	fn = function () {
		//alert("doc.scrollTop == " + doc.scrollTop);
		return [ doc.scrollLeft, doc.scrollTop ];
	}
  }
 
  return fn;
}


	

	$(document).ready(function () {
						
		var IsiPhone = navigator.userAgent.indexOf("iPhone") != -1 ;
 		var IsiPod = navigator.userAgent.indexOf("iPod") != -1 ;
		var IsiPad = navigator.userAgent.indexOf("iPad") != -1 ;

		var IsiPhoneOS = IsiPhone || IsiPad || IsiPod ; 
 		
			var $body = $('body');
			var getWindowScrollValues = detectGetWindowScrollValues();
			var parallaxItem = $(".parallax");
			var $container = $("#container");
			var displacement = 0;
			var subDisplacement = 500;
			var viewportHeight = 500;
			
			/*$('body').css("height", $container.height());*/
			
			if(!IsiPhoneOS){
				$(window).bind("resize", resizeWindow);
				$(window).scroll(
					$.throttle(100, animate)
				);
			}
						
			function resizeWindow( e ) {
				viewportHeight = getWindowSize()[1];
				
					displacement = viewportHeight*0.3;
					subDisplacement = viewportHeight*0.25;
					$('body').css("height", $container.innerHeight()*(viewportHeight/800));
				
			}
			displacement = 500;
			
			
			$(".parallax").each(function(j)
			{
				var initTopPosition = parseFloat($(this).position().top);
				$(this).attr("initTopPosition", initTopPosition);
				$(this).attr("initHeight", $(this).innerHeight());
			});	
			
			$(".navigation_item").click(function(e)
			{
				e.preventDefault();
				var scrollOffset = $(this).data("scrollTo");
				$(window).scrollTop(scrollOffset);
				//$("html, body").stop().animate({ scrollTop: scrollOffset });
				
				
			});
			

	
			function animate() {
				
				var currentOffset = $body.attr("paralaxOffset") || 0,
					newOffset = parseFloat(getWindowScrollValues()[1]),
					differentialOffset = Math.abs(currentOffset - newOffset);
				
				
				$body.stop().animate({
					paralaxOffset: newOffset
				}, {
					duration: 1000,
					easing:"easeOutExpo",
					step: function () {	
						step($body.attr("paralaxOffset"));
					}
				});
			}
		
			function step(offset) {
				var heightRatio;
				var previousMarginTop;
				var marginTop;
				
				
				$container.css("top", -offset+"px");
				
				//$container[0].style.top = "-" + offset + "px";
				
				
				
				
				//alert("$container[0].style.top : " +  $container[0].style.top)
				
				
				$(".parallax").each(function(i) {
					currentSlide = $(this);
					previousSlide = $(this).prev();
					
					var referenceSlide = previousSlide;
					var currentParallaxRatio;
					if (referenceSlide.length > 0) {
						//var refSlideTop = parseFloat(referenceSlide.position().top);
						var refSlideTop = referenceSlide.position().top;
						var viewportTop = offset;
						var relation = parseFloat(currentSlide.attr("rel"));
						var parralaxRatio = getMyDamnParralaxRatio(referenceSlide, viewportHeight, viewportTop);
						
						var targetY = (relation * ((viewportTop-refSlideTop) / viewportHeight) * -displacement);
						
						currentParallaxRatio = getMyDamnParralaxRatio(currentSlide, viewportHeight, offset);
						previousMarginTop = marginTop || 0;
						marginTop = parseInt(targetY);
						//currentSlide[0].style.marginTop = (previousMarginTop+marginTop) + "px";
						$(this).css("marginTop",  (previousMarginTop+marginTop) + "px");
					}
					
					currentParallaxRatio = getMyDamnParralaxRatio(currentSlide, viewportHeight, offset);
					
					$(this).find(".subParallax").each(function(e){
						var relation = parseFloat($(this).attr("rel"));
						var ratio = currentParallaxRatio;
						var subTargetY = parseInt(relation * ratio * subDisplacement);
						//alert("subTargetY : " + subTargetY)
						subTargetY = subTargetY;
						//console.log("relation == " + relation + " ratio == " + ratio + " subTargetY == " + subTargetY);
						
						//this.style.marginTop = subTargetY + "px";
						
						$(this).css("marginTop",  (subTargetY-50) + "px");
					});
					
				});			
			}
	}); 

function getMyDamnParralaxRatio(slide, viewportHeight, viewportTop) {
	var slideHeight = slide.innerHeight();
	var slideTop = slide.position().top;
	var slideMarginTop = parseInt(slide.css("marginTop"), 10);
	var ratio;
	ratio = (slideTop - viewportTop + slideMarginTop) / viewportHeight;
	return ratio;
}


<!-- Get the current width & height of the page -->
function getWindowSize() {
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }


  return [myWidth, myHeight];
  //window.alert( 'Width = ' + myWidth );
  //window.alert( 'Height = ' + myHeight );
  
  
}