//--- CONFIGURATION VARIABLES:
	//	Change these variables to reflect your implementation of vsDrawer
	var vsDrawerTimeoutLength = 500; // Milliseconds, i.e.: 1000 = 1 sec
	var vsDrawerOpenLength = 0.25; // Decimal seconds, i.e.: 1.0 = 1 sec
	var vsDrawerCloseLength = 0.25; // Decimal seconds, i.e.: 1.0 = 1 sec
	var vsDrawer = 'vsDrawer'; // ID of the drawer's HTML element
	var vsDrawerWidth = 423; // integer width of the drawer
	var vsDrawerHeight = 100; // integer height of the drawer
	var vsImageContainer = 'vsImageContainer'; // ID of the main image container's HTML element
	var vsImage = 'vsImage'; // ID of the main image
	var vsImageWidth = 423; // integer width of the main image
	var vsImageHeight = 570; // integet height of the main image
	var vsImageClassName = 'fullImage'; // class name of the  main image (full size image not zoom image)
	var vsThumbClassName = 'thumbnail'; // class for thumnail images
	var vsThumbCurrentClassName = 'currentThumbnail'; // class for the thumbnail of the image currently in the viewer
	var vsThumbActiveClassName = 'activeThumbnail'; // class for the rollover/active state of the thumbnail images
	var vsControlImage = 'vsControlImage'; // ID of the control image
	var vsControlImageOffSrc = '/images/proddisplay/moreimg_off.gif'; // src of control image in off state
	var vsControlImageDrawerOnSrc = '/images/proddisplay/moreimg_drawerOn.gif'; // src of control image when the drawer is open
	var vsControlImageZoomOnSrc = '/images/proddisplay/moreimg_zoomOn.gif'; // src of control image when zoom is active
	// --- DO NOT EDIT ANYTHING BELOW THIS

	// Global Variable Setup
	var vsDrawerTimeout;

	// vsDrawer Functions
	function vsDrawerTimeoutSet(){ 
	vsDrawerTimeout = setTimeout("vsDrawerClose(vsDrawer)", vsDrawerTimeoutLength); }

	function vsDrawerTimeoutClear(){
	 clearTimeout(vsDrawerTimeout); }

	function vsDrawerClose(target){
		// .getAttribute for IE, .getStyle for others
		var drawerTop = $(target).offsetTop;
		//var drawerTop = $('target').getStyle('top') || $('target').getAttribute('top');
		if(parseInt(drawerTop) < vsImageHeight){
			new Effect.Move(target, {duration: vsDrawerCloseLength, y: vsDrawerHeight, afterFinish: function(){
				$(target).style.top = vsImageHeight + 'px'
			}});
			$(vsControlImage).src = vsControlImageOffSrc;
		}
	}

	function vsDrawerOpen(target){
		vsDrawerTimeoutClear();
		// .getAttribute for IE, .getStyle for others
		var drawerTop = $(target).offsetTop;
		//var drawerTop = $(target).getStyle('top') || $(target).getAttribute('top');
		if(parseInt(drawerTop) >= vsImageHeight){
			$(target).top = vsImageHeight + 'px';
			new Effect.Move(target, {duration: vsDrawerOpenLength, y: -vsDrawerHeight});
			$(vsControlImage).src = vsControlImageDrawerOnSrc;
		}
	}

	function vsDrawerToggle(target){
		// .getAttribute for IE, .getStyle for others
		var drawerTop = $(target).offsetTop;
		//var drawerTop = $(target).getAttribute("height");
		//var drawerTop = $('target').getStyle('top') || $('target').getAttribute('top');
		if(parseInt(drawerTop) >= vsImageHeight){
			vsDrawerOpen(target);
		} else {
			vsDrawerClose(target);
		}
	}

	function vsEmptyElement(target){
		while($(target).childNodes.length > 0){
			$(target).removeChild($(target).firstChild);
		}
	}

	function vsSwapZoomInstrstructions(direction){
		if(direction == 'on'){
			if($(vsControlImage).src != vsControlImageZoomOnSrc){
				$(vsControlImage).src = vsControlImageZoomOnSrc;
			}
		} else {
			$(vsControlImage).src = vsControlImageOffSrc;
		}
	}

	function vsSwapMainImage(thumbLink){
		// Change the class for all the thumbnails to the default class
		var thumbArray = $('vsDrawer').getElementsByTagName('img');
		for(var i = 0; i < thumbArray.length; i++){
			thumbArray[i].className = vsThumbClassName;
		}
				
		// Get a reference to the thumbnail image
		var thumbImage = $(event.srcElement.id);
		// Assign the current thubmnail the vsThumbnailCurrentClassName value
		thumbImage.className = vsThumbClassName + ' ' + vsThumbCurrentClassName;
		// Load the zoom image.
		tmpImage = new Image();

		tmpImage.src = thumbImage.getAttribute('zoomsrc');
		var fullImage = document.createElement('img');
		fullImage.id = vsImage;
		fullImage.width = vsImageWidth;
		fullImage.height = vsImageHeight;
		fullImage.className = vsImageClassName;
		fullImage.src = thumbImage.getAttribute('fullsrc');
		fullImage.setAttribute('data-magnifysrc', thumbImage.getAttribute('zoomsrc'));
		fullImage.setAttribute('rel', thumbImage.id);
		vsEmptyElement(vsImageContainer);

		$(vsImageContainer).appendChild(fullImage);

		// Run the Zoom.init() script again since we have changed up the image info.
	}

	function vsThumbActivate(event){
		var thumbImage = $(event.srcElement.id);
		thumbImage.className = vsThumbClassName + ' ' + vsThumbActiveClassName;
		thumbImage.style.cursor = 'pointer';
	}

	function vsThumbDeactivate(event){
		var thumbImage = $(event.srcElement.id);
		if(thumbImage.className.indexOf(vsThumbCurrentClassName) > -1){
			thumbImage.className = vsThumbClassName + ' ' + vsThumbCurrentClassName;
		} else {
			thumbImage.className = vsThumbClassName;
		}
	}

	function vsDrawerPrep(){
		$(vsDrawer).makePositioned;
		//document.getElementById('vsDrawer').makePositioned();
		Event.observe(vsDrawer, 'mouseover', vsDrawerTimeoutClear);
		Event.observe(vsDrawer, 'mouseout', vsDrawerTimeoutSet);
		// We have to go backwards since we are removing nodes.
		//	If we start at the top (index: 0) removed nodes alter the node order.
		for(var i = $(vsDrawer).childNodes.length - 1; i >=0; i--){
			currentNode = $(vsDrawer).childNodes[i];

			if(currentNode.nodeType != 1 && currentNode.nodeName.toUpperCase() != 'IMG'){
				$(vsDrawer).removeChild(currentNode);
			}
		}
		var currentNode;
		for(var i = $(vsDrawer).childNodes.length - 1; i >= 0; i--){
			currentNode = $(vsDrawer).childNodes[i];
			currentNode.id = 'vsDrawerThumb' + i;

			if(i == 0){
				currentNode.className = currentNode.className + ' ' + vsThumbCurrentClassName;
			}

			Event.observe(currentNode, 'click', vsSwapMainImage);
			Event.observe(currentNode, 'mouseover', vsThumbActivate);
			Event.observe(currentNode, 'mouseout', vsThumbDeactivate);
		}
	}
	//Event.observe(window, 'load', vsDrawerPrep);
	
/* Scott Added Code Starts Here.... */

var killHideDrawer = false;
var vsDrawerTimeout;

function killHideTimeout() {
    clearTimeout(vsDrawerTimeout);
}

function unKillHideTimeout() {
	closeScottDrawer();
}
var activeThumb = 0;

function populateDrawer() {
	if (typeof(zoom_included) != "undefined" && zoom_included == true && 
			flashEnabled() && zoom_cookie != 'A' && zoom_cookie != 'F')
	{
		if(scottImgDrawer.length > 2)
		{
			resetDrawerArray();
		} 
		getProductZoom(scottImgDrawer);
	}
	else
	{
		var scottDrawer = document.getElementById("scott_drawer");
		var vsControl = document.getElementById("vsControl");
		if (scottImgDrawer.length < 2) {		
			return;
		}
		vsControl.style.display = "block"; // display since CSS had it not displayed
		resetDrawerArray();

		var out = "";
		for (var i = 0; i < scottImgDrawer.length; i++) {
			out = out + "<img id=\"drawerimg_" + i + "\" src=\"" + scottImgDrawer[i] + "\" class=\"thumbnail\" onclick=\"swapImage(" + i + ");\" onmouseover=\"killHideTimeout();thumbCurrent(" + i + ");\" onmouseout=\"closeScottDrawer();thumbNormal(" + i + ");\"/>";
		}
		out = out.replace(/prodlgvw/g,"prodpri2");
		out = out.replace(/prodpri2/g,"tmbsm");
		scottDrawer.innerHTML = out;
		var dimg = document.getElementById("drawerimg_"+activeThumb);
		dimg.className = "currentThumbnail";
	}
}

function thumbCurrent(i) {
	var dimg = document.getElementById("drawerimg_"+i);
	dimg.className = "activeThumbnail";

}
function thumbNormal(i) {
	var dimg = document.getElementById("drawerimg_"+i);
	if (i != activeThumb) {
		dimg.className = "thumbnail";
	} else {
		dimg.className = "currentThumbnail";    
	}
}

function resetDrawerArray() {
    var newArray = new Array();
    for (var i = 0; i < scottImgDrawer.length; i++) {
        var innew = false;
        for (var j = 0; j < newArray.length; j++) {
            if (newArray[j] == scottImgDrawer[i]) {
                innew = true;
                break;
            }
        }
        if (innew == false) {
            newArray.push(scottImgDrawer[i]);
        }
    }
    scottImgDrawer = newArray;
}

var vsImageSwapped = false;

function swapImage(i) {
	vsImageSwapped = true; // for swatches
    var img = document.getElementById("vsImage");   
    var newImgSrc = scottImgDrawer[i];
    newImgSrc = newImgSrc.replace(/prodlgvw/g,"prodpri2");
    img.src = newImgSrc;
	for (var j = 0; j < scottImgDrawer.length; j++) {
		var dimg = document.getElementById("drawerimg_"+j);
		dimg.style.border = "1px solid #999999";   
	}
	var dimg2 = document.getElementById("drawerimg_"+i);
    dimg2.style.border = "1px solid #FF0000";   
	hideScottDrawer();
}

function openScottDrawer() {
	clearTimeout(vsDrawerTimeout); // clear anything in place
    var scottDrawer = document.getElementById("scott_drawer");
	var bodyCont = document.getElementById("bodycontainer");
	var vsControl = document.getElementById("vsControl");
	var left = getPosition(vsControl).x;
	var top = getPosition(vsControl).y - 100;
	
	if(navigator.userAgent.indexOf("Gecko") != -1)
	{
		// drawer_offset determined by elements above vsImage
		var drawer_offset = 0;
		
		var imagePosition = document.getElementById("vsImage").offsetTop;
		
		// product page offset
		drawer_offset = imagePosition - bodyCont.offsetTop;
		
		// edit page requires less top margin
		if( window.location.pathname == "/commerce/shoppingbag-editProduct.vs")
			drawer_offset -= 33;
			
		// affect the offset for the signed in div
		if(document.getElementById("signinpart").offsetHeight > 0)
			drawer_offset += (document.getElementById("signinpart").offsetHeight + 1);
			
		scottDrawer.style.marginTop = (drawer_offset - 14) + "px";
	}	
	
	scottDrawer.style.left = left; 
	scottDrawer.style.top = top; 	
    scottDrawer.style.visibility="visible";
}


function closeScottDrawer() {
	clearTimeout(vsDrawerTimeout); // clear anything in place
	vsDrawerTimeout = setTimeout(hideScottDrawer,2000);
	
}

function hideScottDrawer() {
	var scottDrawer = document.getElementById("scott_drawer");
	scottDrawer.style.visibility="hidden";
}

function getPosition(e){
	var left = 0;
	var top  = 0;

	while (e.offsetParent){
		left += e.offsetLeft;
		top  += e.offsetTop;
		e     = e.offsetParent;
	}

	left += e.offsetLeft;
	top  += e.offsetTop;

	return {x:left, y:top};
}