var mBar, sBar;
var startX, dragging = false;

function drag(e, obj) {
	if (!e) e = window.event;
	
	dragging = obj;
	startX = parseInt(dragging.style.width) - e.screenX;
	
	return false;
}

function move(e) {
	if (!dragging.style) return;
	
	if (!e) e = window.event;

	var w = e.screenX + startX;
	w = Math.max(0, w);
	w = Math.min(250, w);
	
	setTo(w, dragging);
}

function drop() {
	if (!dragging.style) return;

	dragging = false;
}

function moveToCursor(e, obj) {
	if (dragging.style) return;

	if (!e) e = window.event;

	var x = 0;

	if (e.offsetX) {
		x = e.offsetX;
	}
	else if (e.target) {
		var x = e.pageX;
		var elem = e.target;
		
		while (elem.offsetParent) {
			x -= elem.offsetLeft;
			elem = elem.offsetParent;
		}
	}
	
	setTo(x, obj);
}

function setTo(x, obj) {
	obj.style.width = x + 'px';
	
	var vol = Math.round(x / 2.5);
	
	if (obj == mBar) {
		setMusicVolume(vol);
	}
	else {
		setSoundVolume(vol);
	}
}

function initRuler() {
	mBar = document.getElementById('musicBar');
	sBar = document.getElementById('soundBar');
	
	setTo(musicVol * 2.5, mBar);
	setTo(soundVol * 2.5, sBar);
	
	mBar.parentNode.onmouseup = function(e) {
		moveToCursor(e, mBar);
	}
	
	sBar.parentNode.onmouseup = function(e) {
		moveToCursor(e, sBar);
	}
	
	document.getElementById('musicRuler').onmousedown = function(e) {
		drag(e, mBar);
	}
	
	document.getElementById('soundRuler').onmousedown = function(e) {
		drag(e, sBar);
	}
	
	document.onmousemove = move;
	document.onmouseup = drop;
}