arkitrave/ViewLarger.js Secret

## ViewLarger.js
/*
  	File:			ViewLarger class
		Version:	0.9
		Desc:			This class builds the View Larger functionality on a product page.
		Requires:	/pages/v4/script/dhtml_lib.js
							/pages/v4/script/ProductHelper.js
							/pages/v4/script/AjaxHelper.js
		Use:			Auto-initialize by setting up a window load event to call AutoInit static member
							EventHelper.AddEvent(window, 'load', ViewLarger.AutoInit, false);
							This assumes you already have a link to the view larger page.
		Author:		Eric Shepherd
		Date:			December 2006
		Methods:	The following methods are in this class.

							init()
								If the large image link is present, calls activate()


			Version History:

				0.9		EBS		Development
				1.0		EBS		Production
*/

// Class ViewLarger
function ViewLarger(parent)
{
	this._relAttribute = 'view-larger';
	this._imageCaptionId = 'product-caption';
	this._parent = parent;
}

// Public
ViewLarger.prototype.SetRelAttribute = function(value) {
	this._relAttribute = value;
}

ViewLarger.prototype.SetImageCaptionId = function(value) {
	this._imageCaptionId = value;
}

ViewLarger.prototype.SetParent = function(value) {
	this._parent = value;
}


// Function: init()
// Calls activate() if the view larger link is present
// Returns:
// 	void
ViewLarger.prototype.init = function()
{
	if (this.largeImageLink(this._parent) != null) {
		this.activate(this._parent);
	}
}


// Funtion: largeImageLink()
// Returns the large image link by querying the document to match the rel attribute "view-larger"
// Parameters:
// 	parent - the element in which to check for a view larger link
// Returns:
// 	the view larger link if present, else null
ViewLarger.prototype.largeImageLink = function(parent)
{
	var theLinks = parent.getElementsByTagName('a');
	var theLink = null;
	for (i=0; i<theLinks.length; i++) {
		if (theLinks[i].getAttribute('rel') && theLinks[i].getAttribute('rel').match(this._relAttribute)) {
			theLink = theLinks[i];
		}
	}
	return theLink;
}


// Function: activate()
// Adds the click event to trigger the view larger functionality
// Parameters:
// 	parent - the element which contains the current view larger scope
// Returns:
// 	void
ViewLarger.prototype.activate = function(parent)
{
	var theLink = this.largeImageLink(parent);
	var thisReference = this;
	EventHelper.AddEvent(theLink, 'click', ptr = function(e) { thisReference.showLarger(theLink, e); }, false);
}


// Function: showLarger()
// Builds the view larger modal window, or reactivates it as needed, then cancels the default action
// Parameters:
// 	theLink - the view larger link which was clicked to activate the view larger functionality
// 	e - the click event
// Returns:
// 	void
ViewLarger.prototype.showLarger = function(theLink, e)
{
			// here is where we actually build stuff
	if (document.getElementById('larger-image') == null) {
		var newDiv = document.createElement('div');
		newDiv.id = 'larger-image';
		newDiv.style.display = 'none';
		var theBody = document.getElementsByTagName('body')[0];
		theBody.appendChild(newDiv);
				// set overlay size
		this.overlay();
				// load the external page into the div
		var thisReference = this;
				// make the xmlhttprequest
		AjaxHelper.load(newDiv, theLink, function() { thisReference.setBehaviors(); });

	} else if (SupportTest.isIE) {	// ie has bugs when reactivating the hidden div - things vanish - so we need to make the ajax call again
				// delete div
		var div = document.getElementById('larger-image');
		div.parentNode.removeChild(div);
				// redo ajax call
		var newDiv = document.createElement('div');
		newDiv.id = 'larger-image';
		newDiv.style.display = 'none';
		var theBody = document.getElementsByTagName('body')[0];
		theBody.appendChild(newDiv);
		this.overlay();
		var thisReference = this;
		AjaxHelper.load(newDiv, theLink, function() { thisReference.setBehaviors(); });

	} else {	// good browsers can just reactivate the hidden div
				// restore the visibility of the previously hidden element
		$('larger-image').setStyle('display', 'block');
		$('viewlarger-scroll-frame').setStyle('display', 'block');
		$('viewlarger-close').setStyle('display', 'block');
		$('viewlarger-include').effect('opacity').custom(0,1);
				// we need to set the image display now, also
		this.fixImages(theLink);
		this.fixCaption();
				// run the effects for the mouseovers and close functionality
		this.setBehaviors();
	}
			// cancel the default action
	EventHelper.CancelDefault(e);
}


// Function: fixImages()
// Fixes all images after a new click reactivates since we don't instantiate a new scroller object
// This is kind of ugly, but the scroller doesn't know what's inside it,
// so we have to longhand compare the large image with the scroller items.
// Parameters:
// 	theLink - the link which was clicked to activate view larger
// Returns:
// 	void
ViewLarger.prototype.fixImages = function(theLink)
{
			// get a reference to the ViewLarger object stored as a reference in document
	var VLI = document.ViewLargerInstance;
			// get the large image
	var image = $('main-large-image').getElementsByTagName('img')[0];
			// Here we go...
			// get the old number image and the newly selected image number.
			// we can take the difference and jump by that number
	var theOldNumberArr = image.src.match(/_(\d{1,2})\./);
	var theOldNumber = theOldNumberArr.length > 0 ? theOldNumberArr[1] : 1;
			// get the new number
	var theNewNumberArr = theLink.href.match(/image=(\d+)/);
	var theNewNumber = theNewNumberArr.length > 0 ? theNewNumberArr[1] : 1;
			// set the new large image
	var newImage = document.createElement('img');
	newImage.src = image.src.replace(/_\d+.jpg/g, '_' + theNewNumber + '.jpg');
	newImage.onload = function() {
		image.src = newImage.src;
		newImage = null;
	}
			// get an array of the images
			// PROBLEM: IE places the script objects in the ViewLarger.aspx page out of scope, so we can't read from the instances
			// SOLUTION: Place a reference to the instance in the document object when it's created in ViewLarger.aspx
	var container = document.getElementById(VLI.scroller._itemId);
	var thumbnails = container.getElementsByTagName('img');
			// get the new number
	var str = '_' + theNewNumber + '.jpg';
	var imageSlot = 1;
			// assign imageSlot to index in array of that number's occurrence
			// and set the selected list item for use below
	var theNewLi;
	for (i=0; i<thumbnails.length; i++) {
		if (thumbnails[i].src.match(str)) {
			imageSlot = i;
			theNewLi = DomHelper.AscendDom(thumbnails[i], 'li');
		}
	}
	var oldTop = VLI.scroller._itemTop;
	var newTop = imageSlot * VLI.scroller._increment;
			// reset scroller to new position
	if (thumbnails.length > 6) {
		VLI.scroller._scrollerItem.style.top = (0 - newTop) + 'px';
		VLI.scroller._itemTop = parseInt(VLI.scroller._scrollerItem.style.top);
	}
			// change the active/inactive items
			// start with scroller buttons
	VLI.scroller.updateControls(0, VLI.scroller.canScrollBackward());
	VLI.scroller.updateControls(1, VLI.scroller.canScrollForward());
			// then do the image active states and links using the currently instantiated ProductHelper object
	var theListItems = container.getElementsByTagName('li');
	var activeEl;
	for (i=0; i<theListItems.length; i++) {
		if (!theListItems[i].getElementsByTagName('a').length > 0) {
			activeEl = theListItems[i];
			VLI.viewLargerPH._storage = DomHelper.DeactivateElement(activeEl, VLI.viewLargerPH._storage);
			VLI.viewLargerPH._storage = DomHelper.ActivateElement(theNewLi, VLI.viewLargerPH._storage);
		}
	}
}


// Function: fixCaption()
// Fix the caption after the modal window is reactivated
// Returns:
// 	void
ViewLarger.prototype.fixCaption = function()
{
	var theCaptionNode = document.getElementById(this._imageCaptionId);
	var theCaption = theCaptionNode.firstChild ? theCaptionNode.firstChild.nodeValue : ' ';
	var theNewCaptionNode = document.getElementById('viewlarger-caption');
	theNewCaptionNode.innerHTML = theCaption;
}


// Function: setBehaviors()
// Callback after ajax call or reactivation of hidden elements. Sets the behavioral effects of the modal window
// Returns:
// 	void
ViewLarger.prototype.setBehaviors = function()
{
	var thisReference = this;

	targetsLoaded = setInterval(setEffects, 300);

	function setEffects() {
		if (typeof $ != 'undefined') {
					// INIT: set the position before making visible
			thisReference.setPosition();
					// make visible
			$('larger-image').setStyle('display', 'block');
			$('viewlarger-scroll-frame').setStyle('display', 'block');
			$('viewlarger-close').setStyle('display', 'block');
					// EFFECT: sets the opacity of the entire modal window, including display none
					// after it fades out, so that it won't be present over the product page window
			viewLargerOpacityEffect = $('viewlarger-include').effect('opacity', {
				onStart : function() {
				},
				onComplete: function() {
					$('larger-image').setStyle('display', 'none');
					$('viewlarger-scroll-frame').setStyle('display', 'none');
					$('viewlarger-close').setStyle('display', 'none');
				}
			});
					// ACTION: make modal window draggable
			var dragOptions = {
				onStart : function() {
					$('viewlarger-include').setStyle('cursor', 'move');
				},
				onComplete : function() {
					$('viewlarger-include').setStyle('cursor', 'default');
				}
			}
			$('viewlarger-include').makeDraggable(dragOptions);
					// EVENT: click - ELEMENT: close button or window overlay - ACTION: close and hide modal window
			$('viewlarger-overlay').addEvent('click', function() { viewLargerOpacityEffect.custom(1,0); });
			$('viewlarger-close').addEvent('click', function() { viewLargerOpacityEffect.custom(1,0); });
					// EVENT: keypress - ESCAPE KEY - ACTION: close and hide modal window
			document.onkeydown = function(e){
				if (e == null) { // ie
					keycode = event.keyCode;
				} else { // mozilla
					keycode = e.which;
				}
				if(keycode == 27){ // close
					viewLargerOpacityEffect.custom(1,0);
				}
			}
					// clear interval - TODO: add a try/catch to be sure the interval gets cleared?
			clearInterval(targetsLoaded);
		}
	}
}

// -----------------------
// HELPER METHODS
// -----------------------


// Function: overlay()
// Sets the size of the overlay div to match the height and width of the current window
// Returns:
// 	void
ViewLarger.prototype.overlay = function()
{
	if (window.innerHeight && window.scrollMaxY || window.innerWidth && window.scrollMaxX) {
		xScroll = window.innerWidth + window.scrollMaxX;
		yScroll = window.innerHeight + window.scrollMaxY;
		var doc = document.documentElement;
		var docw = (doc && doc.clientWidth) || document.body.clientWidth || window.innerWidth || self.innerWidth;
		var doch = (doc && doc.clientHeight) || document.body.clientHeight || window.innerHeight || self.innerHeight;
		xScroll -= (window.innerWidth - docw);
		yScroll -= (window.innerHeight - doch);
	} else if (document.body.scrollHeight > document.body.offsetHeight || document.body.scrollWidth > document.body.offsetWidth) {
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else {
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	$('larger-image').setStyles({
		'width' : xScroll + 'px',
		'height' : yScroll + 'px'
	});
}


// Function: getPageSizes()
// Returns an array containing the width and height of the current page
// Returns:
// 	array[width, height]
ViewLarger.prototype.getPageSizes = function()
{
	var doc = document.documentElement;
	var w = window.innerWidth || self.innerWidth || (doc && doc.clientWidth) || document.body.clientWidth;
	var h = window.innerHeight || self.innerHeight || (doc && doc.clientHeight) || document.body.clientHeight;
	pageSizes = new Array(w, h);
	return pageSizes;
}


// Function: setPosition()
// Sets the left and top offsets of the view larger modal window
// Returns:
// 	void
ViewLarger.prototype.setPosition = function()
{
	var pageSizes = this.getPageSizes();
	var pageScrolls = this.getPageScrollTop();
	$('viewlarger-include').setStyles({
		'left' : pageScrolls[0] + ((pageSizes[0] - 590)/2) + 'px',
		'top' : (pageScrolls[1] + 25) + 'px'
	});
}


// Function: getPageScrollTop()
// Returns the amount the page has been scrolled
// Returns:
// 	array[left offset, top offset]
ViewLarger.prototype.getPageScrollTop = function()
{
	var xScrollLeft;
	var yScrollTop;
	if (self.pageYOffset || self.pageXOffset) {
		xScrollLeft = self.pageXOffset;
		yScrollTop = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop || document.documentElement.scrollLeft) {
		xScrollLeft = document.documentElement.scrollLeft;
		yScrollTop = document.documentElement.scrollTop;
	} else if (document.body) {
		xScrollLeft = document.body.scrollLeft;
		yScrollTop = document.body.scrollTop;
	}
	pageScrolls = new Array(xScrollLeft, yScrollTop);
	return pageScrolls;
}


// Function: AutoInit()
// Static member to create a standard application on a product page assuming we are targeting the "#product-shot" element
// Returns:
// 	void
ViewLarger.AutoInit = function() {
	var parent = document.getElementById('product-shot');
	var instance = new ViewLarger(parent);
	instance.init();
}
	/*
	File: ViewLarger class
	Version: 0.9
	Desc: This class builds the View Larger functionality on a product page.
	Requires: /pages/v4/script/dhtml_lib.js
	/pages/v4/script/ProductHelper.js
	/pages/v4/script/AjaxHelper.js
	Use: Auto-initialize by setting up a window load event to call AutoInit static member
	EventHelper.AddEvent(window, 'load', ViewLarger.AutoInit, false);
	This assumes you already have a link to the view larger page.
	Author: Eric Shepherd
	Date: December 2006
	Methods: The following methods are in this class.

	init()
	If the large image link is present, calls activate()


	Version History:

	0.9 EBS Development
	1.0 EBS Production
	*/

	// Class ViewLarger
	function ViewLarger(parent)
	{
	this._relAttribute = 'view-larger';
	this._imageCaptionId = 'product-caption';
	this._parent = parent;
	}

	// Public
	ViewLarger.prototype.SetRelAttribute = function(value) {
	this._relAttribute = value;
	}

	ViewLarger.prototype.SetImageCaptionId = function(value) {
	this._imageCaptionId = value;
	}

	ViewLarger.prototype.SetParent = function(value) {
	this._parent = value;
	}




	// Function: init()
	// Calls activate() if the view larger link is present
	// Returns:
	// void
	ViewLarger.prototype.init = function()
	{
	if (this.largeImageLink(this._parent) != null) {
	this.activate(this._parent);
	}
	}



	// Funtion: largeImageLink()
	// Returns the large image link by querying the document to match the rel attribute "view-larger"
	// Parameters:
	// parent - the element in which to check for a view larger link
	// Returns:
	// the view larger link if present, else null
	ViewLarger.prototype.largeImageLink = function(parent)
	{
	var theLinks = parent.getElementsByTagName('a');
	var theLink = null;
	for (i=0; i<theLinks.length; i++) {
	if (theLinks[i].getAttribute('rel') && theLinks[i].getAttribute('rel').match(this._relAttribute)) {
	theLink = theLinks[i];
	}
	}
	return theLink;
	}



	// Function: activate()
	// Adds the click event to trigger the view larger functionality
	// Parameters:
	// parent - the element which contains the current view larger scope
	// Returns:
	// void
	ViewLarger.prototype.activate = function(parent)
	{
	var theLink = this.largeImageLink(parent);
	var thisReference = this;
	EventHelper.AddEvent(theLink, 'click', ptr = function(e) { thisReference.showLarger(theLink, e); }, false);
	}



	// Function: showLarger()
	// Builds the view larger modal window, or reactivates it as needed, then cancels the default action
	// Parameters:
	// theLink - the view larger link which was clicked to activate the view larger functionality
	// e - the click event
	// Returns:
	// void
	ViewLarger.prototype.showLarger = function(theLink, e)
	{
	// here is where we actually build stuff
	if (document.getElementById('larger-image') == null) {
	var newDiv = document.createElement('div');
	newDiv.id = 'larger-image';
	newDiv.style.display = 'none';
	var theBody = document.getElementsByTagName('body')[0];
	theBody.appendChild(newDiv);
	// set overlay size
	this.overlay();
	// load the external page into the div
	var thisReference = this;
	// make the xmlhttprequest
	AjaxHelper.load(newDiv, theLink, function() { thisReference.setBehaviors(); });

	} else if (SupportTest.isIE) { // ie has bugs when reactivating the hidden div - things vanish - so we need to make the ajax call again
	// delete div
	var div = document.getElementById('larger-image');
	div.parentNode.removeChild(div);
	// redo ajax call
	var newDiv = document.createElement('div');
	newDiv.id = 'larger-image';
	newDiv.style.display = 'none';
	var theBody = document.getElementsByTagName('body')[0];
	theBody.appendChild(newDiv);
	this.overlay();
	var thisReference = this;
	AjaxHelper.load(newDiv, theLink, function() { thisReference.setBehaviors(); });

	} else { // good browsers can just reactivate the hidden div
	// restore the visibility of the previously hidden element
	$('larger-image').setStyle('display', 'block');
	$('viewlarger-scroll-frame').setStyle('display', 'block');
	$('viewlarger-close').setStyle('display', 'block');
	$('viewlarger-include').effect('opacity').custom(0,1);
	// we need to set the image display now, also
	this.fixImages(theLink);
	this.fixCaption();
	// run the effects for the mouseovers and close functionality
	this.setBehaviors();
	}
	// cancel the default action
	EventHelper.CancelDefault(e);
	}



	// Function: fixImages()
	// Fixes all images after a new click reactivates since we don't instantiate a new scroller object
	// This is kind of ugly, but the scroller doesn't know what's inside it,
	// so we have to longhand compare the large image with the scroller items.
	// Parameters:
	// theLink - the link which was clicked to activate view larger
	// Returns:
	// void
	ViewLarger.prototype.fixImages = function(theLink)
	{
	// get a reference to the ViewLarger object stored as a reference in document
	var VLI = document.ViewLargerInstance;
	// get the large image
	var image = $('main-large-image').getElementsByTagName('img')[0];
	// Here we go...
	// get the old number image and the newly selected image number.
	// we can take the difference and jump by that number
	var theOldNumberArr = image.src.match(/_(\d{1,2})\./);
	var theOldNumber = theOldNumberArr.length > 0 ? theOldNumberArr[1] : 1;
	// get the new number
	var theNewNumberArr = theLink.href.match(/image=(\d+)/);
	var theNewNumber = theNewNumberArr.length > 0 ? theNewNumberArr[1] : 1;
	// set the new large image
	var newImage = document.createElement('img');
	newImage.src = image.src.replace(/_\d+.jpg/g, '_' + theNewNumber + '.jpg');
	newImage.onload = function() {
	image.src = newImage.src;
	newImage = null;
	}
	// get an array of the images
	// PROBLEM: IE places the script objects in the ViewLarger.aspx page out of scope, so we can't read from the instances
	// SOLUTION: Place a reference to the instance in the document object when it's created in ViewLarger.aspx
	var container = document.getElementById(VLI.scroller._itemId);
	var thumbnails = container.getElementsByTagName('img');
	// get the new number
	var str = '_' + theNewNumber + '.jpg';
	var imageSlot = 1;
	// assign imageSlot to index in array of that number's occurrence
	// and set the selected list item for use below
	var theNewLi;
	for (i=0; i<thumbnails.length; i++) {
	if (thumbnails[i].src.match(str)) {
	imageSlot = i;
	theNewLi = DomHelper.AscendDom(thumbnails[i], 'li');
	}
	}
	var oldTop = VLI.scroller._itemTop;
	var newTop = imageSlot * VLI.scroller._increment;
	// reset scroller to new position
	if (thumbnails.length > 6) {
	VLI.scroller._scrollerItem.style.top = (0 - newTop) + 'px';
	VLI.scroller._itemTop = parseInt(VLI.scroller._scrollerItem.style.top);
	}
	// change the active/inactive items
	// start with scroller buttons
	VLI.scroller.updateControls(0, VLI.scroller.canScrollBackward());
	VLI.scroller.updateControls(1, VLI.scroller.canScrollForward());
	// then do the image active states and links using the currently instantiated ProductHelper object
	var theListItems = container.getElementsByTagName('li');
	var activeEl;
	for (i=0; i<theListItems.length; i++) {
	if (!theListItems[i].getElementsByTagName('a').length > 0) {
	activeEl = theListItems[i];
	VLI.viewLargerPH._storage = DomHelper.DeactivateElement(activeEl, VLI.viewLargerPH._storage);
	VLI.viewLargerPH._storage = DomHelper.ActivateElement(theNewLi, VLI.viewLargerPH._storage);
	}
	}
	}



	// Function: fixCaption()
	// Fix the caption after the modal window is reactivated
	// Returns:
	// void
	ViewLarger.prototype.fixCaption = function()
	{
	var theCaptionNode = document.getElementById(this._imageCaptionId);
	var theCaption = theCaptionNode.firstChild ? theCaptionNode.firstChild.nodeValue : ' ';
	var theNewCaptionNode = document.getElementById('viewlarger-caption');
	theNewCaptionNode.innerHTML = theCaption;
	}



	// Function: setBehaviors()
	// Callback after ajax call or reactivation of hidden elements. Sets the behavioral effects of the modal window
	// Returns:
	// void
	ViewLarger.prototype.setBehaviors = function()
	{
	var thisReference = this;

	targetsLoaded = setInterval(setEffects, 300);

	function setEffects() {
	if (typeof $ != 'undefined') {
	// INIT: set the position before making visible
	thisReference.setPosition();
	// make visible
	$('larger-image').setStyle('display', 'block');
	$('viewlarger-scroll-frame').setStyle('display', 'block');
	$('viewlarger-close').setStyle('display', 'block');
	// EFFECT: sets the opacity of the entire modal window, including display none
	// after it fades out, so that it won't be present over the product page window
	viewLargerOpacityEffect = $('viewlarger-include').effect('opacity', {
	onStart : function() {
	},
	onComplete: function() {
	$('larger-image').setStyle('display', 'none');
	$('viewlarger-scroll-frame').setStyle('display', 'none');
	$('viewlarger-close').setStyle('display', 'none');
	}
	});
	// ACTION: make modal window draggable
	var dragOptions = {
	onStart : function() {
	$('viewlarger-include').setStyle('cursor', 'move');
	},
	onComplete : function() {
	$('viewlarger-include').setStyle('cursor', 'default');
	}
	}
	$('viewlarger-include').makeDraggable(dragOptions);
	// EVENT: click - ELEMENT: close button or window overlay - ACTION: close and hide modal window
	$('viewlarger-overlay').addEvent('click', function() { viewLargerOpacityEffect.custom(1,0); });
	$('viewlarger-close').addEvent('click', function() { viewLargerOpacityEffect.custom(1,0); });
	// EVENT: keypress - ESCAPE KEY - ACTION: close and hide modal window
	document.onkeydown = function(e){
	if (e == null) { // ie
	keycode = event.keyCode;
	} else { // mozilla
	keycode = e.which;
	}
	if(keycode == 27){ // close
	viewLargerOpacityEffect.custom(1,0);
	}
	}
	// clear interval - TODO: add a try/catch to be sure the interval gets cleared?
	clearInterval(targetsLoaded);
	}
	}
	}

	// -----------------------
	// HELPER METHODS
	// -----------------------


	// Function: overlay()
	// Sets the size of the overlay div to match the height and width of the current window
	// Returns:
	// void
	ViewLarger.prototype.overlay = function()
	{
	if (window.innerHeight && window.scrollMaxY \|\| window.innerWidth && window.scrollMaxX) {
	xScroll = window.innerWidth + window.scrollMaxX;
	yScroll = window.innerHeight + window.scrollMaxY;
	var doc = document.documentElement;
	var docw = (doc && doc.clientWidth) \|\| document.body.clientWidth \|\| window.innerWidth \|\| self.innerWidth;
	var doch = (doc && doc.clientHeight) \|\| document.body.clientHeight \|\| window.innerHeight \|\| self.innerHeight;
	xScroll -= (window.innerWidth - docw);
	yScroll -= (window.innerHeight - doch);
	} else if (document.body.scrollHeight > document.body.offsetHeight \|\| document.body.scrollWidth > document.body.offsetWidth) {
	xScroll = document.body.scrollWidth;
	yScroll = document.body.scrollHeight;
	} else {
	xScroll = document.body.offsetWidth;
	yScroll = document.body.offsetHeight;
	}
	$('larger-image').setStyles({
	'width' : xScroll + 'px',
	'height' : yScroll + 'px'
	});
	}



	// Function: getPageSizes()
	// Returns an array containing the width and height of the current page
	// Returns:
	// array[width, height]
	ViewLarger.prototype.getPageSizes = function()
	{
	var doc = document.documentElement;
	var w = window.innerWidth \|\| self.innerWidth \|\| (doc && doc.clientWidth) \|\| document.body.clientWidth;
	var h = window.innerHeight \|\| self.innerHeight \|\| (doc && doc.clientHeight) \|\| document.body.clientHeight;
	pageSizes = new Array(w, h);
	return pageSizes;
	}



	// Function: setPosition()
	// Sets the left and top offsets of the view larger modal window
	// Returns:
	// void
	ViewLarger.prototype.setPosition = function()
	{
	var pageSizes = this.getPageSizes();
	var pageScrolls = this.getPageScrollTop();
	$('viewlarger-include').setStyles({
	'left' : pageScrolls[0] + ((pageSizes[0] - 590)/2) + 'px',
	'top' : (pageScrolls[1] + 25) + 'px'
	});
	}



	// Function: getPageScrollTop()
	// Returns the amount the page has been scrolled
	// Returns:
	// array[left offset, top offset]
	ViewLarger.prototype.getPageScrollTop = function()
	{
	var xScrollLeft;
	var yScrollTop;
	if (self.pageYOffset \|\| self.pageXOffset) {
	xScrollLeft = self.pageXOffset;
	yScrollTop = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop \|\| document.documentElement.scrollLeft) {
	xScrollLeft = document.documentElement.scrollLeft;
	yScrollTop = document.documentElement.scrollTop;
	} else if (document.body) {
	xScrollLeft = document.body.scrollLeft;
	yScrollTop = document.body.scrollTop;
	}
	pageScrolls = new Array(xScrollLeft, yScrollTop);
	return pageScrolls;
	}




	// Function: AutoInit()
	// Static member to create a standard application on a product page assuming we are targeting the "#product-shot" element
	// Returns:
	// void
	ViewLarger.AutoInit = function() {
	var parent = document.getElementById('product-shot');
	var instance = new ViewLarger(parent);
	instance.init();
	}