Eraserhood > Punk Rock > Punk Rock Eraserhood T-Shirt

View larger
Color: Black
// <![CDATA[
// <![CDATA[
// this initial block stores the images in a global var called swatchUrls so
// that we will have them as we do rollovers
var queryString;
var SelectedDefaultSwatchImgId;
var SelectedDefaultSwatchColorName;
var thumbnailPerspective = "default";
var swatchUrls = new Array();
var originalImageUrls = new Array();

setDefaultSwatch( 'imageColor_6','Black');

swatchUrls['imageColor_6'] = new Array(); //for default, front and back
swatchUrls['imageColor_6'][0] = new Image;

swatchUrls['imageColor_6'][0].src = 'http://i1.cpcache.com/product/853468908/punk_rock_eraserhood_tshirt.jpg?color=Black&height=350&width=350';

swatchUrls['imageColor_6'][1] = new Image;
swatchUrls['imageColor_6'][1].src = 'http://i1.cpcache.com/product/853468908/punk_rock_eraserhood_tshirt.jpg?color=Black&height=350&width=350';

swatchUrls['imageColor_6'][2] = new Image;
swatchUrls['imageColor_6'][2].src = 'http://i1.cpcache.com/product/853468908/punk_rock_eraserhood_tshirt.jpg?side=Back&color=Black&height=350&width=350';

var lastIndex = (swatchUrls['imageColor_6']).length;
swatchUrls['imageColor_6'][lastIndex] = new Image;
swatchUrls['imageColor_6'][lastIndex].src = 'http://content.cpcache.com/products/additional_photos/253_c6_1.jpg';

swatchUrls['imageColor_58'] = new Array(); //for default, front and back
swatchUrls['imageColor_58'][0] = new Image;

swatchUrls['imageColor_58'][0].src = 'http://i1.cpcache.com/product/853468908/punk_rock_eraserhood_tshirt.jpg?color=Wasabi&height=350&width=350';

swatchUrls['imageColor_58'][1] = new Image;
swatchUrls['imageColor_58'][1].src = 'http://i1.cpcache.com/product/853468908/punk_rock_eraserhood_tshirt.jpg?color=Wasabi&height=350&width=350';

swatchUrls['imageColor_58'][2] = new Image;
swatchUrls['imageColor_58'][2].src = 'http://i1.cpcache.com/product/853468908/punk_rock_eraserhood_tshirt.jpg?side=Back&color=Wasabi&height=350&width=350';

var lastIndex = (swatchUrls['imageColor_58']).length;
swatchUrls['imageColor_58'][lastIndex] = new Image;
swatchUrls['imageColor_58'][lastIndex].src = 'http://content.cpcache.com/products/additional_photos/253_c58_1.jpg';

function setDefaultSwatch(colorId,colorName){
SelectedDefaultSwatchImgId = colorId;
SelectedDefaultSwatchColorName = colorName;
}
/**
** refreshImages – replaces the image link with a
** new random number so that the image is not cached
**/
function refreshImages(){
var regexp = /?r=*/;
var randNum = "?r=" + (new Date()).getTime();
for(var j in swatchUrls) {
for(var i in swatchUrls[j]) {
var myUrl = swatchUrls[j][i].src;
if (myUrl.match(regexp)) {
swatchUrls[j][i].src = myUrl.replace(regexp, randNum);
} else {
swatchUrls[j][i].src = myUrl + randNum;
}
}
}
//refresh originals
for(var k in originalImageUrls) {
var myUrl = originalImageUrls[k];
if (myUrl.match(regexp)) {
originalImageUrls[k] = myUrl.replace(regexp, randNum);
} else {
originalImageUrls[k] = myUrl + randNum;
}
}
}

//convenience method
function convertImageArrayToUrlArray(newImageArray) {
//get source and put into array
var urlArray = new Array(newImageArray.length);
var subsitutableValues = "";
if (productPerspective != undefined)
subsitutableValues = RefreshTemplateSubstitutableValues("", true, productPerspective);
for(i=0; i 0) {
urlArray[i] = newImageArray[i].src.replace(‘[subfields]’, subsitutableValues);
} else {
urlArray[i] = newImageArray[i].src.replace(‘[subfields]’, ”);
}
}
}
//fix for if you clicked back

if (thumbnailPerspective.toLowerCase() == ‘back’) {
urlArray[0] = newImageArray[2].src.replace(‘[subfields]’, subsitutableValues);
} else if (thumbnailPerspective.toLowerCase() == ‘front’) {
urlArray[0] = newImageArray[1].src.replace(‘[subfields]’, subsitutableValues);
}

return urlArray;
}
/**
** doSwatchClick – action performed when swatch is clicked, which could be:
** 1. change default color text if in edit page, also change view larger link to send in the new color
** 2. change default color chosen in drop down if a drop down exists
** 3. swap main image + 2 small front/back images with the chosen color
** 4. refreshes size drop down if upon choosing this color, there are sizes that are out of stock
** 5. if in edit page, draws a border around the clicked swatch
**/
function doSwatchClick(newImageArray, dropDownId, newSelectValue, sizeDropDownId, imgIdToHighlight, colorText) {
//get source and put into array
var urlArray = convertImageArrayToUrlArray(newImageArray);
setDefaultSwatch(imgIdToHighlight, colorText);
if (imgIdToHighlight != undefined && imgIdToHighlight != ”) {
toggleImgBorder(imgIdToHighlight,1,1);
}
if (changeDefaultColor != undefined) {
changeDefaultColor(colorText);
}

swapImgsWithUrls([‘mainimg’, ‘img1’, ‘img2’, ‘imgproductinfo1’], urlArray);

changeDropDownValueSelected(dropDownId, newSelectValue);
if (sizeDropDownId != ”) {
if (refreshSizeDropDown != undefined) {
refreshSizeDropDown(sizeDropDownId, dropDownId);
}
}

//overwrite originalImageUrls – call save again since your new values have changed
saveOriginalImageUrls();
//refresh availability message, if it exists
if (refreshAvailabilityMessage != undefined) {
refreshAvailabilityMessage();
}
}
/**
** saveOriginalImageUrls() — saves the pre rollover images in a global
** var named originalImageUrls so that we can retrieve them ‘onmouseout’
**/
function saveOriginalImageUrls() {
if (document.images[‘mainimg’] != undefined) {
originalImageUrls[0] = document.images[‘mainimg’].src
}

var lastIndex = 2;
if (document.images[‘img1’] != undefined) {
originalImageUrls[1] = document.images[‘img1’].src
}

if (document.images[‘img2’] != undefined) {
originalImageUrls[2] = document.images[‘img2’].src
lastIndex=3;
}

if (document.images[‘imgproductinfo1’] != undefined)
{
originalImageUrls[lastIndex] = document.images[‘imgproductinfo1’].src
}

}
/**
** restoreOriginalImageUrls() — onmouseout, we restore whatever the original
** images were pre-rollover
**/
function restoreOriginalImageUrls() {

swapImgsWithUrls([‘mainimg’, ‘img1’, ‘img2’, ‘imgproductinfo1’], originalImageUrls);

}
/**
** changeImgBorder — changes image border to a new value
**/
function changeImgBorder(id, border,colorno) {
myImg = document.getElementById(id);

if (myImg != undefined) {
myImg.style.border=border;

}
}
/**
** toggleImgBorder
**/
function toggleImgBorder(idToHighlight,SelectedAsDefault,MouseOver) {

var divId = ‘imageColor_6’;
if (divId == idToHighlight && MouseOver==1) {
if(SelectedAsDefault){
changeImgBorder(divId, “1px solid black”,6);

}else{
if(divId != SelectedDefaultSwatchImgId)
changeImgBorder(divId, “1px solid gray”,6);
changeDefaultColor(‘Black’);
}

} else {
if (SelectedDefaultSwatchImgId != undefined && SelectedDefaultSwatchImgId != ”)
{
if (!MouseOver)
{
changeDefaultColor(SelectedDefaultSwatchColorName);
}
if(divId != SelectedDefaultSwatchImgId)
{
//original border
changeImgBorder(divId, “0px solid”,6);

}
}
}

var divId = ‘imageColor_58’;
if (divId == idToHighlight && MouseOver==1) {
if(SelectedAsDefault){
changeImgBorder(divId, “1px solid black”,58);

}else{
if(divId != SelectedDefaultSwatchImgId)
changeImgBorder(divId, “1px solid gray”,58);
changeDefaultColor(‘Wasabi’);
}

} else {
if (SelectedDefaultSwatchImgId != undefined && SelectedDefaultSwatchImgId != ”)
{
if (!MouseOver)
{
changeDefaultColor(SelectedDefaultSwatchColorName);
}
if(divId != SelectedDefaultSwatchImgId)
{
//original border
changeImgBorder(divId, “0px solid”,58);

}
}
}

}

//end if in edit page
// ]]]]>
// ]]>