function createLines( lineInfo ) {
    // alert( lineInfo.length );
    
    var pageWidth = 1024; // Width of the page
    var lineAreaHeight = 244; // Height of the line Areay
    var lineAreaOffsetX = 0;
    var lineAreaOffsetY = 524;
    var sideMargin = 30; // side Margin in px
    
    var linesPerPoint = 4; // lines per LineInfo-Point
    var lineMargin = 10; // px between horiz lines
   
    var sectionHeight = ( linesPerPoint - 1 ) * lineMargin;
    var sectionMargin = parseInt( ( lineAreaHeight - ( sectionHeight * lineInfo.length ) ) / ( lineInfo.length + 1 ) );

    
    for( var cnt = 0; cnt < lineInfo.length; cnt++ ) {
        var y = ( sectionHeight + sectionMargin ) * cnt + sectionMargin;
        var x = lineInfo[cnt].x;
        
        // alert( "X: " + x + ", Y: " + y );
        
        for( var horLine = 0; horLine < linesPerPoint; horLine++ ) {
            var line = document.createElement( "DIV" );
            var style = "position: absolute; width: " + ( ( pageWidth - ( sideMargin * 2 ) ) - x ) + "px; height: 1px; top: " + ( y  + lineAreaOffsetY + ( horLine * lineMargin ) ) + "px; left: " + x + "px;";
            // alert( "style: " + style );
            // line.setAttribute( "style", style );
	    line.style[ "position" ] 	= "absolute";
	    line.style[ "width" ] 	= ( ( pageWidth - ( sideMargin * 2 ) ) - x ) + "px";
	    line.style[ "height" ] 	= "1px";
	    line.style[ "top" ] 	= ( y  + lineAreaOffsetY + ( horLine * lineMargin ) ) + "px";    
	    line.style[ "left" ] 	= x + "px";
	    // line.style[ "border" ] 	= "1px solid black";
	    line.style[ "padding" ]	= "0px";
	    line.style[ "lineHeight" ]	= "1px";
	    line.style[ "fontSize" ] 	= "1px";
            line.className = "decoLine";
            document.getElementById( "container" ).appendChild( line );
        }

        var line = document.createElement( "DIV" );
        line.className = "decoLine";
        var style = "position: absolute; width: 1px; height: " + ( ( y  + lineAreaOffsetY + sectionHeight ) - lineInfo[cnt].y ) + "px; top: " + lineInfo[cnt].y + "px; left: " + lineInfo[cnt].x + "px;";
        // alert( "style: " + style );
        // line.setAttribute( "style", style );
        line.style[ "position" ] 	= "absolute";
        line.style[ "width" ] 	= "1px";
        line.style[ "height" ] 	= ( ( y  + lineAreaOffsetY + sectionHeight ) - lineInfo[cnt].y ) + "px";
        line.style[ "top" ] 	= lineInfo[cnt].y + "px";    
        line.style[ "left" ] 	= lineInfo[cnt].x + "px";
        line.style[ "padding" ]	= "0px";
        line.style[ "lineHeight" ]	= "1px";
        line.style[ "fontSize" ] 	= "1px";
        document.getElementById( "container" ).appendChild( line );
    }
}