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,
EVT_NAMESPACE = '.imageViews';
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-406-405h$','_d2?$pdp-406-405h$','_d3?$pdp-406-405h$','_of?$pdp-406-405h$','_ob?$pdp-406-405h$','_os?$pdp-406-405h$','_r?$pdp-409$','_l1?$pdp-406-405h$','_l2?$pdp-406-405h$','_l3?$pdp-406-405h$'];
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.maxViews = 4;
inst.opts.parentSelector = '#qvModal';
}else{
inst.useFolders = inst.folders.full;
inst.maxViews = 6;
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');
inst.el.viewLarger = inst.el.imageNav.find('.viewLarger');
inst.el.imgHolder = inst.el.container.find('#imgHolder');
function initImageViews()
{
inst.el.imageViews.find('a').each(function(){
var folderIndex = getFolderIndexFromElement(this);
$(this).unbind('click' + EVT_NAMESPACE); // remove any other click event listeners
$(this).bind('click' + EVT_NAMESPACE, {fIndex:folderIndex}, swapImage);
});
// stop any laydown anchors from clicking through
$('.imgLaydown').live('click', function(evt) {
evt.preventDefault();
});
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;
}
// TODO: rewrite swap image to implement src change?
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,
imgHolderClass = (folderIndex >= 2) ? 'fullImage' : 'subImage'; // background : foreground
// TODO find from parent element so that it doesn't conflict with quick view on PDP
// TODO: is there a way to unbind multiple elements?
inst.el.viewLarger.unbind('click' + EVT_NAMESPACE);
inst.el.imgHolder.unbind('click' + EVT_NAMESPACE).removeClass('fullImage subImage').addClass(imgHolderClass);
// TODO: can we get rid of this now?
if(folderIndex === 8) // this is the rotate view so insert flash instead of an image // TODO: create setting for this so that it's not hard coded
{
var params = {
allowScriptAccess: "always",
wmode: "transparent"
};
swfobject.embedSWF(jsImageSrcPrepend+"/Images/77kids/webset10/07072010/btsdenimtoddler/btsdenimtoddler.swf ", "imgHolder", "409", "408", "9",jsImageSrcPrepend+"/Images/flash/expressInstall.swf", {}, params);
inst.el.viewLarger.bind('click' + EVT_NAMESPACE, {colorProdId:inst.currentColor, folderIndex:getDefaultImageView()}, viewLargerPopup);
}
else {
var formEl = $('#content form[name=addToCart]');
var sizeId = "";
if(formEl.length){
sizeId = formEl.get(0).size.value;
}
var newImageAnchor = $(''),
newImage = $('![]()
');
newImageAnchor.append(newImage);
inst.el.imgHolder.find('a.imgLaydown').remove();
newImage.bind('load' + EVT_NAMESPACE, function (event) {
inst.el.imgHolder.prepend(newImageAnchor);
inst.el.imgHolder.trigger('imageUpdate');
$(this).unbind('load' + EVT_NAMESPACE);
})
.attr('src', jsS7ImageSrcPrepend+'/'+inst.currentColor+folders[folderIndex]);
inst.el.imgHolder.bind('click' + EVT_NAMESPACE, {colorProdId:inst.currentColor, folderIndex:folderIndex}, viewLargerPopup);
inst.el.viewLarger.bind('click' + EVT_NAMESPACE, {colorProdId:inst.currentColor, folderIndex:folderIndex}, viewLargerPopup);
}
swapSelectedImage(folderIndex);
}
// TODO: ugh, rewrite this
function viewLargerPopup(e)
{
e.preventDefault();
var viewInfo = inst.folders.viewLarger[e.data.folderIndex],
xc = 676,
yc = 700,
popup;
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();
}
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();
var viewCntr = 0;
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('![Click for product '+inst.folders.viewName[i]+' view]('+jsS7ImageSrcPrepend+'/'+inst.currentColor+inst.folders.thumbs[i]+')
');
if (++viewCntr >= inst.maxViews) {
break;
}
}
}
initImageViews();
}
inst.swapColor = function(colorProdId)
{
if(!!inst.product.colors[colorProdId])
{
inst.currentColor = colorProdId;
changeImageThumbs();
}
else
return false;
}
// FIXME: this is called again in ColorSizeSelect, swapColor should not do anything if color is already set
/*
if(typeof inst.opts.defaultColor == 'undefined') {
inst.swapColor(inst.product.colors[0].id);
}
else {
inst.swapColor(inst.product.colors[inst.opts.defaultColor].id);
}
*/
}