/* ======================================================
Comics o' Ajax
v. 1.0
by Kyveli Vezani & Andy Doro


TO DO:
// - smoothen dragging
// - resize based on amount of text
// - change direction of balloon
========================================================*/

// initialize variables
var startDragging = false;
var isDragging = false;
//var draggedItem = null;
var selectedItem = null; 

var i = 0;



Event.observe(window, "mouseup", dragstop );
Event.observe(window, "mousemove", drag);


function init()
{
	makeBubble(i);

}


function makeBubble(i) 
{
	var canvasdiv = document.createElement("div");

	canvasdiv.innerHTML="<canvas id='theCanvas" + i + "' class='myCanvas' width=140 height=110></canvas>"
	canvasdiv.id = "canvasdiv" + i;

	$('main').appendChild( canvasdiv );

	drawCanvas();

	elements = "canvasdiv" + i; 	

	var element = Element.extend($(elements));

	Event.observe(element, "mousedown", box_selector );
	Event.observe(element, "mousemove", drag ); 
}


// draw some shapes
function drawCanvas() 
{
	// get a reference to the canvas element
	var theCanvas = document.getElementById( "theCanvas"+i );

	// get it's drawing context. 
	var context = theCanvas.getContext( "2d" );


	// initialize the stroke parameters
	context.strokeStyle = "rgba( 30, 30, 30, 1.0)";
	context.lineWidth = 3;
	context.lineCap = "round";
	context.fillStyle = "rgba( 255, 255, 255, 1.0)";

	// Draw shapes
	Bubble(context,5,5,125,75,10);
	AddDivs();
}

function Bubble(ctx,x,y,width,height,radius){

	ctx.beginPath();
	ctx.moveTo(x,y+radius);
	ctx.lineTo(x,y+height-radius);
	ctx.quadraticCurveTo(x,y+height,x+radius,y+height);

	// put pointy part of bubble


	//if (reverse == -1)
	//{

		ctx.lineTo(x+radius+50,y+height);
		ctx.lineTo(x+radius+70,y+height+20);
		ctx.lineTo(x+radius+60,y+height);
		/*} else if (reverse == 1)
		{

			ctx.lineTo(x+radius+50,y+height);
			ctx.lineTo(x+radius+70,y+height+20);
			ctx.lineTo(x+radius+60,y+height);
			}*/


			ctx.lineTo(x+width-radius,y+height);
			ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
			ctx.lineTo(x+width,y+radius);
			ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
			ctx.lineTo(x+radius,y);
			ctx.quadraticCurveTo(x,y,x,y+radius);
			ctx.stroke();
			ctx.fill();
		}
		//end of bubble, beginning of other divs

		function AddDivs(){
			//create textdiv
			var textdiv = document.createElement("div");

			// Element.extend(textdiv);
			textdiv.addClassName("text");
			textdiv.id = ("text" + i);
			textdiv.style.position = "absolute";
			textdiv.style.left = $('canvasdiv'+ i).style.left + "px";
			textdiv.style.top = $('canvasdiv'+ i).style.top + "px";

			textdiv.innerHTML = "<FORM id='form"+i+"'><TEXTAREA CLASS='speech' NAME='entertext' ID='entertext" + i + "' SCROLLING=OFF COLS=15 ROWS=2></TEXTAREA><BR><INPUT TYPE=BUTTON ID='button' CLASS='button' VALUE='save' onClick='writ(event, this)'></FORM>";
			// insert it in the document
			$('canvasdiv' + i).appendChild( textdiv );

			//create editedtext div
			var editedtext = document.createElement('div');
			Element.extend(editedtext);
			editedtext.addClassName("talk");
			editedtext.id = "editedtext" +i;
			editedtext.style.position = "absolute";
			editedtext.style.left = $('canvasdiv'+ i).style.left + "px";
			editedtext.style.top = $('canvasdiv'+ i).style.top + "px";
			$('canvasdiv'+i).appendChild(editedtext);
			Event.observe(editedtext, "click", edit);
			editedtext.hide();


		}


		// <INPUT TYPE=BUTTON CLASS='button' VALUE='R' onClick='rev()'>

		/*
		function rev() {
			reverse = -reverse;
		}
		*/

		// drag event handler 
		function box_selector ( e ) {

			startDragging = true;
			selectedItem = this; 
			// position the draggedItem
			var mx = Event.pointerX( e ); 
			var my = Event.pointerY( e );
		/*
			
			this.offx= mx + parseInt(this.style.left);
			this.offy= my + parseInt(this.style.top);
		*/	

			// notice we have to coerce the integer into css pixel notation
			selectedItem.style.left = mx + "px";
			selectedItem.style.top = my +"px"; 

			//selectedItem = null;

		}



		// copied from david's example 
		function drag( e ) {

			if(startDragging){
				// update the position of draggedItem
				// position the draggedItem
				var mx = Event.pointerX( e ) + 1; 
				var my = Event.pointerY( e ) + 1;


				// notice we have to coerce the integer into css pixel notation
				selectedItem.style.left = mx -selectedItem.offx+ "px";
				selectedItem.style.top = my  -selectedItem.offy+ "px";
				
				var children = selectedItem.childNodes;
				for (var j=0; j<children.length; j++)
				{
					children[j].style.left = mx + "px";
					children[j].style.top =  my + "px";

				}
			}
		}


		function dragstop( e ) {
			
			startDragging=false;
			selectedItem = null; 
					
		}

		//  load an image 
		function bgimg() {

			var url = $('urlform').value;	

			if (url != "")
			{
				$('imageBg').src = url;
			}

			$('imageBg').src = url;

		}


		function writ(e, o) {
			//console.log(o);
			//console.log(e);	
			o.parentNode.parentNode.nextSibling.innerHTML = o.parentNode.entertext.value;
			o.parentNode.parentNode.nextSibling.show();
			o.parentNode.hide();				
		}

		function edit(){
			this.hide();
			this.previousSibling.firstChild.show();
		}