var legacyImgFolderMap = {
	//full
	'_f?$pdp-265$': 'Large_265',
	'_b?$pdp-265$': 'back_265',
	'_d1?$pdp-408$': 'closeup1_408',
	'_d2?$pdp-408$': 'closeup2_408',
	'_r?$pdp-409$': '409x408Rotates',
	'_of?$pdp-406$': 'on_body',
	//viewLarger
	'_f?$qv-450$': 'front',
	'_b?$qv-450$': 'back',
	'_d1?$dv-676$': 'closeup1_676',
	'_d2?$dv-676$': 'closeup2_676',
	'_r?$pdp-409$': '409x408Rotates',
	'_of?$dv-676$': 'on_body_676x674',
	//esFull
	'_f?$qv-224$': 'ES_front',
	'_b?$qv-224$': 'ES_back',
	'_d1?$qv-345$': 'ES_cu1',
	'_d2?$qv-345$': 'ES_cu2',
	'_r?$pdp-344$': '344x331Rotates',
	'_of?$qv-345$': 'ES_OnBody',
	//thumbs
	'_f?$pdp-40$': '40PxTall',
	'_b?$pdp-40$': '40PxTallBacks',
	'_d1?$pdp-40$': '40PxTallCloseup1',
	'_d2?$pdp-40$': '40PxTallCloseup2',
	'_r?$pdp-40$': '40x40Rotates',
	'_of?$pdp-40$': '40PxTall_on_body'
};


function ImageView(opts)
{
	var inst = this;
	inst.opts = opts;
	if(typeof inst.opts == 'undefined') return false;
	inst.prodId = inst.opts.prodId;
	if(typeof inst.prodId == 'undefined') return false;
	inst.product = products[inst.prodId];
	if(typeof inst.product == 'undefined') return false;
	
	inst.folders = {};
	inst.folders.akamai = jsImageSrcPrepend+'/Images/';
	inst.folders.gradient = inst.folders.akamai+'pdp/pdpGradientBg.jpg';
	inst.folders.full = ['_f?$pdp-265$','_b?$pdp-265$','_d1?$pdp-408$','_d2?$pdp-408$','_d3?$pdp-408$','_of?$pdp-406$','_ob?$pdp-406$','_os?$pdp-406$','_r?$pdp-409$','_l1?$pdp-406$','_l2?$pdp-406$','_l3?$pdp-406$'];
	inst.folders.viewLarger = ['_f?$qv-450$','_b?$qv-450$','_d1?$dv-676$','_d2?$dv-676$','_d3?$dv-676$','_of?$dv-676$','_ob?$dv-676$','_os?$dv-676$','_r?$pdp-409$','_l1?$dv-676$','_l2?$dv-676$','_l3?$dv-676$'];
	inst.folders.esFull = ['_f?$qv-224$','_b?$qv-224$','_d1?$qv-345$','_d2?$qv-345$','_d3?$qv-345$','_of?$qv-345$','_ob?$qv-345$','_os?$qv-345$','_r?$pdp-344$','_l1?$qv-345$','_l2?$qv-345$','_l3?$qv-345$'];
	inst.folders.thumbs = ['_f?$pdp-40$','_b?$pdp-40$','_d1?$pdp-40$','_d2?$pdp-40$','_d3?$pdp-40$','_of?$pdp-40$','_ob?$pdp-40$','_os?$pdp-40$','_r?$pdp-40$','_l1?$pdp-40$','_l2?$pdp-40$','_l3?$pdp-40$'];
	inst.folders.viewName = ['front','back','close-up','close-up','close-up','on-body','on-body','on-body','rotation','life-style','life-style','life-style'];
	inst.folders.priority = [5,0,1,2,3,4,6,7,8,9,10,11]; // indexes that correspond to the above arrays indicating the order preference of the default first image
	
	if(!!inst.opts.quickView){
		inst.useFolders = inst.folders.esFull;
		inst.opts.parentSelector = '#qvModal';
	}else{
		inst.useFolders = inst.folders.full;
		inst.opts.parentSelector = '#content';
	}
	inst.currentColor = null;
	inst.lastImageView = false;
	
	inst.el = {};
	// TODO take all of the selectors as option
	inst.el.container = $(inst.opts.parentSelector);
	inst.el.imageNav = inst.el.container.find('#imageNav');
	inst.el.imageViews = inst.el.imageNav.find('.views');
	
	function initImageViews()
	{
		inst.el.imageViews.find('a').each(function(){
			var folderIndex = getFolderIndexFromElement(this);
			$(this).unbind('click'); // remove any other click event listeners
			$(this).bind('click', {fIndex:folderIndex}, swapImage);
		});
		
		var useView = 0;
		if(inst.lastImageView === false) // no view has been selected, use default view
			useView = getDefaultImageView();
		else
		{
			if(inst.product.colors[inst.currentColor].hasView[inst.lastImageView])
				useView = inst.lastImageView; // a view has already been selected and is available, keep using that
			else
				useView = getDefaultImageView(); // previous view is not available so switch to the default
		}
		swapImage(useView);
	}

	function getDefaultImageView()
	{
		for(var i=0; i < inst.folders.priority.length; i++)
		{
			if(inst.product.colors[inst.currentColor].hasView[inst.folders.priority[i]])
			{
				return inst.folders.priority[i];
			}
		}
		return 0;
	}

	function getFolderIndexFromElement(domElement)
	{
		// determine which view this link is. can't rely on them being in sequential order since some brands have different orders
		var folderIndex = 0;
		domElement = $(domElement);
		for (var i = 0; i < 12; i++) {
			if (domElement.hasClass('view' + (i + 1) + '_link')) {
				folderIndex = i;
				break;
			}
		}
		
		return folderIndex;
	}

	function swapImage(folderIndexOrEvent)
	{
		if(typeof folderIndexOrEvent === 'object')
		{
			folderIndexOrEvent.preventDefault(); // keep the link from follow its href
			folderIndex = folderIndexOrEvent.data.fIndex;
		}
		else folderIndex = folderIndexOrEvent;
		
		inst.lastImageView = folderIndex;
		
		var folders = inst.useFolders;
		if(typeof inExpressShop != 'undefined' && inExpressShop) folders = inst.folders.esFull;
		
		var imgHolder = 'subImage'; // foreground
		if(folderIndex >= 2) // background
			imgHolder = 'fullImage';
		
		// TODO find from parent element so that it doesn't conflict with quick view on PDP
		inst.el.container.find('.imgHolder, #imageNav .bottom a').unbind('click');
		
		inst.el.container.find('.imgHolder').empty();
		if(folderIndex === 8) // this is the rotate view so insert flash instead of an image // TO DO: create setting for this so that it's not hard coded
		{
			var so = new SWFObject(jsImageSrcPrepend+"/Images/player.swf?movie="+jsImageSrcPrepend+"/Images/laydowns/"+legacyImgFolderMap[folders[folderIndex]]+"/"+inst.currentColor+".swf","flasho","409","408","8");
			so.addParam("wmode","transparent");
			so.addParam("allowScriptAccess","always");
			so.write(imgHolder);
			inst.el.container.find('#imageNav .bottom a').bind('click', {colorProdId:inst.currentColor, folderIndex:getDefaultImageView()}, viewLarger);
		}
		else {
			var formEl = $('#content form[name=addToCart]');
			var sizeId = "";
			if(formEl.length){
				sizeId = formEl.get(0).size.value;
			}
			inst.el.container.find('#'+imgHolder).html('<a href="javascript:;"><img class="closetproduct" options="scroll=true,height=100,source=PDP_DD,catId=,prodId='+inst.currentColor+',contProdId='+inst.ProdId+',sizeId='+sizeId+'" id="drag:::'+inst.currentColor+'" src="'+jsS7ImageSrcPrepend+'/'+inst.currentColor+folders[folderIndex]+'" alt="Click for larger product view" /></a>');
			inst.el.container.find('#'+imgHolder+',#imageNav .bottom a').bind('click', {colorProdId:inst.currentColor, folderIndex:folderIndex}, viewLarger);
		}
	}

	function viewLarger(e)
	{
		e.preventDefault();
		 
		var viewInfo = inst.folders.viewLarger[e.data.folderIndex];
		var imageStatus = inst.product.colors[e.data.colorProdId].imageStatus;
		
		if ((navigator.userAgent.indexOf('Mac') != -1)) var os = "mac";
		// Check if XP SP2, if so we will set the window height differently below to account for the permanent status bar
		else if ((navigator.userAgent.indexOf('Windows NT 5.1;') != -1) && (navigator.userAgent.indexOf('; SV1') != -1)) var os = "xpsp2";
		else var os = "other";
		var browser = navigator.appName;
		var large_height = $('.imgHolder img').height();
		var xc = 0;
		var yc = 0;
		var lsize = "";
		if (large_height>=370){
		xc = 676;
		if (os=="mac") yc = 744;
		else if (os=="xpsp2" && browser=="Microsoft Internet Explorer") yc = 756;
		else yc = 744;
		lsize = "tall";
		}
		else{
		xc = 676;
		if (os=="mac") yc = 734;
		else if (os=="xpsp2" && browser=="Microsoft Internet Explorer") yc = 746;
		else yc = 744;
		lsize = "short";
		}
		var popupURL = '/'+jsContextRoot+'/browse/product_detail_view.jsp?productId='+inst.prodId+'&img='+e.data.colorProdId+'&view='+viewInfo;
		popup = window.open(popupURL,"detailview"+inst.prodId,'top=7,screenY=7,left=7,screenX=7,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width='+xc+',height='+yc);
		popup.location = popupURL;
		popup.opener = self;
		popup.focus();
		popup.resizeTo(xc,yc);
	}

	function swapSelectedImage(folderIndex)
	{
		folderIndex++;
		inst.el.imageViews.find('a').removeClass('selected');
		inst.el.imageViews.find('.view'+folderIndex+'_link').addClass('selected');
	}

	function changeImageThumbs()
	{
		inst.el.imageViews.empty();
		for(var i=0; i < inst.product.colors[inst.currentColor].hasView.length; i++)
		{
			if(inst.product.colors[inst.currentColor].hasView[i] && inst.folders.thumbs[i] !== false)
			{
				var width = (i < 2) ? '' : ' width="40"';
				inst.el.imageViews.append('<a class="view'+(i+1)+'_link" href="javascript:;"><img src="'+jsS7ImageSrcPrepend+'/'+inst.currentColor+inst.folders.thumbs[i]+'" alt="Click for product '+inst.folders.viewName[i]+' view" height="40"'+width+' /></a>');
			}
		}
		initImageViews();
	}
	inst.swapColor = function(colorProdId)
	{
		if(!!inst.product.colors[colorProdId])
		{
			inst.currentColor = colorProdId;
			changeImageThumbs();
		}
		else
			return false;
	}
	
	if(typeof inst.opts.defaultColor == 'undefined')
		inst.swapColor(inst.product.colors[0].id);
	else
		inst.swapColor(inst.product.colors[inst.opts.defaultColor].id);
}