var rotationI = null;

/**
 * Creates a set of 16 images inside a given DIV element, which can be rotated.
 * Of course the images must contain a view of the object from 16 different
 * perspectives to create the illusion of a rotating object.
 * The images have to be named Img0.jpg to Img15.jpg.
 * 
 * You can style the elements of the navigation bar via CSS:
 *  div.rotnavibox
 *  div.rotnavibox > a
 *  div.rotnavibox > a.hover
 *  div.rotnavibox > a.active
 *  div.rotnavibox > a.rotleft
 *  div.rotnavibox > a.rotright
 * 
 * @param rotImgDiv
 *            The DIV which shall contain the rotation images
 * @param rotImagePath
 *            The path where Img0.jpg to Img15.jpg is found
 * @param doFullRotation
 *            set true, if the object shall do a full rotation at the beginning
 */
function RotImage(rotImgDiv, rotImageArr, doFullRotation) {
	
	var rotImages; // the array with the 16 images
	var rotImage; // the currently shown image
	var rotPos; // the index of the currently shown image
	var rotTimer; // the timer
	var rotNaviDiv; // the div for the navigation
	var rotLeft; // the left button
	var rotRight; // the right button
	
	// set the current index to 0
	rotPos = 0;
	// preload all 16 images into the array
	rotImages = new Array();
	for(img = 0; img < 16; img++) {
		rotImages[img] = new Image();
		rotImages[img].src = rotImageArr[img];
	}
	// create an image object, load the first image and append it to the div
	rotImage = new Element('img');
	rotImage.src = rotImages[rotPos].src;
	rotImage.id = "rotimg";
	rotImgDiv.insert(rotImage);
	// if chosen, make a full rotation
	/* OSC 
  if (doFullRotation && doFullRotation == true)
		rotTimer = window.setInterval(function(){rotateFull()}, 100);
	*/
	// create the navigation:
	rotNaviDiv = new Element('div');
	rotNaviDiv.className = "rotnavibox";
	rotLeft = new Element('a');	
	/* OSC rotRight = cE('a');*/
  // OSC Begin 
	rotRight = $('bttn_rotate');
	// OSC End
	rotLeft.className = "rotleft";
	rotRight.className = "rotright";
	rotLeft.onmouseover = rotRight.onmouseover = function () {
		this.addClassName('hover');
	};
	// when the buttons are pressed the product rotates in the selected direction
	rotLeft.onmousedown = function () {
		this.addClassName('active');
		stopRotation();
		rotTimer = window.setInterval(function(){rotateImg(1)}, 100);
	};
	rotRight.onmousedown = function () {
		this.addClassName('active');
		stopRotation();
		rotTimer = window.setInterval(function(){rotateImg(-1)}, 100);
	};
	// when released the rotation stops
	rotLeft.onmouseup = rotRight.onmouseup = function () {
		this.removeClassName('active');
		window.setTimeout(function(){stopRotation()},50);
	};
	rotLeft.onmouseout = rotRight.onmouseout = function () {
		this.removeClassName('active');
		this.removeClassName('hover');
		window.setTimeout(function(){stopRotation()},50);
	};
	rotRight.onclick = function() {
		return false;
	}
	// append the navigation
	/* OSC 
  aC(rotNaviDiv,rotLeft);
	aC(rotNaviDiv,rotRight);
	aC(rotImgDiv,rotNaviDiv);
	*/

	// Stop the rotation by clearing the timer:
	function stopRotation() {
		window.clearInterval(rotTimer);
	}
	
	// Do a full rotation:
	function rotateFull() {
		if(rotPos < 16) {
			rotImage.src = rotImages[rotPos].src;
			rotPos++;
		} else {
			stopRotation();
			rotPos = 0;
			rotImage.src = rotImages[0].src;
		}
	}
	
	// Rotate the image by setting the next or the previous image:
	function rotateImg(dir) {
		rotPos = (rotPos+dir+16)%16;
		rotImage.src = rotImages[rotPos].src;
	}
}