var imageFolder = "images";
var scrollMax = 1;
var scrollPosition = 0;
var Cutout = function(containerId){
	this.name = "Cutout";
	this.resetSpeed = 100;
	this.size = window.viewportSize();
	this.scroll = window.getScroll();
	this.pagePosition = {page:0,position:1};
	this.pages = Array();
	this.currentPage = null;
	this.nextPage = null;
	this.previousPage = null;
	this.imagesToLoad = 0;
	this.imagesLoaded = 0;
	this.loadingProgress = 0.00;
	this.documentBody = document.getElementById("documentBody");
	this.documentBody.height = 0;
	this.container = document.getElementById(containerId);
	this.container.parentNode.style.position = "relative";
	this.container.style.position = "absolute";
	this.container.style.top = "0px";
	this.container.style.left = "0px";
	this.container.style.overflow = "hidden";
	this.container.style.position = "fixed";
	this.targetScroll = 0;
	this.scrollingDown = false;
	this.scrollingUp = false;
	this.navigator = new Navigator(this);
	this.navigator.create();
	this.doPageLock = false;
	this.currentSpeed = 200;
	this.visiblePages = Array();
	//this.container.style.display = "none";
	this.speed = 0;
	this.checkLoadingProgress = function(){
		this.loadingProgress = this.imagesLoaded / this.imagesToLoad;
		clearDebug();
		debug(parseInt(this.loadingProgress * 100));
		
		if (this.loadingProgress == 1){
			//this.container.style.display = "block";
		}
		//this.onload();
	}
	this.appendPage = function(height,width){
		this.documentBody.height += height;
		this.documentBody.style.height = this.documentBody.height + "px";
		var pagePosition = this.pages.length;
		var newPage = new Page(pagePosition,this,height,width);
		this.navigator.appendPage(pagePosition);
		this.pages[pagePosition] = newPage;
		return newPage;
	}
	this.animationCallback = function(value){
		this.speed = Math.abs(this.scroll.y - value);
		this.scroll.y = value;
		var absolutePosition = this.scroll.y / this.size.height;
		this.setPages();
	}
	this.animationCallbackGet = function(){
		return this.scroll.y;
	}
	this.animateScroll = function(){
		this.scrollAnimator = new animateProperties();
		this.scrollAnimator.configure(this,{
			functionName:"animationCallback",
			getCurrentFunction:"animationCallbackGet",
		},this.currentSpeed,this.targetScroll.y,this.scroll.y);
		this.currentSpeed = this.resetSpeed
		this.scrollAnimator = animateProperty(this.scrollAnimator);
	}
	this.generatePagePosition = function(){
		this.size = window.viewportSize();
		//this.scroll = this.targetScroll;
		this.animateScroll();
	}
	this.setPages = function(){
		this.setVisiblePages();
		if (this.content){
			this.content.style.top = -(this.scroll.y - this.targetScroll.y)+ "px";
		}
		for (pageIndex in this.visiblePages){
			this.visiblePages[pageIndex].rePositionEvent();
		}
	}
	this.setVisiblePages = function(){
		var visiblePages = Array();
		var top = this.scroll.y;
		var bottom = this.scroll.y + this.size.height;
		this.currentPageIndex = null;
		for (pageIndex in this.pages){
			var page = this.pages[pageIndex];
			pageIndex = parseInt(pageIndex);
			var pageBottom = page.topOffset + page.height;
			var pageTop = page.topOffset;
			if (pageBottom > top){
				if (pageTop < bottom){
					if (this.currentPageIndex == null){
						this.currentPageIndex = pageIndex;
						this.navigator.checkCurrentPage(this.currentPageIndex);
					}
					visiblePages[pageIndex] = page;
					if (!(this.visiblePages[pageIndex])){
						page.showEvent();
					}
				}else{
					if (this.visiblePages[pageIndex]){
						page.hideEvent();
					}
				}
			}else{
				if (this.visiblePages[pageIndex]){
					page.hideEvent();
				}
			}
		}
		this.visiblePages = visiblePages;
	}
	this.snapToPage = function(){
		if (this.doPageLock){
			doFunctionIn(this.pages,"checkSnapTo");
		}else{	
			this.doPageLock = true;
		}
	}
	this.setSize = function(){
		this.container.style.width = this.size.width + "px";
		this.container.style.height = this.size.height + "px";
		doFunctionIn(this.pages,"resizeEvent");
	}
	this.setSize();
	this.scrollAnimationRunning = false;
	this.currentScrollPosition = 0;
	this.requestedScrollPos = 0;
	this.getPreviousPagesHeight = function(pageIndex){
		pageIndex--;
		var height = 0;
		while(pageIndex >= 0){
			height += this.pages[pageIndex].height;
			pageIndex--;
		}
		return height;
	}
	this.onscroll = function(){
		this.targetScroll = window.getScroll();
		if (this.content){
			this.content.style.top = -(this.scroll.y - this.targetScroll.y)+ "px";
		}
		if (this.targetScroll.y > this.scroll.y){
			this.scrollingDown = true;
			this.scrollingUp = false;
		}else{
			this.scrollingDown = false;
			this.scrollingUp = true;
		}
		this.snapToPage();
		this.generatePagePosition();
		this.setPages();
	}
	this.onLoad = function(){
		this.content = document.getElementById('primaryContentContainer');
		this.generatePagePosition();
		this.setSize();
		this.setPages();
	}
	this.onResize = function(){
		this.generatePagePosition();
		this.setSize();
		this.setPages();
	}
	appendToOnScroll("onscroll",this);
	appendToOnLoad("onLoad",this);
	appendToOnResize("onResize",this);
	//post setup functions
	this.generatePagePosition();
}
var Page = function(pagePosition,cutout,height,width){
	this.layers = Array();
	this.videos = Array();
	this.width = width;
	this.height = height;
	this.size = {width:0,height:0};
	this.position = pagePosition;
	this.cutout = cutout;
	this.topOffset = this.cutout.getPreviousPagesHeight(this.position);
	this.pageOffset = this.topOffset - this.cutout.scroll.y;
	this.crop = document.createElement("div");
	this.crop.setAttribute("id","pageCropContainer");
	this.crop.setAttribute("class","pageCropContainer"+(this.position + 1));
	this.crop.style.position = "absolute";
	this.crop.style.width = "100%";
	this.crop.style.overflow = "hidden";
	this.enableClipper = false;
	this.appendVideo = function(video){
		this.videos[this.videos.length] = video;
	}
	if (this.enableClipper){
		this.clipperImageTop = new Image();
		this.clipperImageTop.parent = this;
		this.clipperImageTop.onload = function(){
			this.parent.cutout.imagesLoaded++;
			this.parent.cutout.checkLoadingProgress();
		}
		this.cutout.imagesToLoad++;
		this.clipperImageTop.src = "images/cropTop.png";
		this.clipperImageTop.style.zIndex = "950";
		this.clipperImageTop.style.position = "absolute";
		this.clipperImageTop.style.visibility = "hidden";
		this.clipperImageTop.style.top = "0px";
		this.clipperImageTop.style.height = "50px";
		this.clipperImageTop.style.width = "100%";
		this.crop.appendChild(this.clipperImageTop);
		this.clipperImageBottom = new Image();
		this.clipperImageBottom.parent = this;
		this.clipperImageBottom.onload = function(){
			this.parent.cutout.imagesLoaded++;
			this.parent.cutout.checkLoadingProgress();
		}
		this.cutout.imagesToLoad++;
		this.clipperImageBottom.src = "images/cropBottom.png";
		this.clipperImageBottom.style.zIndex = "950";
		this.clipperImageBottom.style.position = "absolute";
		this.clipperImageBottom.style.visibility = "hidden";
		this.clipperImageBottom.style.height = "50px";
		this.clipperImageBottom.style.width = "100%";
		this.crop.appendChild(this.clipperImageBottom);
	}
	this.container = document.createElement("div");
	this.container.setAttribute("id","pageContainer");
	this.container.style.position = "relative";
	if (this.width){
		this.container.style.width = this.width + "px";
	}
	this.crop.appendChild(this.container);
	this.cutout.container.appendChild(this.crop);
	this.checkSnapTo = function(){
		if (this.cutout.scrollingDown){
			if ((this.cutout.scroll.y < this.topOffset) && (this.cutout.targetScroll.y > this.topOffset)){
				window.scrollTo(0,this.topOffset);
				this.snappedToPage();
			}
		}else{
			if ((this.cutout.scroll.y > this.topOffset) && (this.cutout.targetScroll.y < this.topOffset)){
				window.scrollTo(0,this.topOffset);
				this.snappedToPage();
			}
		}
	}
	this.snappedToPage = function(){
		this.playVideos();
	}
	this.appendLayer = function(imageSrc,left,top,topMovement){
		if (!(left)){left = 0;}
		if (!(top)){top = 0;}
		var newLayer = new Layer(imageSrc,left,top,this.layers.length,this,topMovement);
		this.layers[this.layers.length] = newLayer;
		return newLayer;
	}
	this.resizeEvent = function(){
		this.topOffset = this.cutout.getPreviousPagesHeight(this.position);
		var left = (this.container.offsetWidth - this.cutout.size.width) / 2;
		this.container.style.left = -left + "px";
		this.crop.style.height = this.height + "px";
		if (this.enableClipper){
			//this.clipperImageTop.style.width = this.cutout.size.width + "px";
			this.clipperImageBottom.style.top = (this.height - this.clipperImageBottom.offsetHeight) + "px";
		}
	}
	this.resizeEvent();
	this.rePositionEvent = function(){
		var top = (this.container.offsetHeight - this.height) / 2;
		this.pageOffset = this.topOffset - this.cutout.scroll.y;
		this.crop.style.top = this.pageOffset + "px";
		this.container.style.top = -(this.pageOffset + top) + "px";
		doFunctionIn(this.layers,"rePosition");
	}
	this.hideEvent = function(){
		if (this.enableClipper){
			this.clipperImageTop.style.visibility = "hidden";
			this.clipperImageBottom.style.visibility = "hidden";
		}
		doFunctionIn(this.layers,"hide");
		this.stopVideos();
	}
	this.showEvent = function(){
		if (this.enableClipper){
			this.clipperImageTop.style.visibility = "visible";
			this.clipperImageBottom.style.visibility = "visible";
		}
		doFunctionIn(this.layers,"show");
	}
	this.playVideos = function(){
		doFunctionIn(this.videos,"play");
	}
	this.stopVideos = function(){
		doFunctionIn(this.videos,"stop");
	}
}
var Layer = function(imageSrc,left,top,index,page,topMovement){
	this.src = imageSrc;
	this.left = left;
	this.top = top;
	this.index = index;
	this.page = page;
	this.topMovement = topMovement;
	this.container = document.createElement("div");
	this.container.setAttribute("class","layerImage layerImage"+this.index);
	this.container.setAttribute("id","layerPageContainer");
	if (this.index != 0){
		this.container.style.position = "absolute";
	}else{
		this.container.style.position = "relative";
	}
	if (this.src){
		this.image = new Image;
	}else{
		this.image = document.createElement("div");
	}
	this.image.style.position = "relative";
	this.image.style.left = this.left + "px";
	this.image.style.top = this.top + "px";
	if (this.index > 0){
		this.container.style.zIndex = 900 - (this.index + 1);
		this.image.style.zIndex 	= 900 - (this.index + 1);
	}else{
		this.container.style.zIndex = this.index + 1;
		this.image.style.zIndex 	= this.index + 1;
	}
	if (this.topMovement){
		this.container.style.zIndex = 900;
		this.image.style.zIndex 	= 900;
	}
	this.image.parent = this;
	this.onLoadImage = function(){
		this.parent.page.cutout.imagesLoaded ++;
		this.parent.page.cutout.checkLoadingProgress();
		if (this.offsetWidth > this.parent.page.size.width){
			this.parent.page.size.width = this.offsetWidth;
		}
		if (this.offsetHeight > this.parent.page.height){
			this.parent.page.size.height = this.offsetHeight;
		}
	}
	this.image.onload = this.onLoadImage;
	this.image.src = imageFolder+"/"+this.src;
	this.page.cutout.imagesToLoad++;
	this.container.appendChild(this.image);
	this.page.container.appendChild(this.container);
	//called every frame
	this.rePosition = function(){
		if (this.topMovement == null){
			var thisLayerScrollSpeed = ( this.page.layers.length - this.index) * (scrollMax / this.page.layers.length);
		}else{
			var thisLayerScrollSpeed = this.topMovement;
		}
		//debug("L:"+this.index + " Src: " + this.src +" Val: " + thisLayerScrollSpeed);
		var top = this.page.pageOffset * thisLayerScrollSpeed;
		this.container.style.top = top + "px";
	}
	this.hide = function(){
		this.image.style.display = "none";
	}
	this.show = function(){
		this.image.style.display = "block";
	}
	this.hide();
}






var Navigator = function(cutout){
	this.cutout = cutout;
	this.container = document.createElement("div");
	this.container.id = "navigator";
	this.container.style.zIndex = "10000";
	this.container.style.position = "fixed";
	this.links = Array();
	this.create = function(){
		this.cutout.container.appendChild(this.container);
	}
	this.appendPage = function(index){
		var link = document.createElement("a");
		link.href = "#";
		link.parent = this;
		link.index = index;
		link.onclick = function(){
			var offset = this.parent.cutout.pages[this.index].topOffset;
			var multiplier = Math.abs(this.parent.lastIndex - this.index);
			if (multiplier < 0){multiplier = -multiplier};
			this.parent.cutout.currentSpeed = this.parent.cutout.resetSpeed * multiplier;
			this.parent.cutout.doPageLock = false;
			this.parent.cutout.targetScroll.y = offset;
			window.scrollTo(0,offset);
			return false;
		}
		var image = new Image();
		link.image = image;
		if (link.index == 0){
			image.src = "images/active.png";
		}else{
			image.src = "images/inactive.png";
		}
		link.appendChild(image);
		this.container.appendChild(link);
		this.links[index] = link;
	}
	this.lastIndex = 0;
	this.checkCurrentPage = function(pageIndex){
		if (this.lastIndex != pageIndex){
			this.links[this.lastIndex].image.src = "images/inactive.png";
			this.links[pageIndex].image.src = "images/active.png";
			this.lastIndex = pageIndex;
		}
	}
}