function parseXml(gl){
    loadObjXml(gl,"./xml/line.xml");
    loadObjXml(gl,"./xml/blue_notes.xml");
    loadObjXml(gl,"./xml/pink_notes.xml");
    loadObjXml(gl,"./xml/back.xml");
    loadObjXml(gl,"./xml/beam.xml");
    drawText(gl,"title"," Drum Simulator ",60,"white","center",432,86);
    drawText(gl,"press"," Press Space ",60,"white","center",320,60);
    drawText(gl,"main_mode"," main mode ",60,"white","center",450,70);
    drawText(gl,"select_music"," select music ",60,"white","center",450,70);
    drawText(gl,"music_title","",60,"white","center",432,86);
    drawText(gl,"result_title","result",60,"white","center",450,70);
    drawText(gl,"perfect_count","",40,"white","center",450,50);
    drawText(gl,"great_count","",40,"white","center",450,50);
    drawText(gl,"good_count","",40,"white","center",450,50);
    drawText(gl,"bad_count","",40,"white","center",450,50);
    drawText(gl,"poor_count","",40,"white","center",450,50);
    drawText(gl,"result","",40,"white","center",450,50);
    drawText(gl,"judge","",35,"white","center",0,0);
}

function loadObjXml(gl,url)
{
    if(gl.obj == undefined) gl.obj = new Object();
    var xmlChara = new Object();
    xmlChara = parsePanel(url);
    for (var name in xmlChara)
    {
        gl.obj[name] = makeXmlObj(gl, xmlChara[name]);
        gl.obj[name].texture = loadImageTexture(gl, xmlChara[name].image);
    }
}

function drawText(ctx,name,message,fontSize,color,xPosition,w,h){
    if(typeof w === "undefined")
	w = fontSize*jstrlen(message)/2;
    if(typeof h === "undefined")
	h = fontSize;
    canvas4text.width = w;
    canvas4text.height = h;
    
    ctext.shadowBlur = 0.5;
    ctext.shadowColor = "black";
    ctext.font = fontSize+"px 'Times New Roman'";
    ctext.fillStyle = color;
    switch(xPosition){
    case "center":
	ctext.textAlign = "center";
	var x = canvas4text.width/2;
	break;
    case "left":
	ctext.textAlign = "left";
	var x = 0;
	break;
    case "right":
	ctext.textAlign = "right";
	var x = canvas4text.width;
	break;
    }
/*
    switch(yPosition){
    case "center":
	var y = canvas4text.height/2+size/4;
	break;
    case "top":
	var y = size;
	break;
    case "bottom":
	var y = canvas4text.height - size/4;
	break;
    }
*/
    var y = canvas4text.height/2+fontSize/4;
    ctext.fillText(message, x, y, canvas4text.width);
    makeTextObj(ctx,name,canvas4text.toDataURL(),w,h);
}

function jstrlen(str,len,i) {
    len = 0;
    str = escape(str);
    for (i = 0; i < str.length; i++, len++) {
	if (str.charAt(i) == "%") {
            if (str.charAt(++i) == "u") {
		i += 3;
		len++;
            }
            i++;
	}
    }
    return len;
}

function makeTextObj(ctx,objName,imageText,w,h){
    var obj = new Object();
    obj.model = [0.0,0.0,0.0];
    obj.normal = [
	"0.0","0.0","1.0",
	"0.0","0.0","1.0",
	"0.0","0.0","1.0",
	"0.0","0.0","1.0",
	"0.0","0.0","1.0",
	"0.0","0.0","1.0",
    ];
    obj.texCoords = [
	"0.0","0.0",
	"1.0","0.0",
	"1.0","1.0",
	"1.0","1.0",
	"0.0","1.0",
	"0.0","0.0",
    ];
    obj.vertex = calcSize(w,h);

    ctx.obj[objName] = makeXmlObj(ctx,obj);
    ctx.obj[objName].texture = loadImageTexture(ctx,imageText);

}

function calcSize(w,h){
    var x = w*200/WIDTH/2;
    var y = h*140/HEIGHT/2;
    var z = 0.0;
    var size = [
	-x,-y,z,
	x,-y,z,
	x,y,z,
	x,y,z,
	-x,y,z,
	-x,-y,z,
    ];
    return size;
}

function PutSpriteF(ctx,x,y,scale,glObj){
    ctx.enableVertexAttribArray(0);
    ctx.enableVertexAttribArray(1);
    ctx.enableVertexAttribArray(2);

    ctx.bindBuffer(ctx.ARRAY_BUFFER, glObj.vertexObject);
    ctx.vertexAttribPointer(2, 3, ctx.FLOAT, false, 0, 0);
    ctx.bindBuffer(ctx.ARRAY_BUFFER, glObj.normalObject);
    ctx.vertexAttribPointer(0, 3, ctx.FLOAT, false, 0, 0);
    
    ctx.bindBuffer(ctx.ARRAY_BUFFER, glObj.texCoordObject);
    ctx.vertexAttribPointer(1, 2, ctx.FLOAT, false, 0, 0);

    ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, glObj.indexObject);


    // generate the model-view matrix
    var mvMatrix = new J3DIMatrix4();
    mvMatrix.scale(scale, scale, scale);
    mvMatrix.translate( x, y, 10);
    
    // construct the normal matrix from the model-view matrix
    var normalMatrix = new J3DIMatrix4(mvMatrix);
    normalMatrix.invert();
    normalMatrix.transpose();
    normalMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false);
    
    // construct the model-view * projection matrix
    var mvpMatrix = new J3DIMatrix4(ctx.perspectiveMatrix);
    mvpMatrix.multiply(mvMatrix);
    mvpMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false);

    
    ctx.bindTexture(ctx.TEXTURE_2D, glObj.texture);
    ctx.drawElements(ctx.TRIANGLES, glObj.numIndices, ctx.UNSIGNED_SHORT, 0);


}

function parsePanel( url ) {
    var http = new JKL.ParseXML( url );
    var data = http.parse()["OBJECT-3D"];
    var xmlObj = new Object();
    if (data["surface"][0]) {
	for (var i in data["surface"]) {
	    var obj = xmlObj[data["surface"][i]["name"]] = new Object();
	    obj.vertex = splitVector(data["surface"][i]["coordinate"]);
	    obj.normal = splitVector(data["surface"][i]["normal"]);
	    obj.texCoords = splitVector(data["surface"][i]["texture"]);
	    obj.model = splitVector(data["surface"][i]["model"]);
	    var xmlObjImage = data["surface"][i]["image"];
	    obj.image = 'data:image/png;base64,'+xmlObjImage["#text"];
	}
    } else {
	var obj = xmlObj[data["surface"]["name"]] = new Object();
	obj.vertex =  splitVector(data["surface"]["coordinate"]);
	obj.normal =  splitVector(data["surface"]["normal"]);
	obj.texCoords = splitVector(data["surface"]["texture"]);
	obj.model = splitVector(data["surface"]["model"]);
	var xmlObjImage = data["surface"]["image"];
	obj.image = 'data:image/png;base64,'+xmlObjImage["#text"];
    }

    return xmlObj;
}


function splitVector(str) {
    //    return str.replace(/^\s+/g, "").replace(/\s+/g, " ").split(" ");
    return str.replace(/^\s+/g, "").replace(/\s+/g, " ").replace(/\s$/g, "").split(" ");
}

function makeXmlObj(ctx, xmlObj)
{

    var model = new Object();
    model.x = parseFloat(xmlObj.model[0]);
    model.y = parseFloat(xmlObj.model[1]);
    model.z = parseFloat(xmlObj.model[2]);
  
    var geometryData = [ ];
    var normalData   = [ ];
    var texCoordData = [ ];
    var indexData    = [ ];
    var index = 0;
    var xmax = 0;
    var xmin = 0;
    var ymax = 0;
    var ymin = 0;    
   
    
    for(var i=0; xmlObj.vertex[i]; i+=3){
	geometryData.push(parseFloat(xmlObj.vertex[i]) - model.x);
	geometryData.push(parseFloat(xmlObj.vertex[i+1]) - model.y);
	geometryData.push(parseFloat(xmlObj.vertex[i+2]) - model.z);
	if ( (i % 3) == 0) {
	    indexData.push(index);
	    index++;
	}
	// Get object's maximum and minimum X,Y. 
	if ( i == 0) {
	    xmax = geometryData[0];
	    xmin = geometryData[0];
	    ymax = geometryData[1];
	    ymin = geometryData[1];
	}
	if ( i > 0 ){
	    xmax = Math.max( xmax, geometryData[i]);
	    xmin = Math.min( xmin, geometryData[i]);
	    ymax = Math.max( ymax, geometryData[i+1]);
	    ymin = Math.min( ymin, geometryData[i+1]);
	}
    }
    for(i=0; xmlObj.texCoords[i]; i++){
	texCoordData.push(parseFloat(xmlObj.texCoords[i]));

    }
    for(i=0; xmlObj.normal[i]; i+=3){
	normalData.push(parseFloat(xmlObj.normal[i]));
	normalData.push(parseFloat(xmlObj.normal[i+1]));
	normalData.push(parseFloat(xmlObj.normal[i+2]));
    }

    var retval = { };
    // Get ogject's width and height.
    retval.w = xmax - xmin;
    retval.h = ymax - ymin;

    retval.normalObject = ctx.createBuffer();
    ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.normalObject);
    ctx.bufferData(ctx.ARRAY_BUFFER, new Float32Array(normalData), ctx.STATIC_DRAW);
    
    retval.texCoordObject = ctx.createBuffer();
    ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.texCoordObject);
    ctx.bufferData(ctx.ARRAY_BUFFER, new Float32Array(texCoordData), ctx.STATIC_DRAW);
    
    retval.vertexObject = ctx.createBuffer();
    ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.vertexObject);
    ctx.bufferData(ctx.ARRAY_BUFFER, new Float32Array(geometryData), ctx.STATIC_DRAW);
    
    retval.numIndices = indexData.length;
    retval.indexObject = ctx.createBuffer();
    ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, retval.indexObject);
    ctx.bufferData(ctx.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexData), ctx.STREAM_DRAW);
    
    return retval;
}