/*
######################################################################################
######                                                                        #######
######     ART SCRIPTS				                                         #######
######                                                                      #######
##################################################################################
*/

	var Art = new Object();


/********************************************************************************/
/***** COLOUR CHECKBOX *********************************************************/
/******************************************************************************/

	Art.Colours = function() {

		var colourShell	= $('');
		var colourList = $$('#predominant_colours .predominant_colbox');

		for(var i=0; i < colourList.length; i++) {

		// Get info from the DIV colour
			var divColour 		= $(colourList[i]).getElementsByTagName('div')[0];
			var swatchColour	= divColour.style.backgroundColor;
			var swatchText		= $(colourList[i]).innerHTML;

		// Extract the checkbox details
			var cbkColour 		= $(colourList[i]).getElementsByTagName('input');
			for(var j=0; j < cbkColour.length; j++) {
				if(cbkColour[j].type == 'checkbox') {
					var frmColour	= 	cbkColour[j];
				}
			}

		// Create the hyperlink
			var lnkColour	= new Element('a', {
				href: '#',
				className: 'predominant_colbox-link'
			});
			$(colourList[i]).appendChild(lnkColour);
			if(frmColour.checked === true) {
				lnkColour.className = 'predominant_colbox-link-active';

			// Create the hidden field
				var hdnColour	= new Element('input', {
					type: 'hidden',
					name: 'colour[]',
					value: frmColour.value
				});
				$(colourList[i]).appendChild(hdnColour);
			}
			Art.CheckboxHandlers(lnkColour,frmColour.value)

			var spnColour	= new Element('span');
			spnColour.innerHTML = divColour.innerHTML;
			spnColour.setStyle({
				backgroundColor: swatchColour
			});
			lnkColour.appendChild(spnColour);

		// Hide the original elements
			divColour.remove();
			frmColour.remove();
		}
	}

	Art.CheckboxHandlers = function(lnkColour,value) {
		Event.observe($(lnkColour), 'click', function(e) {
			Art.CheckboxLinks(this,value);
			Event.stop(e);
		});
	}

	Art.CheckboxLinks = function(linkElement,value) {
		var linkParent = linkElement.up();

		if($(linkElement).className == 'predominant_colbox-link-active') {
			$(linkElement).className = 'predominant_colbox-link';
			var hdnColour = linkParent.getElementsByTagName('input');
			for(var j=0; j < hdnColour.length; j++) {
				hdnColour[j].remove();
			}
		} else {
			$(linkElement).className = 'predominant_colbox-link-active';

		// Create the hidden field
			var hdnColour	= new Element('input', {
				type: 'hidden',
				name: 'colour[]',
				value: value
			});
			linkParent.appendChild(hdnColour);
		}
	}


/********************************************************************************/
/***** ART IMAGE SWITCHER ******************************************************/
/******************************************************************************/

	var artSwitcherTransition = 'false';

	Art.SwitcherSet = function() {
		var imgLargeShell	= $('asset_main');

	// Prepare the first main image
		var imgLarge1 		= imgLargeShell.getElementsByTagName('img')[0];
			imgLarge1		= $(imgLarge1);
		var imgLarge1Left 	= ((getOffsetWidth(imgLargeShell) / 2) - (AssetData[0].large.width / 2)) + 'px';
		var imgLarge1Top 	= ((getOffsetHeight(imgLargeShell) / 2) - (AssetData[0].large.height / 2)) + 'px';
			//imgLarge1.setStyle({ position: 'absolute', left: imgLarge1Left, top: 0 });


		var imgThumbShell	= $$('.img_preview_sml li a');

		for(var i=0; i < imgThumbShell.length; i++) {
			var i2 = i + 1;
		// Prepare the first main image
			var imgThumb1 		= imgThumbShell[i].getElementsByTagName('img')[0];
				imgThumb1		= $(imgThumb1);
			var imgThumb1Left 	= ((getOffsetWidth(imgThumbShell[i]) / 2) - (AssetData[i2].small.width / 2)) + 'px';
			var imgThumb1Top 	= ((getOffsetHeight(imgThumbShell[i]) / 2) - (AssetData[i2].small.height / 2)) + 'px';
				imgThumb1.setStyle({ position: 'absolute', left: imgThumb1Left, top: 0 });
		}
	}

	Art.Switcher = function(imgElement,linkElement) {
		if(artSwitcherTransition == 'false') {
			artSwitcherTransition = 'true';

	/***** MAIN IMAGES *****/
			var imgLargeShell	= $('asset_main');

		// Prepare the first main image
			var imgLarge1 		= imgLargeShell.getElementsByTagName('img')[0];
				imgLarge1		= $(imgLarge1);
			var imgLarge1Left 	= ((getOffsetWidth(imgLargeShell) / 2) - (AssetData[0].large.width / 2)) + 'px';
			var imgLarge1Top 	= ((getOffsetHeight(imgLargeShell) / 2) - (AssetData[0].large.height / 2)) + 'px';
				imgLarge1.setStyle({ zIndex: '100', position: 'absolute', left: imgLarge1Left, top: 0 });

		// Prepare the second main image
			var imgLarge2		= new Element('img', { alt: imgLarge1.alt });
				imgLarge2		= $(imgLarge2);
				imgLarge2.src	= AssetData[imgElement].large.url;
				imgLarge2.width	= AssetData[imgElement].large.width;
				imgLarge2.height = AssetData[imgElement].large.height;

			var imgLarge2Left 	= ((getOffsetWidth(imgLargeShell) / 2) - (AssetData[imgElement].large.width / 2)) + 'px';
			var imgLarge2Top 	= ((getOffsetHeight(imgLargeShell) / 2) - (AssetData[imgElement].large.height / 2)) + 'px';
				imgLarge2.setStyle({ zIndex: '50', position: 'absolute', left: imgLarge2Left, top: 0 });
				$$('#asset_main a').each(function(item) {
					item.appendChild(imgLarge2);
				});



	/***** THUMBNAIL IMAGES *****/

			var imgThumbShell	= $(linkElement);

		// Prepare the first main image
			var imgThumb1 		= imgThumbShell.getElementsByTagName('img')[0];
				imgThumb1		= $(imgThumb1);
			var imgThumb1Left 	= ((getOffsetWidth(imgThumbShell) / 2) - (AssetData[imgElement].small.width / 2)) + 'px';
			var imgThumb1Top 	= ((getOffsetHeight(imgThumbShell) / 2) - (AssetData[imgElement].small.height / 2)) + 'px';
				// what's that for??
				//imgThumb1.setStyle({ zIndex: '100', position: 'absolute', left: imgThumb1Left, top: 0 });

		// Prepare the second main image
			var imgThumb2		= new Element('img', { alt: imgThumb1.alt });
				imgThumb2		= $(imgThumb2);
				imgThumb2.src	= AssetData[0].small.url;
				imgThumb2.width	= AssetData[0].small.width;
				imgThumb2.height= AssetData[0].small.height;

			var imgThumb2Left 	= ((getOffsetWidth(imgThumbShell) / 2) - (AssetData[0].small.width / 2)) + 'px';
			var imgThumb2Top 	= ((getOffsetHeight(imgThumbShell) / 2) - (AssetData[0].small.height / 2)) + 'px';
				// what's that for??
				//imgThumb2.setStyle({ zIndex: '50', position: 'absolute', left: imgThumb2Left, top: 0, paddingTop: ((132-imgThumb2.height) / 2) +'px' });
				imgThumbShell.appendChild(imgThumb2);


			var imgLarge2Left 	= ((getOffsetWidth(imgLargeShell) / 2) - (AssetData[imgElement].large.width) / 2) + 'px';
			imgLarge2.setStyle({ left: imgLarge2Left, top: 0, zIndex: '1' });

			imgLarge1.style.zIndex = '1';
			imgLarge1.remove();
			imgThumb1.remove();

		// STEP 1: store the current values
			var smallUrl		= AssetData[0].small.url;
			var smallWidth		= AssetData[0].small.width;
			var smallHeight		= AssetData[0].small.height;
			var mediumUrl		= AssetData[0].medium.url;
			var mediumWidth		= AssetData[0].medium.width;
			var mediumHeight	= AssetData[0].medium.height;
			var largeUrl		= AssetData[0].large.url;
			var largeWidth		= AssetData[0].large.width;
			var largeHeight		= AssetData[0].large.height;
			var originalUrl		= AssetData[0].original.url;
			var originalWidth	= AssetData[0].original.width;
			var originalHeight	= AssetData[0].original.height;

		// STEP 2: Transfer all values from the clicked image to Active
			AssetData[0] = {
				'small' : {
					'url': AssetData[imgElement].small.url,
					'width': AssetData[imgElement].small.width,
					'height': AssetData[imgElement].small.height
				},
				'medium' : {
					'url': AssetData[imgElement].medium.url,
					'width': AssetData[imgElement].medium.width,
					'height': AssetData[imgElement].medium.height
				},
				'large' : {
					'url': AssetData[imgElement].large.url,
					'width': AssetData[imgElement].large.width,
					'height': AssetData[imgElement].large.height
				},
				'original' : {
					'url': AssetData[imgElement].original.url,
					'width': AssetData[imgElement].original.width,
					'height': AssetData[imgElement].original.height
				}
			};

		// STEP 3: Transfer all previous Active values to the old image
			AssetData[imgElement] = {
				'small' : {
					'url': smallUrl,
					'width': smallWidth,
					'height': smallHeight
				},
				'medium' : {
					'url': mediumUrl,
					'width': mediumWidth,
					'height': mediumHeight
				},
				'large' : {
					'url': largeUrl,
					'width': largeWidth,
					'height': largeHeight
				},
				'original' : {
					'url': originalUrl,
					'width': originalWidth,
					'height': originalHeight
				}
			};
			activeElement 		= imgElement;

			artSwitcherTransition = 'false';
		}
	}






/********************************************************************************/
/***** ART ZOOM FUNCTIONALITY **************************************************/
/******************************************************************************/

	var zoomSteps 	= new Array();
	var scaleSteps 	= new Array();
	var scaleBgSteps= new Array();
	var zoomState	= 1;
	var scaleState	= 1;
	var moveLeft	= 0;
	var moveTop		= 0;
	var artZoomDrag = 'off';
	var imgX		= 0;
	var imgY		= 0;
	var savedXpos	= 0;
	var savedYpos	= 0;
	var canvasX 	= 0;
	var canvasY 	= 0;
	var bgX 		= 0;
	var bgY 		= 0;
	var scaleStepsNo= 10;
	var zoomStepsNo = 18;

	var currentZoomAssetId = 0;

/***** OPEN THE ZOOM WINDOW *****/

	Art.ZoomWindow = function(popupId, viewType) {
		var bodyTag = document.getElementsByTagName('body')[0];
			bodyTag.appendChild($('popup_area'));
	// Open the popup
		popupActive = popupId;

	// Reveal the outermost area of the popup
		$('popup_area').show();
		$('popup_area').style.width		= '100%';
		$('popup_area').style.height	= getTotalHeight() + 'px';

	// Begin to show the faded popup background
		new Effect.Appear('popup_bg', { beforeStart: function() {
		// Make sure the image has its source cleared
			var imgLgeShell		= $('asset_main');
			var imgLge 			= imgLgeShell.getElementsByTagName('img')[0];

		// Set the background width and height
			$('popup_bg').style.width	= '100%';
			$('popup_bg').style.height	= getTotalHeight() + 'px';

			new Effect.Appear('popup_content', { beforeStart: function() {
			// Centre the content area in the window
			// Timeout allows the element a chance to activate, otherwise positioning would be impossible
				setTimeout('Art.ZoomContent()', 50);
			},
			duration: 0.5, from: 0, to: 1 })
		},
		duration: 0.5, from: 0, to: 0.999, afterFinish: function() {
			// If anywhere outside of the content area is clicked, close the popup
				Event.observe($('popup_bg'), 'click', Art.ZoomBgClose);
			}
		})
		popupState = 'open';

		if (typeof(viewType) != 'undefined') {
			// Show scale view on 1st zoomed step
			if (viewType == 'scale') {
					jQuery('#standard_zoom').hide(1, function() {
						jQuery('#show_to_scale').show(1, function() {
							setTimeout("Art.Zoom(false, 1);",50);
						});
					});
			// Show zoom view
			} else {
					jQuery('#show_to_scale').hide();
					jQuery('#standard_zoom').show();
			}
		}
	}

/***** CLOSE THE POPUP *****/

	Art.ZoomClose = function() {
		new Effect.Fade('popup_content', { beforeStart: function() {
			new Effect.Fade('popup_bg', { duration: 0.5, from: 0.999, to: 0 })
		}, duration: 0.5, from: 1, to: 0, afterFinish: function() {
			$(popupActive).hide();
			$('popup_area').hide();
			popupActive = '';
			popupState = 'closed';
			Event.stopObserving($('popup_bg'), 'click');

	// Reset image values for the next opening
		var imgOrgShell		= $('art_zoom_photo');
		var imgOrg 			= imgOrgShell.getElementsByTagName('img')[0];
			imgOrg			= $(imgOrg);
			imgOrg.Width	= AssetData[0].large.width;
			imgOrg.Height	= AssetData[0].large.height;
			imgOrg.src		= '/images/transparent.gif';
			imgOrg.setStyle({
				top: ((getOffsetHeight($('asset_main')) / 2) - (AssetData[0].large.width / 2)) + 'px',
				left: ((getOffsetWidth($('asset_main')) / 2) - (AssetData[0].large.height / 2)) + 'px',
				width: AssetData[0].large.width + 'px',
				height: AssetData[0].large.height + 'px'
			});
		}})
	}

	Art.ZoomBgClose = function(e) {
		var theElement 	= Event.element(e);

	// Rerun the main function to close the popup only if the background is clicked
		if(theElement.id == 'popup_bg') {
			Art.ZoomClose();
		}
	}

/***** PRELOAD THE ZOOM FUNCTIONS AND SETTINGS *****/

	Art.ZoomContent = function(startAssetId) {

		if (typeof(startAssetId) == 'undefined') startAssetId = 0;
		currentZoomAssetId = startAssetId;

	// Reset all globals
		zoomState	= 1;
		moveLeft	= 0;
		moveTop		= 0;
		artZoomDrag = 'off';
		imgX		= 0;
		imgY		= 0;
		savedXpos	= 0;
		savedYpos	= 0;
		artZoomRun 	= 'false';

		$(popupActive).show();

	// How far down the content area needs to go
		var windowHeightHalf	= (getWindowHeight() / 2);
		var contentHeightHalf	= (getOffsetHeight($('popup_content')) / 2);
		var windowWidthHalf		= (getWindowWidth() / 2);
		var contentWidthHalf	= (getOffsetWidth($('popup_content')) / 2);

		// fix so that it doesn't hide buttons off the page by BD - 25th Nov 08
		var popup_content_top = (windowHeightHalf - contentHeightHalf);
		if (popup_content_top < 0) {
			popup_content_top = 0;
		}
		$('popup_content').style.top =  popup_content_top + 'px';
		$('popup_content').style.left = (windowWidthHalf - contentWidthHalf) + 'px';

		Art.ZoomSettings(startAssetId);
		Art.ScaleSettings(startAssetId);
	}

/***** NORMAL ZOOM SETTINGS *****/

	Art.ZoomSettings = function(startAssetId) {

		if (typeof(startAssetId) == 'undefined') startAssetId = 0;

	// Get the dimensions of the starting image size
		var photoShell		= $('art_zoom_photo');
		var photoWidth		= parseInt(getOffsetWidth($(photoShell)));
		var photoHeight		= parseInt(getOffsetHeight($(photoShell)));
		var imgOriginalWidth	= parseInt(AssetData[startAssetId].original.width);
		var imgOriginalHeight	= parseInt(AssetData[startAssetId].original.height);

		var imgOriginalRatio	= imgOriginalHeight / imgOriginalWidth;

	// Set the values for the zoom image at start
		var imgOrg 			= photoShell.getElementsByTagName('img')[0];
			imgOrg			= $(imgOrg);
			imgOrg.src		= AssetData[startAssetId].original.url;

			if(imgOriginalHeight > imgOriginalWidth) {
				imgLgeWidth		= photoHeight / imgOriginalRatio;
				imgLgeHeight	= photoHeight;
			} else {
				imgLgeWidth		= photoWidth;
				imgLgeHeight	= photoWidth * imgOriginalRatio;
			}

			// code below will make the lightbox fit the image at ratio to 960px width
			// photoShell.style.height = imgLgeHeight+'px';
			// $('standard_zoom').style.height = imgLgeHeight+'px';

			imgLgeHeight = AssetData[startAssetId].large.height;
			imgLgeWidth = AssetData[startAssetId].large.width;

			imgOrg.width	= imgLgeWidth;
			imgOrg.height	= imgLgeHeight;

	// Set styles
		imgOrg.setStyle({
			top: ((getOffsetHeight($(photoShell)) / 2) - (imgLgeHeight / 2)) + 'px',
			left: ((getOffsetWidth($(photoShell)) / 2) - (imgLgeWidth / 2)) + 'px',
			width: imgLgeWidth + 'px',
			height: imgLgeHeight + 'px'
		});
		imgX	= parseInt($(imgOrg).style.left);
		imgY	= parseInt($(imgOrg).style.top);

	// Set event handlers
		Event.observe($(imgOrg), 'mousedown', function(e) {
			var imgLgeShell	= $('art_zoom_photo');
			var imgLge 		= imgLgeShell.getElementsByTagName('img')[0];
				imgLge		= $(imgLge);
			imgX = getMousePositionX(e) - getMouseOffsetX($(imgLge));
			imgY = getMousePositionY(e) - getMouseOffsetY($(imgLge));
			artZoomDrag = 'on';
			Event.stop(e);
		});
		$(imgOrg).oncontextmenu = function() { return false; } // Prevent mouse menu right click
		Event.observe($(imgOrg), 'click', function(e) { Event.stop(e) });
		Event.observe($('art_zoom_photo'), 'mousemove', function(e) { Art.ZoomMove(e); Event.observe(document, 'mouseup', function() { artZoomDrag = 'off'; }); });
		Event.observe($('art_zoom_photo'), 'DOMMouseScroll', function(event) { Art.ZoomWheel(event) }); 	// mozilla
		Event.observe($('art_zoom_photo'), 'mousewheel', function(event) { Art.ZoomWheel(event) }); 		// IE/Opera

	// Get the pixel difference between them, create a ratio
		var ratioX 		= (imgOriginalWidth / imgLgeWidth);
		var ratioXdiff	= ratioX - 1;
		var ratioXstep	= (ratioXdiff / zoomStepsNo) + 0.2; // damian: added 0.2 here
		var ratioY 		= (imgOriginalHeight / imgLgeHeight);
		var ratioYdiff	= ratioY - 1;
		var ratioYstep	= (ratioYdiff / zoomStepsNo) + 0.2; // damian: added 0.2 here

	// Use that ratio to establish 6 zoom steps
	// Set global variables for X and Y to store active dimension values
		zoomSteps[0] = { w: imgLgeWidth, h: imgLgeHeight };
		for(var i = 1; i <= (zoomStepsNo - 1); i++) {	 // damian: changed '<' to '<=' here
			zoomSteps[i] = { w: imgLgeWidth * ((ratioXstep * i) + 1), h: imgLgeHeight * ((ratioYstep * i) + 1) };
		}
		//zoomSteps[zoomStepsNo-1] = { w: imgOriginalWidth, h: imgOriginalHeight };


		$('popup_area').style.height = (getTotalHeight() + 30) + 'px';
		$('popup_bg').style.height	= getTotalHeight() + 'px';

	}


/***** SHOW TO SCALE SETTINGS *****/

	Art.ScaleSettings = function(startAssetId) {

		if (typeof(startAssetId) == 'undefined') startAssetId = 0;

	// Get the dimensions of the starting image size
		var photoShell		= $('show_to_scale');
		var photoWidth		= parseInt(getOffsetWidth($(photoShell)));
		var photoHeight		= parseInt(getOffsetHeight($(photoShell)));
		//  originally var ratio = 0.43;
		var ratio			= 0.91;

	// Get the starting and finishing dimensions for the canvas image
		var imgWidthEnd		= parseInt(AssetData[startAssetId].large.width);
		var imgHeightEnd	= parseInt(AssetData[startAssetId].large.height);
		imgWidthStart	= actualWidth * ratio;
		imgHeightStart	= actualHeight * ratio;

	// Identify the images
		var images 		= photoShell.getElementsByTagName('img');
		var imgBg		= $(images[0]);
		var imgCanvas	= $(images[1]);

	// Set styles
		var hangAtHeight = 220 - imgHeightStart/2;
		var hangAtWidth = 378 - imgWidthStart/2;

		imgCanvas.setStyle({
//			top: ((getOffsetHeight($(photoShell)) / 2) - (imgHeightStart / 2)) - parseInt(32) + 'px',
//			left: ((getOffsetWidth($(photoShell)) / 2) - (imgWidthStart / 2)) + 'px',
			bottom: hangAtHeight + 'px',
			left: hangAtWidth + 'px'
//			width: correctWidth + 'px',
//			height: correctHeight + 'px'
		});

		imgCanvas.width		= imgWidthStart;
		imgCanvas.height	= imgHeightStart;
		canvasX	= parseInt($(imgCanvas).style.left);
		canvasY	= parseInt($(imgCanvas).style.top);
		bgX		= 0;
		bgY		= 0;

	// Set event handlers
		Event.observe($(imgCanvas), 'mousedown', function(e) {
			var imgLgeShell	= $('show_to_scale');
			var imgLge 		= imgLgeShell.getElementsByTagName('img')[1];
				imgLge		= $(imgLge);
			imgX = getMousePositionX(e) - getMouseOffsetX($(imgLge));
			imgY = getMousePositionY(e) - getMouseOffsetY($(imgLge));
			artZoomDrag = 'on';
			Event.stop(e);
		});
		Event.observe($(imgCanvas), 'mousedown', function(e) { Event.stop(e); });
		$(imgBg).oncontextmenu = function() { return false; } // Prevent mouse menu right click
		$(imgCanvas).oncontextmenu = function() { return false; } // Prevent mouse menu right click
		Event.observe($(imgCanvas), 'click', function(e) { Event.stop(e) });

		Event.observe($('show_to_scale'), 'mousemove', function(e) { Art.ZoomMove(e, 'show_to_scale'); Event.observe(document, 'mouseup', function() { artZoomDrag = 'off'; }); });
		Event.observe($('show_to_scale'), 'DOMMouseScroll', function(event) { Art.ZoomWheel(event) }); 	// mozilla
		Event.observe($('show_to_scale'), 'mousewheel', function(event) { Art.ZoomWheel(event) }); 		// IE/Opera

	// Get the pixel difference between them, create a ratio
		var ratioX 		= (imgWidthEnd / imgWidthStart);
		var ratioXdiff	= ratioX - 1;
		var ratioXstep	= (ratioXdiff / (scaleStepsNo - 1)) + 1;
		var ratioY 		= (imgHeightEnd / imgHeightStart);
		var ratioYdiff	= ratioY - 1;
		var ratioYstep	= (ratioYdiff / (scaleStepsNo - 1)) + 1;

	// Get the starting and finishing dimensions for the bg image
		var imgBgWidthEnd		= getOffsetWidth($(photoShell)) * ratioX;
		var imgBgHeightEnd		= getOffsetHeight($(photoShell)) * ratioY;
		var imgBgWidthStart		= getOffsetWidth($(photoShell));
		var imgBgHeightStart	= getOffsetHeight($(photoShell));


	// Scale step 1 image to fit nicely in frame
		var step1FrameWidth = 623;
		var step1FrameHeight = 385;
		var step1FrameXYRatio = step1FrameWidth / step1FrameHeight;
		var imgXYRatio = actualWidth / actualHeight;
		if (imgXYRatio >= step1FrameXYRatio) {
			// Resize by width
			var step1Img = { w: step1FrameWidth, h: actualHeight / actualWidth * step1FrameWidth};
		} else {
			// Resize by height
			var step1Img = { w: actualWidth / actualHeight * step1FrameHeight, h: step1FrameHeight };
		}

	// Use that ratio to establish 6 zoom steps
	// Set global variables for X and Y to store active dimension values
		scaleSteps[0] 	= { w: imgWidthStart, h: imgHeightStart };
		scaleBgSteps[0] = { w: imgBgWidthStart, h: imgBgHeightStart };
		for(var i = 1; i <= (scaleStepsNo - 1); i++) {
			if (i == 1) {
				scaleSteps[i] = { w: step1Img.w, h: step1Img.h };
				scaleBgSteps[i] = { w: imgBgWidthStart * ((ratioXstep * i) + 1), h: imgBgHeightStart * ((ratioYstep * i) + 1) };
			} else {
				scaleSteps[i] = { w: step1Img.w * ((ratioXstep * (i-1)) + 1), h: step1Img.h * ((ratioYstep * (i-1)) + 1) };
				scaleBgSteps[i] = { w: imgBgWidthStart * ((ratioXstep * (i-1)) + 1), h: imgBgHeightStart * ((ratioYstep * (i-1)) + 1) };
			}
		}

	}


// OBSOLETE:
//	Art.ScaleFixDefaultSize = function() {
//
//		var hangAtHeight = 190 - imgHeightStart/2;
//		var hangAtWidth = 378 - imgWidthStart/2;
//		var correctWidth = imgWidthStart*162/100;
//		var correctHeight = imgHeightStart*162/100;
//
//		jQuery('#scaled_image').css({ 'height' : correctHeight, 'width' : correctWidth, 'bottom' : hangAtHeight, 'left' : hangAtWidth });
//	}


/***** ZOOM THE IMAGE USING THE LINKS / MOUSEWHEEL *****/

	Art.Zoom = function(direction, showStep) {

		var transition1;
		var transition2;
		var imgBgWidth		= 2;
		var imgBgHeight		= 2;

		// Scale view
		if($('standard_zoom').style.display == 'none') {
			var steps	 	= scaleSteps;
			var stepsBg	 	= scaleBgSteps;
			var imgOrgShell	= $('show_to_scale');
			var imgOrg0 	= imgOrgShell.getElementsByTagName('img')[0];
			var imgOrg1 	= imgOrgShell.getElementsByTagName('img')[1];
			if (typeof(showStep) != 'undefined') {
				scaleState = showStep+1;
			} else {
				if(direction == 'in') { scaleState = scaleState + 1; } else { scaleState = scaleState - 1; }
			}
			if(scaleState < 1) { scaleState = 1; } else if(scaleState > scaleStepsNo) { scaleState = scaleStepsNo; }
			var zoomI = scaleState - 1;
			imgBgWidth		= stepsBg[zoomI].w;
			imgBgHeight		= stepsBg[zoomI].h;

		// Normal zoom
		} else {
			var steps	 	= zoomSteps;
			var imgOrgShell	= $('art_zoom_photo');
			var imgOrg1		= imgOrgShell.getElementsByTagName('img')[0];
			if(direction == 'in') { zoomState = zoomState + 1; } else { zoomState = zoomState - 1; }
			if(zoomState < 1) { zoomState = 1; } else if(zoomState > zoomStepsNo) { zoomState = zoomStepsNo; }
			var zoomI = zoomState - 1;
		}

	// compare width and height of the image and container during the zoom
		var shellWidth	= getOffsetWidth(imgOrgShell);
		var shellHeight	= getOffsetHeight(imgOrgShell);
		var imgWidth	= steps[zoomI].w;
		var imgHeight	= steps[zoomI].h;

		moveLeft 	= (shellWidth / 2) - (imgWidth / 2);
		moveTop 	= (shellHeight / 2) - (imgHeight / 2);
		moveBgLeft 	= (shellWidth / 2) - (imgBgWidth / 2);
		moveBgTop 	= (shellHeight / 2) - (imgBgHeight / 2);

	// Transition
		if(artZoomRun == 'false') {

			transition1 = new Effect.Morph($(imgOrg1), { style: { width: steps[zoomI].w + 'px', height: steps[zoomI].h + 'px', left: moveLeft + 'px', top: moveTop + 'px' }});
			if($('standard_zoom').style.display == 'none') {
				transition2 = new Effect.Morph($(imgOrg0), { style: { width: stepsBg[zoomI].w + 'px', height: stepsBg[zoomI].h + 'px', left: moveBgLeft + 'px', top: moveBgTop + 'px' }});;
				var transitions = [transition1,transition2];
			} else {
				transition1;
				var transitions = [transition1];
			}

		// The content transition itself (fade out the active DIV, fade in the next)
			new Effect.Parallel(transitions, { duration: 0.3, beforeStart: function() {
					artZoomRun = 'true';
				}, afterFinish: function() {
					artZoomRun = 'false';
				}
			});
		}
	}

/***** DRAG AND MOVE THE IMAGE ONCLICK *****/

	Art.ZoomMove = function(e, container) {
		if (typeof(container) != 'undefined' && container == 'show_to_scale') {
			zoomState = scaleState;
			zoomSteps = scaleSteps;
		} else {
			var container = 'art_zoom_photo';
		}

		var zoomI = zoomState - 1;
		var shellWidth	= getOffsetWidth($(container));
		var shellHeight	= getOffsetHeight($(container));
		var imgWidth	= zoomSteps[zoomI].w;
		var imgHeight	= zoomSteps[zoomI].h;

		var imgLgeShell	= $(container);
		var imgLge 		= (container == 'show_to_scale') ? imgLgeShell.getElementsByTagName('img')[1] : imgLgeShell.getElementsByTagName('img')[0];
			imgLge		= $(imgLge);

		if(imgWidth > shellWidth || imgHeight > shellHeight) {
			$(imgLge).style.cursor = 'move';

			var theElement 	= Event.element(e);
		// Location and event variables
			var x = getMousePositionX(e) - getMouseOffsetX($(container)) - imgX;
			var y = getMousePositionY(e) - getMouseOffsetY($(container)) - imgY;

			var left 	= 0;
			var top		= 0;
			var right 	= (zoomSteps[zoomI].w - getOffsetWidth($(container))) * -1;
			var bottom	= (zoomSteps[zoomI].h - getOffsetHeight($(container))) * -1;

			if(x > left) { xPos = left; }
			if(x < left && x > right)	{ xPos = x; }
			if(x < right) { xPos = right; }

			if(y > top) { yPos = top; }
			if(y < top && y > bottom)	{ yPos = y; }
			if(y < bottom) { yPos = bottom; }

			if(artZoomDrag == 'on') {
				if(zoomSteps[zoomI].w > shellWidth) {
					$(imgLge).style.left = xPos + 'px';
				}
				if(zoomSteps[zoomI].h > shellHeight) {
					$(imgLge).style.top = yPos + 'px';
				}
			}
		} else {
			$(imgLge).style.cursor = 'default';
		}
		Event.stop(e);
	}

/***** MOUSEWHEEL FUNCTION *****/

	Art.ZoomWheel = function(event){
		var delta = 0;
		if(!event) event = window.event;
		if(event.wheelDelta) {
			delta = event.wheelDelta/120;
			if (window.opera) { delta = -delta; }
		} else if(event.detail) {
			delta = -event.detail / 3;
		}

		if($('standard_zoom').style.display == 'none') {
			if(delta > 0) {
				new Art.Zoom('out');
			} else {
				new Art.Zoom('in');
			}
		} else {
			if(delta > 0) {
				new Art.Zoom('in');
			} else {
				new Art.Zoom('out');
			}
		}
		if(event.preventDefault) event.preventDefault();
		event.returnValue = false;
	}

/***** ZOOM INVERT *****/

	var ZoomInvert 		= '#dededc';
	var ZoomInvertRun	= 'false';

	Art.ZoomInvert = function() {
		if(ZoomInvertRun == 'false') {
			ZoomInvertRun = 'true';
			var element = $$('#art_zoom .photo_shell')[0];
			if(ZoomInvert == '#dededc') {
				var newColor 	= '#000000';
				ZoomInvert		= '#000000';
			} else {
				var newColor 	= '#dededc';
				ZoomInvert		= '#dededc';
			}
			new Effect.Morph(element, { style: { borderColor: newColor }, duration: 0.3, afterFinish: function() {
				ZoomInvertRun = 'false';
			}});
		}
	}


/***** ZOOM SWITCHING *****/

	Art.ZoomSwitch = function() {
		if($('standard_zoom').style.display == 'none') {
			$('lnk_show_to_scale').className = 'show_to_scale';
			$('standard_zoom').show();
			$('show_to_scale').hide();
			//$('lnk_invert').show();
			Art.ZoomSettings();
		} else {
			$('lnk_show_to_scale').className = 'back_to_zoom';
			$('standard_zoom').hide();
			$('show_to_scale').show();
			//$('lnk_invert').hide();
			Art.ScaleSettings();
		}
	}


	function tb_position() {
	jQuery("#TB_window").css({marginLeft: '-' + parseInt((960 / 2),10) + 'px', width: 960 + 'px'});
	if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
		jQuery("#TB_window").css({marginTop: '-' + parseInt((610 / 2),10) + 'px'});
	}
	}