canfade = true;

function change_image(dir) {
	var boxes = document.getElementsByClassName("randomBoxProduct");
	
	if (canfade) {
		canfade = false;
	
		for (i=0;i<boxes.length;i++) {
			if (boxes[i].style.opacity == 1 && boxes[i].style.zIndex == 100) { currpicture = i; }
		}
		
		switch (dir){
		case 'next':
			if (currpicture<boxes.length-1) {
				newpicture = currpicture+1;
			} else {
				newpicture = 0;
			}
			break;
		case 'previous':
			if (currpicture>0) {
				newpicture = currpicture-1;
			} else {
				newpicture = boxes.length-1;
			}
			break;
		}
		
		for (i=0;i<boxes.length;i++) {
			if (i == newpicture) {
				boxes[i].style.zIndex = 100;
				fade(i);
			} else {
				boxes[i].style.zIndex = 10;
				if (i != currpicture) {
					boxes[i].style.opacity = 0;
					boxes[i].style.filter = "alpha(opacity=0)";
				}
			}
		}
	}
}

function fade(id, step) {
	var boxes = document.getElementsByClassName("randomBoxProduct");
	
	step = step || 0;
	
	boxes[id].style.opacity = step/100;
	boxes[id].style.filter = "alpha(opacity=" + step + ")"; // IE
	
	step = step + 2;

	if (step <= 100) {
		window.setTimeout(function () { fade(id, step); }, 1);
	} else {
		canfade = true;
	}
}