function mixer(id){
	
	//setup mixer
	this.obj = document.getElementById(id);
	$(this.obj).empty();
	
	//setup players
	this.p1vol = '100';
	this.p2vol = '100';
	
	// setup dom elements
	$(this.obj).append('<div><span id="player1vol">'+this.p1vol+'</span>% « Player Volumes » <span id="player2vol">'+this.p2vol+'</span>%</div>');
	$(this.obj).append('<div id="crossfader_wrapper"><div id="crossfader_frame"><div id="crossfader"></div></div></div>');
	
	this.fadeValue = 50;
	var start = 50;
	this.crossfader = $("#crossfader").slider({'startValue':start, 'slide':this.onCrossFade});
	this.fadeTimeHandler = null;

	
};

mixer.prototype.setCrossFader = function(pos){
	if(pos>=0 && pos<=100){
		$(this.crossfader).slider("moveTo",pos);
		this.fadeValue = pos;
	}
	else return false;
}

mixer.prototype.smoothFade = function(to, callback){
	
	//alert(this.fadeValue);
	
	if(to!=this.fadeValue && this.fadeValue>0 && this.fadeValue<100){
		
		var step = 0;
		if (to > this.fadeValue) step = this.fadeValue + 1;
		else if (to < this.fadeValue) step = this.fadeValue - 1;
		else return false;

		this.setCrossFader(step);
		
		var self = this;
		this.fadeTimeHandler = setTimeout(function(){self.smoothFade(to, callback)},100);
	
	}else{
		//fade complete
		clearTimeout(this.fadeTimeHandler);
		this.fadeTimeHandler = null
		callback();
	}
	
}

mixer.prototype.onCrossFade = function(e,ui){
	
	if (ui.value>0 && ui.value<=100) this.fadeValue = ui.value;
	else this.fadeValue = '0';
	
	// set coutour of xfader so center = 100% on both players
	if (this.fadeValue<50) this.p1vol = 100;
	else this.p1vol = ((100-this.fadeValue) * 2).toString();
		
	if (this.fadeValue>50) this.p2vol = 100;
	else this.p2vol = ((this.fadeValue) * 2).toString();
	
	// update display volumes
	$('#player1vol').html(this.p1vol);
	$('#player2vol').html(this.p2vol);
	
	// attempt to update the actual players
	if(player1){
		player1.setVolume(this.p1vol);
	}
	if(player2){
		player2.setVolume(this.p2vol);
	}
	

};