//----------------------------------------------------------------------------------
// Function Name: 	Bobble function pack
//----------------------------------------------------------------------------------

function setB1(){
	
	if (document.form1.b1active.checked){bubble1.style.visibility="visible";}
	else{bubble1.style.visibility="hidden";}
}

function setB2(){
	
	if (document.form1.b2active.checked){bubble2.style.visibility="visible";}
	else{bubble2.style.visibility="hidden";}
}

	
function Showbubbles(){
	
	
	setB1();
	setB2();

}

function UpdateText1(){
	
	val = document.form1.description1.value;
	bubble1text.innerHTML = val.replace(/\n/g, '<br>');



	if (val.length>75){
		document.form1.b1size.value = "3";
		SetBubble(1);
	}
	else if (val.length>40 && val.length<76){
		document.form1.b1size.value = "2";
		SetBubble(1);
	}
	else if (val.length<41) {
		document.form1.b1size.value = "1";
		SetBubble(1);
	}
	
}

function UpdateText2(){



	val = document.form1.description2.value;	
	bubble2text.innerHTML = val.replace(/\n/g, '<br>');
	
	if (val.length>75){
		document.form1.b2size.value = "3";
		SetBubble(2);
	}
	else if (val.length>40 && val.length<76){
		document.form1.b2size.value = "2";
		SetBubble(2);
	}
	else if (val.length<41) {
		document.form1.b2size.value = "1";
		SetBubble(2);
		
	}	
}



function UpdateBubble(tmpbubble,imagepath,imagewidth,imageheight,topmargin,bottommargin,leftmargin,rightmargin){

  	
  	
  	if (tmpbubble==1){
  	
		
		bubbletable1.width=imagewidth;
		bubbletable1.height=imageheight;
		
		document.getElementById("bubble1").style.backgroundImage = "url('/"+imagepath+"')";
		document.getElementById("bubble1").style.width=imagewidth;
		document.getElementById("bubble1").style.height=imageheight;
		
		document.images['topcanvas1'].height=topmargin;
		document.images['botcanvas1'].height=bottommargin;
		//document.images['bubbleimage1'].width=imagewidth;
		//document.images['bubbleimage1'].height=imageheight;
		//document.images['bubbleimage1'].src=imagepath;

		frontcanvas1.width=leftmargin;
		backcanvas1.width=rightmargin;
		
		document.form1.b1width.value=imagewidth;
		document.form1.b1height.value=imageheight;
		document.form1.b1left.value=leftmargin;
		document.form1.b1right.value=rightmargin;
		document.form1.b1top.value=topmargin;
		document.form1.b1bottom.value=bottommargin;
	}
		
	if (tmpbubble==2){

		
		bubbletable2.width=imagewidth;
		bubbletable2.height=imageheight;
		
		document.getElementById("bubble2").style.backgroundImage = "url('/"+imagepath+"')";
		document.getElementById("bubble2").style.width=imagewidth;
		document.getElementById("bubble2").style.height=imageheight;
		document.images['topcanvas2'].height=topmargin;
		document.images['botcanvas2'].height=bottommargin;
		//document.images['bubbleimage2'].width=imagewidth;
		//document.images['bubbleimage2'].height=imageheight;
		//document.images['bubbleimage2'].src=imagepath;
		//var x = bubbletable2.rows;
		//x[0].height=topmargin;
		//x[2].height=bottommargin;
		frontcanvas2.width=leftmargin;
		backcanvas2.width=rightmargin;
		
		document.form1.b2width.value=imagewidth;
		document.form1.b2height.value=imageheight;
		document.form1.b2left.value=leftmargin;
		document.form1.b2right.value=rightmargin;
		document.form1.b2top.value=topmargin;
		document.form1.b2bottom.value=bottommargin;
	}
	
}

function SetBubble(tmpbubble){
	
	tmpsize = eval("document.form1.b"+tmpbubble+"size.value"); 

	if (tmpbubble==1){

		if(document.form1.b1type[0].checked){tmptype = "s";}
		else{tmptype = "t";}
		if(document.form1.b1dir[0].checked){tmpdir = "ne";}
		else if(document.form1.b1dir[1].checked){tmpdir = "nw";}
		else if(document.form1.b1dir[2].checked){tmpdir = "se";}
		else{tmpdir = "sw";}
				

	}
	if (tmpbubble==2){

		if(document.form1.b2type[0].checked){tmptype = "s";}
		else{tmptype = "t";}
		if(document.form1.b2dir[0].checked){tmpdir = "ne";}
		else if(document.form1.b2dir[1].checked){tmpdir = "nw";}
		else if(document.form1.b2dir[2].checked){tmpdir = "se";}
		else{tmpdir = "sw";}

	}

	//debug.innerHTML = tmpsize+"_"+tmptype+"_"+tmpdir;

	if (tmptype == "s"){ 

		if (tmpdir=="nw"){
			if (tmpsize == "1") {UpdateBubble(tmpbubble,"images/bob1_nw1.gif",142,110,1,1,25,25)}
			if (tmpsize == "2") {UpdateBubble(tmpbubble,"images/bob1_nw2.gif",182,141,1,26,25,25)}
			if (tmpsize == "3") {UpdateBubble(tmpbubble,"images/bob1_nw3.gif",242,188,1,40,25,25)} 
		}
		if (tmpdir=="ne"){
			if (tmpsize == "1") {UpdateBubble(tmpbubble,"images/bob1_ne1.gif",142,110,1,1,25,25)}
			if (tmpsize == "2") {UpdateBubble(tmpbubble,"images/bob1_ne2.gif",182,141,1,26,25,25)}
			if (tmpsize == "3") {UpdateBubble(tmpbubble,"images/bob1_ne3.gif",242,188,1,40,25,25)}
		}

		if (tmpdir=="sw"){
			if (tmpsize == "1") {UpdateBubble(tmpbubble,"images/bob1_sw1.gif",142,110,20,1,25,25)}
			if (tmpsize == "2") {UpdateBubble(tmpbubble,"images/bob1_sw2.gif",182,141,26,1,25,25)}
			if (tmpsize == "3") {UpdateBubble(tmpbubble,"images/bob1_sw3.gif",242,188,40,1,25,25)}
		}

		if (tmpdir=="se"){
			if (tmpsize == "1") {UpdateBubble(tmpbubble,"images/bob1_se1.gif",142,110,20,1,25,25)}
			if (tmpsize == "2") {UpdateBubble(tmpbubble,"images/bob1_se2.gif",182,141,26,1,25,25)}
			if (tmpsize == "3") {UpdateBubble(tmpbubble,"images/bob1_se3.gif",242,188,40,1,25,25)}
		}

	}
	if (tmptype == "t"){

		if (tmpdir=="nw"){
			if (tmpsize == "1") {UpdateBubble(tmpbubble,"images/bob2_nw1.gif",142,133,8,20,25,25)}
			if (tmpsize == "2") {UpdateBubble(tmpbubble,"images/bob2_nw2.gif",182,171,14,30,25,25)}
			if (tmpsize == "3") {UpdateBubble(tmpbubble,"images/bob2_nw3.gif",242,227,28,80,25,25)}
		}

		if (tmpdir=="ne"){
			if (tmpsize == "1") {UpdateBubble(tmpbubble,"images/bob2_ne1.gif",142,133,8,20,25,25)}
			if (tmpsize == "2") {UpdateBubble(tmpbubble,"images/bob2_ne2.gif",182,171,14,30,25,25)}
			if (tmpsize == "3") {UpdateBubble(tmpbubble,"images/bob2_ne3.gif",242,227,28,80,25,25)}
		}

		if (tmpdir=="sw"){
			if (tmpsize == "1") {UpdateBubble(tmpbubble,"images/bob2_sw1.gif",142,133,30,8,25,25)}
			if (tmpsize == "2") {UpdateBubble(tmpbubble,"images/bob2_sw2.gif",182,171,40,14,25,25)}
			if (tmpsize == "3") {UpdateBubble(tmpbubble,"images/bob2_sw3.gif",242,227,80,28,25,25)}
		}

		if (tmpdir=="se"){
			if (tmpsize == "1") {UpdateBubble(tmpbubble,"images/bob2_se1.gif",142,133,30,8,25,25)}
			if (tmpsize == "2") {UpdateBubble(tmpbubble,"images/bob2_se2.gif",182,171,40,14,25,25)}
			if (tmpsize == "3") {UpdateBubble(tmpbubble,"images/bob2_se3.gif",242,227,80,28,25,25)}
		}
	}
	
}

//----------------------------------------------------------------------
//-- Chars -------------------------------------------------------------
//----------------------------------------------------------------------
//var event = null;

function calcchars1(){
/*
	if (!event){event = window.event;} 	
	var keycode = event.keyCode;	
	var realkey = String.fromCharCode(event.keyCode);
*/
	if(form1.description1.value.length>128){form1.description1.value = form1.description1.value.substring(0, 128);}
	document.form1.Count1.value=128-form1.description1.value.length;
}

function calcchars2(){
	/*
	if (!event){event = window.event;} 
	var keycode = event.keyCode;	
	var realkey = String.fromCharCode(event.keyCode);
	*/
	if(form1.description2.value.length>128){form1.description2.value = form1.description2.value.substring(0, 128);}
	document.form1.Count2.value=128-form1.description2.value.length;
}

function updatexy(){

	document.form1.x1.value=document.getElementById('bubble1').offsetLeft-document.getElementById('thisimage').offsetLeft;
	document.form1.y1.value=document.getElementById('bubble1').offsetTop-document.getElementById('thisimage').offsetTop;
	document.form1.x2.value=document.getElementById('bubble2').offsetLeft-document.getElementById('thisimage').offsetLeft;
	document.form1.y2.value=document.getElementById('bubble2').offsetTop-document.getElementById('thisimage').offsetTop; 

}

//----------------------------------------------------------------------
//-- Dragging objects --------------------------------------------------
//----------------------------------------------------------------------
//-- INFO: class=drag
//----------------------------------------------------------------------
	
var _mouseX = 0; 	// current mouse position
var _mouseY = 0; 
var _startX = 0; 	// mouse starting positions 
var _startY = 0; 
var _offsetX = 0; 	// current element offset 
var _offsetY = 0; 
var _dragElement; 	// needs to be passed from OnMouseDown to OnMouseMove 
var _oldZIndex = 0; 	// we temporarily increase the z-index during drag 
var _ycorr = 0;		//correct for window pos
var _xcorr = 0;		//correct for window pos
var mousedown = false;
var firstdrag = true;	//Firefox hack

function InitDragDrop() { 

	document.onmousedown = OnMouseDown; 
	document.onmouseup = OnMouseUp; 
	document.onmousemove = OnMouseMove; 
	
	//-- Hack for Firefox
	//alert(document.getElementById("bubble1").style.className);
	//document.getElementById("bubble1").style.left="100px";
	//if(document.getElementById("bubble1").style.left==0){document.getElementById("bubble1").style.left="100px";}	
	//if(document.getElementById("bubble1").style.top==0){document.getElementById("bubble1").style.top="100px";}

	
}

function OnMouseDown(e) { 

	// IE is retarded and doesn't pass the event object 
	if (e == null){e = window.event;} 
	
	// IE uses srcElement, others use target 
	var target = e.target != null ? e.target : e.srcElement; 

	mousedown = true;
	

	_ycorr = 0; _xcorr = 0;
	

	
	//debug.innerHTML = target.className;
	target = checkDrag(target); 			//check if nestet return parent

	

	// for IE, left click == 1 
	// for Firefox, left click == 0 
	if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'dragEnabled') {		// && .className != 'dragEnabled'    && target.id.substring(0, 6) == 'bubble'

		
		 
		// grab the mouse position 
		_startX = e.clientX; _startY = e.clientY; 

		
		// grab the clicked element's position 
		_offsetX = ExtractNumber(target.style.left); _offsetY = ExtractNumber(target.style.top); 
		
		if(firstdrag){if(_offsetX==0){_ycorr = _startY; _xcorr = _startX;}firstdrag=false;}
		
		// bring the clicked element to the front while it is being dragged 
		//_oldZIndex = target.style.zIndex; target.style.zIndex = 10000; 
		
		// we need to access the element in OnMouseMove 
		_dragElement = target; 



		
		// tell our code to start moving the element with the mouse 
		document.onmousemove = OnMouseMove; 
		
		
		//debug.innerHTML = _dragElement.id.substring(0,7)+'_';

		
		// cancel out any text selections 
		document.body.focus(); 


		
		// prevent text selection in IE 
		document.onselectstart = function () { return false; }; 

		
		return false; 
	} 
}

function OnMouseMove(e) { 

	if (e == null) var e = window.event; 
	
	_mouseX = e.clientX; _mouseY = e.clientY;

	
	if(mousedown && _dragElement){

	
		
			

		
		xval = _offsetX + e.clientX - _startX + _xcorr;
		yval = _offsetY + e.clientY - _startY + _ycorr;		
		

		

		
		// this is the actual "drag code" 


			_dragElement.style.left = xval + 'px';
			_dragElement.style.top = yval + 'px';


		//debug.innerHTML = bubble1.offsetLeft+'_'+thisimage.offsetLeft+'_'+xval+'_'+yval;
		

      

	}	//mousedown
}	



function OnMouseUp(e) { 
	
	//if (_dragElement.id.substring(0,7)=='dragsel'){}
	
	if (_dragElement != null) { 
		
		_dragElement.style.zIndex = _oldZIndex; 
		
		// we're done with these events until the next OnMouseDown 
		//document.onmousemove = null; 
		document.onselectstart = null; 
		
		// this is how we know we're not dragging 
		_dragElement = null; 
		_ycorr = 0; _xcorr = 0;
		
		
	}
	
	mousedown = false;
}

function checkDrag(elCheck) {
	
	// Check if the clicked inside an element that supports dragging

	
	var dragok = false; var newtarget = null; var oldtarget = elCheck;

	while (elCheck!=null && !dragok) {

		if (elCheck.className == 'dragEnabled'){dragok = true; newtarget = elCheck;}
		else{
			if(nn){elCheck = elCheck.parentNode;}
			else{elCheck = elCheck.parentElement;}
		}
	}    
	
	
	if(dragok){returnvalue = newtarget;}else{returnvalue = oldtarget;}
	return returnvalue;
}
//----------------------------------------------------------------------
//----------------------------------------------------------------------
//----------------------------------------------------------------------

function ExtractNumber(value){var n = parseInt(value); return n == null || isNaN(n) ? 0 : n;}