var controlLayer,benzolbaumImage, bbimg;
var baumOffsetX=0, baumOffsetY=0;
var previewArea, controlContainer;
var startDragOffetX=0, startDragOffsetY=0;
var enableDrag=false;
var target;

/**
* Initializes the objects
*
* @function initBenzolbaum(evt)
* @param	
*/
function initBenzolbaum() {
    bbimg = document.getElementById("bbimg");
    bbimg.left = "0px";
    bbimg.top = "0px";
	
	benzolbaumImage = document.getElementById("benzolbaum-image");
	benzolbaumImage.style.width  = "604px";
	benzolbaumImage.style.height = "358px";

	controlContainer = document.getElementById("control-container");
    controlContainer.style.height = "183px";
    controlContainer.style.width = "132px";

	controlLayer = document.getElementById("control");
    controlLayer.style.width  = Math.round( parseInt(benzolbaumImage.style.width) / ( bbimg.width / parseInt(controlContainer.style.width) ) ) + "px";
	controlLayer.style.height = Math.round( parseInt(benzolbaumImage.style.height) / ( bbimg.height / parseInt(controlContainer.style.height) ) ) + "px";

	controlLayer.style.top = "0px";
	controlLayer.style.left = "0px";
	

	// initiate the event-capture stuff for the different
	// browser
	if( document.layers ){
		document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
		document.onmousedown = engage;
		document.onmousemove = dragit;
		document.onmouseup = release;
	}else if( document.body & document.body.addEventListener ){
		// turn on event capture for these events W3C DOM event model 
		document.addEventListener("mousedown",engage,true);
		document.addEventListener("mousemove",dragit,true);
		document.addEventListener("mouseup",release,true);
	}else{
		// MSIE
		document.onmousedown = engage;
		document.onmousemove = dragit;
		document.onmouseup = release;
	};
   
	// *FIX* the preview area must be specified manually, because
	// (at this time) it can't be automatically evaluated 
	// through the DOM objects (because of the border-sizes of the
	// container layers)
	previewArea = { left:0, top:0, right:0, bottom:0 };
	previewArea.right = previewArea.left + parseInt(controlContainer.style.width);
	previewArea.bottom = previewArea.top + parseInt(controlContainer.style.height);
	
	// debug: create a filled layer to show the previewArea!
	///document.write('<div'+' style="position:absolute; left:'+previewArea.left+'px; top:'+previewArea.top+'px; width:'+(previewArea.right-previewArea.left)+'px; height:'+(previewArea.bottom-previewArea.top)+'px; background-color:red; z-index:1;">test</'+'div>');
}


/**
* @function 
* @param	
* @desc     
*/
function engage(evt){
	evt = (evt) ? evt : event;
    var target = (evt.target) ? evt.target : evt.srcElement;
	if(target.id!="control") return;
	if( controlLayer ){
		enableDrag = true;
		if( document.body.setCapture ){ document.body.setCapture(); };
		if( evt.pageX ){
			controlLay=document.getElementById("control");
			offsetX = evt.pageX - controlLay.offsetLeft;
			offsetY = evt.pageY - controlLay.offsetTop;
			enableDrag = true;
			/*printDebug("offsetParentLeft: " + controlLay.offsetLeft + " offsetParentTop: " + controlLay.offsetTop + 
			           "\nevt.pageX: " + evt.pageX + " evt.pageY: " + evt.pageY + 
			           "\noffsetX: " + offsetX + " offsetY: " + offsetY);*/
		}else if( typeof evt.clientX ){
            controlLay=document.getElementById("control");
			offsetX = evt.clientX - controlLay.offsetLeft;
			offsetY = evt.clientY - controlLay.offsetTop;
			window.status = "offsetX: " + offsetX + "; offsetY:" + offsetY;
            //alert(offsetX + " " + offsetY);
			enableDrag = true;
			/*printDebug("offsetParentLeft: " + controlLay.offsetParent.offsetLeft + " offsetParentTop: " + controlLay.offsetParent.offsetTop + 
			           "\nevt.offsetX: " + evt.offsetX + " evt.offsetY: " + evt.offsetY + 
			           "\noffsetX: " + offsetX + " offsetY: " + offsetY);*/
		};
	}else{
		window.status = "no controlLayerLayer object available!";
	}
	return false;
}


/**
* @function 
* @param	
* @desc     
*/
function dragit(evt) {
	var x, y;
	evt = (evt) ? evt : event;
	if( enableDrag == true ){
		if( evt.pageX ){
			if( (evt.pageX-offsetX)<previewArea.left ){
				x = previewArea.left;
			}else if( (evt.pageX-offsetX+parseInt(controlLayer.style.width))>previewArea.right ){
				x = previewArea.right - parseInt(controlLayer.style.width);
			}else{
				x = evt.pageX-offsetX;
			};
			if( (evt.pageY-offsetY)<previewArea.top ){
				y = previewArea.top;
			}else if( (evt.pageY-offsetY+parseInt(controlLayer.style.height))>previewArea.bottom ){
				y = previewArea.bottom - parseInt(controlLayer.style.height);
			}else{
				y = evt.pageY-offsetY;
			};
			moveControl(x,y);
			var baumX = x - previewArea.left;
			var baumY = y - previewArea.top;
			moveBenzolbaum(baumX,baumY,controlLayer);
		}else if( evt.clientX || evt.clientY ){
			if( (evt.clientX-offsetX)<previewArea.left ){
				x = previewArea.left;
			}else if( (evt.clientX-offsetX+parseInt(controlLayer.style.width))>previewArea.right ){
				x = previewArea.right - parseInt(controlLayer.style.width);
			}else{
				x = evt.clientX-offsetX;
			};
			if( (evt.clientY-offsetY)<previewArea.top ){
				y = previewArea.top;
			}else if( (evt.clientY-offsetY+parseInt(controlLayer.style.height))>previewArea.bottom ){
				y = previewArea.bottom - parseInt(controlLayer.style.height);
			}else{
				y = evt.clientY-offsetY;
			};
			moveControl(x,y);
			var baumX = x - previewArea.left;
			var baumY = y - previewArea.top;
			moveBenzolbaum(baumX,baumY,controlLayer);
		};
		evt.cancelBubble=true;
	}
	return false;    
}


/**
* @function 
* @param	
* @desc     
*/
function release(){
	enableDrag=false;
	if( document.body && document.body.releaseCapture ){
		document.body.releaseCapture();
	}
}


/**
* @function 
* @param	
* @desc     
*/
function moveControl(x,y){
	controlLayer.style.left = x+"px";
	controlLayer.style.top  = y+"px";
}


/**
* @function 
* @param	
* @desc     
*/
function moveBenzolbaum(x,y,obj) {
    var left  = parseInt(-13*x);
	var top   = parseInt(-9.55*y);

    var left  = parseInt(-1*(1600/183)*x);
	var top   = parseInt(-1*(1156/132)*y);
	
	bbimg.style.marginLeft = left+"px";
	bbimg.style.marginTop = top+"px";
	printDebug("x: "+  x + " y: " + y + 
	           "\nleft: "+  left + " top: " + top);
}

/**
* @function 
* @param	
* @desc     
*/
function printDebug(s) {
    dout = document.getElementById("output");
    if (dout) {
        dout.value = s;
    }
}


var infohidden = false;
/**
* hides the info field
*
* @function initBenzolbaum(evt)
* @param	
*/
function hideInfo() {
    o = document.getElementById('info');
    if (infohidden == false) {
        o.style.display = 'none';
        infohidden=true;
    }
}