misc = {
/**
* decode a string from utf8
**/
decodeFromUtf8: function(utf8) {
var string = '';
var temp1 = temp2 = temp3 = 0;
for (i = 0; i < utf8.length; i++) {
temp1 = utf8.charCodeAt(i);
if (temp1 < 128) {
string += String.fromCharCode(temp1);
} else if((temp1 > 191) && (temp1 < 224)) {
temp3 = utf8.charCodeAt(i + 1);
string += String.fromCharCode(((temp1 & 31) << 6) | (temp3 & 63));
i++;
} else {
temp3 = utf8.charCodeAt(i + 1);
temp4 = utf8.charCodeAt(i + 2);
string += String.fromCharCode(((temp1 & 15) << 12) | ((temp3 & 63) << 6) | (temp4 & 63));
i += 2;
}
}
return string;
},
/**
* encode a string to utf8
**/
encodeToUtf8: function (text) {
text = text.replace(/\r\n/g, '\n');
var utf8 = '';
var temp = 0;
for (var i = 0; i < text.length; i++) {
var temp = text.charCodeAt(i);
if (temp < 128) {
utf8 += String.fromCharCode(temp);
} else if((temp > 127) && (temp < 2048)) {
utf8 += String.fromCharCode((temp >> 6) | 192);
utf8 += String.fromCharCode((temp & 63) | 128);
} else {
utf8 += String.fromCharCode((temp >> 12) | 224);
utf8 += String.fromCharCode(((temp >> 6) & 63) | 128);
utf8 += String.fromCharCode((temp & 63) | 128);
}
}
return utf8;
},
/**
* open a new browser window
*
* if the value of width or height is 0, the window opens maximized.
**/
openWindow: function(uri, name, width, height, options) {
var options = options || '';
if ((!width || !height) && window.screen) {
width = screen.availWidth;
height = screen.availHeight - 20;
// half the width for dual screens
if (width / height > 2) {
width = width / 2;
}
width -= 10;
}
if (width) {
options += ',width=' + width;
}
if (height) {
options += ',height=' + height;
}
if (window.screen) {
options += ',left=' + (screen.availWidth / 2 - width / 2);
options += ',top=' + (screen.availHeight / 2 - height / 2);
}
if (options[0] == ',') {
options = options.substring(1);
}
return window.open(uri, name, options);
},
/**
* preload images, that are needed e.g. for mouse over buttons
*
* the images must be commited as an array to this function.
**/
preloadImages: function(images) {
for (image = 0; image < images.length; image++) {
var preload = new Image();
preload.src = images[image];
}
},
/**
* replace images
*
* replace the medium image with the chosen product view and replace the
* small image with the current medium image.
**/
replaceImages: function(source) {
document.getElementById('mediumImage').innerHTML = '.value + '-' + document.getElementById('current' + source).value + '-medium.jpg)
';
if (source == 'SmallImage1') {
document.getElementById('smallImage1').innerHTML = '.value + '-' + document.getElementById('currentMediumImage').value + '-small.jpg)
';
} else {
document.getElementById('smallImage2').innerHTML = '';
}
// now after the two images got replaced, the hidden fields that indicate,
// which view is at which position currently, get replaced too.
var currentMediumImage = document.getElementById('currentMediumImage').value;
document.getElementById('currentMediumImage').value = document.getElementById('current' + source).value;
document.getElementById('current' + source).value = currentMediumImage;
// make the enlarge button work, if it doesn´t already.
document.getElementById('enlargeMediumImage').innerHTML = '
';
},
/**
* show the large image of the product.
**/
showLargeImage: function() {
// get the currently displayed medium image and open the large view.
var currentMediumImage = document.getElementById('currentMediumImage').value;
document.getElementById('largeImage').innerHTML = '.value + '-' + document.getElementById('currentMediumImage').value + '-large.jpg)
';
document.getElementById('largeImage').style.display = 'block';
},
/**
* hide the large image of the product.
**/
hideLargeImage: function() {
document.getElementById('largeImage').innerHTML = '';
document.getElementById('largeImage').style.display = 'none';
},
/**
* change the color of a product
*
* when the color of a product changes, also the itemNumber changes. that means,
* the itemNumber and the images must change.
**/
changeColor: function() {
// the itemNumber is the current selectedIndex of the drop down - 1,
// because the index 0 of the drop down is empty.
var newItemNumber = document.getElementById('addColor').selectedIndex - 1;
// do all this only, if the new itemNumber is at least 0.
if (newItemNumber > -1) {
// split all the itemNumbers into an array.
var itemNumbers = document.getElementById('itemNumbers').value.split(';');
// split all the itemsAvailable flags into an array.
var itemsAvailable = document.getElementById('itemsAvailable').value.split(';');
// get the current itemNumber
var currentItemNumber = document.getElementById('currentItemNumber').value;
// if the new itemNumber is not the same as the current itemNumber,
// then change the current itemNumber and the images
if (currentItemNumber != itemNumbers[newItemNumber]) {
// change the hidden field currentItemNumber and the visible text itemNumber
document.getElementById('currentItemNumber').value = itemNumbers[newItemNumber];
document.getElementById('itemNumber').innerHTML = itemNumbers[newItemNumber];
// change the hidden field currentAvailable and the visible text available.
document.getElementById('currentAvailable').value = itemsAvailable[newItemNumber];
if (itemsAvailable[newItemNumber] == 1) {
document.getElementById('available').innerHTML = 'Artikel ist vorrätig!';
} else {
document.getElementById('available').innerHTML = 'Artikel ist nicht vorrätig!';
}
// the hidden fields in the website get resetted to avoid e.g. the detail image to
// be shown as medium, because the detail image is missing for many products.
document.getElementById('currentMediumImage').value = 'front';
document.getElementById('currentSmallImage1').value = 'back';
document.getElementById('currentSmallImage2').value = 'detail';
// the enlarge button gets hidden. it gets visible again, if a front image for
// the new color is existing, otherwise it just stays invisible.
document.getElementById('enlargeMediumImage').style.visibility = 'hidden';
// change the medium and the 2 small images. if the medium image doesn´t exist, the
// function removeMediumImage gets called. the images get initialized invisible and
// only appear, when the onload event handler is called.
document.getElementById('mediumImage').innerHTML = '
';
document.getElementById('smallImage1').innerHTML = '
';
document.getElementById('smallImage2').innerHTML = '
';
}
}
},
/**
* removes the medium product image, when it doesn´t exist.
**/
removeMediumImage : function() {
document.getElementById('mediumImage').innerHTML = '
';
},
/**
* delete a product from the shopping cart.
*
* this function sets the quantity input field from the product that should be
* deleted to 0. then it submits the shopping cart form.
**/
removeFromShoppingCart: function(shoppingCartId) {
// get all input fields from the current page.
var allInputFields = document.getElementsByTagName('input');
var countQuantityFields = 0;
// walk the array and check for quantity fields. if the seeked field
// is found, set its value to 0 and submit den form.
for (var countInputField = 0; countInputField < allInputFields.length; countInputField++) {
if (allInputFields[countInputField].name == 'quantity[]') {
if (countQuantityFields == shoppingCartId) {
allInputFields[countInputField].value = '0';
document.shoppingCart.submit();
break;
}
countQuantityFields++;
}
}
}
}