<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Customize Uniform</title>
    <link href="{{asset('/designer/custom-fonts/custom-fonts.php')}}" rel='stylesheet' type='text/css'>
    <style>
        canvas {
            display:none;
        }
    </style>
</head>
<body onload="loadPrintFile()">

    <div id="svgFrontContent"></div>
    <div id="svgBackContent"></div>
    <div id="svgJockTag"></div>

    <p>Please wait... Click here to go <a href="#" id="close_window" >back</a></p> 
    <p>updated</p>

    <!-- <canvas id="frontCanvas" width="220px" height="380px" style="border 1px solid black; display:none;" ></canvas>
	<canvas id="backCanvas" width="220px" height="380px" style="border 1px solid black; display:none;" ></canvas> -->

    <canvas id="frontCanvas"  width="158px" height="316px" style="border 1px solid black;" ></canvas>
    <canvas id="backCanvas" width="158px" height="316px" style="border 1px solid black;" ></canvas>

    <div id="printFileDiv"></div>
    
    <form id="myForm" action="{{ url('admin/orders/download') }}" method="post" accept-charset="UTF-8"></form>
        <p id="log"></p>
    <!-- jQuery 3 -->
    <script src="{{ asset('/bower_components/jquery/dist/jquery.min.js') }}"></script>
    <!-- fabric js 1.7.20 -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
    <!-- curvetext -->
    <script src="https://rawgit.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"></script>

    <script>
       function logSubmit(event) {
        log.textContent = `Form Submitted! Time stamp: ${event.timeStamp}`;

        event.preventDefault();
        }

        var form = document.getElementById('myForm');
        var  log = document.getElementById('log');
        form.addEventListener('submit', logSubmit);


        var frontCanvas = new fabric.StaticCanvas( document.getElementById("frontCanvas"));
        tmp_frontCanvas = {!! json_encode($client_design_array[0]->ContentLeft) !!};
        frontCanvas.loadFromJSON(tmp_frontCanvas, function(objects, options) {
            frontCanvas.renderAll();

            setTimeout(function(){

                frontCanvas.backgroundImage = 0;
                frontCanvas.clear();
                frontCanvas.renderAll();

                setTimeout(function(){

                    frontCanvas.loadFromJSON(tmp_frontCanvas, function(objects, options) {
                        frontCanvas.renderAll();
                        frontCanvas.selection = false;
                    });

                },1000);

            } ,500);
        });

        var backCanvas = new fabric.StaticCanvas( document.getElementById("backCanvas") );
        tmp_backCanvas = {!! json_encode($client_design_array[0]->ContentRight) !!};
        backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) {
            backCanvas.renderAll();

            setTimeout(function(){

                backCanvas.backgroundImage = 0;
                backCanvas.clear();
                backCanvas.renderAll();

                setTimeout(function(){

                    backCanvas.loadFromJSON(tmp_backCanvas, function(objects, options) {
                        backCanvas.renderAll();
                        backCanvas.selection = false;
                    });

                },1000);
            } ,500);

        });
          
        
        function loadPrintFile(){
            var path = 'http://localhost/uploads/images/';
            var template_code = "{{ $client_design_array[0]->TemplateCode }}";
            var size = "{{ $order_item_array[0]->JerseySize }}";
           
            // console.log();
            var svgLocation = "{{ minio_url('uploads/images/') }}" + "uniform-templates/" + template_code + "/SHORTS/SIZES/" +  size +  ".svg";

            $.ajax({    //create an ajax request to load_page.php
                type: "GET",
                url : svgLocation,
                dataType: "text",   //expect html to be returned.,
                // headers: {  
                //     'Access-Control-Allow-Origin': '*' 
                // },
                success: function(response){

                    $("#printFileDiv").html(response)
      
                    var fb = document.getElementById('Front_Border');
                    var fb_x = $(fb).children("rect").attr("x");
                    var fb_y = $(fb).children("rect").attr("y");
                    var fb_height = $(fb).children("rect").attr("height");
                    var fb_width = $(fb).children("rect").attr("width");

                    var bb = document.getElementById('Back_Border');
                    var bb_x = $(bb).children("rect").attr("x");
                    var bb_y = $(bb).children("rect").attr("y");
                    var bb_height = $(bb).children("rect").attr("height");
                    var bb_width = $(bb).children("rect").attr("width");

                    var rb = document.getElementById('Right_Border');
                    var rb_x = $(rb).children("rect").attr("x");
                    var rb_y = $(rb).children("rect").attr("y");
                    var rb_height = $(rb).children("rect").attr("height");
                    var rb_width = $(rb).children("rect").attr("width");

                    var lb = document.getElementById('Left_Border');
                    var lb_x = $(lb).children("rect").attr("x");
                    var lb_y = $(lb).children("rect").attr("y");
                    var lb_height = $(lb).children("rect").attr("height");
                    var lb_width = $(lb).children("rect").attr("width");
                    
                   
                    setTimeout(function() {

                        loadTemplateDesign();
                        frontContent(rb_height, rb_width, rb_x,  rb_y); // right
                        backContent(lb_height, lb_width, lb_x, lb_y); // left

                        setTimeout(function(){
                            sendSVG();
                        },2000);

                    }, 3000);
                }
            });
        }

        function loadTemplateDesign(){
           
            tmpdetails = {!! json_encode($client_design_array[0]->TemplateDesign) !!};
            var obj = JSON.parse(tmpdetails);
            

            ///////////// for mainColor
            var getMainColorType = obj[0].mainColor[0].type;
            if(getMainColorType == "Solid"){
                var setMainColor = obj[0].mainColor[0].solidColor;
                $('#Left_MainColor').attr("fill",   setMainColor);
                $('#Right_MainColor').attr("fill",  setMainColor);
            }else{
                var gradientColor1 = obj[0].mainColor[0].gradientColor1;
                var gradientColor2 = obj[0].mainColor[0].gradientColor2;
                var gradientColorOffset1 = obj[0].mainColor[0].gradientColorOffset1;
                var gradientColorOffset2 = obj[0].mainColor[0].gradientColorOffset2;
                var gradientFor = "Body";
                var trimCount = 0;
                var gradientIds = "Gradient_List";
                
                loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);

                $('#Right_MainColor').attr("fill",  "url(#Body_Gradient)");
                $('#Left_MainColor').attr("fill", "url(#Body_Gradient)");				
                
            }///////////// END for mainColor

            ///////////// for patternColor
            try{

                var getMainBodyPatternId = obj[0].patternColors[0].patternId;
                // console.log(getMainBodyPatternId);
                var pColors = obj[0].patternColors[0].patternColors['length'];
                
                if(pColors > 0){ // check if pattern exist
                    var k, arrayPatternColor = [];
                    for (i = 0 ; i < pColors  ; i++){
                        l = i + 1;
                        k = "PatternColor" + l;
                        temp = {};
                        temp['PatternColor' + l] = obj[0].patternColors[0].patternColors[i][k];
                        arrayPatternColor.push(temp);
                    }
                        var getPatternURL = pattern_properties(getMainBodyPatternId);	
                        var front_clipathval = "url(#Left_MainColor_Clippath_URL)"; 
                        var back_clipathval = "url(#Right_MainColor_Clippath_URL)"; 
                        
                        var front_svgpatternid = "Left_MainColor_Pattern"; 
                        var back_svgpatternid = "Right_MainColor_Pattern"; 

                        var front_idappend = "Left_MainColor"; 
                        var back_idappend = "Right_MainColor"; 

                        if(obj[0].patternColors[0].patternColorType == "Solid"){
                        
                            loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, arrayPatternColor);
                            loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, arrayPatternColor);

                        }else{
                            var gradientColor1 =  obj[0].patternColors[0].patternGradientColor1;
                            var gradientColor2 =  obj[0].patternColors[0].patternGradientColor2;
                            var gradientColorOffset1 = obj[0].patternColors[0].patternGradientOffset1;
                            var gradientColorOffset2 = obj[0].patternColors[0].patternGradientOffset2;
                            var gradientFor = "Body_Pattern";
                            var trimCount = 0;
                            var gradientIds = "Gradient_List";
                            var GradientPatternColor = [{
                                "PatternColor1" : "url(#Body_Pattern_Gradient)"
                            }];

                            // console.log(GradientPatternColor);

                            loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
                            loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, GradientPatternColor);
                            loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, GradientPatternColor);
                            
                        }
                }

            }catch (e){
                //error
            }/////////////END PatternColor
				

            var Trims = obj[0].Trims['length'];
            if(Trims > 0){ // check if Trim exist
                for (i = 0 ; i < Trims  ; i++){
                    trimCount = i + 1;
                    trimNum = "Trim" + trimCount;
                    trimNumPattern = "Trim" + trimCount + "_Pattern";
                    SVGTrimId = "Trim_" + trimCount;
                    trimPattern = "Trim" + trimCount + "_Pattern";
                    trimPatternColor = "Trim" + trimCount + "_patternColor";
                    
                    if(obj[0].Trims[i][trimNum].type == "Solid"){
                        var trim_solid_color = obj[0].Trims[i][trimNum].solidColor;
                        
                        $('#Front_'+SVGTrimId).attr("fill", trim_solid_color);
                        $('#Back_'+SVGTrimId).attr("fill", trim_solid_color);
                        $('#Left_'+SVGTrimId).attr("fill", trim_solid_color);
                        $('#Right_'+SVGTrimId).attr("fill", trim_solid_color);

                    }else{
                        var gradientColor1 = obj[0].Trims[i][trimNum].gradientColor1;
                        var gradientColor2 = obj[0].Trims[i][trimNum].gradientColor2;
                        var gradientColorOffset1 = obj[0].Trims[i][trimNum].gradientColorOffset1;
                        var gradientColorOffset2 = obj[0].Trims[i][trimNum].gradientColorOffset2;
                        var gradientFor = "Trim";
                        var gradientIds = "Gradient_List";
                
                        loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
                        $('#Left_'+SVGTrimId).attr("fill", "url(#"+SVGTrimId+"_Gradient)");
                        $('#Right_'+SVGTrimId).attr("fill", "url(#"+SVGTrimId+"_Gradient)");
                    }

                    ///// TRIM PATTERN		
                    try{
                        var getTrimPattern = obj[0].Trims[i][trimNumPattern].patternId;

                        if((getTrimPattern != "noPattern") || (getTrimPattern != "")){
                            var pColors = obj[0].Trims[i][trimNumPattern].patternColors['length'];
                            if(pColors > 0){ 
                                var k, arrayPatternColor = [];
                                for (a = 0 ; a < pColors  ; a++){
                                    l = a + 1;
                                    k = "PatternColor" + l;
                                    temp = {};
                                    temp['PatternColor' + l] = obj[0].Trims[i][trimNumPattern].patternColors[a][k];
                                    arrayPatternColor.push(temp);
                                }
                                // console.log(arrayPatternColor);
                                // console.log(obj[0].Trims[i][trimNumPattern].patternColorType);

                                    var getPatternURL = pattern_properties(getTrimPattern);	
                                    var front_clipathval = "url(#Left_Trim_"+trimCount+"_Clippath_URL)"; 
                                    var back_clipathval = "url(#Right_Trim_"+trimCount+"_Clippath_URL)"; 
                                    
                                    var front_svgpatternid = "Left_Trim_"+trimCount+"_Pattern"; 
                                    var back_svgpatternid = "Right_Trim_"+trimCount+"_Pattern"; 
                                    
                                    var front_idappend = "Left_Trim_"+trimCount; 
                                    var back_idappend = "Right_Trim_"+trimCount;
                                    // console.log(getPatternURL);

                                    if(obj[0].Trims[i][trimNumPattern].patternColorType == "Solid"){
                                        //console.log('solid');
                                        loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, arrayPatternColor);
                                        loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, arrayPatternColor);
                                    }
                                    else{
                                        var gradientColor1 =  obj[0].Trims[i][trimNumPattern].patternGradientColor1;
                                        var gradientColor2 =  obj[0].Trims[i][trimNumPattern].patternGradientColor2;
                                        var gradientColorOffset1 = obj[0].Trims[i][trimNumPattern].patternGradientOffset1;
                                        var gradientColorOffset2 = obj[0].Trims[i][trimNumPattern].patternGradientOffset2;
                                        var gradientFor = "Trim_Pattern";
                                        var gradientIds = "Gradient_List";
                                        var GradientPatternColor = [{
                                            "PatternColor1" : "url(#Trim_"+trimCount+"_Pattern_Gradient)"
                                        }];

                                        loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount);
                                        loadPattern(getPatternURL, front_clipathval, front_svgpatternid, front_idappend, GradientPatternColor);
                                        loadPattern(getPatternURL, back_clipathval, back_svgpatternid, back_idappend, GradientPatternColor);
                                        
                                    }
                            }
                            
                        }
                    }catch(e){

                    }
                }
            }

		}

        function frontContent(fb_height, fb_width, fb_x,  fb_y){
            var objects = frontCanvas.getObjects();

            
           // CHANGING FRONT NUMBER BASED ON USER INPUTS    
            try{
                var p_number = '{{ $order_item_array[0]->Number }}';
                for (var j in objects) {
                    console.log(objects[j]);
                    var id = objects[j].get('idNumber');
                    console.log("idnumber", id);
                
                    if(id == "NumberLeftShorts"){
                        objects[j].setText(p_number.toString());
                        objects[j].centerH();
                        objects[j].setCoords();
                        break;
                    }
                    

                }
            
            }catch(e){
                console.log('Error: ' + e);
            }
            
            try{
                for (var i in objects) {
                    if(objects[i].get('type') == "text"){
                        if(objects[i].getStroke() != null){
                            var getStrokeWidth = objects[i].getStrokeWidth();
                            objects[i].setStrokeWidth(getStrokeWidth * 4);
                        }
                    }
                }	
            }catch(e){
                console.log('Error: ' + e);
            }
            
            zoomIn(frontCanvas, fb_width, fb_height, "Left");
            
            try {
                var content = frontCanvas.toSVG();
                document.getElementById('svgFrontContent').innerHTML = content;
                
                var el_id = document.getElementById('svgFrontContent');

                var getAllImageTag = el_id.getElementsByTagName('image');	
                for (var i=0; i < getAllImageTag.length ; i++) {
                    var getElements = getAllImageTag[i];
                    var getXAttribute = getElements.getAttribute('x');
                    var getYAttribute = getElements.getAttribute('y');
                    getElements.removeAttribute('x')
                    getElements.removeAttribute('y');
                    getElements.setAttribute("transform", "matrix(1 0 0 1 "+getXAttribute+" "+getYAttribute+")");
                }

                var allGs = el_id.getElementsByTagName('g');
                var consolidatedContents1 = [];
                item = {}

                for (var i=0; i < allGs.length ; i++) {
                    var finalXvalue = 0;
                    var finalYvalue = 0;
                    var gElem = allGs[i];

                    
                    var children = gElem.childNodes;

                    var xforms = gElem.getAttribute('transform');
                    // console.log(xforms);
                    var parts  = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
                    
                    var firstX = parts[1],
                        firstY = parts[2];
                    //  x="3009.299" y="363.447"
                    var defaultXvalue = fb_x;
                    var defaultYvalue = fb_y;

                    //console.log(firstX, firstY);
                    var finalXvalue = Number(firstX) + Number(defaultXvalue);
                    var finalYvalue = Number(firstY) + Number(defaultYvalue);
                    //console.log(finalXvalue, finalYvalue);
                    gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue,finalYvalue);
                    // console.log(gElem.transform.baseVal.getItem(0));
                    var s = new XMLSerializer();
                    
                    var str = s.serializeToString(gElem);
                    
                    // this for the fucking excess of curve text
                    var scale  = /scale\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
                    
                    if(scale != null){
                        consolidatedContents1.push(str);
                    }
                }
            
                var contents = JSON.stringify(consolidatedContents1);
                console.log("front content", contents)
                
                var con = jQuery.parseJSON(contents);
                var countContents = con.length;
                if(countContents != 0){ // check if content
                    var jContent = $.map(con, function(value) {
                        return(value);
                    });
                    $("#Right_Border").html(jContent.join(""));
                }
            } catch (error) {
                console.log(error)
            }



		}

        function backContent(bb_height, bb_width, bb_x, bb_y){
				
            var objects = backCanvas.getObjects();
				
            try{
                var p_number = '{{ $order_item_array[0]->Number }}';
                for (var j in objects) {
                    var id = objects[j].get('idNumber');
                    if(id == "NumberRightShorts"){
                        objects[j].setText(p_number.toString());
                        objects[j].centerH();
                        objects[j].setCoords();
                        break;
                    }

                }
                
            }catch(e){
                console.log('Error: ' + e);
            }
            
            try{
                var p_name = '{{ $order_item_array[0]->Name }}';
                for (var j in objects){
                    var id = objects[j].get('idNumber');
                    if(id == "LastNameBack"){
                        objects[j].setText(p_name.toString());
                        objects[j].centerH();
                        objects[j].setCoords();
                        break;
                    }
                }
            }catch(e){
                console.log('Error: ' + e);
            }
            
            try{
                for (var i in objects) {
                    if(objects[i].get('type') == "text"){
                        if(objects[i].getStroke() != null){
                            var getStrokeWidth = objects[i].getStrokeWidth();
                            objects[i].setStrokeWidth(getStrokeWidth * 4);
                        }
                    }
                }
            }catch(e){
                console.log('Error: ' + e);
            }


            zoomIn(backCanvas, bb_width, bb_height, "Right");

            try {
                var content = backCanvas.toSVG();

                document.getElementById('svgBackContent').innerHTML = content;

                var el_id = document.getElementById('svgBackContent');

                var getAllImageTag = el_id.getElementsByTagName('image');	
                for (var i=0; i < getAllImageTag.length ; i++) {
                    var getElements = getAllImageTag[i];
                    var getXAttribute = getElements.getAttribute('x');
                    var getYAttribute = getElements.getAttribute('y');
                    getElements.removeAttribute('x')
                    getElements.removeAttribute('y');
                    getElements.setAttribute("transform", "matrix(1 0 0 1 "+getXAttribute+" "+getYAttribute+")");
                }

                var allGs = el_id.getElementsByTagName('g');

                var consolidatedContents = [];
                item = {}

                for (var i=0; i < allGs.length ; i++) {
                    var finalXvalue = 0;
                    var finalYvalue = 0;
                    var gElem = allGs[i];
                    var children = gElem.childNodes;

                    var xforms = gElem.getAttribute('transform');
                    //console.log(xforms);
                    var parts  = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
                    var firstX = parts[1],
                        firstY = parts[2];
                    // x="460.455" y="363.397"
                    var defaultXvalue = bb_x;
                    var defaultYvalue = bb_y;

                    //console.log(firstX, firstY);
                    var finalXvalue = Number(firstX) + Number(defaultXvalue);
                    var finalYvalue = Number(firstY) + Number(defaultYvalue);
                    gElem.transform.baseVal.getItem(0).setTranslate(finalXvalue,finalYvalue);

                    var s = new XMLSerializer();
                    var str = s.serializeToString(gElem);
                    consolidatedContents.push(str);

                }

                var contents = JSON.stringify(consolidatedContents);
                console.log("back content", contents)
                var con = jQuery.parseJSON(contents);

                var countContents = con.length;
                if(countContents != 0){ // check if content
                    var jContent = $.map(con, function(value) {
                        return(value);
                    });
                    $("#Left_Border").html(jContent.join(""));
                }
            } catch (error) {
                console.log(error)
            }
           
        }
        
        function zoomIn(canvas, actualSizeX, actualSizeY, side) {
            var canvasScale = 1;
            var SCALE_FACTOR = 1.2;
            // TODO limit the max canvas zoom in
            //Your scale factor is 2.172 (1086/500 = 2.172) or 2.13 (639/300 = 2.13) to be more precise.
            // X = WIDTH and Y = HEIGHT
            if(side == "Front" || side == "Back"){
                var SCALE_FACTOR_X = actualSizeX / 222;
                var SCALE_FACTOR_Y = actualSizeY / 380;
            }

            if(side == "Right" || side == "Left"){
                var SCALE_FACTOR_X = actualSizeX / 158;
                var SCALE_FACTOR_Y = actualSizeY / 316;
            }
           
            canvasScale = canvasScale * SCALE_FACTOR;

            canvas.setHeight(canvas.getHeight() * SCALE_FACTOR_Y);
            canvas.setWidth(canvas.getWidth() * SCALE_FACTOR_X);

            var objects = canvas.getObjects();
            for (var i in objects) {
                var scaleX = objects[i].scaleX;
                var scaleY = objects[i].scaleY;
                var left = objects[i].left;
                var top = objects[i].top;

                var tempScaleX = scaleX * SCALE_FACTOR_X;
                var tempScaleY = scaleY * SCALE_FACTOR_Y;
                var tempLeft = left * SCALE_FACTOR_X;
                var tempTop = top * SCALE_FACTOR_Y;

                objects[i].scaleX = tempScaleX;
                objects[i].scaleY = tempScaleY;
                objects[i].left = tempLeft;
                objects[i].top = tempTop;

                objects[i].setCoords();
            }

            canvas.renderAll();
        }

        function sendSVG(){
            var svgText = document.getElementById('printFileDiv').innerHTML;


            var form = document.querySelector('form');
            // form.setAttribute("method", "post");
            // form.setAttribute("id", "frm_svg");
            // form.setAttribute("action", "");
            // form.setAttribute("accept-charset", "UTF-8");

            var hiddenSVGField = document.createElement("input");
            hiddenSVGField.setAttribute("type", "hidden");
            hiddenSVGField.setAttribute("name", "svgText");
            hiddenSVGField.setAttribute("value", svgText);
            
            var hiddenToken = document.createElement("input");
            hiddenToken.setAttribute("type", "hidden");
            hiddenToken.setAttribute("name", "_token");
            hiddenToken.setAttribute("value", "{{ csrf_token() }}");

            var hiddenDetails = document.createElement("input");
            hiddenDetails.setAttribute("type", "hidden");
            hiddenDetails.setAttribute("name", "filename");
            hiddenDetails.setAttribute("value", "{{ $order_item_array[0]->ProductName . "_" . $order_item_array[0]->Size  }}");


            form.appendChild(hiddenSVGField);
            form.appendChild(hiddenToken);
            form.appendChild(hiddenDetails);

            document.body.appendChild(form);
            form.submit();
            alert("Print file is successfully generated!");
            // setTimeout(function(){
            //    window.location = "{{ url('admin/orders/view') }}" + "/" + "{{ $order_item_array[0]->CartKey  }}"
            // },2000);
		}

        function loadGradientTemplate(gradientFor, gradientIds, gradientColor1, gradientColor2, gradientColorOffset1, gradientColorOffset2, trimCount){
            var url  = "{{ asset('/assets/gradient-append-2.php') }}";
            $.post(url, {
                gradientFor 	: 	gradientFor,
                stop_color_1	: 	gradientColor1,
                stop_color_2	: 	gradientColor2,
                offset_1		:	gradientColorOffset1,
                offset_2		:	gradientColorOffset2,
                trimCount		: 	trimCount
                })
            .done(function( data ) {
                var g = document.getElementById(gradientIds);
                var prevData = $(g).html();
                $(g).html(prevData+data);
            });		
        }

    </script>

</body>
</html>