//---------------------------------+
//  CARPE  S l i d e r        1.3  |
//  2005 - 12 - 10                 |
//  By Tom Hermansson Snickars     |
//  Copyright CARPE Design         |
//  http://carpe.ambiprospect.com/ |
//---------------------------------+

// carpeGetElementByID: Cross-browser version of "document.getElementById()"
function carpeGetElementById(element)
{
	if (document.getElementById) element = document.getElementById(element);
	else if (document.all) element = document.all[element];
	else element = null;
	return element;
}
// carpeLeft: Cross-browser version of "element.style.left"
function carpeLeft(elmnt, pos)
{
	if (!(elmnt = carpeGetElementById(elmnt))) return 0;
	if (elmnt.style && (typeof(elmnt.style.left) == 'string')) {
		if (typeof(pos) == 'number') elmnt.style.left = pos + 'px';
		else {
			pos = parseInt(elmnt.style.left);
			if (isNaN(pos)) pos = 0;
		}
	}
	else if (elmnt.style && elmnt.style.pixelLeft) {
		if (typeof(pos) == 'number') elmnt.style.pixelLeft = pos;
		else pos = elmnt.style.pixelLeft;
	}
	return pos;
}
// carpeTop: Cross-browser version of "element.style.top"
function carpeTop(elmnt, pos)
{
	if (!(elmnt = carpeGetElementById(elmnt))) return 0;
	if (elmnt.style && (typeof(elmnt.style.top) == 'string')) {
		if (typeof(pos) == 'number') elmnt.style.top = pos + 'px';
		else {
			pos = parseInt(elmnt.style.top);
			if (isNaN(pos)) pos = 0;
		}
	}
	else if (elmnt.style && elmnt.style.pixelTop) {
		if (typeof(pos) == 'number') elmnt.style.pixelTop = pos;
		else pos = elmnt.style.pixelTop;
	}
	return pos;
}
// moveSlider: Handles slider and display while dragging
function moveSlider(evnt)
{
	var evnt = (!evnt) ? window.event : evnt; // The mousemove event
	if (mouseover) { // Only if slider is dragged
		x = pxLeft + evnt.screenX - xCoord // Horizontal mouse position relative to allowed slider positions
		y = pxTop + evnt.screenY - yCoord // Horizontal mouse position relative to allowed slider positions
		if (x > xMax) x = xMax // Limit horizontal movement
		if (x < 0) x = 0 // Limit horizontal movement
		if (y > yMax) y = yMax // Limit vertical movement
		if (y < 0) y = 0 // Limit vertical movement
		carpeLeft(sliderObj.id, x)  // move slider to new horizontal position
		carpeTop(sliderObj.id, y) // move slider to new vertical position
		sliderVal = x + y // pixel value of slider regardless of orientation
		sliderPos = (sliderObj.pxLen / sliderObj.valCount) * Math.round(sliderObj.valCount * sliderVal / sliderObj.pxLen)
		v = Math.round((sliderPos * sliderObj.scale + sliderObj.fromVal) * // calculate display value
			Math.pow(10, displayObj.dec)) / Math.pow(10, displayObj.dec)
		displayObj.value = v // put the new value in the slider display element
		ImageAktualisieren (v);
		
		return false
	}
	return
}
// moveSlider: Handles the start of a slider move.
function slide(evnt, sliderID, orientation, length, from, to, count, decimals, display)
{
	if (!evnt) evnt = window.event;
	sliderObj = (evnt.target) ? evnt.target : evnt.srcElement; // Get the activated slider element.
	sliderObj.pxLen = length // The allowed slider movement in pixels.
	sliderObj.valCount = count ? count - 1 : length // Allowed number of values in the interval.
	sliderObj.scale = (to - from) / length // Slider-display scale [value-change per pixel of movement].
	
	displayObj = carpeGetElementById(display) // Get the associated display element.
	displayObj.dec = decimals // Number of decimals to be displayed.
	
	if (orientation == 'horizontal') { // Set limits for horizontal sliders.
		sliderObj.fromVal = from
		xMax = length
		yMax = 0
	}
	if (orientation == 'vertical') { // Set limits and scale for vertical sliders.
		sliderObj.fromVal = to
		xMax = 0
		yMax = length
		sliderObj.scale = -sliderObj.scale // Invert scale for vertical sliders. "Higher is more."
	}
	
	pxLeft = carpeLeft(sliderObj.id) // Sliders horizontal position at start of slide.
	pxTop  = carpeTop(sliderObj.id) // Sliders vertical position at start of slide.
	xCoord = evnt.screenX // Horizontal mouse position at start of slide.
	yCoord = evnt.screenY // Vertical mouse position at start of slide.
	mouseover = true
	document.onmousemove = moveSlider // Start the action if the mouse is dragged.
	if (orientation == 'horizontal') { 
		document.onmouseup = sliderMouseUp // Stop sliding.
	} else {
		document.onmouseup = sliderMouseUpVert // Stop sliding.		
	}
}
// sliderMouseup: Handles the mouseup event after moving a slider.
// Snaps the slider position to allowed/displayed value. 
function sliderMouseUp()
{
	if (mouseover) {
		mouseover = false // Stop the sliding.
		v = (displayObj.value) ? displayObj.value : 0 // Find last display value.
		pos = (v - sliderObj.fromVal)/(sliderObj.scale) // Calculate slider position (regardless of orientation).
		
		if (yMax == 0) carpeLeft(sliderObj.id, pos) // Snap horizontal slider to corresponding display position.
		if (xMax == 0) carpeTop(sliderObj.id, pos) // Snap vertical slider to corresponding display position.
		if (document.removeEventListener) { // Remove event listeners from 'document' (Moz&co).
			document.removeEventListener('onmousemove', moveSlider, true);
			document.removeEventListener('mouseup', sliderMouseUp, true);
		}
		else if (document.detachEvent) { // Remove event listeners from 'document' (IE&co).
			document.detachEvent('onmousemove', moveSlider)
			document.detachEvent('onmouseup', sliderMouseUp)
		}
		
		nAktIndex = 0;
		nAktWidth = 19;
		nAktIndex = Math.round( (pos / nAktWidth) * 100 / 100);
		
		nNewLeftPos = nAktIndex * nAktWidth;
		carpeLeft(sliderObj.id, nNewLeftPos);
	}
}

function sliderMouseUpVert()
{
	if (mouseover) {
		mouseover = false // Stop the sliding.
		v = (displayObj.value) ? displayObj.value : 0 // Find last display value.
		pos = (v - sliderObj.fromVal)/(sliderObj.scale) // Calculate slider position (regardless of orientation).
		
		if (yMax == 0) carpeLeft(sliderObj.id, pos) // Snap horizontal slider to corresponding display position.
		if (xMax == 0) carpeTop(sliderObj.id, pos) // Snap vertical slider to corresponding display position.
		if (document.removeEventListener) { // Remove event listeners from 'document' (Moz&co).
			document.removeEventListener('onmousemove', moveSlider, true);
			document.removeEventListener('mouseup', sliderMouseUp, true);
		}
		else if (document.detachEvent) { // Remove event listeners from 'document' (IE&co).
			document.detachEvent('onmousemove', moveSlider)
			document.detachEvent('onmouseup', sliderMouseUp)
		}
		
		nAktIndex = 0;
		nAktWidth = 19;
		nAktIndex = Math.round( (pos / nAktWidth) * 100 / 100);
		
		nNewTopPos = nAktIndex * nAktWidth;
		carpeTop(sliderObj.id, nNewTopPos);
	}
}

// Position des Mausklicks innerhalb des Sliderfensters
// funktioniert im Moment im IE7 und Firefox
function slideclick(evnt, orientation) {
	if (!evnt) evnt = window.event;
	if (orientation == "horizontal") {
		coords = getElementCoords(document.getElementById("sliderbar") );
	} else {
		coords = getElementCoords(document.getElementById("sliderbarVert") );
	}
	bAktion = true;
	if (navigator.appName.indexOf("Microsoft") > -1 && navigator.appVersion.indexOf("6.0") > -1) coords.x = coords.x - 12;
	if (navigator.appVersion.indexOf("Safari") > -1) bAktion = false;
	//	alert(evnt.clientX + " - " + coords.x);
	if (bAktion) {
		var body = (window.document.compatMode && window.document.compatMode == "CSS1Compat") ? window.document.documentElement : window.document.body;
		x = (body.scrollLeft + evnt.clientX) - coords.x // Horizontal mouse position relative to allowed slider positions
		y = (body.scrollTop + evnt.clientY) - coords.y // Vertical mouse position relative to allowed slider positions
		if (orientation == "horizontal") {
			xMax = 265
			yMax = 0
		} else {
			xMax = 0
			yMax = 265
		}
		if (x > xMax) x = xMax // Limit horizontal movement
		if (x < 0) x = 0 // Limit horizontal movement
		if (y > yMax) y = yMax // Limit vertical movement
		if (y < 0) y = 0 // Limit vertical movement
		nAktIndex = 0;
		nAktWidth = 19;
		if (orientation == "horizontal") {
			nAktIndex = Math.round( (x / nAktWidth) * 100 / 100);
		} else {
			nAktIndex = Math.round( (y / nAktWidth) * 100 / 100);
		}
		
		for (nTemp = 0; nTemp < 14; nTemp++) {
			nTempVon = nTemp * nAktWidth;
			nTempBis = (nTemp+1) * nAktWidth;
			
			if (orientation == "horizontal") {
				// alert(x + " >= " + nTempVon + " && " + x + " <= " + nTempBis);
				if (x >= nTempVon && x <= nTempBis) {
					nNewLeftPos = nTemp * nAktWidth;
					nTemp = 99;
				}
			} else {
				// alert(y + " >= " + nTempVon + " && " + y + " <= " + nTempBis);
				if (y >= nTempVon && y <= nTempBis) {
					nNewLeftPos = nTemp * nAktWidth;
					nTemp = 99;
				}
			}
		}
	
		sliderObj = carpeGetElementById('your_slider_id');
		if (orientation == "horizontal") {
			carpeLeft(sliderObj.id, nNewLeftPos);
		} else {
			carpeTop(sliderObj.id, nNewLeftPos);
		}
		
		ImageAktualisieren (nNewLeftPos)
	}
}

// Bild wird abhängig von der Position des Sliders aktualisiert
function ImageAktualisieren (nAktPos) {
	nAktIndex = 0;
	nAktWidth = 19;
	
	nAktIndex = Math.round( (nAktPos / nAktWidth) * 100 / 100);
	
	switch (nAktIndex) {
		case 0:
			strAktFarbe = "magicpurple";
			strAktArtIndex = "12";
			break;	
		case 1:
			strAktFarbe = "prettypink";
			strAktArtIndex = "11";
			break;	
		case 2:
			strAktFarbe = "hotred";
			strAktArtIndex = "01";
			break;	
		case 3:
			strAktFarbe = "sweetorange";
			strAktArtIndex = "06";
			break;	
		case 4:
			strAktFarbe = "brightyellow";
			strAktArtIndex = "07";
			break;	
		case 5:
			strAktFarbe = "freshgreen";
			strAktArtIndex = "08";
			break;	
		case 6:
			strAktFarbe = "peppermint";
			strAktArtIndex = "09";
			break;	
		case 7:
			strAktFarbe = "skyblue";
			strAktArtIndex = "10";
			break;	
		case 8:
			strAktFarbe = "nightblue";
			strAktArtIndex = "04";
			break;
		case 9:
			strAktFarbe = "coolgray";
			strAktArtIndex = "03";
			break;	
		case 10:
			strAktFarbe = "desertsand";
			strAktArtIndex = "14";
			break;	
		case 11:
			strAktFarbe = "jungleolive";
			strAktArtIndex = "05";
			break;
		case 12:
			strAktFarbe = "coffeebrown";
			strAktArtIndex = "13";
			break;	
		case 13:
			strAktFarbe = "darblack";
			strAktArtIndex = "02";
			break;
	}
	
	// Lümmelbild wird durch die aktuelle Farbe ersetzt
	strAlt = strTitle = strAktFarbe + " - click for details";
	strImageName = "10004-" + strAktArtIndex;
	xElementLeft = document.getElementById("LeftImage");
	if (xElementLeft != null) {
		xElementLeft.src = "../de_img/produktinfo/" + strImageName + "_info-l.jpg";
		xElementLeft.alt = strAlt;
		xElementLeft.title = strTitle;
		xElementLeft.onclick = function () { OpenDetail(10004, strAktArtIndex); };
	}
	
	strAlt = strTitle = strAktFarbe + " - click for details";
	strImageName = "10004-" + strAktArtIndex;
	xElementRight = document.getElementById("RightImage");
	if (xElementRight != null) {
		xElementRight.src = "../de_img/produktinfo/" + strImageName + "_info-r.jpg";
		xElementRight.alt = strAlt;
		xElementRight.title = strTitle;
		xElementRight.onclick = function () { OpenDetail(10004, strAktArtIndex); };
	}
	
	xElementAktFarbe = document.getElementById("ProdInfoTextFarbe");
	if (xElementAktFarbe != null) {
		xElementAktFarbe.innerHTML = strAktFarbe;
	}
}

function ShowPictureInfo (strArtikelMain, strArtikelID) {
	nArtikelID = Number(strArtikelID); if (isNaN(nArtikelID) ) nArtikelID = 0;
	sliderObj = carpeGetElementById('your_slider_id');
	nAktIndex = 0;
	// alert(strArtikelID);
	switch (nArtikelID) {
		case 12:
			strAktFarbe = "magicpurple";
			nAktIndex = 0;
			break;	
		case 11:
			strAktFarbe = "prettypink";
			nAktIndex = 1;
			break;	
		case 1:
			strAktFarbe = "hotred";
			nAktIndex = 2;
			break;	
		case 6:
			strAktFarbe = "sweetorange";
			nAktIndex = 3;
			break;	
		case 7:
			strAktFarbe = "brightyellow";
			nAktIndex = 4;
			break;	
		case 8:
			strAktFarbe = "freshgreen";
			nAktIndex = 5;
			break;	
		case 9:
			strAktFarbe = "peppermint";
			nAktIndex = 6;
			break;	
		case 10:
			strAktFarbe = "skyblue";
			nAktIndex = 7;
			break;	
		case 4:
			strAktFarbe = "nightblue";
			nAktIndex = 8;
			break;
		case 3:
			strAktFarbe = "coolgray";
			nAktIndex = 9;
			break;	
		case 14:
			strAktFarbe = "desertsand";
			nAktIndex = 10;
			break;	
		case 5:
			strAktFarbe = "jungleolive";
			nAktIndex = 11;
			break;
		case 13:
			strAktFarbe = "coffeebrown";
			nAktIndex = 12;
			break;	
		case 2:
			strAktFarbe = "darblack";
			nAktIndex = 13;
			break;
	}
	nAktWidth = 19;
	nNewLeftPos = nAktIndex * nAktWidth;
	
	carpeTop(sliderObj.id, nNewLeftPos);
	ImageAktualisieren(nNewLeftPos);
}