/*
 * Slider with two knobs
 * Developed by: Samith Hannadige, samithdh@yahoo.com
 * Date: 2009-March-03
 
 * Example Implimation
 
 <div class="slider" id="slider01" style="width:150px;" min="1" max="100">
	<div class="left"></div>
	<div class="right"></div>
	<img id="knob01" src="img/slider-handle.gif" val="1" out1="box1" num="1" />
	<img id="knob02" src="img/slider-handle.gif" val="20" out1="box2"  num="2" />
</div>
 
 * Related files - slider.css
 * Related files - slider.js
 
 */

//window.onload = initializeSliders;
var oldonload = window.onload;
if (typeof window.onload != 'function') {   
	window.onload = initializeSliders;   
} else { 
	window.onload = function() {   
		if (oldonload) {
			oldonload();   
		}   
   		initializeSliders();   
 	}   
}


document.onmousedown=coordinates;
document.onmouseup=mouseup;

var currntKnobEl = new Object()
var knob_width =11; //30;

function coordinates(e){
	if (e == null) { e = window.event;	}
	
	var el = getElementFromEvent(e);

	if(knob=el.id.match(/\knob(\d+)\b/)){
		currntKnobEl = el;

	  	pleft=parseInt(currntKnobEl.style.left);
		ptop=parseInt(currntKnobEl.style.top);
	  	xcoor=e.clientX;
	  	ycoor=e.clientY;
	  	document.onmousemove=moveKnob;
	  	return false;
  	}
	//else { 
		//return false; 
	//}
}

function moveKnob(e){
	if (e == null) { e = window.event;}

	var slider = currntKnobEl.parentNode;
	var knobNo=parseFloat(currntKnobEl.id.match(/\knob(\d+)\b/)[1]);

	var p=(e.clientX-slider.offsetLeft-(knob_width/2))/(slider.scrollWidth-knob_width);
	//slider.val=(slider.max-slider.min)*p + slider.min;
	//currntKnobEl.val=Math.round((slider.max-slider.min)*p + slider.min);
	currntKnobEl.val=Math.round(((slider.max-slider.min)*p + slider.min )/slider.gap )*slider.gap;

	/*if (currntKnobEl.val>slider.max) currntKnobEl.val=slider.max;
	if (currntKnobEl.val<slider.min) currntKnobEl.val=slider.min;*/

	//max min set relatively other's positeion
	var knobs=currntKnobEl.parentNode.getElementsByTagName('img');
	otherKnobEl = (currntKnobEl.num==knobs[0].num)?knobs[1]:knobs[0];
	
	if(currntKnobEl.num==1){
		if (currntKnobEl.val>otherKnobEl.val) currntKnobEl.val=otherKnobEl.val;
		if (currntKnobEl.val<slider.min) currntKnobEl.val=slider.min;
	}else if(currntKnobEl.num==2){
		if (currntKnobEl.val>slider.max) currntKnobEl.val=slider.max;
		if (currntKnobEl.val<otherKnobEl.val) currntKnobEl.val=otherKnobEl.val;
	}

	drawSliderByVal();
	//setBoxValue(currntKnobEl.val, currntKnobEl.out1);
	setBoxValue(currntKnobEl.val, currntKnobEl.out1, currntKnobEl.out2,currntKnobEl.num, slider.min , slider.max, slider.gap , slider.unit);
	return false;
}

function drawSliderByVal() {
	if(!currntKnobEl || !currntKnobEl.id || parseFloat(currntKnobEl.val)<0) return;
	var slider = currntKnobEl.parentNode;
	
	var p=(currntKnobEl.val-slider.min)/(slider.max-slider.min);
	/*var x=(slider.scrollWidth-knob_width)*p;
	currntKnobEl.style.left=x+"px";	*/

	var x=(slider.scrollWidth-(knob_width*2))*p;

	var knobNo=parseInt(currntKnobEl.id.match(/\knob(\d+)\b/)[1]);
	if(knobNo==1){
		currntKnobEl.style.left=x+"px";
	}else if(knobNo==2){
		currntKnobEl.style.left=knob_width+x+"px";
	}
}

function mouseup(e){
	document.onmousemove=null;
	activeSlider= null;
	//stopEvent(e);
}

function getElementFromEvent(e){
	if (!e && window.event) e=window.event;
	if (!e) return false;

	var el;
	if (e.target) el=e.target;
	if (e.srcElement) el=e.srcElement;

	return el;
}

function initializeSliders() {
	var divs=document.getElementsByTagName('div');
	var divNum;

	for(var i=0; i<divs.length; i++) {
		if (divNum=divs[i].id.match(/\bslider(\d+)\b/)) { // if not null, if will return array of the div's fullid and extracted number 01/02
			// set initial properties
			//divNum=parseInt(divNum[1]);

			divs[i].min=parseInt(divs[i].getAttribute('min'));
			divs[i].max=parseInt(divs[i].getAttribute('max'));
			divs[i].gap=parseInt(divs[i].getAttribute('gap'));
			divs[i].unit=(divs[i].getAttribute('unit'))?divs[i].getAttribute('unit'):'';

			//set startup positons
			var knobs=divs[i].getElementsByTagName('img');
			for(var j=0; j<knobs.length; j++) {
				if (knobNum=knobs[j].id.match(/\bknob(\d+)\b/)) {
					//re appling attribute values
					knobs[j].val = parseInt(knobs[j].getAttribute('val'));
					knobs[j].out1 = knobs[j].getAttribute('out1');
					knobs[j].out2 = knobs[j].getAttribute('out2');
					knobs[j].num = parseInt(knobs[j].getAttribute('num'));
					currntKnobEl = knobs[j];
					drawSliderByVal();
					//setBoxValue(currntKnobEl.val, currntKnobEl.out1);
					setBoxValue(currntKnobEl.val, currntKnobEl.out1, currntKnobEl.out2, knobs[j].num ,divs[i].min,divs[i].max,divs[i].gap,divs[i].unit);
				}
			}
			currntKnobEl = null;
		}
	}
}

//new hander class
function sliderHandler(sliderID){
try{
	var divs=document.getElementById(sliderID);

	divs.id = sliderID;
	divs.min=parseInt(divs.getAttribute('min'));
	divs.max=parseInt(divs.getAttribute('max'));
	divs.gap=parseInt(divs.getAttribute('gap'));
	divs.unit=(divs.getAttribute('unit'))?divs.getAttribute('unit'):'';
	
	//set startup positons
	var knobs=divs.getElementsByTagName('img');
	divs.knobs = knobs; // add knobs as an attribute
	for(var j=0; j<knobs.length; j++) {
		if (knobNum=knobs[j].id.match(/\bknob(\d+)\b/)) {
			//re appling attribute values
			knobs[j].val = parseInt(knobs[j].getAttribute('val'));
			knobs[j].out1 = knobs[j].getAttribute('out1');
			knobs[j].out2 = knobs[j].getAttribute('out2');
			knobs[j].num = parseInt(knobs[j].getAttribute('num'));
		}
	}

	return divs;

} catch(err) {
	alert('An Error Occoured...\n\n'+err.description);
	return false;
}
}



function refreshSliders() {
	var divs=document.getElementsByTagName('div');
	var divNum;

	for(var i=0; i<divs.length; i++) {
		if (divNum=divs[i].id.match(/\bslider(\d+)\b/)) { // if not null, if will return array of the div's fullid and extracted number 01/02
			// set initial properties
			//divNum=parseInt(divNum[1]);
			//set startup positons
			var knobs=divs[i].getElementsByTagName('img');
			for(var j=0; j<knobs.length; j++) {
				if (knobNum=knobs[j].id.match(/\bknob(\d+)\b/)) {
					currntKnobEl = knobs[j];
					drawSliderByVal();
					//setBoxValue(currntKnobEl.val, currntKnobEl.out1);
					setBoxValue(currntKnobEl.val, currntKnobEl.out1, currntKnobEl.out2, knobs[j].num ,divs[i].min,divs[i].max,divs[i].gap,divs[i].unit);
				}
			}
			currntKnobEl = null;
		}
	}
}


function stopEvent(event) {
	if (event.preventDefault) {
		event.preventDefault();
		event.stopPropagation();
	} else {
		event.returnValue=false;
		event.cancelBubble=true;
	}
}

function setBoxValue(val,out1,out2,knobNum,minval,maxval,gapValue,unitVal) {
    /*var b=document.getElementById(box);
	val=Math.round(val*1000)/1000;
	b.value=val;*/

	val=Math.round(val*1000)/1000;
    //var b=document.getElementById(box);
	//if(b) b.innerHTML=val;

	val = val;

	//set display value
    var b=document.getElementById(out1);
	//if(b) b.innerHTML=(val>=maxval && knobNum==2)?val+unitVal+'+':''+val;	
	
	if(b){

		unitVal =(unitVal)?unitVal:''; //this prevent 'undefined'
		
		// unit will ad to only non zero values
		if(val>0){
			disp_val = val+''+unitVal;			
		}else{
			disp_val= val;
		}

		if(knobNum==2){
			//disp_val = val+''+unitVal;
			if(val>=maxval){
				disp_val = 	disp_val+'+';
			}
		}else{
			//disp_val= val;
		}
		b.innerHTML= disp_val;
	}
	
	//set hidden input value
	var El = document.getElementsByName(out2)[0];
	if(El){
		if(knobNum==2 && val>=maxval){
			disp_val = 	'';
		}else{
			disp_val= val;
		}

		El.value= disp_val;
	}
}