// declare global variables
var contentFadeSpeed = 0.5;
var menuFadeSpeed = 0.2;
var arrowFadeSpeed = menuFadeSpeed;

var contentLinks = new Array();
contentLinks[0] = "content/ausstellungen.html"; // Wichtige Ausstellungen
contentLinks[1] = "content/oeffentlicheausstellungen.html"; // Ausstellungen im oeffentlichen Raum
contentLinks[2] = "content/weiterearbeiten.html"; // Reliefs aus Papier
contentLinks[3] = "content/arbeitenStahl.html"; // Arbeiten aus Stahl
contentLinks[4] = "content/biographie.html"; // Biographie
contentLinks[5] = "content/preise.html"; // Preise
contentLinks[6] = "content/aktuell.html"; // Aktuell
contentLinks[7] = "content/eisenlebt.html"; // Eisen lebt
contentLinks[8] = "content/kontakt.html"; // Kontakt
contentLinks[9] = "content/impressum.html"; // Impressum



// Wait for scripts to run until document is fully loaded
document.observe('dom:loaded', function() {
//	preloadImages();

	// initialize the first content
	contentLoader(contentLinks[3], arbeitenStahlActions);

	// observe menu item 'arbeiten'
	var arbeiten = $('menuitem01');
	arbeiten.observe('mouseover', function() {
		arbeitenMenu.appear({ duration: menuFadeSpeed });
	});
	
	// observe menu wrapper 'submenue arbeiten'
	var arbeitenMenu = $('menuwrapper01');
	arbeitenMenu.observe('mouseout', function(pEvent) {
		arbeitenMenu.fade({ duration: menuFadeSpeed });
	});
	
	arbeitenMenu.observe('click', function(pEvent) {
		var containerX = Position.page(arbeitenMenu)[0];
		var containerY = Position.page(arbeitenMenu)[1];
		var x = Event.pointerX(pEvent) - containerX - 8;
		var y = Event.pointerY(pEvent) - containerY - 4;
		if((x > 0 && y > 0) && (x < 126 && y < 29)) {
			contentLoader(contentLinks[2],reliefsPapierActions);
		}
		if((x > 0 && y >=29 ) && ( x < 126 && y < 57 )) {
			contentLoader(contentLinks[3], arbeitenStahlActions);
		}
	});
	
	// observe menu item 'biographie'
	var biographie = $('menuitem02');
	biographie.observe('click', function() {
		contentLoader(contentLinks[4]);
	});
	
	// observe menu item 'ausstellungen'
	var ausstellungen = $('menuitem03');
	ausstellungen.observe('mouseover', function() {
		ausstellungenMenu.appear({ duration: menuFadeSpeed });
	});
	
		// observe menu wrapper 'submenu ausstellungen'
	var ausstellungenMenu = $('menuwrapper02');
	ausstellungenMenu.observe('mouseout', function(pEvent) {
		ausstellungenMenu.fade({ duration: menuFadeSpeed });
	});
	
	ausstellungenMenu.observe('click', function(pEvent) {
		var containerX = Position.page(ausstellungenMenu)[0];
		var containerY = Position.page(ausstellungenMenu)[1];
		var x = Event.pointerX(pEvent) - containerX - 8;
		var y = Event.pointerY(pEvent) - containerY - 4;
		if((x > 0 && y > 0) && (x < 182 && y < 29)) {
			contentLoader(contentLinks[0], wichtigeAusstellungenActions);
		}
		if((x > 0 && y >=29 ) && ( x < 182 && y < 57 )) {
			contentLoader(contentLinks[1], oeffentlicheAusstellungenActions);
		}
	});
	
	
	// observe menu item 'preise'
	var preise = $('menuitem04');
	preise.observe('click', function() {
		contentLoader(contentLinks[5]);
	});
	
	// observe menu item 'aktuell'
	var aktuell = $('menuitem05');
	aktuell.observe('click', function() {
		contentLoader(contentLinks[6], aktuellActions);
	});
	
	// observe menu item 'eisen lebt'
	var kontakt = $('menuitem06');
	kontakt.observe('click', function() {
		contentLoader(contentLinks[7]);
	});
	
	// observe menu item 'kontakt'
	var kontakt = $('menuitem07');
	kontakt.observe('click', function() {
		contentLoader(contentLinks[8], kontaktActions);
	});
	
	// observe menu item 'impressum'
	var impressum = $('menuitem08');
	impressum.observe('click', function() {
		contentLoader(contentLinks[9], impressumActions);
	});
	
	wlbInitialize();

});


function contentLoader(pLink,pFunction) {
	$('contentwrapper').fade( { duration: contentFadeSpeed, afterFinish: function() {
		new Ajax.Updater("contentwrapper", pLink, { method: 'get', onComplete: function() {
			$('contentwrapper').appear( { duration: contentFadeSpeed } );
			pFunction();
		}});
	}});
}


var wichtigeAusstellungenActions = function() {
	var pfeilRechts = $('pfeil_rechts');
	var pfeilLinks = $('pfeil_links');
	var pageNr = 0;
	var maxPageNr = 3;		// actual number of pages minus 1
	var minPageNr = 0;

	pfeilRechts.observe('click', function() {
		if(maxPageNr >= pageNr + 1) pageNr++;
		var target = -955 * pageNr;
		new Effect.Move('pages_ausstellungen', { x: target, y: 162, mode: 'absolute' });
		if(pageNr !=0 ) {
			pfeilLinks.appear( { duration: arrowFadeSpeed } );
		}
		if(pageNr == maxPageNr) {
			pfeilRechts.fade( { duration: arrowFadeSpeed } );
		}
	});
	
	pfeilLinks.observe('click', function() {
		if(minPageNr <= pageNr - 1) pageNr--;
		var target = -955 * pageNr;
		new Effect.Move('pages_ausstellungen', { x: target, y: 162, mode: 'absolute' });
		if(pageNr != maxPageNr) {
			pfeilRechts.appear( { duration: arrowFadeSpeed } );
		}
		if(pageNr == 0) {
			pfeilLinks.fade( { duration: arrowFadeSpeed } );
		}
	});
}


var oeffentlicheAusstellungenActions = function() {
	var pfeilRechts = $('pfeil_rechts');
	var pfeilLinks = $('pfeil_links');
	var pageNr = 0;
	var maxPageNr = 1;		// actual number of pages minus 1
	var minPageNr = 0;

	pfeilRechts.observe('click', function() {
		if(maxPageNr >= pageNr + 1) pageNr++;
		var target = -955 * pageNr;
		new Effect.Move('pages_oeffentlicheausstellungen', { x: target, y: 162, mode: 'absolute' });
		if(pageNr !=0 ) {
			pfeilLinks.appear( { duration: 0.2 } );
		}
		if(pageNr == maxPageNr) {
			pfeilRechts.fade( { duration: 0.2 } );
		}
	});
	
	pfeilLinks.observe('click', function() {
		if(minPageNr <= pageNr - 1) pageNr--;
		var target = -955 * pageNr;
		new Effect.Move('pages_oeffentlicheausstellungen', { x: target, y: 162, mode: 'absolute' });
		if(pageNr != maxPageNr) {
			pfeilRechts.appear( { duration: 0.2 } );
		}
		if(pageNr == 0) {
			pfeilLinks.fade( { duration: 0.2 } );
		}
	});
}


var kontaktActions = function() {
	var googleMapsURL = "http://maps.google.de/maps?f=d&source=s_d&saddr=&daddr=50.43366,7.248487&hl=de&geocode=&mra=mi&mrsp=0&sz=18&sll=50.433776,7.248675&sspn=0.003232,0.008256&ie=UTF8&t=h&z=18";
	var eMailURL = "atelier@" + "reinhard" + "-puch" + ".de";
	var contentContact = $('content_kontakt');
	var emailContact = $('email_kontakt');
	
	contentContact.observe('click', function() {
		window.open(googleMapsURL);
	});
	
	emailContact.observe('click', function() {
		var content = "mailto:" + eMailURL;
		window.location = content;
   });
}


var impressumActions = function() {
	var googleMapsURL = "http://maps.google.de/maps?f=d&source=s_d&saddr=&daddr=50.43366,7.248487&hl=de&geocode=&mra=mi&mrsp=0&sz=18&sll=50.433776,7.248675&sspn=0.003232,0.008256&ie=UTF8&t=h&z=18";
	var eMailURL = "l.schin" + "dler" + "@" + "whim" + "sical" + ".de";
	var contentImpressum = $('content_impressum');
	var emailImpressum = $('email_impressum');
	
	contentImpressum.observe('click', function() {
		window.open(googleMapsURL);
	});
	
	emailImpressum.observe('click', function() {
		var content = "mailto:" + eMailURL;
		window.location = content;
	});
}


var aktuellActions = function() {
	var kunstakademieHeimbachURL = "http://kunstakademie-heimbach.de";
	var zeitUndOrtURL = "http://zeitundort.com";
	
	$("aktuell_zeitUndOrt").observe('click', function() {
		window.open(zeitUndOrtURL);
	});
	
	$("aktuell_kunstakademieHeimbach").observe('click', function() {
		window.open(kunstakademieHeimbachURL);
	});
}


var arbeitenStahlActions = function() {
//	wlbInitialize();
	
	var images = new Array(
		new Array('img/samt.jpg',				'Samt',							'Stahl, 2007<br>H 31cm / B 30cm / T 34cm',									600,	450),
		new Array('img/viertel.jpg',			'Viertel',						'Stahl, 2007<br>H 27cm / B 32cm / T 35cm',									600,	450),
		new Array('img/feuer-und-wasser.jpg',	'Feuer und Wasser',				'Corten Stahl, 1998<br>H 25cm / B 28cm / T 26cm',							600,	450),
		new Array('img/fuge.jpg',				'Fuge',							'<br><br>',																	600,	450),
		new Array('img/leidenschaft.jpg',		'Leidenschaft',					'Stahl, 2000<br>H 20cm / B 18cm / T 18cm',									600,	450),
		new Array('img/kreisel-1.jpg',			'Kreisel',						'Stahl, 2006<br>H 16cm / B 26cm / T 34cm',									600,	450),
		new Array('img/torso-2.jpg',			'Torso 2',						'Stahl, 2005<br>H 51cm / B 53cm / T 69cm',									600,	450),
		new Array('img/symbol.jpg',				'Symbol',						'Stahl, 2006<br>H 46cm / B 67cm / T 37cm',									600,	450),
		new Array('img/acht.jpg',				'Acht',							'<br><br>',																	600,	450),
		new Array('img/poesie-iii.jpg',			'Poesie III',					'<br><br>',																	600,	450),
		new Array('img/knoten.jpg',				'Knoten',						'Stahl, 2007<br>H 31cm / B 55cm / T 31cm',									600,	450),
		new Array('img/starre-schoenheit.jpg',	'Starre Sch&ouml;nheit',		'Stahl, 1998<br>H 27cm / B 40cm / T 20cm',									629,	450),
		new Array('img/sechs.jpg',				'Sechs',						'<br><br>',																	338,	450),
		new Array('img/torso-1.jpg',			'Torso 1',						'Stahl, 2005<br>H 134cm / B 63cm / T 42cm',									285,	450),
		new Array('img/zusammenspiel.jpg',		'Zusammenspiel',				'<br><br>',																	600,	450),
		new Array('img/poesie-v.jpg',			'Poesie V',						'Stahl, 2005<br>H 110cm / B 91cm / T 130cm',								600,	450),
		new Array('img/xeno.jpg',				'Xeno',							'<br><br>',													600,	450),
		new Array('img/um-drei.jpg',			'Um Drei',						'<br><br>',													675,	450),
		new Array('img/schloss.jpg',			'Schloss',						'(K&ouml;nig oder Gefangener)<br>Stahl, 2008<br>H 27cm / B 33cm / T 44cm',	600,	450),
		new Array('img/faltblatt.jpg',			'Faltblatt',					'Stahl, 2007<br>H 120cm / B 31cm / T 31cm',									338,	450),
		new Array('img/rotation.jpg',			'Rot ation',					'Stahl, rot lackiert, 2007<br>H 198cm',										262,	450)
	);
	
	$('icon_samt').observe('click', function() { wlbStart(images, 0); });
	$('icon_viertel').observe('click', function() { wlbStart(images, 1); });
	$('icon_feuerwasser').observe('click', function() { wlbStart(images, 2); });
	$('icon_fuge').observe('click', function() { wlbStart(images, 3); });
	$('icon_leidenschaft').observe('click', function() { wlbStart(images, 4); });
	$('icon_kreisel-1').observe('click', function() { wlbStart(images, 5); });
	$('icon_torso-1').observe('click', function() { wlbStart(images, 6); });
	$('icon_symbol').observe('click', function() { wlbStart(images, 7); });
	$('icon_acht').observe('click', function() { wlbStart(images, 8); });
	$('icon_poesie-3').observe('click', function() { wlbStart(images, 9); });
	$('icon_knoten').observe('click', function() { wlbStart(images, 10); });
	$('icon_starre-schoenheit').observe('click', function() { wlbStart(images, 11); });
	$('icon_sechs').observe('click', function() { wlbStart(images, 12); });
	$('icon_torso-2').observe('click', function() { wlbStart(images, 13); });
	$('icon_zusammenspiel').observe('click', function() { wlbStart(images, 14); });
	$('icon_poesie-5').observe('click', function() { wlbStart(images, 15); });
	$('icon_xeno').observe('click', function() { wlbStart(images, 16); });
	$('icon_um-drei').observe('click', function() { wlbStart(images, 17); });
	$('icon_schloss').observe('click', function() { wlbStart(images, 18); });
	$('icon_faltblatt').observe('click', function() { wlbStart(images, 19); });
	$('icon_rotation').observe('click', function() { wlbStart(images, 20); });
}


var reliefsPapierActions = function() {
//	wlbInitialize();
	
	var images = new Array(
		new Array('img/gitter.jpg',				'Aus der Serie - Gitter',		'Bleistift, Eisenoxid, Papier, Relief<br>Ma&szlig;e: 70cm x 100cm',			328,	450),
		new Array('img/crassus.jpg',			'Crassus',						'Foto, Relief<br>Ma&szlig;e: 28cm x 20cm',									471,	450),
		new Array('img/datei.jpg',				'Datei',						'Papier, Relief<br>Ma&szlig;e: 96cm x 29cm',								258,	450),
		new Array('img/dokumentenrolle.jpg',	'Dokumentenrolle',				'Papier, Relief',															335,	450),
		new Array('img/entwurf.jpg',			'Entwurf',						'Papier, Relief<br>Ma&szlig;e: 42cm x 30cm',								606,	450),
		new Array('img/geflecht.jpg',			'Geflecht',						'Papier, Relief<br>Ma&szlig;e: 152cm x 430cm',								310,	450),
		new Array('img/maria-e.jpg',			'Maria E.',						'Acryl, Papier, Relief<br>Ma&szlig;e: 40cm x 30cm',							599,	450),
		new Array('img/mensch.jpg',				'mensch',						'Papier farbig, Relief<br>Ma&szlig;e: 90cm x 65cm',							500,	375),
		new Array('img/ohne-titel-1.jpg',		'ohne Titel 1',					'Acryl, Papier, Relief<br>Ma&szlig;e: 82cm x 25,5cm',						900,	399),
		new Array('img/poesie_papier.jpg',		'poesie',						'Papier farbig, Relief<br>Ma&szlig;e: 68cm x 48cm',							640,	450),
		new Array('img/synthese.jpg',			'Synthese',						'Papier farbig, Relief<br>Ma&szlig;e: 68cm x 48cm',							600,	450),
		new Array('img/verschlusssache.jpg',	'Verschluss',					'Papier farbig, Acryl, Relief<br>Ma&szlig;e: 68cm x 48cm',					342,	450)
	);
	
	$('icon_glitter-serie').observe('click', function() { wlbStart(images, 0); });
	$('icon_crassus').observe('click', function() { wlbStart(images, 1); });
	$('icon_datei').observe('click', function() { wlbStart(images, 2); });
	$('icon_dokumentenrolle').observe('click', function() { wlbStart(images, 3); });
	$('icon_entwurf').observe('click', function() { wlbStart(images, 4); });
	$('icon_geflecht').observe('click', function() { wlbStart(images, 5); });
	$('icon_maria-e').observe('click', function() { wlbStart(images, 6); });
	$('icon_mensch').observe('click', function() { wlbStart(images, 7); });
	$('icon_ohne-titel').observe('click', function() { wlbStart(images, 8); });
	$('icon_poesie-papier').observe('click', function() { wlbStart(images, 9); });
	$('icon_synthese').observe('click', function() { wlbStart(images, 10); });
	$('icon_verschlusssache').observe('click', function() { wlbStart(images, 11); });
}


// =================================================================================
//
//                               Whimsical Lightbox
//
//    heavily based uppon Lightbox2 (http://lokeshdhakar.com/projects/lightbox2/)
//
// =================================================================================
var overlayOpacity = 0.8;
var resizeSpeed = 7;
var resizeDuration = 0.5;
var overlayDuration = 0.2
var borderSize = 10;
var size = 250 + 'px';
var wlbImageArray = new Array();
var wlbActiveIndex = 0;

function wlbInitialize() {
	
	$('overlay').hide().observe('click', function() { wlbEnd(); });
	$('whimsicalLightbox').hide().observe('click', function(event) { if (event.element().id == 'whimsicalLightbox') wlbEnd(); });
	$('outerImageContainer').setStyle({ width: size, height: size });
	$('prevLink').observe('click', function(event) { event.stop(); wlbChangeImage(wlbActiveIndex - 1); });
	$('nextLink').observe('click', function(event) { event.stop(); wlbChangeImage(wlbActiveIndex + 1); });
	$('loadingLink').observe('click', function(event) { event.stop(); wlbEnd(); });
	$('bottomNavClose').observe('click', function(event) { event.stop(); wlbEnd(); });
}

function wlbStart(wlbImages, wlbIndex) {
	
	$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
	
	var arrayPageSize = wlbGetPageSize();
	$('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
	
	$('overlay').appear( { duration: overlayDuration, from: 0.0, to: overlayOpacity });
	
	wlbImageArray = [];
	wlbImageArray = wlbImages;
	
	var arrayPageScroll = document.viewport.getScrollOffsets();
	var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
	var lightboxLeft = arrayPageScroll[0];
	$('whimsicalLightbox').setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
	
	wlbChangeImage(wlbIndex);
}

function wlbChangeImage(wlbIndex) {
	
	wlbActiveIndex = wlbIndex;
	
	$('loading').show();
	$('lightboxImage').hide();
	$('hoverNav').hide();
	$('prevLink').hide();
	$('nextLink').hide();
	// Hack for Opera support
	$('imageDataContainer').setStyle({opacity: .0001});
	$('numberDisplay').hide();
	
	var imgPreloader = new Image();
	
	imgPreloader.onload = function(){
		$('lightboxImage').src = wlbImageArray[wlbActiveIndex][0];
		$('lightboxImage').setStyle({
			width: wlbImageArray[wlbActiveIndex][3] + 'px',
			height: wlbImageArray[wlbActiveIndex][4] + 'px'
		});
		wlbResizeImageContainer(wlbImageArray[wlbActiveIndex][3], wlbImageArray[wlbActiveIndex][4]);
	};
	imgPreloader.src = wlbImageArray[wlbActiveIndex][0];
}

function wlbResizeImageContainer(imgWidth, imgHeight) {
	
	var widthCurrent  = $('outerImageContainer').getWidth();
	var heightCurrent = $('outerImageContainer').getHeight();
	
	var widthNew  = (imgWidth  + borderSize * 2);
	var heightNew = (imgHeight + borderSize * 2);
	
	var xScale = (widthNew  / widthCurrent)  * 100;
	var yScale = (heightNew / heightCurrent) * 100;
	
	var wDiff = widthCurrent - widthNew;
	var hDiff = heightCurrent - heightNew;
	
	new Effect.Parallel(
		[
			new Effect.Scale($('outerImageContainer'), yScale, {scaleX: false, duration: resizeDuration}),
			new Effect.Scale($('outerImageContainer'), xScale, {scaleY: false, duration: resizeDuration})
		],
		{
			duration: resizeDuration
		}
	);
	
	var timeout = 250;
	if ((hDiff == 0) && (wDiff == 0)){
		timeout = 100;
		if (Prototype.Browser.IE) timeout = 250;
	}
	
	(function() {
		$('prevLink').setStyle({ height: imgHeight + 'px' });
		$('nextLink').setStyle({ height: imgHeight + 'px' });
		$('imageDataContainer').setStyle({ width: widthNew + 'px' });

		wlbShowImage();
	}).delay(timeout / 1000);
}

function wlbShowImage() {
	
	$('loading').hide();
	new Effect.Appear($('lightboxImage'), { 
		duration: resizeDuration, 
		queue: 'end', 
		afterFinish: (function(){  wlbUpdateDetails();  })
	});
//	wlbPreloadNeighborImages();
}

function wlbPreloadNeighborImages() {
	var preloadNextImage, preloadPrevImage;
	if (wlbImageArray.length > wlbActiveIndex + 1){
		preloadNextImage = new Image();
		preloadNextImage.src = wlbImageArray[wlbActiveIndex + 1][0];
	}
	if (wlbActiveIndex > 0){
		preloadPrevImage = new Image();
		preloadPrevImage.src = wlbImageArray[wlbActiveIndex - 1][0];
	}
}

function wlbUpdateDetails() {
	if (wlbImageArray[wlbActiveIndex][1] != ""){
		$('caption').update(wlbImageArray[wlbActiveIndex][1]).show();
		$('description').update(wlbImageArray[wlbActiveIndex][2]).show();
	}
	
	if (wlbImageArray.length > 1){
		$('numberDisplay').update( 'Bild ' + (wlbActiveIndex + 1) + ' von  ' + wlbImageArray.length).show();
	}
	
	new Effect.Parallel(
		[
			new Effect.SlideDown($('imageDataContainer'), { sync: true, duration: resizeDuration, from: 0.0, to: 1.0 }),
			new Effect.Appear($('imageDataContainer'), { sync: true, duration: resizeDuration })
		],
		{
			duration: resizeDuration,
			afterFinish: function() {
				var arrayPageSize = wlbGetPageSize();
				overlay.setStyle({ height: arrayPageSize[1] + 'px' });
				wlbUpdateNav();
			}
		}
	);

}

function wlbUpdateNav() {
	$('hoverNav').show();               

	if (wlbActiveIndex > 0) $('prevLink').show();

	if (wlbActiveIndex < (wlbImageArray.length - 1)) $('nextLink').show();
	
	wlbEnableKeyboardNav();
}

function wlbEnableKeyboardNav() {
	document.observe('keydown', wlbKeyboardAction);
}

function wlbDisableKeyboardNav() {
	document.stopObserving('keydown', wlbKeyboardAction);
}

function wlbKeyboardAction(event) {
	var keycode = event.keyCode;

	var escapeKey;
	if (event.DOM_VK_ESCAPE) {
		escapeKey = event.DOM_VK_ESCAPE;
	} else {
		escapeKey = 27;
	}

	var key = String.fromCharCode(keycode).toLowerCase();
	
	if (key.match(/x|o|c/) || (keycode == escapeKey)){
		wlbEnd();
	} else if ((key == 'p') || (keycode == 37)){
		if (wlbActiveIndex != 0){
			wlbDisableKeyboardNav();
			wlbChangeImage(wlbActiveIndex - 1);
		}
	} else if ((key == 'n') || (keycode == 39)){
		if (wlbActiveIndex != (wlbImageArray.length - 1)){
			wlbDisableKeyboardNav();
			wlbChangeImage(wlbActiveIndex + 1);
		}
	}
}

function wlbEnd() {
	wlbDisableKeyboardNav();
	$('whimsicalLightbox').hide();
	new Effect.Fade($('overlay'), { duration: overlayDuration });
	$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
}

function wlbGetPageSize() {
	
	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){
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else {
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	
	if (self.innerHeight) {
		if(document.documentElement.clientWidth){
			windowWidth = document.documentElement.clientWidth; 
		} else {
			windowWidth = self.innerWidth;
		}
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) {
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) {
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

	if(xScroll < windowWidth){	
		pageWidth = xScroll;		
	} else {
		pageWidth = windowWidth;
	}

	return [pageWidth,pageHeight];
}