var vpwidth = 890-62;
var vpheight= 150;

var mastername = "knopf";
var slavename = "scroller";

var srahmenname = "rahmen";
var krahmenname = "knopfrahmen";

var dragobjekt = null;
var masterobject = null;
var slaveobject = null;
var dragx = 0;
var dragy = 0;
var posx = 0;
var posy = 0;

var mzeroposx = 0;
var mzeroposy = 0;

var szeroposx = 0;
var szeroposy = 0;

//constraints 
var minx = 0;
var maxx = 782;
var miny = 0;
var maxy = 0;

function draginit() {
if(document.getElementById(slavename)){
  document.onmousemove = drag;
  document.onmouseup = dragstop;
  	
  masterobject = document.getElementById(mastername);
  slaveobject = document.getElementById(slavename);
	
	slaveobject.style.width = document.getElementById("clipboard").innerHTML + "px";  
  
  document.getElementById(srahmenname).style.width = vpwidth+"px";
  document.getElementById(krahmenname).style.width = vpwidth+"px";
  maxx = vpwidth-(masterobject.offsetWidth+2);

	mzeroposx = masterobject.offsetLeft;
	mzeroposy = masterobject.offsetTop;
	
	szeroposx = slaveobject.offsetLeft;
	szeroposy = slaveobject.offsetTop;
  
  minx += mzeroposx;
  maxx += mzeroposx;
  
  miny += mzeroposy;
  maxy += mzeroposy;
  //alert("M: "+masterobject.id+"\nS: "+slaveobject.id+"\nmp: "+masterobject.offsetLeft+"\nsp: "+slaveobject.offsetLeft);
}
}
function dragstart(element) {
	//alert("M: "+masterobject.id+"\nS: "+slaveobject.id+"\nmp: "+masterobject.offsetLeft+"\nsp: "+slaveobject.offsetLeft);
  dragobjekt = element;
  
  dragx = posx - dragobjekt.offsetLeft;
  dragy = posy - dragobjekt.offsetTop;
}
function dragstop() {
  dragobjekt=null;
}
function drag(ereignis) {
  posx = document.all ? window.event.clientX : ereignis.pageX;
  posy = document.all ? window.event.clientY : ereignis.pageY;
  //alert("Drag : "+posx+" " +posy);
  if(dragobjekt != null) {
  
  		var xtarget = (posx - dragx);
  		var ytarget = (posy - dragy);
  		if(xtarget < minx) xtarget = minx;
  		if(xtarget > maxx) xtarget = maxx;
  		if(ytarget < miny) ytarget = miny;
  		if(ytarget > maxy) ytarget = maxy;
    dragobjekt.style.left = xtarget + "px";
    dragobjekt.style.top = ytarget + "px";
    
    var fractionx = (masterobject.offsetLeft - mzeroposx)/(maxx - minx);
    var fractiony = (masterobject.offsetTop - mzeroposy)/(maxy - miny);
		
    slaveobject.style.left = (szeroposx + (((slaveobject.offsetWidth-vpwidth)*fractionx))* -1) + "px";
    slaveobject.style.top = (szeroposy + (((slaveobject.offsetHeight-vpheight)*fractiony)) * -1) + "px";
 	//document.getElementById("debug").innerHTML = "A";// slaveobject.offsetLeft; 
  }
//function setScrollerWidth(w){
//	document.getElementById("debug").innerHTML = "Setting w to " + w;
//	document.getElementById("scroller").style.width = w+"px";
//	alert("Setting scroller width to " + document.getElementById("scroller").offsetWidth);
//}
}