document.onmousemove = mouseMove;

var paper_area = "draw_container";
var mypath ;
var paper ;
var mousePos ;
var offsetLeft ;
var offsetTop ;

var count = false ;
var draw = false;

var paths = "";

/*
function getXMLNodeSerialisation(xmlNode) {
     var text = false;
     try {
         // Gecko-based browsers, Safari, Opera.
         var serializer = new XMLSerializer();
         text = serializer.serializeToString(xmlNode);
     }
     catch (e) {
         try {
             // Internet Explorer.
             text = xmlNode.xml;
         }
         catch (e) {}
     }
     return text;
}*/
/*
 * Formatiert Pfade einheitlich
 *
 * M55,315L55,315M70,90
 */
function formatPath(path){
    var newPath;
    // Alles vor dem ersten M entfernen; Undefinied vom IE löschen
    newPath = path.substr(path.indexOf("M"));

    // .000 entfernen
    newPath = newPath.replace(/\.000/g, "");

    newPath = newPath.replace(/([0-9]+)\s([0-9]+)/g, "$1,$2"); // Kommas setzen

    newPath = newPath.replace(/\s+/g,""); //spaces entfernen

    // , durch Spaces ersetzen (IE)
    //newPath = newPath.replace(/,/g, " ");
    return newPath;
}

// Mouse Down
function startDrawing(){
	var mydiv = document.getElementById(paper_area);
	
	var parentDiv = mydiv.offsetParent;
	offsetLeft = parentDiv.offsetLeft+mydiv.offsetLeft;
	offsetTop = parentDiv.offsetTop+mydiv.offsetTop;

	//paper.circle(mousePos.x-offsetLeft, mousePos.y-offsetTop, 10);
	
	if(!count){
		mypath = paper.path({stroke: "#fff", "stroke-width": 6, opacity: 1}).moveTo(mousePos.x-offsetLeft, mousePos.y-offsetTop);//.lineTo(mousePos.x-offsetLeft, mousePos.y-offsetTop);
	}
	
	draw = true;
}

// Mouse Up
function stopDrawing(){
	draw = false;
	// Pfad schlie�en

    // Pfade aus Paper herausholen
    //var paths = getXMLNodeSerialisation(mypath.node); // returns path dom

    /*
     * Pfade
     */

    paths = paths + formatPath(mypath.attr("path")) + ";";
    // Pfad in Hidden Field schreiben
    document.getElementById("zeichnung").value = paths;
}

function mouseMove(ev){
	ev           = ev || window.event;
	mousePos = mouseCoords(ev);	
	
	if(draw){
		mypath.lineTo(mousePos.x-offsetLeft, mousePos.y-offsetTop);
	}
	//if (count != 0) { mypath.lineTo(mousePos.x-30, mousePos.y-30); }
	//else {mypath = paper.path({stroke: "#000"}).moveTo(mousePos.x-30, mousePos.y-30).lineTo(mousePos.x-30, mousePos.y-30); count = 2;}
}

function mouseCoords(ev){
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	};
	
}

function clearPaper(){
    var cell = document.getElementById(paper_area);

    if ( cell.hasChildNodes() )
    {
        while ( cell.childNodes.length >= 1 )
        {
            cell.removeChild( cell.firstChild );
        }
    }
    paper = Raphael(document.getElementById(paper_area), 300, 260);
    paths = "";
}

function loadPaper(){
	paper = Raphael(document.getElementById(paper_area), 300, 260);
    return true;
}