document.observe("dom:loaded", function() {
	Cufon.replace('.cf',{hover: true});
	$$(".block").invoke("observe","click",extendLink);
	$$(".datepicker").invoke("observe","focus",initCal);
	
	var l 	= new doImpression();
	var b	= new profitentBestellen();
	var c	= new showCase();
	var w	= new winkelwagen();
	var n	= new nieuwsBerichten();

	if($("19_Verzending") != null) $$("#19_Verzending input").invoke("observe","change",updateKosten);
	if($("26_afleveradres") != null) $$("#26_afleveradres input").invoke("observe","change",toggleAfleveradres);
	if($("13_woonplaats") != null) $("13_woonplaats").observe("blur",berekenAfstand);
	if($("24_woonplaats") != null) $("24_woonplaats").observe("blur",berekenAfstand);
	
	if($("26_afleveradres")!= null){
		$("26_afleveradres").down().observe("change",berekenAfstand);
	}
	
	var film = new bedrijfsFilmPartyluxe();
});

var bedrijfsFilmPartyluxe = Class.create({
	initialize: function(){
		
		$("partyluxeBedrijfsfilm").observe("click",this.createLayer.bind(this));

	},
	createLayer:function(event){
		event.stop();
		this.overlay 	= new overlay();
		this.loadMovie();
	},
	loadMovie: function(){
		//center vertical
		this.overlay.overlayBox.update('<iframe width="840" height="570" src="http://www.youtube.com/embed/RWGuxpJcy6I?autoplay=1&loop=1" frameborder="0" allowfullscreen></iframe>');
		
		this.overlay.showInner();
      }
});

function berekenAfstand(event){
	var el = Event.element(event);
	
	var fv = $("form1295620304289").serialize(true);
	var cb = fv["19_Verzending"];
	
//	alert(cb);
	if(cb == "Afhalen"){
		new Ajax.Request("pages/check_new_amount.php",{
			parameters: "type=afhalen",
			onComplete: function(t){
				var r = t.responseText;
				$("ordertotaal").update(r);
			}
		});
		
		return;
	};
	
	var pc = $F("12_postcode");
	var wp = $F("13_woonplaats");

	var	activePC = $("12_postcode");
	
	if($("26_afleveradres").down().checked == true && $F("23_postcode") != "" && $F("24_woonplaats") != null){
		var pc = $F("23_postcode");
		var wp = $F("24_woonplaats");
		
		activePC = $("23_postcode");
	}
	
	new Ajax.Request("pages/winkelwagen/bereken_afstand.php",{
		parameters: "pc="+pc+"&wp="+wp,
		onComplete: function(trsp){
			var resp = trsp.responseText;
			if(resp == 0){
				
				var tt = new toolTip("Er is <strong>geen adres gevonden</strong> op ingevoerde postcode: "+pc+"<br> Vul uw postcode opnieuw in.");
				var pos = activePC.cumulativeOffset();
				tt.setPosition(pos);	
				
				activePC.addClassName("missed");
				
				return;
			}
			activePC.removeClassName("missed");
			
			

			new Ajax.Request("pages/check_new_amount.php",{
				parameters: "type=Bezorgen",
				onComplete: function(t){
					var r = t.responseText;
					$("ordertotaal").update(r);
				}
			});
			
		}
	});
}

function initCal(event){
	var el = Event.element(event);
	Calendar.setup({
		dateField: el,
		triggerElement: el,
		dateFormat: '%A %d %B %Y'
	});
}
function toggleAfleveradres(){
	$("alternatiefAdres").toggle();
}

function updateKosten(event){
	var el = Event.element(event)
	new Ajax.Request("pages/check_new_amount.php",{
		parameters: "type="+$F(el),
		onComplete: function(t){
			var r = t.responseText;
			$("ordertotaal").update(r);
		}
	});
}

var nieuwsBerichten = Class.create({
	initialize: function(){
		this.timer			= null;
		this.speed			= 0.5;	
		this.interval		= 6000;
		this.currentCount	= 0;
		
		this.berichten		= $('nieuwsberichten');
		this.currentBericht	= this.berichten.down();
		this.nextBericht	= this.berichten.down().next();
		this.itemCount		= $$('#nieuwsberichten .bericht').length-1;
		this.selector		= $("nbSelector");
		
		this.timer = setTimeout(function(){
			this.fadeCurrent();
		}.bind(this),this.interval);
		
		this.observeClicks();
		
	},
	fadeCurrent: function(){
		new Effect.Fade(this.currentBericht,{
			duration:this.speed,
			afterFinish: function(){
				this.showNext();
				this.updateSelector();		
			}.bind(this)
		});
	},
	showNext: function(){
		new Effect.Appear(this.nextBericht,{
			duration:this.speed,
			afterFinish: function(){
				this.currentBericht.removeClassName("active"); 
				this.nextBericht.addClassName("active");
				
				this.currentCount++;
				this.createInterval();
				this.resetVars();
			//	this.updateText();
			}.bind(this)
		});
	},
	createInterval: function(){
		this.timer 	= setTimeout(function(){
			clearInterval(this.timer);
			this.timer = null;
			this.fadeCurrent();
		//	alert("test");
		}.bind(this),this.interval);
	},
	resetVars: 	function(){
		if(this.currentCount == this.itemCount){
			this.currentBericht 	= this.nextBericht;
			this.nextBericht 		= this.berichten.down();
			this.currentCount		= -1;
		}else{		
			this.currentBericht 	= this.nextBericht;
			this.nextBericht		= this.berichten.down().next(this.currentCount);
		}
	},
	updateSelector: function(){
		$$('#nbSelector a').invoke('removeClassName','active');
		if( this.currentCount == -1){
			this.selector.down(1).addClassName('active');
		}else{
			this.selector.down().next(this.currentCount).down().addClassName('active');
		}
	},
	observeClicks: 	function(){
		
		$$('#nbSelector a').invoke('observe','click',function(event){
			Event.stop(event);
			
			var element = Event.element(event);
			var id		= parseInt(element.id.replace("bericht",""));
		
			// clear interval
			clearInterval(this.timer);
			this.timer = null;
			
			$$('#nbSelector a').invoke('removeClassName','active');
			element.addClassName('active');
			
			// active case
			var activeItem 	= $$('#nieuwsberichten .active');
			
			if(id == 0) var clickedItem = this.berichten.down();
			else var clickedItem = this.berichten.down().next(id-1);
			
			// fade current item
			new Effect.Fade(activeItem[0] ,{
				duration:this.speed,
				afterFinish: function(){
					activeItem[0].removeClassName('active');
					clickedItem.addClassName('active');
					
					new Effect.Appear(clickedItem,{
						duration:this.speed,
						afterFinish: function(){
							//start observing selector clicks
							this.currentCase = clickedItem;
						//	this.updateText();
							
							this.observeClicks();
						}.bind(this)
					});
					
				}.bind(this)
			});

		}.bind(this))
			
	}
});

var winkelwagen = Class.create({
	initialize: 	function() {
		if($("productoverzicht") == null) return;
		this.duration = 0.5;
		$$(".bestellijst .delete").invoke("observe","click",this.confirmDelete.bind(this));
		$$(".bestellijst .productAmount").invoke("observe","change",this.updateAmount.bind(this));
	},
	confirmDelete: function(event){
		Event.stop(event);
		var el 	= Event.element(event);
		var pid = el.id; 
		var cf = confirm("Weet je zeker dat je dit product wilt verwijderen?");
		
		if(cf == true) this.doDelete(pid);
	},
	doDelete: function(pid){
		new Ajax.Request("pages/delete_from_basket.php",{
			parameters: "pid="+pid,
			onComplete: function(t){
				var r = t.responseText.split("||");
				if(r[0] !=  "ok") return alert("Er is iets fout gegaan met verwijderen, probeer het opnieuws");
				new Effect.DropOut("li"+pid,{duration:this.duration});

				this.updateBestellijst(r[1]);
			}.bind(this)
		});
	},
	updateBestellijst: function(total){
		$("bestellijstTotal").down().update(total);
	},
	updateAmount: function(event){
		var el 			= Event.element(event);
		var aantal 		= $F(el);
		var stukprijs	= el.up().next().title;
		var uid			= el.up(1).id.replace("li","");
		
		var total 		= aantal*stukprijs;
		el.up().next(1).update(this.updateProductPrice(total));
		
		new Ajax.Request("pages/update_product_amount.php",{
			parameters: "uid="+uid+"&stukprijs="+stukprijs+"&aantal="+aantal,
			onComplete: function(t){
				var r = t.responseText.split("||");
				if(r[0] !=  "ok") return alert("Er is iets fout gegaan met verwijderen, probeer het opnieuws");
				this.updateBestellijst(r[1]);
			}.bind(this)
		});
	},
	updateProductPrice: function(price){
		return price.toFixed(2).replace('.',',');
	}
});
var showCase = Class.create({
	initialize: 	function() {
		if($('showcase') == null) return;		
		
	
		this.timer			= null;
		this.cases			= $('cases');
		this.currentCase 	= this.cases.down();
		this.nextCase 		= this.cases.down().next();
		this.itemCount		= $$('#cases .case').length-1;
		this.currentCount	= 0;
		this.selector		= this.cases.next().down();
		this.textBlock		= this.selector.next();
		this.clickedItem	= null;
		this.speed			= 0.5;	
		this.interval		= 6000;	
			
		this.timer = setTimeout(function(){
			this.fadeCurrent();
		}.bind(this),this.interval);
		
		this.observeClicks();
	},
	fadeCurrent: 	function(){
		new Effect.Fade(this.currentCase,{
			duration:this.speed,
			afterFinish: function(){
				this.showNext();
				this.updateSelector();		
			}.bind(this)
		});
	},
	showNext: 		function(){
		new Effect.Appear(this.nextCase,{
			duration:this.speed,
			afterFinish: function(){
				this.currentCase.removeClassName("active"); 
				this.nextCase.addClassName("active");
				
				this.currentCount++;
				this.createInterval();
				this.resetVars();
			}.bind(this)
		});
	},

	createInterval: function(){
		this.timer 	= setTimeout(function(){
			clearInterval(this.timer);
			this.timer = null;
			this.fadeCurrent();
		}.bind(this),this.interval);
	},
	resetVars: 	function(){
		if(this.currentCount == this.itemCount){
			this.currentCase 	= this.nextCase;
			this.nextCase 		= this.cases.down();
			this.currentCount	= -1;
		}else{		
			this.currentCase 	= this.nextCase;
			this.nextCase		= this.cases.down().next(this.currentCount);
		}
	},
	updateSelector: function(){
		$$('#showcase .selector a').invoke('removeClassName','active');
		if( this.currentCount == -1){
			this.selector.down(1).addClassName('active');
		}else{
			this.selector.down().next(this.currentCount).down().addClassName('active');
		}
	},
	observeClicks: 	function(){
		
		$$('#showcase .selector a').invoke('observe','click',function(event){
			Event.stop(event);
			
			var element = Event.element(event);
			var id		= parseInt(element.id.replace("case",""));
		
			// clear interval
			clearInterval(this.timer);
			this.timer = null;
			
			$$('#showcase .selector a').invoke('removeClassName','active');
			element.addClassName('active');
			
			// active case
			var activeItem 	= $$('#cases .active');
			
			if(id == 0) var clickedItem = this.cases.down();
			else var clickedItem = this.cases.down().next(id-1);
			
			// fade current item
			new Effect.Fade(activeItem[0] ,{
				duration:this.speed,
				afterFinish: function(){
					activeItem[0].removeClassName('active');
					clickedItem.addClassName('active');
					
					new Effect.Appear(clickedItem,{
						duration:this.speed,
						afterFinish: function(){
							//start observing selector clicks
							this.currentCase = clickedItem;
							this.updateText();
							
							this.observeClicks();
						}.bind(this)
					});
					
				}.bind(this)
			});

		}.bind(this))
			
	}
});
	
var profitentBestellen = Class.create({
	initialize: function(){
		
		if($("productTotaal") == null) return;

		this.totalWrapper	= $("productTotaal");
		this.productName	= $F("productName");
		this.formaat		= $F("productFormaat");
		this.artNo			= $F("artikelnummer");
		this.gewicht		= $F("artikelgewicht");
		
		this.useColors		= ($("colorSelector") != null) ? true : false;
		this.orgPrice		= parseFloat(this.totalWrapper.title.replace(',','.'));
		this.amount			= 1;
		this.selectedSize	= ($("productSize")) ? $("productSize").options[0].text : "";

		this.sizePrice		= ($("productSize")) ? $F("productSize") : "";

		this.opts			= "";
		this.total 			= this.orgPrice;
		this.img			= $("impressionWrapper").down().src.split("/").last().replace("l","cms_small");
		
		$("naarWW").observe("click",this.checkProduct.bind(this));
		$("productAmount").observe("change",this.checkPrice.bind(this));
		$("productSize").observe("change",this.checkSize.bind(this));
		
		$$(".opties .inWW").invoke("observe","click",this.addAccessoires.bind(this));
	},
	checkPrice: function(event){
		var el		= Event.element(event);
		this.amount	= $F(el);
		this.total	= this.amount*this.orgPrice;
		this.updateProductPrice(this.total);
	},
	checkSize: function(event){
		var el				= Event.element(event);
		// prijs van de optie
		this.sizePrice		= $F(el);
	
		//naam van de geselcteerde optie
		this.selectedSize	= el.options[el.selectedIndex].text;
		
		this.total			= this.amount*this.sizePrice;
		this.updateProductPrice(this.total);

		this.orgPrice	= parseFloat(this.sizePrice);
	},
	updateProductPrice: function(price){
		this.totalWrapper.innerHTML = "&euro; "+parseInt(price).toFixed(2).replace('.',',');
	},
	checkProduct: function(){
		this.postToSession();
		
		// all ok!
		var tt = new toolTip("<strong>"+this.productName+"</strong> is toegevoegd aan uw winkelwagen. <a href='winkelwagen.html' class='toww'>Bekijk de inhoud van uw winkelwagen</a>");
		var pos = $("naarWW").cumulativeOffset();
		tt.setPosition(pos);		
	},
	postToSession: function(){		
		new Ajax.Request("pages/tosession.php",{
			parameters: "product="+this.productName+"&size="+this.selectedSize+"&sizePrice="+this.sizePrice+"&total="+this.total+"&amount="+this.amount+"&stukprijs="+this.orgPrice+"&img="+this.img+"&formaat="+this.formaat+"&artno="+this.artNo+"&gewicht="+this.gewicht,
			onComplete: function(t){
				var r = t.responseText;
				this.resetProduct();
				this.updateWinkelWagen(r);
			}.bind(this)
		});
	},
	updateWinkelWagen: function(aantal){
		var lbl = (aantal == 1) ? " product" : " producten";
		$("productaantal").update(aantal+lbl);
	},
	resetProduct: function(){
		// reset winkelwagen form
		$("naarWinkelwagen").reset();
		
		// pak product formaat prijs 
		if($("productSize")) this.orgPrice = $F("productSize");

		// update prijs blok met org prijs
		this.updateProductPrice(this.orgPrice);
	},
	addAccessoires: function(event){
		Event.stop(event);
		var el 	= Event.element(event);
		var p	= el.id.split("||");
		
		var productName = el.previous(1).innerHTML;
		var orgPrice 	= p[0];
		var img			= el.previous(2).src.split("/").last();
		var total		= orgPrice;
		var artNo		= p[1];
		var gewicht		= p[2];
		
		new Ajax.Request("pages/tosession.php",{
			parameters: "product="+productName+"&total="+total+"&amount=1&stukprijs="+orgPrice+"&img="+img+"&artno="+artNo+"&gewicht="+gewicht,
			onComplete: function(t){
				var r = t.responseText;
				this.resetProduct();
				this.updateWinkelWagen(r);
			}.bind(this)
		});
		
		// all ok!
		var tt = new toolTip("<strong>"+productName+"</strong> is toegevoegd aan uw winkelwagen. <a href='winkelwagen.html' class='toww'>Bekijk de inhoud van uw winkelwagen</a>");
		var pos = el.cumulativeOffset();
		tt.setPosition([ (pos[0]-400), pos[1]-25 ]);
		
	}
});



function extendLink(event){
	var el		= Event.element(event);
	if(el.tagName == "CANVAS") el = el.up(2);
	else if(el.tagName == "CUFON" || el.tagName == "A") el = el.up(1);
	else if(!el.hasClassName("block")) el = el.up();
		
	// the org link 
	var link = el.down().next(2).down().href;	
	window.location = link;

}

// product image impression
var doImpression = Class.create({	
	initialize: function() {
		if($('impressionWrapper') == null) return;
				
		this.effectTime		= 1;
		this.wrapper		= $('impressionWrapper').down();
		this.path			= "content/";
		
		$$('.beelden li img').invoke("observe","click",function(event){
			this.init(Event.element(event));
		}.bind(this));
		
	},
	init: function(el) {
		this.element 		= el;
		if(this.element.tagName == "A") el = el.down();
		
		this.imgSrc = this.element.src.split("/").last().replace("cms_small","l");


		this.path2image		= this.path + this.imgSrc;
		this.loadImage();
		this.updateSelector();
	},
	updateSelector: function(){
		$$(".beelden li img").invoke("removeClassName","active");
		this.element.addClassName("active");
	},
	loadImage : function(){
		this.preLoad = new Image();

        this.preLoad.onload = (function(){
			this.fadeCurrent();	
        }).bind(this);

        this.preLoad.src = this.path2image;

	},
	fadeCurrent: function(){
		new Effect.Fade(this.wrapper,{duration:this.effectTime/2,
			afterFinish: function(){
				this.updateSrc();
			}.bind(this)
		});		
	},
	updateSrc: function(){
		this.wrapper.src = this.preLoad.src;
		this.wrapper.className = this.showBorder;
		new Effect.Appear(this.wrapper,{duration:this.effectTime/2});
	}	
});
var toolTip = Class.create({
	initialize: function(tip) {
		if($('toolTip') == null){
			$$("body").first().insert(
		      new Element('div',{ id: 'toolTip' })
		    );
		}
		this.tip  	= tip;
		this.delay	= 5000;
		this.tipDiv = $('toolTip'); 
		this.tipDiv.hide();
		this.tipDiv.update(this.tip);
		this.showTip();
		this.timer = null;
		clearTimeout(this.timer);
    	
	},
	showTip: function(){
		new Effect.Appear(this.tipDiv,{duration:0.3,delay:0.2});
		
		//setTimeout(function(){
		//	new Effect.Highlight(this.tipDiv,{ startcolor: '#21759B',endcolor: '#90bacd'});
		//}.bind(this),1300);
		
		//new Effect.Appear(this.tipDiv,{duration:0.3, delay:0.5});
		this.timer = setTimeout(function(){
			this.fadeTip();
		}.bind(this), this.delay );
	},
	fadeTip: function(){
		new Effect.Fade(this.tipDiv,{duration:0.3});
		this.timer = setTimeout( function(){
			this.tipDiv.remove();
		}.bind(this), 300);
	},
	cancelTip: function(){
    	if(!this.timer) return;
    	clearTimeout(this.timer);
    	this.tipDiv.remove();
  	},
	setPosition: function(pos){
		var x = pos[1];
		var y = pos[0];
		this.tipDiv.setStyle({
			position: 'absolute',
			top: (x-8)+'px',
			left: (y+150) + 'px',
			width: 'auto'
		});	
	},
	setType: function(classname){
		this.tipDiv.addClassName(classname);
	}
});

function validateForm(formid){
	
	var inputs 		= $(formid).getInputs("text");
	var cbs 		= $(formid).getInputs("radio");
	var form_values = $(formid).serialize(true);
	var reg 		= /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
	var namefield 	= /mail/
	var missed 		= false;
	var fieldCheck	= "";
	var mail		= "";

	inputs.each(function(i){
		if(i.hasClassName("required") && namefield.test(i.name) && reg.test($F(i)) == false){
			i.addClassName("missed");
			missed 		= true;
			mail 		= "- Het ingevulde email adres is niet geldig<br>";
		}
		else if(i.hasClassName("required") && $F(i) == ""){
			i.addClassName("missed");
			missed 		= true;
			fieldCheck 	= "- Niet alle verplichte velden zijn ingevuld<br>";
		}else i.removeClassName("missed");
		
	});
	
	var groups = $$("#"+formid+" .block");
	groups.each(function(g){
		var count = 0;
		var gid = g.id;
		if(!g.hasClassName("required")) return;
		
		var l 	= $$("#"+gid+" input");
		l.each(function(item){
			if(item.checked == true) count++;
		});		
		

		if(count == 0){
			missed = true;
			g.addClassName("missed");
		}else g.removeClassName("missed");
	});

	if(missed == true){
	//	var tt = new toolTip(fieldCheck+mail);
	//	var pos = $("submit"+formid.replace("form","")).cumulativeOffset();
	//	tt.setPosition(pos);
		
		$('msg').update(fieldCheck+mail).addClassName("missed");
		return false;
	}	
	
	
}

var debug = Class.create({
	initialize: function(content){
		if($("debug") == null) this.createDiv();
		$("debug").update(content);
	},
	createDiv: function(){
		$$("body").first().insert(
	      new Element('div',{ id: 'debug' })
	    );
	}	
});

var overlay = Class.create({
	initialize: function(element){
		if($('overlay') == null){
			$$("body").first().insert(
		      new Element('div',{ id: 'overlay' })
		    );
			$$("body").first().insert(
		      new Element('div',{ id: 'overlayWrapper' })
		    );
		}
		this.overlayWrapper	= $('overlayWrapper');
		this.maincontainer	= $('maincontainer');
		this.overlayWrapper.hide();
		
		this.box 	= new Element("div",{id:"overlayBox"});
		this.close 	= new Element("a",{"class":"close","href":"#"}).observe("click",this.closeOverlay.bind(this));
		this.overlayWrapper.insert({top:this.box}).insert({top:this.close});
		
		this.element  	= element;
		this.delay		= 2000;
		this.overlay 	= $('overlay'); 
		this.overlayBox	= $('overlayBox'); 
		this.overlay.hide();
		this.showOverlay();
	},
	showOverlay: function(){this.overlay
		var arrayPageSize 	= this.getPageSize();
		var overlaySize 	= this.overlayWrapper.getDimensions();
		this.overlay.setStyle({ height: arrayPageSize[1] + 'px' });
		//this.maincontainer.setStyle({ height: arrayPageSize[1] + 'px' });
		
		new Effect.Appear(this.overlay,{duration:0.5, from:0.0, to:0.8});
		this.overlay.observe('click',this.closeOverlay.bind(this))
	},
	showInner: function(){
		new Effect.Appear(this.overlayWrapper,{delay:0.5,duration:0.5});
	},
	updateOverlay: function(update){
		new Ajax.Updater(this.overlayBox,'pages/'+update,{
			onComplete: function () {
				$$('.radio').invoke('observe','click', checkRadio);
			}
		});
	},
	closeOverlay: function(){
	//	var msg = confirm("Weet je zeker dat je dit overzicht wilt sluiten?")
	//	if(msg == true){
			new Effect.Fade(this.overlayWrapper,{duration:0.3, from:1, to:0.0});
			new Effect.Fade(this.overlay,{delay:0.5, duration:0.5, from:0.8, to:0.0});
			timer = setTimeout( function(){
				$('overlayWrapper').remove();
				$('overlay').remove();
			}, 600);
	//	}
	},
	updateSize: function(){
		var arrayPageSize 	= this.getPageSize();
		var overlaySize 	= this.overlayWrapper.getDimensions();
		this.overlay.setStyle({ height: arrayPageSize[1] + 'px' });
	},
	getPageSize: function(){
		var xScroll, yScroll;
		
		if (window.innerHeight && window.scrollMaxY) {	
			xScroll = window.innerWidth + window.scrollMaxX;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}
		
		var windowWidth, windowHeight;
		
		if (self.innerHeight) {	// all except Explorer
			if(document.documentElement.clientWidth){
				windowWidth = document.documentElement.clientWidth; 
			} else {
				windowWidth = self.innerWidth;
			}
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) { // other Explorers
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}	
		
		// for small pages with total height less then height of the viewport
		if(yScroll < windowHeight){
			pageHeight = windowHeight;
		} else { 
			pageHeight = yScroll;
		}
	
		// for small pages with total width less then width of the viewport
		if(xScroll < windowWidth){	
			pageWidth = xScroll;		
		} else {
			pageWidth = windowWidth;
		}

		return [pageWidth,pageHeight];
		
	}
});