//---------------------------------+
//  CARPE  S l i d e r        1.5  |
//  2006 - 01 - 03                 |
//  By Tom Hermansson Snickars     |
//  Copyright CARPE Design         |
//  http://carpe.ambiprospect.com/ |
//  Contact for custom scripts     |
//  or implementation help.        |
//---------------------------------+

// Global vars. You don't need to make changes here to change your sliders.
// Changing the attributes in your (X)HTML file is enough.
var carpeDefaultSliderLength      = 250
var carpeSliderDefaultOrientation = 'horizontal'
var carpeSliderClassName          = 'carpe_slider'
var carpeSliderClassNameR         = 'carpe_sliderR';
var carpeSliderDisplayClassName   = 'carpe_slider_display'
var carpeSliderDisplayClassNameR = 'carpe_slider_display1'

// carpeGetElementsByClass: Cross-browser function that returns
// an array with all elements that have a class attribute that
// contains className
function carpeGetElementsByClass(className)
{
	var classElements = new Array()
	var els = document.getElementsByTagName("*")
	var elsLen = els.length
	var pattern = new RegExp("\\b" + className + "\\b")
	for (i = 0, j = 0; i < elsLen; i++) {
		if ( pattern.test(els[i].className) ) {
			classElements[j] = els[i]
			j++
		}
	}
	return classElements;
}

// carpeLeft: Cross-browser version of "element.style.left"
// Returns or sets the horizontal position of an element.
function carpeLeft(elmnt, pos)
{
//alert("carpeLeft" +document.getElementById(elmnt));

	if (!(elmnt = document.getElementById(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"
// Returns or sets the vertical position of an element.
function carpeTop(elmnt, pos)
{
//alert("Carpetop" + document.getElementById(elmnt));
	if (!(elmnt = document.getElementById(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 = slider.startOffsetX + evnt.screenX // Horizontal mouse position relative to allowed slider positions		
		y = slider.startOffsetY + evnt.screenY // Horizontal mouse position relative to allowed slider positions
		//***********************************start carat slider
		//alert(x);
		if(slider.id=='slider1')
		{
		slider.xMax=document.forms[0].TabContainer1_tpnlSelectyourDiamond_display2.value-1;
		
		if (x >slider.xMax ) x = slider.xMax // Limit horizontal movement
		if (x < 0) x = 0 // Limit horizontal movement		
		}
		else if(slider.id=='Div1')
		{
		slider.xMax=250;
		slider.xMin=document.forms[0].TabContainer1_tpnlSelectyourDiamond_display1.value -1
		
		if (x >slider.xMax ) x = slider.xMax // Limit horizontal movement
		if (x <= slider.xMin ) x =slider.xMin  // Limit horizontal movement		
		}
		var l=carpeLeft('slider1')+ 'px';
		var r=carpeLeft('Div1')+ 7 + 'px';
		//var r=r1 ;
		
		document.getElementById("tdiv").style.clip='rect(0px,'+ r + ',15px,'+ l +')';
		document.getElementById("tdiv").style.position='absolute';
		document.getElementById("tdiv").style.zIndex =1
			//***********************************end Clarity slider
		//***********************************start Color slider
		if(slider.id=='Div2')
		{
		slider.xMax=document.forms[0].TabContainer1_tpnlSelectyourDiamond_display4.value-1;
		if (x >slider.xMax ) x = slider.xMax // Limit horizontal movement
		if (x < 0) x = 0 // Limit horizontal movement
		}
		else if(slider.id=='Div3')
		{
		slider.xMax=250;
		slider.xMin=document.forms[0].TabContainer1_tpnlSelectyourDiamond_display3.value -1
		
		if (x >slider.xMax ) x = slider.xMax // Limit horizontal movement
		if (x <= slider.xMin ) x =slider.xMin  // Limit horizontal movement
		}
		var l2=carpeLeft('Div2')+ 'px';
		var r=carpeLeft('Div3')+ 7 + 'px';
		//var r= r2 ;
		
		document.getElementById("tdiv1").style.clip='rect(0px,'+ r + ',15px,'+ l2 +')';
		document.getElementById("tdiv1").style.position='absolute';
		document.getElementById("tdiv1").style.zIndex =1
			//***********************************End Color slider
			//***********************************start Cut slider
		if(slider.id=='Div4')
		{
		//alert("display6"+ document.forms[0].TabContainer1_tpnlSelectyourDiamond_display6.value);
		//alert("x="+ x);
		slider.xMax=document.forms[0].TabContainer1_tpnlSelectyourDiamond_display6.value-1;
		if (x >slider.xMax ) x = slider.xMax // Limit horizontal movement
		if (x < 0) x = 0 // Limit horizontal movement
		}
		else if(slider.id=='Div5')
		{
		slider.xMax=250;
		slider.xMin=document.forms[0].TabContainer1_tpnlSelectyourDiamond_display5.value -1
		
		if (x >slider.xMax ) x = slider.xMax // Limit horizontal movement
		if (x <= slider.xMin ) x =slider.xMin  // Limit horizontal movement
		}
		var l=carpeLeft('Div4')+ 'px';
		var r=carpeLeft('Div5') + 7 + 'px';
		//var r= r1 + 'px';
		
		document.getElementById("tdiv2").style.clip='rect(0px,'+ r + ',15px,'+ l +')';
		document.getElementById("tdiv2").style.position='absolute';
		document.getElementById("tdiv2").style.zIndex =1
		//***********************************end Cut slider
		////***********************************Start carat slider
		if(slider.id=='Div6')
		{
		
		        slider.xMax=carpeLeft('Div7')-1;//250;//document.forms[0].display2.value-1;        
               if (x >slider.xMax ) x = slider.xMax // Limit horizontal movement
               if (x < 0) x = 0 // Limit horizontal movement
		}
		else if(slider.id=='Div7')
		{
	            slider.xMax=250;
               slider.xMin=carpeLeft('Div6') ;//document.forms[0].display1.value -1                
               if (x >slider.xMax ) x = slider.xMax // Limit horizontal movement
               if (x <= slider.xMin ) x =slider.xMin  // Limit horizontal movement
		}
		var l=carpeLeft('Div6')+ 'px';
		var r=carpeLeft('Div7') + 7 + 'px';
		//var r= r1 + 'px';
		
		document.getElementById("tdiv3").style.clip='rect(0px,'+ r + ',15px,'+ l +')';
		document.getElementById("tdiv3").style.position='absolute';
		document.getElementById("tdiv3").style.zIndex =1
		
			////***********************************end carat slider
		//	////***********************************Start price slider
		if(slider.id=='Div8')
		{
		 slider.xMax=carpeLeft('Div9')-1;//250;//document.forms[0].display2.value-1;        
               if (x >slider.xMax ) x = slider.xMax // Limit horizontal movement
               if (x < 0) x = 0 // Limit horizontal movement
		}
		else if(slider.id=='Div9')
		{
		         slider.xMax=250;
		        slider.xMin=carpeLeft('Div8') ;//document.forms[0].display1.value -1                
               if (x >slider.xMax ) x = slider.xMax // Limit horizontal movement
               if (x <= slider.xMin ) x =slider.xMin  // Limit horizontal movement
		}
		var l=carpeLeft('Div8')+ 'px';
		var r=carpeLeft('Div9') + 7 + 'px';
		//var r= r1 + 'px';
		
		document.getElementById("tdiv4").style.clip='rect(0px,'+ r + ',15px,'+ l +')';
		document.getElementById("tdiv4").style.position='absolute';
		document.getElementById("tdiv4").style.zIndex =1
	
				
		
		//if (x >slider.xMax ) x = slider.xMax // Limit horizontal movement
		//if (x < 0) x = 0 // Limit horizontal movement
		if (y > slider.yMax) y = slider.yMax // Limit vertical movement
		if (y < 0) y = 0 // Limit vertical movement
	
		carpeLeft(slider.id, x)  // move slider to new horizontal position
		carpeTop(slider.id, y) // move slider to new vertical position
		sliderVal = x + y // pixel value of slider regardless of orientation
		sliderPos = (slider.distance / display.valuecount) * 
			Math.round(display.valuecount * sliderVal / slider.distance)
		v = Math.round((sliderPos * slider.scale + slider.from) * // calculate display value
			Math.pow(10, display.decimals)) / Math.pow(10, display.decimals)
			
		display.value = v
		document.forms[0].TabContainer1_tpnlSelectyourDiamond_TextBox1.value=v; // put the new value in the slider display element		
		
		
		
	 __doPostBack('TabContainer1$tpnlSelectyourDiamond$LinkButton1','');
		return false
	}
	return
}
// slide: Handles the start of a slider move.
function slide(evnt)
{
    //alert("slide");

	if (!evnt) evnt = window.event; // Get the mouse event causing the slider activation.
	slider = (evnt.target) ? evnt.target : evnt.srcElement; // Get the activated slider element.	
	dist = parseInt(slider.getAttribute('distance'))// The allowed slider movement in pixels.	
	//alert(slider.distance); 
	slider.distance = dist ? dist : carpeDefaultSliderLength // Deafault distance from global var.	
	ori = slider.getAttribute('orientation') // Slider orientation: 'horizontal' or 'vertical'.
	orientation = ((ori == 'horizontal') || (ori == 'vertical')) ? ori : carpeSliderDefaultOrientation		
		// Default orientation from global variable.
	displayId = slider.getAttribute('display') // ID of associated display element.	
	display = document.getElementById("TabContainer1_tpnlSelectyourDiamond_"+ displayId) // Get the associated display element.
	//alert("slider"+ display);
	display.sliderId = slider.id // Associate the display with the correct slider.
	

	dec = parseInt(display.getAttribute('decimals')) // Number of decimals to be displayed.
	display.decimals = dec ? dec : 0 // Default number of decimals: 0.
	
	if((display.sliderId == "slider1") || (display.sliderId == "Div1"))
	{
	val = 8//parseInt(display.getAttribute('valuecount'))  // Allowed number of values in the interval.//
	}
	if((display.sliderId == "Div2") || (display.sliderId == "Div3"))
	{
	val = 9//parseInt(display.getAttribute('valuecount'))  // Allowed number of values in the interval.
	}
	if((display.sliderId == "Div4") || (display.sliderId == "Div5"))
	{
	val = 2//parseInt(display.getAttribute('valuecount'))  // Allowed number of values in the interval.
	}
	if((display.sliderId == "Div6") || (display.sliderId == "Div7") || (display.sliderId == "Div8") || (display.sliderId == "Div9"))
	{
	val = parseInt(display.getAttribute('valuecount'))  // Allowed number of values in the interval.
	}
	
	display.valuecount = val ? val : slider.distance + 1 // Default number of values: the sliding distance.
	from = parseFloat(display.getAttribute('from')) // Min/start value for the display.
	from = from ? from : 0 // Default min/start value: 0.
	to = parseFloat(display.getAttribute('to')) // Max value for the display.
	if((display.sliderId == "Div6") || (display.sliderId == "Div7"))
	{
	to=6;
	//to = to ? to : slider.distance // Default number of values: the sliding distance.
	}
	else if((display.sliderId == "Div8") || (display.sliderId == "Div9"))
	{
	
	to=10000;//document.getElementById("TabContainer1_tpnlSelectyourDiamond_display10").value;
	}
	else
	{
	to = to ? to : slider.distance // Default number of values: the sliding distance.
	}
	//alert("to : " + to);
	//to = to ? to : slider.distance;
	slider.scale = (to - from) / slider.distance // Slider-display scale [value-change per pixel of movement].
	if (orientation == 'vertical') { // Set limits and scale for vertical sliders.
		slider.from = to // Invert for vertical sliders. "Higher is more."
		slider.xMax = 0		
		slider.yMax = slider.distance
		slider.scale = -slider.scale // Invert scale for vertical sliders. "Higher is more."
	}
	else { // Set limits for horizontal sliders.
		slider.from = from
		slider.xMax =slider.distance
		slider.yMax = 0
	}
	slider.startOffsetX = carpeLeft(slider.id) - evnt.screenX // Slider-mouse horizontal offset at start of slide.	
	slider.startOffsetY = carpeTop(slider.id) - evnt.screenY // Slider-mouse vertical offset at start of slide.
	mouseover = true
	document.onmousemove = moveSlider // Start the action if the mouse is dragged.
	document.onmouseup = sliderMouseUp // Stop sliding.
	return false
}
// sliderMouseUp: Handles the mouseup event after moving a slider.
// Snaps the slider position to allowed/displayed value. 
function sliderMouseUp()
{
	if (mouseover) {
		v = (display.value) ? display.value : 0 // Find last display value.
		pos = (v - slider.from)/(slider.scale) // Calculate slider position (regardless of orientation).
		if (slider.yMax == 0) {
			pos = (pos > slider.xMax) ? slider.xMax : pos
			pos = (pos < 0) ? 0 : pos
			carpeLeft(slider.id, pos) // Snap horizontal slider to corresponding display position.
				/*var l=carpeLeft('slider1')+ 'px';
		//alert(l);
		var r1=carpeLeft('Div1') + 5;
		var r=r1 + 'px';
		
		document.getElementById("tdiv").style.clip='rect(0px,'+ r + ',15px,'+ l +')';
		document.getElementById("tdiv").style.position='absolute';
		document.getElementById("tdiv").style.zIndex =1*/
		
		//***********************************Clarity slider
		var l=carpeLeft('slider1')+ 'px';
		var r=carpeLeft('Div1')+ 7 + 'px';
		
		document.getElementById("tdiv").style.clip='rect(0px,'+ r + ',15px,'+ l +')';
		document.getElementById("tdiv").style.position='absolute';
		document.getElementById("tdiv").style.zIndex =1
			
		//***********************************start Color slider
		
		var l2=carpeLeft('Div2')+ 'px';
		var r=carpeLeft('Div3')+ 7 + 'px';
		
		document.getElementById("tdiv1").style.clip='rect(0px,'+ r + ',15px,'+ l2 +')';
		document.getElementById("tdiv1").style.position='absolute';
		document.getElementById("tdiv1").style.zIndex =1
			//***********************************start Cut slider
		
		var l=carpeLeft('Div4')+ 'px';
		var r=carpeLeft('Div5') + 7 + 'px';
		
		document.getElementById("tdiv2").style.clip='rect(0px,'+ r + ',15px,'+ l +')';
		document.getElementById("tdiv2").style.position='absolute';
		document.getElementById("tdiv2").style.zIndex =1
	
		////***********************************Start carat slider
		
		var l=carpeLeft('Div6')+ 'px';
		var r=carpeLeft('Div7') + 7 + 'px';
		
		document.getElementById("tdiv3").style.clip='rect(0px,'+ r + ',15px,'+ l +')';
		document.getElementById("tdiv3").style.position='absolute';
		document.getElementById("tdiv3").style.zIndex =1
		
    //***********************************Start price slider
		
		var l=carpeLeft('Div8')+ 'px';
		var r=carpeLeft('Div9') + 7 + 'px';
		
		document.getElementById("tdiv4").style.clip='rect(0px,'+ r + ',15px,'+ l +')';
		document.getElementById("tdiv4").style.position='absolute';
		document.getElementById("tdiv4").style.zIndex =1
	
		
		
		}
		if (slider.xMax == 0) {
			pos = (pos > slider.yMax) ? slider.yMax : pos
			pos = (pos < 0) ? 0 : pos
			carpeTop(slider.id, pos) // Snap vertical slider to corresponding display position.
		}
		if (document.removeEventListener) { // Remove event listeners from 'document' (W3C).
			document.removeEventListener('mousemove', moveSlider, false)
			document.removeEventListener('mouseup', sliderMouseUp, false)
		}
		else if (document.detachEvent) { // Remove event listeners from 'document' (IE).
			document.detachEvent('onmousemove', moveSlider)
			document.detachEvent('onmouseup', sliderMouseUp)
		}
	}
	mouseover = false // Stop the sliding.
}
function focusDisplay(evnt)
{
	if (!evnt) evnt = window.event; // Get the mouse event causing the display activation.
	display = (evnt.target) ? evnt.target : evnt.srcElement; // Get the activated display element.
	lock = display.getAttribute('typelock') // Is the user allowed to type into the display?
	if (lock == 'on') {
		display.blur()
	}
	return
}
window.onload = function() // Set up the sliders and the displays.
{
    sliders = carpeGetElementsByClass(carpeSliderClassName)	 // Find the horizontal sliders.
    for (i = 0; i < sliders.length; i++) {
        sliders[i].onmousedown = slide // Attach event listener.]

    }
    displays = carpeGetElementsByClass(carpeSliderDisplayClassName) // Find the displays.
    for (i = 0; i < displays.length; i++) {
        displays[i].onfocus = focusDisplay // Attach event listener.
        carpeLeft(sliders[i].id, 0)
    }

    sliders = carpeGetElementsByClass(carpeSliderClassNameR) // Find the horizontal right  sliders.

    for (i = 0; i < sliders.length; i++) {
        sliders[i].onmousedown = slide // Attach event listener.
    }
 
    displays = carpeGetElementsByClass(carpeSliderDisplayClassNameR) // Find the displays.	
    for (i = 0; i < displays.length; i++) {
        displays[i].onfocus = focusDisplay // Attach event listener.


        carpeLeft(sliders[i].id, 250)
    }
}