            <link rel="stylesheet" media="screen" type="text/css"
            href="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/assets/css/pluginStyle.css" />
            <!-- Custom Color Picker -->
            <link rel="stylesheet" media="screen" type="text/css"
            href="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/jqupload/colorpicker.css" />
            <!--- range slider -->
            <link rel="stylesheet" href="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/jqupload/ion.rangeSlider.css">
            <link rel="stylesheet" href="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/jqupload/ion.rangeSlider.skinFlat.css">
            <link rel="stylesheet" href="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/assets/css/hangtag.css">

<!-------- main content ---------->
<section class="panel-headings-section for-desktop">
    <input type="hidden" id="current_step" value="1">
    <!-- start --->
    <div class="owl-carousel panel-headings-wrapper">
        <div class="panel-heading active-h step1" data-target="folds" data-id="1">
            <i class="icon icon-label-cut"></i>
            <p>Hang Tag Type</p>
            <p>1</p>
        </div>

        <div class="panel-heading step2" data-target="inputText" data-id="2">
            <i class="icon icon-text"></i>
            <p>Text</p>
            <p>2</p>
        </div>
        <div class="panel-heading step3" data-target="fonts" data-id="3">
            <i class="icon icon-font"></i>
            <p>Font and Symbol</p>
            <p>3</p>
        </div>
        <div class="panel-heading step4" data-target="textColor" data-id="4">
            <i class="icon icon-text-color"></i>
            <p>Color</p>
            <p>4</p>
        </div>


        <div class="panel-heading step5" data-target="printOptions" data-id="5">
            <i class="icon icon-label-cut"></i>
            <p>Options</p>
            <p>5</p>
        </div>

        <div class="panel-heading step6" id="amount" data-target="quanity" data-id="6">
            <i class="icon icon-label-cut"></i>
            <p>Quantity</p>
            <p>6</p>
        </div>

    </div>
    <!-- End -->
</section>
<div class="sticky-trigger"></div>
<section class="main-contents ">
    <div class="previewRowHeight"></div>
    <div class="proPreview proPreview-deg-ord-print">

        <div class="wrapper">
            <span class="close-preview" style="display:none;">X</span>
            <div class="previewWindow">
                <div id="myCanvas">

                    <div class="windowBody">
                        <div class="row heading">
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                <div class="windowHeading" onclick="">Label Preview</div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                <div class="rev-dwnl-sec pull-right">
                                    <div class="rev-sec quantitity_option">
                                        <span class="add-amount">Quantity Options</span>
                                                                            </div>
                                </div>
                            </div>
                        </div>

                        <div id="previewRow">
                            <div class="productPrevImgW">
                                <em>Front Side</em>
                                <div class="productPrevImg" style="text-align:center;">
                                    <div class="" id="displaydesignnew" style="width:350px;height: 125px;">
                                        <div class="icon_n_txt">
                                            <div class="icon_on_label">
                                                <img src="" class="icon_on_label_img">
                                            </div>
                                            <div id="texts" class="text-center pull-left">
                                                <div class="row1"></div>
                                                <div class="row2"></div>
                                                <div class="row3"></div>
                                            </div>
                                        </div>
                                        <div class="firstset"></div>
                                        <div class="secondset"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="" id="displaydesignnew_bck">
                                <em>Back Side</em>
                                <div id="back">
                                    <div class="displaydesignnew_bck_vw">
                                        <div class="icon_n_txt_bck">
                                            <div id="texts_bck" class="text-center">
                                                <div class="row1_bck"></div>
                                                <div class="row2_bck"></div>
                                                <div class="row3_bck"></div>
                                            </div>
                                        </div>
                                        <div class="firstset_bck"></div>
                                        <div class="secondset_bck"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="overlay_o"></div>
                            <div id="canvas_logo" class="text-center">
                                <canvas id="myCanvas2" width="" height="" style="">Your browser does not support the
                                canvas element.</canvas>
                                <div id="canvas_loader" style="display:none;"><img
                                    src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/img/loader.gif"></div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <div class="infos">
                                        <p>
                                            Please click <a onclick="repair()"
                                            style="color:red;text-decoration: underline;cursor: pointer;">here</a> if
                                            image not shown or appears to be broken.
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xs-12">
                                    <div id="hereallwillchnage">
                                        <div class="quantity">
                                            <input id="quantity_5afbe1dedc150" class="input-text qty text" step="1" min="1"
                                            max="" name="quantity" value="1" title="Qty" size="4" pattern="[0-9]*"
                                            inputmode="numeric" aria-labelledby="" type="hidden">
                                        </div>
                                        <input type="hidden" id="custom_data_1" name="custom_data_1" value="" />
                                        <input type="hidden" id="custom_data_2" name="custom_data_2" value="" />
                                        <input type="hidden" id="custom_data_3" name="custom_data_3" value="" />
                                        <input type="hidden" id="custom_data_4" name="custom_data_4" value="" />
                                        <input type="hidden" id="custom_data_5" name="custom_data_5" value="" />
                                        <input type="hidden" id="custom_data_6" name="custom_data_6" value="" />
                                        <input type="hidden" id="custom_data_7" name="custom_data_7" value="300" />
                                        <input type="hidden" id="custom_data_8" name="custom_data_8" value="NA" />
                                        <input type="hidden" id="custom_data_9" name="custom_data_9" value="" />
                                        <input type="hidden" id="custom_data_10" name="custom_data_10" value="" />

                                        <input type="hidden" id="materialTypeChosen" name="materialTypeChosen" value="" />
                                        <input type="hidden" id="thickChosen" name="thickChosen" value="" />
                                        <input type="hidden" id="printOptionChosen" name="printOptionChosen" value="" />
                                        <input type="hidden" id="holePunchChosen" name="holePunchChosen" value="" />
                                        <input type="hidden" id="holeLocation" name="holeLocation" value="" />
                                        <input type="hidden" id="stringColorChosen" name="stringColorChosen" value="" />
                                        <input type="hidden" id="safetyPin" name="safetyPin" value="" />
                                        <input type="hidden" id="grommetsChosen" name="grommetsChosen" value="" />
                                        <input type="hidden" id="foilChosen" name="foilChosen" value="" />
                                        <input type="hidden" id="surfaceChosen" name="surfaceChosen" value="" />

                                        <input type="hidden" id="sizetag" name="sizetag" value="" />
                                        <input type="hidden" id="totalpricelabeladd2crt" name="totalpricelabeladd2crt"
                                        value="" />
                                        <div class="btns-inline btn-cart-canvas" style="display:none;">
                                            <button type="button" name="add-to-cart" value="37583"
                                            class="add-to-cart-btn designtoolbutton"
                                            onclick="if (!confirm('Are you sure? Once added to the cart, you cannot edit the image.')) return false; else submitDesign(1, this, 'add-to-cart');">Add
                                        to cart</button>

                                        <span class="or">Or</span>

                                        <p class="dwn-pdf-btn fancybox-inline dwn-pdf-btn-brd">
                                            <a id="sbmitQt" href="#pdfLeadPopup" target="_blank"
                                            onclick="submitDesign(1, this, 'sbmtQT');">
                                            <img
                                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAHdElNRQfkBAYNOQiZbZzzAAAAdUlEQVQoz82PMQ6CABRDX4CN0TMwuAKnwY2ds+HgjYgbEA5A8twMX0Ed7fTb3zYpBNjZRSWLlNMLJ+EL/spgavW8K9P3hpzeFsCWnnynzMLBm1fvnrdyGSyLi0X4uoaWchsAV/TTBv1h5mx9mK+Z8OLoEUabBxs7SqIhWWFPAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTA0LTA2VDEzOjU3OjA4KzAwOjAwNsR2EAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMC0wNC0wNlQxMzo1NzowOCswMDowMEeZzqwAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC">
                                            <span>Submit Quote</span>
                                        </a>
                                    </p>
                                </div>
                                <div class="btns-inline btn-prev-next">

                                    <button class="col-sm-6 btn btn-prev" onclick="prev_new();" disabled>Prev</button>
                                    <button class="col-sm-6 btn btn-next" onclick="nxt_new();">Next</button>
                                </div>



                                <div class="btns-inline btn-canvas-submit" style="display:none;">
                                 <button class="col-sm-12 btn btn-next">Preview & Submit</button>
                             </div>
                         </div>


                     </div>
                     <div class="col-xs-12">
                        <div class="productPrevCont">
                            <div class="note-txt">
                                <p>This image is only a preview. Colors and text may appear slightly different
                                on the actual product.</p>
                            </div>
                            <div class="label-input-details-wrapper">
                                <div class="label-input-details">
                                    <div id="previewPricing">
                                        <div id="optionsForPricing">

                                            <div class="productPrevContRow"> <span
                                                class="productPrevContRowTitle">Size</span> <span
                                                class="productPrevContRowDes"><span id="slwidth">2.4</span>"
                                                X <span id="slheight">0.8</span>" Inch</span> <br>
                                            </div>

                                            <div class="productPrevContRow"> <span
                                                class="productPrevContRowTitle">Label Color</span> <span
                                                class="productPrevContRowDes" id="labelcolor">White</span>
                                            </div>
                                            <div class="productPrevContRow"> <span
                                                class="productPrevContRowTitle">Logo Color</span> <span
                                                class="productPrevContRowDes" id="logocolor">Black</span>
                                            </div>
                                            <div class="productPrevContRow"> <span
                                                class="productPrevContRowTitle">Font</span> <span
                                                class="productPrevContRowDes" id="designfont">Open
                                            Sans</span> </div>
                                            <div class="productPrevContRow"> <span
                                                class="productPrevContRowTitle">Symbol</span> <span
                                                class="productPrevContRowDes" id="symbolhere">NONE</span>
                                            </div>
                                            <div class="productPrevContRow"> <span
                                                class="productPrevContRowTitle">Shape</span> <span
                                                class="productPrevContRowDes" id="cutnfolddiv">N/A</span>
                                            </div>

                                            <div class="productPrevContRow"> <span
                                                class="productPrevContRowTitle">Material</span> <span
                                                class="productPrevContRowDes" id="materialType">N/A</span>
                                            </div>

                                            <div class="productPrevContRow"> <span
                                                class="productPrevContRowTitle">Thickness</span> <span
                                                class="productPrevContRowDes" id="labthickness">N/A</span>
                                            </div>

                                            <div class="productPrevContRow"> <span
                                                class="productPrevContRowTitle">Print Option</span> <span
                                                class="productPrevContRowDes" id="labprintOption">N/A</span>
                                            </div>

                                            <div class="productPrevContRow"> <span
                                                class="productPrevContRowTitle">Hole Punch</span> <span
                                                class="productPrevContRowDes" id="labHolePunch">N/A</span>
                                            </div>

                                            <div class="productPrevContRow"> <span
                                                class="productPrevContRowTitle">Hole Location</span> <span
                                                class="productPrevContRowDes"
                                                id="labHoleLocation">N/A</span> </div>

                                                <div class="productPrevContRow"> <span
                                                    class="productPrevContRowTitle">String Color</span> <span
                                                    class="productPrevContRowDes" id="labStringColor">N/A</span>
                                                </div>

                                                <div class="productPrevContRow"> <span
                                                    class="productPrevContRowTitle">Safety Pin</span> <span
                                                    class="productPrevContRowDes" id="labSafetyPin">N/A</span>
                                                </div>

                                                <div class="productPrevContRow"> <span
                                                    class="productPrevContRowTitle">Grommets</span> <span
                                                    class="productPrevContRowDes" id="labGrommets">N/A</span>
                                                </div>

                                                <div class="productPrevContRow"> <span
                                                    class="productPrevContRowTitle">Foil</span> <span
                                                    class="productPrevContRowDes" id="labFoil">N/A</span> </div>

                                                    <div class="productPrevContRow"> <span
                                                        class="productPrevContRowTitle">Surface</span> <span
                                                        class="productPrevContRowDes" id="labSurface">N/A</span>
                                                    </div>

                                                    <div class="productPrevContRow"> <span
                                                        class="productPrevContRowTitle">Sizetag</span> <span
                                                        class="productPrevContRowDes" id="sizetagchosen">N/A</span>
                                                    </div>

                                                    <hr>
                                                    <div class="productPrevContRow"> <span
                                                        class="productPrevContRowTitle">Quantity</span> <span
                                                        class="productPrevContRowDes"><span
                                                        id="quantity1">100</span> PIECES</span> </div>

                                                        <div class="productPrevContRow">
                                                            <span class="productPrevContRowTitle">Price per label</span>
                                                            <span class="productPrevContRowDes">$<span
                                                                id="priceperlabel1">0.75</span></span>
                                                            </div>
                                                            <hr>
                                                        </div>
                                                        <div id="subtotal">
                                                            <div class="productPrevContRow str-txt">
                                                                <span class="productPrevContRowTitle">Sub Total</span>
                                                                <span class="productPrevContRowDes">$<span
                                                                    id="sub_totalprice1">1350.00</span></span>
                                                                </div>
                                                            </div>
                                                            <hr>
                                                            <div id="addOns">

                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="toggle-less">See More</div>
                                                </div>
                                                <div class="productPrevContRow str-txt" id="tttl">
                                                    <span class="productPrevContRowTitle">Total</span>
                                                    <span class="productPrevContRowDes">$<span id="totalprice1">75</span></span>
                                                </div>
                                                <hr>
                                                <div class="productPrevContRow noteText"> <strong>Note:</strong> This product may
                                                take 8-10 days for design, printing and process. </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="viewall"><span>View Details</span> <i class="fa fa-chevron-circle-down"
                                        aria-hidden="true"></i></div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                    <section class="panel-headings-section for-mob">
                        <!-- start --->
                        <div class="owl-carousel panel-headings-wrapper">
                            <div class="panel-heading mobilestep1 active-h" data-target="folds" data-id="1">
                                <i class="icon icon-label-cut"></i>
                                <p>Hang Tag Type</p>
                                <p>1</p>
                            </div>
                            <div class="panel-heading mobilestep2" data-target="labels" data-id="2">
                                <i class="icon icon-text"></i>
                                <p>Text</p>
                                <p>2</p>
                            </div>
                            <div class="panel-heading mobilestep3" data-target="fonts" data-id="3">
                                <i class="icon icon-font"></i>
                                <p>Font and Symbol</p>
                                <p>3</p>
                            </div>
                            <div class="panel-heading mobilestep4" data-target="textColor" data-id="4">
                                <i class="icon icon-text-color"></i>
                                <p>Color</p>
                                <p>4</p>
                            </div>
                            <div class="panel-heading mobilestep5" data-target="printOptions" data-id="5">
                                <i class="icon icon-label-cut"></i>
                                <p>Options</p>
                                <p>5</p>
                            </div>
                            <div class="panel-heading mobilestep6" id="amount" data-target="quanity" data-id="6">
                                <i class="icon icon-label-cut"></i>
                                <p>Quantity</p>
                                <p>6</p>
                            </div>
                            
                        </div>
                        <!-- End -->
                    </section>

                    <div class="proCustomizations hangtags_customization">
                        <div class="woveLblDesnOrdr">
                            <input type="hidden" name="canvaswidth" id="canvaswidth" value="350">
                            <input type="hidden" name="canvasheight" id="canvasheight" value="125">
                            <input type="hidden" name="seletsize" id="setselectsize">
                            <input type="hidden" name="selectedwidth" id="selectedwidth" value="3.25">
                            <input type="hidden" name="selectedheight" id="selectedheight">
                            <input type="hidden" name="usertextbox1" id="usertextbox1" value="">
                            <input type="hidden" name="usertextbox2" id="usertextbox2">
                            <input type="hidden" name="usertextbox3" id="usertextbox3">

                            <input type="hidden" name="usertextbox1_bck" id="usertextbox1_bck" value="">
                            <input type="hidden" name="usertextbox2_bck" id="usertextbox2_bck">
                            <input type="hidden" name="usertextbox3_bck" id="usertextbox3_bck">

                            <input type="hidden" name="sliderwidth" id="sliderwidth" value="3">
                            <input type="hidden" name="sliderhight" id="sliderhight" value="0.5">
                            <input type="hidden" name="userbgcolor" id="userbgcolor" value="fff">
                            <input type="hidden" name="usertextcolor" id="usertextcolor" value="6c6b6b">
                            <input type="hidden" name="seliconhere" id="seliconhere">
                            <input type="hidden" name="selalignhere" id="selalignhere" value="m">
                            <input type="hidden" name="selfonthere" id="selfonthere">
                            <input type="hidden" name="selfonthereName" id="selfonthereName" value="Montserrat">
                            <input type="hidden" name="lineSpecingCLast" id="lineSpecingCLast">
                            <input type="hidden" name="lineSpecingC" id="lineSpecingC">
                            <input type="hidden" name="fontpadTop" id="fontpadTop">
                            <input type="hidden" name="calculatedSize" id="calculatedSize">
                            <input type="hidden" name="backgroungcol" id="backgroungcol">
                            <input type="hidden" name="alignline1" id="alignline1">
                            <input type="hidden" name="alignline2" id="alignline2">
                            <input type="hidden" name="alignline3" id="alignline3">
                            <input type="hidden" name="iconSize" id="iconSize">
                            <input type="hidden" name="iconpricedisp" id="iconpricedisp">
                            <input type="hidden" name="iconPosition" id="iconPosition">
                            <input type="hidden" name="iconAlign" id="iconAlign" value="l">
                            <input type="hidden" name="usertextcolorprcie" id="usertextcolorprcie">
                            <input type="hidden" name="userlabelcutnfold" id="userlabelcutnfold">
                            <input type="hidden" name="newBgColor" id="newBgColor">
                            <input type="hidden" name="newtxtColor" id="newtxtColor">

                            <input type="hidden" name="newMaterial" id="newMaterial">
                            <input type="hidden" name="newThickness" id="newThickness">
                            <input type="hidden" name="newPrintOption" id="newPrintOption">
                            <input type="hidden" name="newholePunch" id="newholePunch">
                            <input type="hidden" name="newHoleLocation" id="newHoleLocation">
                            <input type="hidden" name="newStringColor" id="newStringColor">
                            <input type="hidden" name="newSafetyPin" id="newSafetyPin">
                            <input type="hidden" name="newGrommets" id="newGrommets">
                            <input type="hidden" name="newFoil" id="newFoil">
                            <input type="hidden" name="newSurface" id="newSurface">

                            <input type="hidden" name="pldoquantityforpdf" id="pldoquantityforpdf">
                            <input type="hidden" name="pldopriceperlabelforpdf" id="pldopriceperlabelforpdf">
                            <input type="hidden" name="pldototalpricelabelpdf" id="pldototalpricelabelpdf">
                            <input type="hidden" name="textcolforpdf" id="textcolforpdf">
                            <input type="hidden" name="valtxcolonval" id="valtxcolonval">
                            <input type="hidden" name="selectwlebelt" id="selectwlebelt">
                            <input type="hidden" name="irononadhesive" id="irononadhesive">
                            <input type="hidden" name="cutnfolddivforajax" id="cutnfolddivforajax">
                            <input type="hidden" name="totalquantity" id="totalquantity">
                            <input type="hidden" name="unitpricehere" id="unitpricehere">
                            <input type="hidden" name="labelclassid" id="labelclassid">
                            <input type="hidden" name="textbox1fontVal" id="textbox1fontVal" value="auto">
                            <input type="hidden" name="textbox2fontVal" id="textbox2fontVal" value="auto">
                            <input type="hidden" name="textbox3fontVal" id="textbox3fontVal" value="auto">

                            <input type="hidden" name="textbox1_bckfontVal" id="textbox1_bckfontVal" value="auto">
                            <input type="hidden" name="textbox2_bckfontVal" id="textbox2_bckfontVal" value="auto">
                            <input type="hidden" name="textbox3_bckfontVal" id="textbox3_bckfontVal" value="auto">

                            <input type="hidden" name="datactdFromCanvas" id="datactdFromCanvas" value="">

                            <input type="hidden" name="cutnfolddivforajax" id="cutnfolddivforajax">

                            <!----- guide and tips button ---->
                            <div class="guideArea">
                                <a class="button" target="_blank" href="https://xpresalabels.com/site/faq/">Click here for guide & tips</a>
                                <img
                                src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgY2xhc3M9IiI+PGc+PGc+Cgk8Zz4KCQk8cGF0aCBkPSJNMjU2LDBDMTIwLjQ3NywwLDEwLjIyNCwxMTAuMjU1LDEwLjIyNCwyNDUuNzc4YzAsNjIuMTcxLDIzLjEyLDEyMS4xODYsNjUuMjA2LDE2Ni43MjVsLTEzLjcwNyw4OC4zNDIgICAgYy0wLjU1OCwzLjYwMSwwLjk1Myw3LjIwOCwzLjkxLDkuMzM2YzEuNjc3LDEuMjA3LDMuNjU3LDEuODIsNS42NDcsMS44MmMxLjUyLDAsMy4wNDYtMC4zNTcsNC40NDctMS4wODNsNzkuMjQxLTQxLjAzNiAgICBjMzEuODI1LDE0LjM4Niw2NS43ODgsMjEuNjc1LDEwMS4wMzIsMjEuNjc1YzEzNS41MjEsMCwyNDUuNzc4LTExMC4yNTUsMjQ1Ljc3OC0yNDUuNzc4QzUwMS43NzgsMTEwLjI1NSwzOTEuNTIzLDAsMjU2LDB6ICAgICBNMjU2LDQ3Mi4yMTFjLTMzLjk3MywwLTY2LjY0Ni03LjM0Ny05Ny4xMTQtMjEuODM1Yy0yLjczMS0xLjMtNS45MTQtMS4yNDUtOC42MDEsMC4xNDZsLTY2LjUyNCwzNC40NWwxMS41MS03NC4xNzcgICAgYzAuNDYzLTIuOTgyLTAuNDkzLTYuMDA3LTIuNTgyLTguMTg0Yy00MC43MDQtNDIuMzczLTYzLjEyMS05OC4wNzItNjMuMTIxLTE1Ni44MzVDMjkuNTY4LDEyMC45MjIsMTMxLjE0NSwxOS4zNDQsMjU2LDE5LjM0NCAgICBzMjI2LjQzMywxMDEuNTc3LDIyNi40MzMsMjI2LjQzM1MzODAuODU2LDQ3Mi4yMTEsMjU2LDQ3Mi4yMTF6IiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iYWN0aXZlLXBhdGgiIHN0eWxlPSJmaWxsOiNGRkZGRkYiIGRhdGEtb2xkX2NvbG9yPSIjMDAwMDAwIj48L3BhdGg+Cgk8L2c+CjwvZz48Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0yNTYsNzAuNzA4Yy0yOC4yMzYsMC01MS4yMDgsMjIuOTcyLTUxLjIwOCw1MS4yMDhjMCwyOC4yMzYsMjIuOTcyLDUxLjIwOCw1MS4yMDgsNTEuMjA4ICAgIGMyOC4yMzgsMCw1MS4yMDgtMjIuOTcyLDUxLjIwOC01MS4yMDhDMzA3LjIwOCw5My42NzgsMjg0LjIzNiw3MC43MDgsMjU2LDcwLjcwOHogTTI1NiwxNTMuNzggICAgYy0xNy41NywwLTMxLjg2NC0xNC4yOTQtMzEuODY0LTMxLjg2NFMyMzguNDMsOTAuMDUyLDI1Niw5MC4wNTJjMTcuNTcxLDAsMzEuODY0LDE0LjI5NCwzMS44NjQsMzEuODY0UzI3My41NywxNTMuNzgsMjU2LDE1My43OHogICAgIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iYWN0aXZlLXBhdGgiIHN0eWxlPSJmaWxsOiNGRkZGRkYiIGRhdGEtb2xkX2NvbG9yPSIjMDAwMDAwIj48L3BhdGg+Cgk8L2c+CjwvZz48Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0zMTIuNzU4LDM1Ny43NGgtMTEuMDEzVjE5OS4xNDhjMC01LjM0Mi00LjMzMS05LjY3Mi05LjY3Mi05LjY3MmgtOTIuODI4Yy01LjM0MiwwLTkuNjcyLDQuMzMxLTkuNjcyLDkuNjcydjMyLjE0MyAgICBjMCw1LjM0Miw0LjMzMSw5LjY3Miw5LjY3Miw5LjY3MmgxMS4wMTN2MTE2Ljc3N2gtMTEuMDEzYy01LjM0MiwwLTkuNjcyLDQuMzMxLTkuNjcyLDkuNjcydjMyLjE0MyAgICBjMCw1LjM0Myw0LjMzMSw5LjY3Myw5LjY3Miw5LjY3M2gxMTMuNTE0YzUuMzQyLDAsOS42NzItNC4zMzEsOS42NzItOS42NzJ2LTMyLjE0M0MzMjIuNDMsMzYyLjA3MSwzMTguMDk5LDM1Ny43NCwzMTIuNzU4LDM1Ny43NCAgICB6IE0zMDMuMDg1LDM4OS44ODRoLTk0LjE3di0xMi44aDExLjAxM2M1LjM0MiwwLDkuNjcyLTQuMzMxLDkuNjcyLTkuNjcyVjIzMS4yOTFjMC01LjM0Mi00LjMzMS05LjY3Mi05LjY3Mi05LjY3MmgtMTEuMDEzICAgIHYtMTIuNzk4SDI4Mi40djE1OC41OTNjMCw1LjM0Miw0LjMzMSw5LjY3Miw5LjY3Miw5LjY3MmgxMS4wMTNWMzg5Ljg4NHoiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgc3R5bGU9ImZpbGw6I0ZGRkZGRiIgZGF0YS1vbGRfY29sb3I9IiMwMDAwMDAiPjwvcGF0aD4KCTwvZz4KPC9nPjwvZz4gPC9zdmc+" />
                            </div>

                            <!----- folds ---->
                            <div class="panel panel-primary hangtags_shapes" data-div="folds" id="folds">

                            </div>

                            
                            <!----- custom labels ---->
                            <!-- <div class="panel labelSize" data-div="labels" id="customLabels">

                            </div> -->

                                                        <!----- custom input texts ---->
                            <div class="panel inputTexts" data-div="inputText" id="inputTexts">
                              <h4 class="panel-title text-center">TEXT</h4>
                              <div class="panel-body-desig-order panel-body">
                                <div class="frm-algn-holder">
                                    <div class="frm-sec col-lg-12">
                                        <p style="color: red" id="textErrorMsg"></p>
                                        <form action="" method="get">
                                            <p>
                                                <label>Row 1</label>
                                                <input name="textbox1" id="textbox1" type="text" onfocus="clearDefaultText()"
                                                onblur="selecttext(1)" maxlength="22">
                                                <span class="selectFontSize">
                                                    <span>Font Size:</span>
                                                    <select name="" onchange="manualFontChange(1, this.value);" id="textbox1Font">
                                                        <option value="auto">Auto</option>
                                                        <option value="8">8px</option><option value="9">9px</option><option value="10">10px</option><option value="11">11px</option><option value="12">12px</option><option value="13">13px</option><option value="14">14px</option><option value="15">15px</option><option value="16">16px</option><option value="17">17px</option><option value="18">18px</option><option value="19">19px</option><option value="20">20px</option><option value="21">21px</option><option value="22">22px</option><option value="23">23px</option><option value="24">24px</option><option value="25">25px</option><option value="26">26px</option><option value="27">27px</option><option value="28">28px</option><option value="29">29px</option><option value="30">30px</option><option value="31">31px</option><option value="32">32px</option><option value="33">33px</option><option value="34">34px</option><option value="35">35px</option><option value="36">36px</option><option value="37">37px</option><option value="38">38px</option><option value="39">39px</option><option value="40">40px</option><option value="41">41px</option><option value="42">42px</option><option value="43">43px</option><option value="44">44px</option><option value="45">45px</option><option value="46">46px</option><option value="47">47px</option><option value="48">48px</option><option value="49">49px</option><option value="50">50px</option><option value="51">51px</option><option value="52">52px</option><option value="53">53px</option><option value="54">54px</option><option value="55">55px</option><option value="56">56px</option><option value="57">57px</option><option value="58">58px</option><option value="59">59px</option><option value="60">60px</option><option value="61">61px</option><option value="62">62px</option><option value="63">63px</option><option value="64">64px</option><option value="65">65px</option><option value="66">66px</option><option value="67">67px</option><option value="68">68px</option><option value="69">69px</option><option value="70">70px</option><option value="71">71px</option><option value="72">72px</option><option value="73">73px</option><option value="74">74px</option><option value="75">75px</option><option value="76">76px</option><option value="77">77px</option><option value="78">78px</option><option value="79">79px</option><option value="80">80px</option><option value="81">81px</option><option value="82">82px</option><option value="83">83px</option><option value="84">84px</option><option value="85">85px</option><option value="86">86px</option><option value="87">87px</option><option value="88">88px</option><option value="89">89px</option><option value="90">90px</option>                                                    </select>
                                                </span>
                                            </p>
                                            <!--<span id="fontError1"></span>-->
                                            <p>
                                                <label>Row 2</label>
                                                <input name="textbox2" id="textbox2" type="text" onblur="selecttext(2)"
                                                maxlength="22" value="">
                                                <span class="selectFontSize">
                                                    <span>Font Size:</span>
                                                    <select name="" onchange="manualFontChange(2, this.value);" id="textbox2Font">
                                                        <option value="auto">Auto</option>
                                                        <option value="8">8px</option><option value="9">9px</option><option value="10">10px</option><option value="11">11px</option><option value="12">12px</option><option value="13">13px</option><option value="14">14px</option><option value="15">15px</option><option value="16">16px</option><option value="17">17px</option><option value="18">18px</option><option value="19">19px</option><option value="20">20px</option><option value="21">21px</option><option value="22">22px</option><option value="23">23px</option><option value="24">24px</option><option value="25">25px</option><option value="26">26px</option><option value="27">27px</option><option value="28">28px</option><option value="29">29px</option><option value="30">30px</option><option value="31">31px</option><option value="32">32px</option><option value="33">33px</option><option value="34">34px</option><option value="35">35px</option><option value="36">36px</option><option value="37">37px</option><option value="38">38px</option><option value="39">39px</option><option value="40">40px</option><option value="41">41px</option><option value="42">42px</option><option value="43">43px</option><option value="44">44px</option><option value="45">45px</option><option value="46">46px</option><option value="47">47px</option><option value="48">48px</option><option value="49">49px</option><option value="50">50px</option><option value="51">51px</option><option value="52">52px</option><option value="53">53px</option><option value="54">54px</option><option value="55">55px</option><option value="56">56px</option><option value="57">57px</option><option value="58">58px</option><option value="59">59px</option><option value="60">60px</option><option value="61">61px</option><option value="62">62px</option><option value="63">63px</option><option value="64">64px</option><option value="65">65px</option><option value="66">66px</option><option value="67">67px</option><option value="68">68px</option><option value="69">69px</option><option value="70">70px</option><option value="71">71px</option><option value="72">72px</option><option value="73">73px</option><option value="74">74px</option><option value="75">75px</option><option value="76">76px</option><option value="77">77px</option><option value="78">78px</option><option value="79">79px</option><option value="80">80px</option><option value="81">81px</option><option value="82">82px</option><option value="83">83px</option><option value="84">84px</option><option value="85">85px</option><option value="86">86px</option><option value="87">87px</option><option value="88">88px</option><option value="89">89px</option><option value="90">90px</option>                                                    </select>
                                                </span>
                                            </p>
                                            <span id="fontError2"></span>
                                            <p>
                                                <label>Row 3</label>
                                                <input name="textbox3" id="textbox3" type="text" onblur="selecttext(3)"
                                                maxlength="22" value="">
                                                <span class="selectFontSize">
                                                    <span>Font Size:</span>
                                                    <select name="" onchange="manualFontChange(3, this.value);" id="textbox3Font">
                                                        <option value="auto">Auto</option>
                                                        <option value="8">8px</option><option value="9">9px</option><option value="10">10px</option><option value="11">11px</option><option value="12">12px</option><option value="13">13px</option><option value="14">14px</option><option value="15">15px</option><option value="16">16px</option><option value="17">17px</option><option value="18">18px</option><option value="19">19px</option><option value="20">20px</option><option value="21">21px</option><option value="22">22px</option><option value="23">23px</option><option value="24">24px</option><option value="25">25px</option><option value="26">26px</option><option value="27">27px</option><option value="28">28px</option><option value="29">29px</option><option value="30">30px</option><option value="31">31px</option><option value="32">32px</option><option value="33">33px</option><option value="34">34px</option><option value="35">35px</option><option value="36">36px</option><option value="37">37px</option><option value="38">38px</option><option value="39">39px</option><option value="40">40px</option><option value="41">41px</option><option value="42">42px</option><option value="43">43px</option><option value="44">44px</option><option value="45">45px</option><option value="46">46px</option><option value="47">47px</option><option value="48">48px</option><option value="49">49px</option><option value="50">50px</option><option value="51">51px</option><option value="52">52px</option><option value="53">53px</option><option value="54">54px</option><option value="55">55px</option><option value="56">56px</option><option value="57">57px</option><option value="58">58px</option><option value="59">59px</option><option value="60">60px</option><option value="61">61px</option><option value="62">62px</option><option value="63">63px</option><option value="64">64px</option><option value="65">65px</option><option value="66">66px</option><option value="67">67px</option><option value="68">68px</option><option value="69">69px</option><option value="70">70px</option><option value="71">71px</option><option value="72">72px</option><option value="73">73px</option><option value="74">74px</option><option value="75">75px</option><option value="76">76px</option><option value="77">77px</option><option value="78">78px</option><option value="79">79px</option><option value="80">80px</option><option value="81">81px</option><option value="82">82px</option><option value="83">83px</option><option value="84">84px</option><option value="85">85px</option><option value="86">86px</option><option value="87">87px</option><option value="88">88px</option><option value="89">89px</option><option value="90">90px</option>                                                    </select>
                                                </span>
                                            </p>
                                            <span id="fontError3"></span>
                                        </form>
                                        <p id="charectorInfo"></p>
                                    </div>
                                    <div class="algn-sec col-lg-12">
                                        <p>Text Alignment</p>
                                        <ul>
                                            <li><a href="javascript:void(0);" onclick="selectalign('l')"><img
                                                src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/left-aligned.png"
                                                alt="" /></a></li>
                                                <li><a class="selected" href="javascript:void(0);" onclick="selectalign('m')"
                                                    class="selected"><img
                                                    src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/middle-aligned.png"
                                                    alt="" /></a></li>
                                                    <li><a href="javascript:void(0);" onclick="selectalign('r')"><img
                                                        src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/right-aligned.png"
                                                        alt="" /></a></li>
                                                    </ul>

                                                    <p><input id="calculatedFontSize" readonly type="hidden"></p>

                                                </div>
                                            </div>
                                        </div>
                                        <h4 class="panel-title text-center">HANG TAG MATERIAL</h4>
                                        <div class="panel-body materials_section" style="display:none;">

                                            <div class="materialSelection" >
                                                <div class="row">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
        <figure class="materialSelect default" onclick="selectMaterial(this, 'Flat', 0)">
            <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/HangTagMaterial/Flat.svg">
            <figcaption>Flat</figcaption>
        </figure>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
        <figure class="materialSelect" onclick="selectMaterial(this, 'Matte', 50)">
            <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/HangTagMaterial/matte.svg">
            <figcaption>Matte</figcaption>
        </figure>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
        <figure class="materialSelect" onclick="selectMaterial(this, 'Glossy', 0)">
            <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/HangTagMaterial/glossy.svg">
            <figcaption>Glossy</figcaption>
        </figure>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
        <figure class="materialSelect" onclick="selectMaterial(this, 'Recycled', 50)">
            <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/HangTagMaterial/recycled.svg">
            <figcaption>Recycled</figcaption>
        </figure>
    </div>
</div>
                                            </div>


                                        </div>
                                        <h4 class="panel-title text-center">HANG TAG THICKNESS</h4>
                                        <div class="panel-body thickness_section" style="display:none;">

                                            <div class="thicknessSelection">
                                                <div class="row-sec">
        <div class="imgWrapW" onclick="selectThickness(this, '250gr', 0);">
            <div class="imgWrap">
                <div class="gap" style="width:5px;"></div>
                <div class="center">250gr(gsm)</div>
            </div>
        </div>

        <div class="imgWrapW selected default" onclick="selectThickness(this, '300gr', 0);">
            <div class="imgWrap">
                <div class="gap" style="width:6px;"></div>
                <div class="center">300gr(gsm)</div>
            </div>
        </div>

        <div class="imgWrapW" onclick="selectThickness(this, '400gr', 90);">
            <div class="imgWrap">
                <div class="gap" style="width:8px;"></div>
                <div class="center">400gr</div>
            </div>
        </div>

        <div class="imgWrapW" onclick="selectThickness(this, '500gr', 120);">
            <div class="imgWrap">
                <div class="gap" style="width:10px;"></div>
                <div class="center">500gr</div>
            </div>
        </div>

        <div class="imgWrapW" onclick="selectThickness(this, '600gr', 180);">
            <div class="imgWrap">
                <div class="gap" style="width:12px;"></div>
                <div class="center">600gr</div>
            </div>
        </div>

        <div class="imgWrapW" onclick="selectThickness(this, '800gr', 230);">
            <div class="imgWrap">
                <div class="gap" style="width:16px;"></div>
                <div class="center">800gr</div>
            </div>
        </div>
</div>
<div class="text-center note" style="margin: 20px 0;">Thickness views are not the actual views and are an example of the range of thickness</div>                                            </div>

                                        </div>
                                    </div>

                                    <!----- Fonts ---->
                                    <div class="panel" data-div="fonts" id="fonts">
                                        <h4 class="panel-title text-center">FONT</h4>
                                        <div class="panel-body">
                                            <div id="fontsLoader">
                                            </div>
                                        </div>
                                        <!----- icons ---->
                                        <h4 class="panel-title text-center">SYMBOL</h4>
                                        <div class="panel-body" style="display:done;">
                                            <div class="row">
                                                <div class="iconSection col-md-8">
                                                </div>
                                                <div class="algn-sec algn-sec-icon col-lg-4">
                                                    <a href="javascript:;" id="removeIcon" onclick="removeIcon();"
                                                    class="btn btn-warning pull-right">Remove Icon</a>
                                                    <p>Icon Alignment</p>
                                                    <br>
                                                    <ul style="overflow: hidden;">
                                                        <li><a class="selected" href="javascript:void(0);" onclick="iconAlign('l')"><img
                                                            src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/left-aligned.png"
                                                            alt="" /></a></li>
                                                            <li><a href="javascript:void(0);" onclick="iconAlign('r')"><img
                                                                src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/right-aligned.png"
                                                                alt="" /></a></li>
                                                            </ul>
                                                            <br>
                                                            <p id="iconcalcInfo"></p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>







                                            <!----- text colors ---->
                                            <div class="panel color-bg-sec" data-div="textColor" id="textColors">
                                                <h4 class="panel-title text-center">TEXT COLOR</h4>
                                                <div class="panel-body">

                                                    <p style="color: red" id="colorselectionError"></p>
                                                    <div class="colorSelection">
                                                        <span class="colorContainer" onclick="selecttextcolor('000000', 'Black', '', this)">
                                                            <span class="colorContainer-label " style="background-color: #000000">
                                                                <input type="radio" name="radio-51" value="Black" checked="checked">
                                                                <span class="wpcf7-list-item-label">Black</span>
                                                            </span>
                                                        </span>
                                                        <span class="colorContainer" onclick="selecttextcolor('ffffff', 'White', '', this)">
                                                            <span class="colorContainer-label " style="background-color: #ffffff">
                                                                <input type="radio" name="radio-52" value="White" checked="checked">
                                                                <span class="wpcf7-list-item-label">White</span>
                                                            </span>
                                                        </span>
                                                        <span class="colorContainer" onclick="selecttextcolor('06038d', 'Blue', '', this)">
                                                            <span class="colorContainer-label " style="background-color: #06038d">
                                                                <input type="radio" name="radio-53" value="Blue" checked="checked">
                                                                <span class="wpcf7-list-item-label">Blue</span>
                                                            </span>
                                                        </span>
                                                        <span class="colorContainer" onclick="selecttextcolor('6cace4', 'Light Blue', '', this)">
                                                            <span class="colorContainer-label " style="background-color: #6cace4">
                                                                <input type="radio" name="radio-54" value="Light Blue" checked="checked">
                                                                <span class="wpcf7-list-item-label">Light Blue</span>

                                                            </span>
                                                        </span>
                                                        <span class="colorContainer" onclick="selecttextcolor('41b6e6', 'Turquoise', '', this)">
                                                            <span class="colorContainer-label " style="background-color: #41b6e6">
                                                                <input type="radio" name="radio-55" value="Turquoise" checked="checked">
                                                                <span class="wpcf7-list-item-label">Turquoise</span>
                                                            </span>
                                                        </span>
                                                        <span class="colorContainer" onclick="selecttextcolor('4f2c1d', 'Brown', '', this)">
                                                            <span class="colorContainer-label " style="background-color: #4f2c1d">
                                                                <input type="radio" name="radio-56" value="Brown" checked="checked">
                                                                <span class="wpcf7-list-item-label">Brown</span>
                                                            </span>
                                                        </span>
                                                        <span class="colorContainer" onclick="selecttextcolor('63513d', 'Light brown', '', this)">
                                                            <span class="colorContainer-label " style="background-color: #63513d">
                                                                <input type="radio" name="radio-57" value="Light brown" checked="checked">
                                                                <span class="wpcf7-list-item-label">Light brown</span>
                                                            </span>
                                                        </span>
                                                        <span class="colorContainer" onclick="selecttextcolor('a83d72', 'Dark pink', '', this)">
                                                            <span class="colorContainer-label " style="background-color: #a83d72">
                                                                <input type="radio" name="radio-58" value="Dark pink" checked="checked">
                                                                <span class="wpcf7-list-item-label">Dark pink</span>
                                                            </span>
                                                        </span>
                                                        <span class="colorContainer" onclick="selecttextcolor('f57eb6', 'Pink', '', this)">
                                                            <span class="colorContainer-label " style="background-color: #f57eb6">
                                                                <input type="radio" name="radio-59" value="Pink" checked="checked">
                                                                <span class="wpcf7-list-item-label">Pink</span>
                                                            </span>
                                                        </span>
                                                        <span class="colorContainer" onclick="selecttextcolor('470a68', 'Dark purple', '', this)">
                                                            <span class="colorContainer-label " style="background-color: #470a68">
                                                                <input type="radio" name="radio-510" value="Dark purple" checked="checked">
                                                                <span class="wpcf7-list-item-label">Dark purple</span>
                                                            </span>
                                                        </span>
                                                        <span class="colorContainer" onclick="selecttextcolor('7566a0', 'Purple', '', this)">
                                                            <span class="colorContainer-label " style="background-color: #7566a0">
                                                                <input type="radio" name="radio-511" value="Purple" checked="checked">
                                                                <span class="wpcf7-list-item-label">Purple</span>
                                                            </span>
                                                        </span>
                                                        <span class="colorContainer" onclick="selecttextcolor('006341', 'Green', '', this)">
                                                            <span class="colorContainer-label " style="background-color: #006341">
                                                                <input type="radio" name="radio-512" value="Green" checked="checked">
                                                                <span class="wpcf7-list-item-label">Green</span>
                                                            </span>
                                                        </span>
                                                        <span class="colorContainer" onclick="selecttextcolor('a4d65e', 'Apple green', '', this)">
                                                            <span class="colorContainer-label " style="background-color: #a4d65e">
                                                                <input type="radio" name="radio-513" value="Apple green" checked="checked">
                                                                <span class="wpcf7-list-item-label">Apple green</span>
                                                            </span>
                                                        </span>
                                                        <span class="colorContainer" onclick="selecttextcolor('e8e1c7', 'Off White', '', this)">
                                                            <span class="colorContainer-label " style="background-color: #e8e1c7">
                                                                <input type="radio" name="radio-514" value="Off White" checked="checked">
                                                                <span class="wpcf7-list-item-label">Off White</span>
                                                            </span>
                                                        </span>
                                                        <span class="colorContainer" onclick="selecttextcolor('ff6a39', 'Orange', '', this)">
                                                            <span class="colorContainer-label " style="background-color: #ff6a39">
                                                                <input type="radio" name="radio-515" value="Orange" checked="checked">
                                                                <span class="wpcf7-list-item-label">Orange</span>
                                                            </span>
                                                        </span>
                                                        <span class="colorContainer" onclick="selecttextcolor('c8102e', 'Red', '', this)">
                                                            <span class="colorContainer-label " style="background-color: #c8102e">
                                                                <input type="radio" name="radio-516" value="Red" checked="checked">
                                                                <span class="wpcf7-list-item-label">Red</span>
                                                            </span>
                                                        </span>
                                                        <span class="colorContainer" onclick="selecttextcolor('9b111e', 'Rubyred', '', this)">
                                                            <span class="colorContainer-label " style="background-color: #9b111e">
                                                                <input type="radio" name="radio-517" value="Rubyred" checked="checked">
                                                                <span class="wpcf7-list-item-label">Rubyred</span>
                                                            </span>
                                                        </span>
                                                        <span class="colorContainer" onclick="selecttextcolor('5b6770', 'Silvergrey', '', this)">
                                                            <span class="colorContainer-label " style="background-color: #5b6770">
                                                                <input type="radio" name="radio-518" value="Silvergrey" checked="checked">
                                                                <span class="wpcf7-list-item-label">Silvergrey</span>
                                                            </span>
                                                        </span>
                                                        <span class="colorContainer" onclick="selecttextcolor('ffcd00', 'Yellow', '', this)">
                                                            <span class="colorContainer-label " style="background-color: #ffcd00">
                                                                <input type="radio" name="radio-519" value="Yellow" checked="checked">
                                                                <span class="wpcf7-list-item-label">Yellow</span>
                                                            </span>
                                                        </span>
                                                        <span class="colorContainer" onclick="selecttextcolor('cbb677', 'Sparkling gold', '', this)">
                                                            <span class="colorContainer-label " style="background-color: #cbb677">
                                                                <input type="radio" name="radio-520" value="Sparkling gold" checked="checked">
                                                                <span class="wpcf7-list-item-label">Sparkling gold</span>
                                                            </span>
                                                        </span>
                                                        <span class="colorContainer" onclick="selecttextcolor('aa0114', 'Sparkling red', '', this)">
                                                            <span class="colorContainer-label " style="background-color: #aa0114">
                                                                <input type="radio" name="radio-521" value="Sparkling red" checked="checked">
                                                                <span class="wpcf7-list-item-label">Sparkling red</span>
                                                            </span>
                                                        </span>
                                                        <span class="colorContainer" onclick="selecttextcolor('a7a9ac', 'Sparkling silver', '', this)">
                                                            <span class="colorContainer-label " style="background-color: #a7a9ac">
                                                                <input type="radio" name="radio-522" value="Sparkling silver" checked="checked">
                                                                <span class="wpcf7-list-item-label">Sparkling silver</span>
                                                            </span>
                                                        </span>
                                                        <span class="colorContainer" onclick="selecttextcolor('3f00ff', 'Sparkling blue', '', this)">
                                                            <span class="colorContainer-label " style="background-color: #3f00ff">
                                                                <input type="radio" name="radio-523" value="Sparkling blue" checked="checked">
                                                                <span class="wpcf7-list-item-label">Sparkling blue</span>
                                                            </span>
                                                        </span>
                                                        <span class="colorContainer" onclick="selecttextcolor('C0C0C0', 'Metallic Silver', '', this)">
                                                            <span class="colorContainer-label "
                                                            style="background-color: #3f00ff; background-image:-webkit-radial-gradient(  50%   0%,  8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%), -webkit-radial-gradient(  50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),-webkit-radial-gradient(   0%  50%, 50%  7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%), -webkit-radial-gradient( 100%  50%, 50%  5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),-webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   3%, hsla(0,0%,  0%,.1) 3.5%),-webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%,.1) 7.5%),-webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),-webkit-radial-gradient( 50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%)">
                                                            <input type="radio" name="radio-424" value="Metallic Silver" checked="checked">
                                                            <span class="wpcf7-list-item-label">Metallic Silver</span>
                                                        </span>
                                                    </span>
                                                    <span class="colorContainer" onclick="selecttextcolor('FFD700', 'Metallic Gold', '', this)">
                                                        <span class="colorContainer-label "
                                                        style="background-color: #3f00ff; background-image:-webkit-radial-gradient( 50% 0%, 8% 50%, hsla(53, 100%, 89%, 0.5) 0%, hsla(0,0%,100%,0) 100%), -webkit-radial-gradient( 50% 100%, 12% 50%, hsla(53, 100%, 85%, 0.6) 0%, hsla(0,0%,100%,0) 100%), -webkit-radial-gradient( 0% 50%, 50% 7%, hsla(53, 100%, 86%, 0.5) 0%, hsla(0,0%,100%,0) 100%), -webkit-radial-gradient( 100% 50%, 50% 5%, hsla(53, 100%, 80%, 0.5) 0%, hsla(0,0%,100%,0) 100%), -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(42, 100%, 75%, 0) 0%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 3.5%), -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(69, 100%, 58%, 0) 6%, hsla(0,0%,100%,.1) 7.5%), -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0, 0%, 85%, 0.2) 2.2%), -webkit-radial-gradient( 50% 50%, 200% 50%, hsl(44, 100%, 77%) 5%, hsl(47, 100%, 76%) 30%, hsl(50, 78%, 47%) 100%)">
                                                        <input type="radio" name="radio-425" value="Sparkling blue" checked="checked">
                                                        <span class="wpcf7-list-item-label">Sparkling blue</span>
                                                    </span>
                                                </span>
                                            </div>
                                            <div class="additionalColors">
                                                <h4 class="additionalColorCode">You can also Submit PMS/ PantoneCodes color code for better
                                                understanding</h4>
                                                <a target="_blank"
                                                href="https://xpresalabels.com/site/wp-content/uploads/2018/05/PantoneCodes.pdf"
                                                class="pdflinkinPopup pdfShowgal">Click Here To Check Pantone Color Codes</a>
                                                <input type="text" id="pantoneText" class="customColorpantone" placeholder="Select Other Color"
                                                readonly>
                                            </div>
                                            



                                        </div>

                                        <!----- background colors ---->
                                        <h4 class="panel-title text-center">BACKGROUND COLOR</h4>
                                        <div class="panel color-bg-sec" data-div="backGroundColor" id="backGroundColors">
                                            <div class="panel-body">

                                                <div class="colorSelection">

                                                </div>
                                                <div class="additionalColors">
                                                    <h4 class="additionalColorCode">You can also Submit PMS/ PantoneCodes color code for better
                                                    understanding</h4>
                                                    <a target="_blank"
                                                    href="https://xpresalabels.com/site/wp-content/uploads/2018/05/PantoneCodes.pdf"
                                                    class="pdflinkinPopup pdfShowgal">Click Here To Check Pantone Color Codes</a>
                                                    <input type="text" id="pantoneBG" class="customColorpantone" placeholder="Select Other Color"
                                                    readonly>
                                                </div>



                                            </div>
                                        </div>
                                    </div>

                                    <!----- print Options ---->
                                    <div class="panel" data-div="printOptions" id="printOptions" style="display:block;">
                                      <h4 class="panel-title text-center">PRINT OPTIONS</h4>
                                      <div class="panel-body">
                                        <div class="row">
                                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                                <div class="oneSide default" onclick="selectSideOptions(this, 'One Sided');">
                                                    <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/onesided.png">
                                                    <h4>One Sided</h4>
                                                </div>
                                            </div>
                                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                                <div class="oneSide twoSide" onclick="selectSideOptions(this, 'Both Sided');">
                                                    <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/bothside.png">
                                                    <h4>Both Sided</h4>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="panel-body panel-body-2">
                                        <h4 class="panel-title text-center">Input texts for the back side:</h4>
                                        <div class="frm-algn-holder">
                                            <div class="frm-sec col-lg-12">
                                                <p style="color: red" id="textErrorMsg"></p>
                                                <form id="backForm" action="" method="get">
                                                    <p>
                                                        <label>Row 1</label>
                                                        <input name="textbox1" id="textbox1_bck" type="text" onfocus="" value=""
                                                        onchange="selecttext_new(1, this)" maxlength="22">
                                                        <span class="selectFontSize">
                                                            <span>Font Size:</span>
                                                            <select name="" onchange="manualFontChange_bck(1, this);" id="textbox1Font_bck">
                                                                <option value="auto">Auto</option>
                                                                <option value="8">8px</option><option value="9">9px</option><option value="10">10px</option><option value="11">11px</option><option value="12">12px</option><option value="13">13px</option><option value="14">14px</option><option value="15">15px</option><option value="16">16px</option><option value="17">17px</option><option value="18">18px</option><option value="19">19px</option><option value="20">20px</option><option value="21">21px</option><option value="22">22px</option><option value="23">23px</option><option value="24">24px</option><option value="25">25px</option><option value="26">26px</option><option value="27">27px</option><option value="28">28px</option><option value="29">29px</option><option value="30">30px</option><option value="31">31px</option><option value="32">32px</option><option value="33">33px</option><option value="34">34px</option><option value="35">35px</option><option value="36">36px</option><option value="37">37px</option><option value="38">38px</option><option value="39">39px</option><option value="40">40px</option><option value="41">41px</option><option value="42">42px</option><option value="43">43px</option><option value="44">44px</option><option value="45">45px</option><option value="46">46px</option><option value="47">47px</option><option value="48">48px</option><option value="49">49px</option><option value="50">50px</option><option value="51">51px</option><option value="52">52px</option><option value="53">53px</option><option value="54">54px</option><option value="55">55px</option><option value="56">56px</option><option value="57">57px</option><option value="58">58px</option><option value="59">59px</option><option value="60">60px</option><option value="61">61px</option><option value="62">62px</option><option value="63">63px</option><option value="64">64px</option><option value="65">65px</option><option value="66">66px</option><option value="67">67px</option><option value="68">68px</option><option value="69">69px</option><option value="70">70px</option><option value="71">71px</option><option value="72">72px</option><option value="73">73px</option><option value="74">74px</option><option value="75">75px</option><option value="76">76px</option><option value="77">77px</option><option value="78">78px</option><option value="79">79px</option><option value="80">80px</option><option value="81">81px</option><option value="82">82px</option><option value="83">83px</option><option value="84">84px</option><option value="85">85px</option><option value="86">86px</option><option value="87">87px</option><option value="88">88px</option><option value="89">89px</option><option value="90">90px</option>                                                            </select>
                                                        </span>
                                                    </p>
                                                    <!--<span id="fontError1"></span>-->
                                                    <p>
                                                        <label>Row 2</label>
                                                        <input name="textbox2" id="textbox2_bck" type="text"
                                                        onchange="selecttext_new(2, this)" maxlength="22" value="">
                                                        <span class="selectFontSize">
                                                            <span>Font Size:</span>
                                                            <select name="" onchange="manualFontChange_bck(2, this);" id="textbox2Font_bck">
                                                                <option value="auto">Auto</option>
                                                                <option value="8">8px</option><option value="9">9px</option><option value="10">10px</option><option value="11">11px</option><option value="12">12px</option><option value="13">13px</option><option value="14">14px</option><option value="15">15px</option><option value="16">16px</option><option value="17">17px</option><option value="18">18px</option><option value="19">19px</option><option value="20">20px</option><option value="21">21px</option><option value="22">22px</option><option value="23">23px</option><option value="24">24px</option><option value="25">25px</option><option value="26">26px</option><option value="27">27px</option><option value="28">28px</option><option value="29">29px</option><option value="30">30px</option><option value="31">31px</option><option value="32">32px</option><option value="33">33px</option><option value="34">34px</option><option value="35">35px</option><option value="36">36px</option><option value="37">37px</option><option value="38">38px</option><option value="39">39px</option><option value="40">40px</option><option value="41">41px</option><option value="42">42px</option><option value="43">43px</option><option value="44">44px</option><option value="45">45px</option><option value="46">46px</option><option value="47">47px</option><option value="48">48px</option><option value="49">49px</option><option value="50">50px</option><option value="51">51px</option><option value="52">52px</option><option value="53">53px</option><option value="54">54px</option><option value="55">55px</option><option value="56">56px</option><option value="57">57px</option><option value="58">58px</option><option value="59">59px</option><option value="60">60px</option><option value="61">61px</option><option value="62">62px</option><option value="63">63px</option><option value="64">64px</option><option value="65">65px</option><option value="66">66px</option><option value="67">67px</option><option value="68">68px</option><option value="69">69px</option><option value="70">70px</option><option value="71">71px</option><option value="72">72px</option><option value="73">73px</option><option value="74">74px</option><option value="75">75px</option><option value="76">76px</option><option value="77">77px</option><option value="78">78px</option><option value="79">79px</option><option value="80">80px</option><option value="81">81px</option><option value="82">82px</option><option value="83">83px</option><option value="84">84px</option><option value="85">85px</option><option value="86">86px</option><option value="87">87px</option><option value="88">88px</option><option value="89">89px</option><option value="90">90px</option>                                                            </select>
                                                        </span>
                                                    </p>
                                                    <span id="fontError2"></span>
                                                    <p>
                                                        <label>Row 3</label>
                                                        <input name="textbox3" id="textbox3_bck" type="text"
                                                        onchange="selecttext_new(3, this)" maxlength="22" value="">
                                                        <span class="selectFontSize">
                                                            <span>Font Size:</span>
                                                            <select name="" onchange="manualFontChange_bck(3, this);" id="textbox3Font_bck">
                                                                <option value="auto">Auto</option>
                                                                <option value="8">8px</option><option value="9">9px</option><option value="10">10px</option><option value="11">11px</option><option value="12">12px</option><option value="13">13px</option><option value="14">14px</option><option value="15">15px</option><option value="16">16px</option><option value="17">17px</option><option value="18">18px</option><option value="19">19px</option><option value="20">20px</option><option value="21">21px</option><option value="22">22px</option><option value="23">23px</option><option value="24">24px</option><option value="25">25px</option><option value="26">26px</option><option value="27">27px</option><option value="28">28px</option><option value="29">29px</option><option value="30">30px</option><option value="31">31px</option><option value="32">32px</option><option value="33">33px</option><option value="34">34px</option><option value="35">35px</option><option value="36">36px</option><option value="37">37px</option><option value="38">38px</option><option value="39">39px</option><option value="40">40px</option><option value="41">41px</option><option value="42">42px</option><option value="43">43px</option><option value="44">44px</option><option value="45">45px</option><option value="46">46px</option><option value="47">47px</option><option value="48">48px</option><option value="49">49px</option><option value="50">50px</option><option value="51">51px</option><option value="52">52px</option><option value="53">53px</option><option value="54">54px</option><option value="55">55px</option><option value="56">56px</option><option value="57">57px</option><option value="58">58px</option><option value="59">59px</option><option value="60">60px</option><option value="61">61px</option><option value="62">62px</option><option value="63">63px</option><option value="64">64px</option><option value="65">65px</option><option value="66">66px</option><option value="67">67px</option><option value="68">68px</option><option value="69">69px</option><option value="70">70px</option><option value="71">71px</option><option value="72">72px</option><option value="73">73px</option><option value="74">74px</option><option value="75">75px</option><option value="76">76px</option><option value="77">77px</option><option value="78">78px</option><option value="79">79px</option><option value="80">80px</option><option value="81">81px</option><option value="82">82px</option><option value="83">83px</option><option value="84">84px</option><option value="85">85px</option><option value="86">86px</option><option value="87">87px</option><option value="88">88px</option><option value="89">89px</option><option value="90">90px</option>                                                            </select>
                                                        </span>
                                                    </p>
                                                    <span id="fontError3"></span>
                                                </form>
                                                <p id="charectorInfo"></p>
                                            </div>
                                            <div class="algn-sec col-lg-12">
                                                <p>Text Alignment</p>
                                                <ul>
                                                    <li><a href="javascript:void(0);" onclick="selectalign_bck('text-left')"><img
                                                        src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/left-aligned.png"
                                                        alt="" /></a></li>
                                                        <li><a class="selected" href="javascript:void(0);"
                                                            onclick="selectalign_bck('text-center')" class="selected"><img
                                                            src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/middle-aligned.png"
                                                            alt="" /></a></li>
                                                            <li><a href="javascript:void(0);" onclick="selectalign_bck('text-right')"><img
                                                                src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/right-aligned.png"
                                                                alt="" /></a></li>
                                                            </ul>

                                                            <!-- <p>Calcualtions</p> -->
                                                            <p><input id="calculatedFontSize" readonly type="hidden"></p>



                                                        </div>
                                                    </div>
                                                    <div class="close-panel" onclick=""><span>X</span></div>
                                                </div>

                                                <h4 class="panel-title text-center">HOLE PUNCH</h4>
                                                <div class="panel-body section_hole_punch" style="display:none;">

                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 default" onclick="selectHoles(this, '1/8', 0);">
                                                            <div class="hole hole1">
                                                                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/holepunch_8.png">
                                                                <h4>1/8”</h4>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" onclick="selectHoles(this, '3/16', 20);">
                                                            <div class="hole hole3">
                                                                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/holepunch_16.png">
                                                                <h4>3/16”</h4>
                                                            </div>
                                                        </div>
                                                    </div>


                                                </div>

                                                <h4 class="panel-title text-center">HOLE LOCATION</h4>
                                                <div class="panel-body section_hole_location" style="display:none;">

                                                    <div class="row">
                                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 selected" onclick="selectHoleLocation(this, 'Top - Center');">
                                                            <div class="hole holeLocation-TC">
                                                                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hole_location.png">
                                                                <h4>1/8”</h4>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 default" onclick="selectHoleLocation(this, 'Left - Center');">
                                                            <div class="hole holeLocation-LC">
                                                                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hole_location.png">
                                                                <h4>3/16”</h4>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" onclick="selectHoleLocation(this, 'Right - Center');">
                                                            <div class="hole holeLocation-RC">
                                                                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hole_location.png">
                                                                <h4>3/16”</h4>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" onclick="selectHoleLocation(this, 'Top - Left');">
                                                            <div class="hole holeLocation-TL">
                                                                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hole_location.png">
                                                                <h4>3/16”</h4>
                                                            </div>
                                                        </div>
                                                        <div class="clearfix"></div>
                                                        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"  onclick="selectHoleLocation(this, 'Top - Right');">
                                                            <div class="hole holeLocation-TR">
                                                                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hole_location.png">
                                                                <h4>3/16”</h4>
                                                            </div>
                                                        </div>
                                                    </div>


                                                </div>

                                                <h4 class="panel-title text-center">SURFACE</h4>
                                                <div class="panel-body section_surface" style="display:none;">

                                                    <div class="row">
                                                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 default" onclick="selectSurface(this, 'Flat', 0);">
                                                            <div class="surface">
                                                                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/Surface/flat.svg">
                                                                <h4>Flat</h4>
                                                            </div>
                                                        </div>

                                                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" onclick="selectSurface(this, 'Emboss (raised)', 100);">
                                                            <div class="surface">
                                                                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/Surface/emboss.svg">
                                                                <h4>Emboss (raised)</h4>
                                                            </div>
                                                        </div>

                                                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" onclick="selectSurface(this, 'Deboss (recessed)', 100);">
                                                            <div class="surface">
                                                                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/Surface/deboss.svg">
                                                                <h4>Deboss (recessed)</h4>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <h4 class="panel-title text-center">STRING COLOR</h4>
                                                <div class="panel-body" style="display:none;">
                                                    <div class="strings">
                                                        <ul>
                                                            <li class="White" onclick="selectString(this, 'White', 50);">
                                                                <img
                                                                src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/StringColor/white.svg">
                                                                <h4>White</h4>
                                                            </li>
                                                            <li class="Black" onclick="selectString(this, 'Black', 50);">
                                                                <img
                                                                src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/StringColor/Black.svg">
                                                                <h4>Black</h4>
                                                            </li>
                                                            <li class="Yellow" onclick="selectString(this, 'Yellow', 60);">
                                                                <img
                                                                src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/StringColor/Yellow.svg">
                                                                <h4>Yellow</h4>
                                                            </li>
                                                            <li class="Green" onclick="selectString(this, 'Green', 60);">
                                                                <img
                                                                src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/StringColor/Green.svg">
                                                                <h4>Green</h4>
                                                            </li>
                                                            <li class="Red" onclick="selectString(this, 'Red', 60);">
                                                                <img
                                                                src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/StringColor/Red.svg">
                                                                <h4>Red</h4>
                                                            </li>
                                                            <li class="Natural" onclick="selectString(this, 'Natural', 60);">
                                                                <img
                                                                src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/StringColor/Natural.svg">
                                                                <h4>Natural</h4>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>

                                                <h4 class="panel-title text-center">SAFETY PIN</h4>
                                                <div class="panel-body" style="display:none;">

                                                    <div class="choosePins">
                                                        <ul>
                                                            <li class="yes">Yes</li>
                                                            <li class="no selected">No</li>
                                                        </ul>
                                                    </div>
                                                    <div class="SafetyPinColors" style="display:none;">
                                                        <ul>
                                                            <li class="Silver" onclick="selectSafetyPin(this, 'Silver', 50);">
                                                                <img
                                                                src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/SafetyPin/Silver.svg">
                                                                <h4>Silver</h4>
                                                            </li>
                                                            <li class="Gold" onclick="selectSafetyPin(this, 'Gold', 50);">
                                                                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/SafetyPin/Gold.svg">
                                                                <h4>Gold</h4>
                                                            </li>
                                                            <li class="Black" onclick="selectSafetyPin(this, 'Black', 50);">
                                                                <img
                                                                src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/SafetyPin/Black.svg">
                                                                <h4>Black</h4>
                                                            </li>
                                                            <li class="Bronze" onclick="selectSafetyPin(this, 'Bronze', 50);">
                                                                <img
                                                                src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/SafetyPin/Bronze.svg">
                                                                <h4>Bronze</h4>
                                                            </li>
                                                        </ul>
                                                    </div>


                                                </div>
                                                <h4 class="panel-title text-center">GROMMETS</h4>
                                                <div class="panel-body" style="display:none;">

                                                    <div class="grommets">
                                                        <ul>
                                                            <li class="No" onclick="selectGrommet(this, 'No Grommet', 0);">
                                                                <img
                                                                src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/Grommets/NoGrommets.svg">
                                                                <h4>No Grommet</h4>
                                                            </li>
                                                            <li class="Gold" onclick="selectGrommet(this, 'Gold', 50);">
                                                                <img
                                                                src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/Grommets/GoldenGrommets.svg">
                                                                <h4>Gold</h4>
                                                            </li>
                                                            <li class="Silver" onclick="selectGrommet(this, 'Silver', 50);">
                                                                <img
                                                                src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/Grommets/SilverGrommets.svg">
                                                                <h4>Silver</h4>
                                                            </li>
                                                            <li class="Black" onclick="selectGrommet(this, 'Black', 50);">
                                                                <img
                                                                src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/Grommets/BlackGrommets.svg">
                                                                <h4>Black</h4>
                                                            </li>
                                                            <li class="White" onclick="selectGrommet(this, 'White', 50);">
                                                                <img
                                                                src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/Grommets/WhiteGrommets.svg">
                                                                <h4>White</h4>
                                                            </li>
                                                            <li class="Bronze" onclick="selectGrommet(this, 'Bronze', 50);">
                                                                <img
                                                                src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/Grommets/BronzeGrommets.svg">
                                                                <h4>Bronze</h4>
                                                            </li>
                                                        </ul>
                                                    </div>


                                                </div>
                                                <h4 class="panel-title text-center">FOIL</h4>
                                                <div class="panel-body" style="display:none;"> 
                                                    <div class="foils">
                                                        <ul>
                                                            <li class="NoFoil default" onclick="selectFoil(this, 'No Foil', 0);">
                                                                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/Foil/NoFoil.svg">
                                                                <h4>No Foil</h4>
                                                            </li>
                                                            <li class="SilverFoil" onclick="selectFoil(this, 'Silver Foil', 75);">
                                                                <img
                                                                src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/Foil/SilverFoil.svg">
                                                                <h4>Silver Foil</h4>
                                                            </li>
                                                            <li class="GoldFoil" onclick="selectFoil(this, 'Gold Foil', 75);">
                                                                <img src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/images/hangtag/Foil/GoldFoil.svg">
                                                                <h4>Gold Foil</h4>
                                                            </li>
                                                        </ul>
                                                    </div>


                                                </div>

                                            </div>

                                            <!----- Quantity ---->
                                            <div class="panel" id="amnt_qbltm" data-div="quanity">
                                                <div class="panel-body panel-body-table-sec">
                                                    <h4 class="panel-title text-center">QUANTITY</h4>
                                                    <span id="quantityErrorMsg"> </span>
                                                    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="stripped-table">
                                                        <thead>
                                                            <tr>
                                                                <th width="20%">&nbsp;</th>
                                                                <th width="20%">Quantity</th>
                                                                <th width="20%">Unit Price</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="priceContainerFull">
                                                        </tbody>
                                                    </table>


                                                </div>
                                            </div>


                                        </div>

                                        <!-- TABS -->
                                        <div class="tab-pro-des">
                                                                                        <div id="horizontalTab">
                                                <ul class="resp-tabs-list hor_1">
                                                     <li>
                                                        Description</li>                                                         <li>Reviews</li>
                                                                                                                 <li>Discount</li>                                                          <li>Product Photos</li>                                                     </ul>
                                                    <div class="resp-tabs-container hor_1">
                                                        <div><p>Xpresa Labels have been in custom woven label industry since 2002 and we are considered one of the most reliable custom label manufacturing company. Designs and prints used on labels are extremely high quality which has helped us in increasing our client base. Our in-house skilled teams are experts in their professional domain and they provide comprehensive solutions and advice to clients. These solutions help in weaving labels those match client expectations and they keep coming back to us for more.  Our labels are not basic or standard. They are professional labels.</p>
<p>Our professional label specialists analyze all details in your custom woven label request and note down specifications so that the products we provide are of high quality. Raw materials that we use to make labels are top quality so that there is no compromise on the quality of our products.</p>
<p>Our woven labels have been used throughout the industry. Beach Wear, Blankets, Carpets, Clothing, Crafts, Drapes, Furniture, Industrial, Pants, Promotional, Shirts, Shoes, Sports, Tactical, Under Garments, and etc…  If you need Labels, we make labels. They’re everywhere!  We promise to make your decision, the best decision.</p>
<p>Please visit our FAQs page for more questions you may have.</p>
                                                                <div class="qaPanelCustomProduct">
                                                                                                                                     <div class="qaPanelCustomProductItem" id="item1">
                                                                     <h4 class="show" data-id="item1">Label type</h4>
                                                                     <div class="qaPanelCustomProductAns item1">

                                                                        <p>We offer various types of labels to meet your products. These include woven labels, which can be <u>satin</u>, <u>taffeta</u>, and <u>damask</u>. Woven labels are created by using threads that are projected through a loom in order to provide a high level of detail similar to embroidery but with much more sophisticated stitches and details.</p>
<p>We also offer <u>printed satin</u> and hang tags. See our <u>Labels Glossary</u> for better explanations.</p>
<p>See our fold options in our quote forms. Please allow and indicate seam in our Additional Comments section.</p>
<p><strong>Damask –</strong> A lustrous based thread has a smooth soft texture. Typically considered high end and used for intricate details, such as signatures or small text. Available as Cut/End Fold, Centerfolded or Straight Cut. Adhesive or Iron Backing available. This is the best process for custom woven label applications. Woven Damask offers top quality features.</p>
<p><strong>Satin –</strong> A polyester based lustrous thread which is soft and smooth. Good quality results. Can be produce using a single needle or broadloom set-up based on quality needs.</p>
<p><strong>Taffeta –</strong> A polyester based plain woven thread used for low cost or basic uses. Not suggested for use in contact with skin as it tends to be scratchy. More suitable for outerwear or accessories. Very durable. Weaving can be double for definition details. Taffeta is a woven label process.</p>

                                                                    </div>
                                                                </div>
                                                                                                                             <div class="qaPanelCustomProductItem" id="item2">
                                                                     <h4 class="" data-id="item2">Turnaround/Lead time</h4>
                                                                     <div class="qaPanelCustomProductAns item2">

                                                                        <p>Xpresa Labels is one of the oldest and most reputable online label manufacturers. We offer the fastest turn-around time and best quality options in the industry. Once we receive your Quote, we prepare a custom quote and samples within 24 hours. Our quote form will indicate pricing, instructions and lead times in writing. Once we receive your order commitment, we will prepare a proof (physical proof via .jpg) typically within 24 hours. Once we receive your approval, we will ship your order in 8-10 business days.</p>

                                                                    </div>
                                                                </div>
                                                                                                                             <div class="qaPanelCustomProductItem" id="item3">
                                                                     <h4 class="" data-id="item3">Proofing</h4>
                                                                     <div class="qaPanelCustomProductAns item3">

                                                                        <p>Once you have completed our quote form and your custom design and submitted an order as instructed in our quote, we prepare a proof which is a physical proof sent as a .jpg for a woven version and a software layout for <u>printed satin</u> or printed hang tags.</p>
<p>Having a design ready as a digital file usually is the simplest way, but you can utilize our Design Tool to Create a simple design, or provide a MS Paint, Clear Sketch or the font written in an email with requested positioning and layout, and we will do our best to reproduce your proof.</p>
<p>We do our best to recreate, but with a woven process, there are some size limitations based on the size of your labels.</p>
<p>Physical samples can be sent out but will delay your project by 7 days. Our physical .jpgs will have very clear details with measurements.</p>

                                                                    </div>
                                                                </div>
                                                                                                                    </div>
                                                        </div>                                                <div>
                                                    [woocommerce_reviews id="113" ]                                                </div>
                                                <div><p><strong>Free Shipping</strong></p>
<p>Coupon Code:  FREE SHIPPING</p>
<p>Coupon Code:  FREE SAMPLING</p>
<p>Coupon Code: FREESHIP</p>
</div>                                                    <div class="proAddiImgCont">
                                                        
                                                            <div class="proAddiImgItems">

                                                                <a href="https://xpresalabels.com/site/wp-content/uploads/2020/10/hangtag.png" rel="gallery1" class="fancybox">
                                                                    <img width="150" height="150" src="https://xpresalabels.com/site/wp-content/uploads/2020/10/hangtag-150x150.png" class="attachment-thumbnail size-thumbnail" alt="Hangtag" srcset="https://xpresalabels.com/site/wp-content/uploads/2020/10/hangtag-150x150.png 150w, https://xpresalabels.com/site/wp-content/uploads/2020/10/hangtag-324x324.png 324w, https://xpresalabels.com/site/wp-content/uploads/2020/10/hangtag-100x100.png 100w" sizes="(max-width: 150px) 100vw, 150px" />                                                                </a>

                                                            </div>

                                                        
                                                            <div class="proAddiImgItems">

                                                                <a href="https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag1-scaled.jpg" rel="gallery1" class="fancybox">
                                                                    <img width="150" height="150" src="https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag1-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="Hangtag" srcset="https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag1-150x150.jpg 150w, https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag1-324x324.jpg 324w, https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag1-100x100.jpg 100w" sizes="(max-width: 150px) 100vw, 150px" />                                                                </a>

                                                            </div>

                                                        
                                                            <div class="proAddiImgItems">

                                                                <a href="https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag2-scaled.jpg" rel="gallery1" class="fancybox">
                                                                    <img width="150" height="150" src="https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag2-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="Hangtag" srcset="https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag2-150x150.jpg 150w, https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag2-324x324.jpg 324w, https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag2-100x100.jpg 100w" sizes="(max-width: 150px) 100vw, 150px" />                                                                </a>

                                                            </div>

                                                        
                                                            <div class="proAddiImgItems">

                                                                <a href="https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag3-scaled.jpg" rel="gallery1" class="fancybox">
                                                                    <img width="150" height="150" src="https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag3-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="Hangtag" srcset="https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag3-150x150.jpg 150w, https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag3-324x324.jpg 324w, https://xpresalabels.com/site/wp-content/uploads/2020/11/hangtag3-100x100.jpg 100w" sizes="(max-width: 150px) 100vw, 150px" />                                                                </a>

                                                            </div>

                                                                                                            </div>
                                                                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </section>


<!--------- alert ------------>
<div class="wrapper" id="alertFor">
    <p class="alerttext"></p>
    <div class="close"><i class="fa fa-times-circle" aria-hidden="true"></i></div>
</div>
<!---------------------------->

<!-- scripts start-->
<script type="text/javascript" src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/jqupload/colorpicker.js"></script>
<script type="text/javascript">
    var baseRates = {
            }

    var recommendVals = [];
                recommendVals.push(1);
                    recommendVals.push('');
                    recommendVals.push(1);
                    recommendVals.push('');
                    recommendVals.push(1);
                    recommendVals.push('');
                    recommendVals.push(1);
                    recommendVals.push('');
                    recommendVals.push('');
                    recommendVals.push('');
                    recommendVals.push('');
                    recommendVals.push('');
        
    const baseRatesHolder = {
        100:1.1, 200:0.70, 300:0.50, 500:0.4, 1000:0.22, 2000:0.15, 3000:0.12, 5000:0.07, 10000:0.055, 20000:0.05, 25000:0.05, 50000:0.04,     }

    var baseIncrate = {
        100:0.01, 200:0.0035, 300:0.003, 500:0.003, 1000:0.003, 2000:0.003, 3000:0.003, 5000:0.003, 10000:0.003, 20000:0.002, 25000:0.002, 50000:0.002,     }

    var extraColors = {
        100:10, 200:10, 300:12, 500:12, 1000:12, 2000:13, 3000:15, 5000:15, 10000:25, 20000:50, 25000:75, 50000:75,     }

    var heatSealRate = {
        100:0.15, 200:0.15, 300:0.10, 500:0.08, 1000:0.05, 2000:0.04, 3000:0.03, 5000:0.02, 10000:0.015, 20000:0.01, 25000:0.01, 50000:0.01,     }

    var satinRates = {
        100:0.05, 200:0.04, 300:0.04, 500:0.03, 1000:0.02, 2000:0.02, 3000:0.015, 5000:0.012, 10000:0.01, 20000:0.008, 25000:0.006, 50000:0.005,     }

    var damaskRates = {
        100:0.10, 200:0.05, 300:0.05, 500:0.04, 1000:0.03, 2000:0.03, 3000:0.02, 5000:0.022, 10000:0.02, 20000:0.015, 25000:0.012, 50000:0.01,     }

    var increasedRates = {},
    save4Later = {},
    flagD = 'ok',
    classV = 'productPrevImg';

    var designSelection = {};

    var iconAdhesive = {};

    var extraColorHolder = {};

    function selectquantity(valquantity, vareachunit) {
        if (valquantity != '') {
            document.getElementById("priceperlabel1").innerHTML = vareachunit.toFixed(2);
            document.getElementById("unitpricehere").value = vareachunit;
            if (valquantity == 'ProofOnly' || valquantity == "FreeSamplePacket") {
                vartotalprice = parseFloat(vareachunit);
                vartotalprice1 = parseFloat(vartotalprice);
                document.getElementById("custom_data_7").value = valquantity;
                document.getElementById("quantity1").innerHTML = 1;
                document.getElementById("totalquantity").value = 1;
                document.getElementById("custom_data_7").value = 1;
                document.getElementById("totalprice1").innerHTML = vareachunit;

                jQuery('#sub_totalprice1').text(vartotalprice1);
                jQuery('span#priceAdded').each(function() {
                    var addOnPrice = parseFloat(jQuery(this).text());
                    vartotalprice1 = vartotalprice1 + addOnPrice;
                });
                document.getElementById("totalpricelabeladd2crt").value = vartotalprice1;
                document.getElementById("totalprice1").innerHTML = vartotalprice1.toFixed(2);
            } else {
                vartotalprice = parseFloat(valquantity) * parseFloat(vareachunit);
                vartotalprice1 = parseFloat(vartotalprice);
                document.getElementById("quantity1").innerHTML = valquantity;
                document.getElementById("totalquantity").value = valquantity;
                document.getElementById("custom_data_7").value = valquantity;

                jQuery('#sub_totalprice1').text(vartotalprice1);
                jQuery('span#priceAdded').each(function() {
                    var addOnPrice = parseFloat(jQuery(this).text());
                    vartotalprice1 = vartotalprice1 + addOnPrice;
                });
                document.getElementById("totalpricelabeladd2crt").value = vartotalprice1;
                document.getElementById("totalprice1").innerHTML = vartotalprice1.toFixed(2);
            }
        }
    //submitDesign(2);
        if (jQuery('input#printOptionChosen').val() == 'Both Sided' && jQuery('#addOnForBack').length > 0) {
            jQuery('#addOnForBack').remove();
            jQuery('#tttl').before(
                '<div class="productPrevContRow" id="addOnForBack"> <span class="productPrevContRowTitle">For Back printing:</span> <span class="productPrevContRowDes">x2</span></span> </div>'
                );
            var rsltPrice = vartotalprice1 * 2;
            jQuery('#totalpricelabeladd2crt').val(rsltPrice);
            jQuery('#totalprice1').text(rsltPrice);
        }
    }

    function isEmpty(obj) {
        for (var prop in obj) {
            if (obj.hasOwnProperty(prop))
                return false;
        }
        return true;
    }

    function setPricingTable() {

        var selectedQuantity = document.getElementById('totalquantity').value;
        var selectedlabelType = document.getElementById('setselectsize').value;
        if (selectedQuantity == '') {
            selectedQuantity = 1000;
        }

        var priceChart = "<tr><td colspan='3'>There are some ERROR !! Please check after some time. </td></tr>";
        var priceChartData = '';
        if (isEmpty(increasedRates)) {
            var i = 0;
            for (var baseQuantity in baseRates) {

                if (baseQuantity == selectedQuantity) {
                    var selectedDisplay = "checked";
                } else {
                    var selectedDisplay = " ";
                }

                var highlightClass = recommendVals[i] ? 'recommended' : '';
                priceChartData += '<tr class="' + highlightClass +
                '"><td width="20"><label class="customRadio"><input name="quantityhere" id="priceChartData_' + i +
                '" type="radio" value="' + baseQuantity + '" ' + selectedDisplay + ' onchange="selectquantity(' +
                baseQuantity + ',' + (baseRates[baseQuantity]).toFixed(3) +
                ')"><span class="checkmark"></span></label></td><td>' + baseQuantity + '</td><td width="20%">$' + (
                    baseRates[baseQuantity]).toFixed(3) + '</td></tr>';
                i++;
            }
            priceChart = priceChartData;
        } else {

            var i = 0;
            for (var baseQuantity in increasedRates) {

                if (baseQuantity == selectedQuantity) {
                    var selectedDisplay = "checked";
                } else {
                    var selectedDisplay = " ";
                }

                priceChartData +=
                '<tr><td width="20"><label class="customRadio"><input name="quantityhere" id="priceChartData_' + i +
                '" type="radio" value="' + baseQuantity + '" ' + selectedDisplay + ' onchange="selectquantity(' +
                baseQuantity + ',' + (increasedRates[baseQuantity]).toFixed(3) +
                ')"><span class="checkmark"></span></label></td><td>' + baseQuantity + '</td><td width="20%">$' + (
                    increasedRates[baseQuantity]).toFixed(3) + '</td></tr>';
                i++;
            }
            priceChart = priceChartData;
        }

        document.getElementById('priceContainerFull').innerHTML = priceChart;
        if (isEmpty(increasedRates)) {
            var x = baseRates[selectedQuantity];
        } else {
            var x = increasedRates[selectedQuantity];
        }
        selectquantity(selectedQuantity, x);
        selecttext();
    }

    function updateSliderW(val) {
        document.getElementById("sliderwidth").value = val;
        document.getElementById("slwidth").innerHTML = val;
    }

    function updateSliderH(val) {
        document.getElementById("slheight").innerHTML = val;
        document.getElementById("sliderhight").value = val;
    }

    function reCalculatePriceTable() {

        var baseCount = baseRates.length;
        baseSizeWidth = 0.375;
        baseSizeHeight = 0.375;
        if (document.getElementById("sliderwidth").value != "") {
            currentWidth = document.getElementById("sliderwidth").value;
        } else {
            currentWidth = baseSizeWidth;
        }

        if (document.getElementById("sliderhight").value != "") {
            currentHeight = document.getElementById("sliderhight").value;
        } else {
            currentHeight = baseSizeHeight;
        }

        var currentWidth = parseFloat(currentWidth);
        var currentHeight = parseFloat(currentHeight);
        var totalSqMm = (currentWidth * 25.4) * (currentHeight * 25.4);
        var basePrice, incrimantedWidth, incrimantedHeight, incrimantedCount, priceForWidth, priceForHeight,
        incrementedSqMm;
        if (totalSqMm <= 1290) {

            for (var peoductQauantity in baseRates) {

                if (iconAdhesive['ironAdhesive']) {
                    iconAdhesiveprice = iconAdhesive[peoductQauantity];
                } else {
                    iconAdhesiveprice = 0;
                }

                if (extraColorHolder['setofColor']) {} else {
                    extraColorHolder[peoductQauantity] = 0;
                }

                if (designSelection['labelType']) {} else {
                    designSelection[peoductQauantity] = 0;
                }


                increasedRates[peoductQauantity] = baseRates[peoductQauantity] + iconAdhesiveprice + extraColorHolder[
                peoductQauantity] + designSelection[peoductQauantity];
            }

        } else {

            incrementedSqMm = totalSqMm - 1290;
            incrementedQnty = incrementedSqMm / 100;
            incrementedSqMmFx = incrementedQnty.toFixed(0);
            for (var peoductQauantity in baseRates) {

                if (iconAdhesive['ironAdhesive']) {
                    iconAdhesiveprice = iconAdhesive[peoductQauantity];
                } else {
                    iconAdhesiveprice = 0;
                }

                if (extraColorHolder['setofColor']) {

                } else {
                    extraColorHolder[peoductQauantity] = 0;
                }

                if (designSelection['labelType']) {} else {
                    designSelection[peoductQauantity] = 0;
                }


                extraPricePerqntity = incrementedSqMmFx * baseIncrate[peoductQauantity];
                nwPricePerQntity = baseRates[peoductQauantity] + extraPricePerqntity + iconAdhesiveprice + extraColorHolder[
                peoductQauantity] + designSelection[peoductQauantity];
                increasedRates[peoductQauantity] = nwPricePerQntity;
            }

        }

        setPricingTable();
    }

    function MeasureText(text, fontName, size) {

        if (fontName == "") {
            fontName = "Arial";
        }

        font = fontName;
        var bold = "Normal";
        var str = text + ':' + bold + ':' + font + ':' + size;
        if (typeof(__measuretext_cache__) == 'object' && __measuretext_cache__[str]) {
            return __measuretext_cache__[str];
        }

        var div = document.createElement('DIV');
        div.innerHTML = text;
        div.style.position = 'absolute';
        div.style.top = '-100px';
        div.style.left = '-100px';
        div.style.fontFamily = font;
        div.style.fontWeight = bold ? 'bold' : 'normal';
        div.style.fontSize = size + 'px';
        div.style.lineHeight = 'normal';
        document.body.appendChild(div);
        var size = [div.offsetWidth, div.offsetHeight];
        var sizeHeight = div.offsetHeight;
        document.body.removeChild(div);
        if (typeof(__measuretext_cache__) != 'object') {
            var __measuretext_cache__;
        }
        __measuretext_cache__ = sizeHeight;
        return sizeHeight;
    }

    function invertColor(hex, bw) {
        if (hex.length === 3) {
            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
        }
        if (hex.length !== 6) {
            throw new Error('Invalid HEX color.');
        }
        var r = parseInt(hex.slice(0, 2), 16),
        g = parseInt(hex.slice(2, 4), 16),
        b = parseInt(hex.slice(4, 6), 16);
        if (bw) {
            return (r * 0.299 + g * 0.587 + b * 0.114) > 186 ?
            '#000000' :
            '#FFFFFF';
        }
        r = (255 - r).toString(16);
        g = (255 - g).toString(16);
        b = (255 - b).toString(16);
        return "#" + padZero(r) + padZero(g) + padZero(b);
    }

    function getTextHeight(text, fontsz) {
        div = document.createElement('div');
        div.innerHTML = text;
        div.style.fontSize = fontsz + 'px';
        return div.height;
    }

    function labelSizingSelect(_this, lid, lw, lh, lxp, withPx) {
        jQuery('.productPrevImg').attr('class', 'productPrevImg');
        jQuery('div[onclick^="labelSizingSelect"]').not(_this).removeClass('selected');
        jQuery(_this).addClass('selected');
        if (withPx) {
            var dpi = 1;
        } else {
            var dpi = 100;
        }

        jQuery('.ank').remove();
        jQuery('head').append(
            '<style class="ank">.productPrevImg.woven_label.woven_labelcf:after, .productPrevImg.woven_label.woven_labelcfv:after{width:' +
            (lw * 100) + 'px!important;left:calc(50% - ' + parseFloat((lw * 100)) / 2 + 'px)!important;}</style>');

        lw = parseFloat(lw);
        lh = parseFloat(lh);
        document.getElementById('selectedwidth').value = lw * dpi;
        document.getElementById('selectedheight').value = lh * dpi;
        document.getElementById("setselectsize").value = lid;
        if (!withPx) {
            document.getElementById("sliderwidth").value = lw;
            document.getElementById("sliderhight").value = lh;
        }

        document.getElementById("slwidth").innerHTML = lw;
        document.getElementById("slheight").innerHTML = lh;
        document.getElementById("custom_data_1").value = lw + 'X' + lh;
        var wdth = lw * 100;
        var h8 = lh * 100;

    //setPricingTable()
    //reCalculatePriceTable();
        document.getElementById("canvaswidth").value = wdth;
        document.getElementById("canvasheight").value = h8;
    //document.getElementById("canvas_loader").style.height = h8 + 'px';

        jQuery(_this).parents().eq(1).attr('id') == 'Circle' ? (
            jQuery('#displaydesignnew').addClass('Circle_h'),
            jQuery('#displaydesignnew.Circle_h').css('border-radius', lw * 100 / 2 + 'px'),
            jQuery('.displaydesignnew_bck_vw').addClass('Circle_h')
            ) : (
            jQuery('#displaydesignnew').removeClass('Circle_h'),
            jQuery('#displaydesignnew').css('border-radius', '0'),
            jQuery('.displaydesignnew_bck_vw').removeClass('Circle_h')
            );


            var arg = {
                wdth: wdth,
                h8: h8,
            };
            createLogoCanvas(arg);
        }

        function clearDefaultText() {
    /*var mytext1 = document.getElementById("textbox1").value;
    if (mytext1 == "Your Text Here" || mytext1 == "Logo") {
        document.getElementById("textbox1").value = "";
    }*/
        }

        function selectshape(val, pixelwidth, pixelheight, shapeClass, foldname, d) {
         jQuery('.hang-tag-size').hide();
         jQuery('#'+foldname).show();
         jQuery('#custom_data_1').val('');
         classV = shapeClass;
         (shapeClass === 'woven_label woven_labelcfv') ? jQuery('.productPrevImgW').height(300): jQuery('.productPrevImgW')
         .height('auto');

         document.getElementById("cutnfolddivforajax").value = foldname;
         document.getElementById("custom_data_6").value = foldname;
         document.getElementById("cutnfolddiv").innerHTML = foldname;
         jQuery('.desig-order-shrt-des').each(function() {
            jQuery(this).removeClass('selected');
        })
         jQuery(d).parent().addClass('selected');
         if (document.getElementById("setselectsize")) {
            document.getElementById("setselectsize").value = val;
        }
        var userheight;
        var userwidth;
        var userwidth = pixelwidth;
        var userheight = pixelheight;
        var myEle = document.getElementById("ironHeatSealDisable");
        if (myEle) {
            if (val == 1) {
                document.getElementById('ironHeatSealDisable').style.display = "none";
                var arr = {};
                createLogoCanvas(arr);
            } else {
                document.getElementById('ironHeatSealDisable').style.display = "block";
                clearironoradhe();
            }
        }

        if (val == 5) {
            document.getElementById('quantityErrorMsg').innerHTML =
            "<p style='color:red; text-align:center;'>Minimum label quantity should be 2000.</p>";
        } else if (val == 6) {
            document.getElementById('quantityErrorMsg').innerHTML =
            "<p style='color:red; text-align:center;'>Minimum label quantity should be 2000</p>";
        } else {
            document.getElementById('quantityErrorMsg').innerHTML = "";
        }

        if (document.getElementById("userbgcolor")) {
            var colorval = document.getElementById("userbgcolor").value;
        }

        valtxcolo = document.getElementById("usertextcolor").value;
        seliconhere = document.getElementById("seliconhere").value;
        mytext1 = document.getElementById("usertextbox1").value;
        mytext2 = document.getElementById("usertextbox2").value;
        mytext3 = document.getElementById("usertextbox3").value;
        calculatedSize = document.getElementById("calculatedSize").value;
        fontpadTop = document.getElementById("fontpadTop").value;
        lineSpecingC = document.getElementById("lineSpecingC").value;
        lineSpecingCLast = document.getElementById("lineSpecingCLast").value;

        var setselectsize = document.getElementById('setselectsize').value;
        var selectedwidth = document.getElementById('selectedwidth').value;
        var selectedheight = document.getElementById('selectedheight').value;
        if (setselectsize) {

        } else {
            setselectsize = 1;
        }
        if (selectedwidth) {
            selectedwidthpx = selectedwidth;
        } else {
            selectedwidth = 2.35;
            selectedwidthpx = 235;
        }
        if (selectedheight) {
            selectedheightpx = selectedheight;
        } else {
            selectedheight = .78;
            selectedheightpx = 78;
        }

        document.getElementById("slwidth").innerHTML = selectedwidth;
        document.getElementById("slheight").innerHTML = selectedheight;
    }

    function selectprice() {
        var sizesel = document.getElementById("setselectsize").value;
        var labeltype = document.getElementById("selectwlebelt").value;
        var irononorheat = document.getElementById("irononadhesive").value;
    }

    function manualFontChange(tid, tval) {
        if (tid == 1) {
            document.getElementById('textbox1fontVal').value = tval;
        } else if (tid == 2) {
            document.getElementById('textbox2fontVal').value = tval;
        } else if (tid == 3) {
            document.getElementById('textbox3fontVal').value = tval;
        }
    //console.log(tval);
        selecttext(tid);
        var arg = {
            fontsizes: {
                1: ('' === document.getElementById('textbox1fontVal').value ? '25' : document.getElementById(
                    'textbox1fontVal').value),
                2: ('' === document.getElementById('textbox2fontVal').value ? '25' : document.getElementById(
                    'textbox2fontVal').value),
                3: ('' === document.getElementById('textbox3fontVal').value ? '25' : document.getElementById(
                    'textbox3fontVal').value)
            }
        }
        createLogoCanvas(arg);
    }

    function selecttext(val) {

        val = document.getElementById("setselectsize").value;

        mytext1 = document.getElementById("textbox1").value;
        document.getElementById("usertextbox1").value = mytext1;
        jQuery('.row1').text(mytext1);

        mytext2 = document.getElementById("textbox2").value;
        document.getElementById("usertextbox2").value = mytext2;
        jQuery('.row2').text(mytext2);

        mytext3 = document.getElementById("textbox3").value;
        document.getElementById("usertextbox3").value = mytext3;
        jQuery('.row3').text(mytext3);

        valtxcolo = document.getElementById("usertextcolor").value;
        seliconhere = document.getElementById("seliconhere").value;
        selectedFonthere = document.getElementById("selfonthereName").value;
        if (selectedFonthere == "") {
            selectedFonthere = "Arial";
        }
        userwidth = document.getElementById("selectedwidth").value;
        userheight = document.getElementById("selectedheight").value;
        var colorval = document.getElementById("userbgcolor").value;

        var frameWidth = parseInt(document.getElementById("selectedwidth").value);
        var frameHeight = parseInt(document.getElementById("selectedheight").value);
        if (!(frameWidth) || !(frameHeight)) {
        //document.getElementById("textErrorMsg").innerHTML = "Please select Frame size first !!";
        } else {
        //document.getElementById("textErrorMsg").innerHTML = "";
        }

    //submitDesign();
        var prevAlign = document.getElementById("iconAlign").value;
        if (prevAlign == '') {
            prevAlign = 'l';
        }
        iconAlign(prevAlign);
        var arr = {
            textline2: document.getElementById('usertextbox2').value,
            textline3: document.getElementById('usertextbox3').value
        };
        createLogoCanvas(arr);
    }

    function selectcolor(valc, valcn, valcp, ds) {

        jQuery(ds).addClass('selected').siblings().removeClass('selected');
        val = document.getElementById("setselectsize").value;
        mytext1 = document.getElementById("usertextbox1").value;
        mytext2 = document.getElementById("usertextbox2").value;
        mytext3 = document.getElementById("usertextbox3").value;
        valtxcolo = document.getElementById("usertextcolor").value;
        seliconhere = document.getElementById("seliconhere").value;
        userwidth = document.getElementById("selectedwidth").value;
        userheight = document.getElementById("selectedheight").value;
        calculatedSize = document.getElementById("calculatedSize").value;
        fontpadTop = document.getElementById("fontpadTop").value;
        lineSpecingC = document.getElementById("lineSpecingC").value;
        lineSpecingCLast = document.getElementById("lineSpecingCLast").value;
        document.getElementById("custom_data_2").value = valcn;
        document.getElementById("labelcolor").innerHTML = valcn;
        jQuery('div#displaydesignnew').css('background-color', '#' + valc);
        if (valcp) {
            document.getElementById("backgroungcol").value = valcp;
        }


        document.getElementById("userbgcolor").value = valc;
        colorval = valc;
    //submitDesign();
        if (document.getElementById("pantoneBG")) {
            jQuery('#pantoneBG').attr('style', '');
            jQuery('#pantoneBG').val('');
        }

        var arr = {
            backgroundColor: valc
        }
        createLogoCanvas(arr);
    }

    function selecttextcolor(valtxcolo, valtxcolon, valtextcolprice, d) {
        jQuery(d).addClass('selected').siblings().removeClass('selected');
        document.getElementById("usertextcolor").value = valtxcolo;
        document.getElementById("custom_data_3").value = valtxcolon;
        if (valtextcolprice) {
            document.getElementById("usertextcolorprcie").value = valtextcolprice;
        }

        val = document.getElementById("setselectsize").value;
        colorval = document.getElementById("userbgcolor").value;
        mytext1 = document.getElementById("usertextbox1").value;
        mytext2 = document.getElementById("usertextbox2").value;
        mytext3 = document.getElementById("usertextbox3").value;
        seliconhere = document.getElementById("seliconhere").value;
        userwidth = document.getElementById("selectedwidth").value;
        userheight = document.getElementById("selectedheight").value;
        document.getElementById("logocolor").innerHTML = valtxcolon;
        calculatedSize = document.getElementById("calculatedSize").value;
        fontpadTop = document.getElementById("fontpadTop").value;
        lineSpecingC = document.getElementById("lineSpecingC").value;
        lineSpecingCLast = document.getElementById("lineSpecingCLast").value;
        if (colorval == valtxcolo) {
            document.getElementById("colorselectionError").innerHTML =
            "Similar to Label Color, please select a different one.";
        } else {
            document.getElementById("colorselectionError").innerHTML = "";
        }

    //submitDesign();
        if (document.getElementById("pantoneText")) {
            jQuery('#pantoneText').attr('style', '');
            jQuery('#pantoneText').val('');
        }
        var arr = {
            color: valtxcolo,
        };
        createLogoCanvas(arr);
    }

    function selecticonhere(seliconhere, seliconname, seliconprice, d) {
        jQuery(d).addClass('selected').siblings().removeClass('selected');
        document.getElementById("seliconhere").value = seliconhere;
        valtxcolo = document.getElementById("usertextcolor").value;
        val = document.getElementById("setselectsize").value;
        colorval = document.getElementById("userbgcolor").value;
        mytext1 = document.getElementById("usertextbox1").value;
        mytext2 = document.getElementById("usertextbox2").value;
        mytext3 = document.getElementById("usertextbox3").value;
        varalign = document.getElementById("selalignhere").value;
        userwidth = document.getElementById("selectedwidth").value;
        userheight = document.getElementById("selectedheight").value;
        document.getElementById("symbolhere").innerHTML = seliconname;
        calculatedSize = document.getElementById("calculatedSize").value;
        fontpadTop = document.getElementById("fontpadTop").value;
        lineSpecingC = document.getElementById("lineSpecingC").value;
        lineSpecingCLast = document.getElementById("lineSpecingCLast").value;
        document.getElementById("iconpricedisp").value = seliconprice;
        document.getElementById("custom_data_5").value = seliconname;


        if (val != '') {
            if (val == 1) {
                document.getElementById("iconSize").value = '35';
            } else if (val == 2) {
                document.getElementById("iconSize").value = '45';
            } else if (val == 3) {
                document.getElementById("iconSize").value = '27';
            } else if (val == 4) {
                document.getElementById("iconSize").value = '22';
            } else {
            // document.getElementById("iconSize").value = '55';
            }
        } else {

        //get alignmenment
            var prevAlign = document.getElementById("selalignhere").value;
            if (prevAlign == '') {
                prevAlign = 'l';
            }
            selectalign(prevAlign);
        }

        selecttext();
        jQuery('.icon_n_txt').addClass('withicon');
        var arr = {};
        createLogoCanvas(arr);
    }

    function selectalign(varalign) {
        jQuery(this).addClass('selected');
        document.getElementById("selalignhere").value = varalign;
        valtxcolo = document.getElementById("usertextcolor").value;
        val = document.getElementById("setselectsize").value;
        colorval = document.getElementById("userbgcolor").value;
        mytext1 = document.getElementById("usertextbox1").value;
        mytext2 = document.getElementById("usertextbox2").value;
        mytext3 = document.getElementById("usertextbox3").value;
        seliconhere = document.getElementById("seliconhere").value;
        userwidth = document.getElementById("selectedwidth").value;
        userheight = document.getElementById("selectedheight").value;
        calculatedSize = document.getElementById("calculatedSize").value;
        fontpadTop = document.getElementById("fontpadTop").value;
        lineSpecingC = document.getElementById("lineSpecingC").value;
        lineSpecingCLast = document.getElementById("lineSpecingCLast").value;
        iconAlignment = document.getElementById("iconAlign").value;
        iconPosition = parseInt(document.getElementById("iconPosition").value);
        var ckhIcon = document.getElementById("seliconhere").value;
        var iconSize = document.getElementById("iconSize").value;
        if (iconSize == '') iconSize = 45;
        iconSize = parseInt(iconSize);

        var textalign;

        function makeAlignment() {
        //jQuery('#texts').attr('class','');
            jQuery("#texts").removeClass(function(index, css) {
                return (css.match(/\btext-\S+/g) || []).join(' ');
            });

            if (varalign == 'l') {
                jQuery('#texts').addClass('text-left');
                textalign = 'start'
            };
            if (varalign == 'm') {
                jQuery('#texts').addClass('text-center');
                textalign = undefined
            };
            if (varalign == 'r') {
                jQuery('#texts').addClass('text-right');
                textalign = 'end'
            };
        }
        makeAlignment();

        var arg = {
            textalign: textalign
        };
        createLogoCanvas(arg);
    }

    function selectfonthere(varfonthere, varfontherename, d) {
        jQuery(d).addClass('selected').siblings().removeClass('selected');
        document.getElementById("selfonthere").value = varfonthere;
        document.getElementById("custom_data_4").value = varfontherename;
        document.getElementById("selfonthereName").value = varfontherename;
        valtxcolo = document.getElementById("usertextcolor").value;
        val = document.getElementById("setselectsize").value;
        colorval = document.getElementById("userbgcolor").value;
        mytext1 = document.getElementById("usertextbox1").value;
        mytext2 = document.getElementById("usertextbox2").value;
        mytext3 = document.getElementById("usertextbox3").value;
        seliconhere = document.getElementById("seliconhere").value;
        varalign = document.getElementById("selalignhere").value;
        userwidth = document.getElementById("selectedwidth").value;
        userheight = document.getElementById("selectedheight").value;
        document.getElementById("designfont").innerHTML = varfontherename;
        calculatedSize = document.getElementById("calculatedSize").value;
        fontpadTop = document.getElementById("fontpadTop").value;
        lineSpecingC = document.getElementById("lineSpecingC").value;
        lineSpecingCLast = document.getElementById("lineSpecingCLast").value;
        jQuery('.displaydesignnew_bck_vw').css('font-family', varfontherename);
        selecttext();

        var arr = {
            font: varfontherename
        }
        createLogoCanvas(arr);
    }

    function selectFrameType(foldopn, foldname) {
        document.getElementById("labelcutnfold").innerHTML = foldname;
        document.getElementById("userlabelcutnfold").value = foldname;
    }

    function removeIcon() {
        document.getElementById("iconSize").value = '0';
        document.getElementById("seliconhere").value = '';
        selecttext();
        jQuery('.icon_n_txt').removeClass('withicon');
        jQuery('.icon_on_label_img').attr('src', '');
        var arg = {
            img: ''
        };
        createLogoCanvas(arg);
    }

    function iconAlign(v) {
        var iconName = document.getElementById("seliconhere").value;
        var line1align = parseInt(document.getElementById("alignline1").value);
        var line2align = parseInt(document.getElementById("alignline2").value);
        var line3align = parseInt(document.getElementById("alignline3").value);
        var iconSize = parseInt(document.getElementById("iconSize").value);
        var userwidth = parseInt(document.getElementById("selectedwidth").value);
        userwidth = userwidth * 1.5;

        if (iconName) {
            jQuery("#texts").removeClass(function(index, css) {
                return (css.match(/\bpull\S+/g) || []).join(' ');
            });
            if (v == "r") {
                var iconAlign = userwidth - iconSize - 10;
                document.getElementById("iconcalcInfo").innerHTML = "";
                document.getElementById("iconPosition").value = iconAlign;
                jQuery('.icon_on_label').css({
                    'left': 'auto',
                    'right': '15px'
                });
                jQuery('#texts').addClass('pull-left');
            } else {
                document.getElementById("iconPosition").value = 10;
                jQuery('.icon_on_label').css({
                    'right': 'auto',
                    'left': '15px'
                });
                jQuery('#texts').addClass('pull-right');
            }

            document.getElementById("iconAlign").value = v;
        } else {
            document.getElementById("iconcalcInfo").innerHTML = "Please select a Symbol. ";
        }
        var prevAlign = document.getElementById("selalignhere").value;
        if (prevAlign == '') {
            prevAlign = 'm';
        }

        selectalign(prevAlign);
        var arg = {
            iconalign: v
        };
        createLogoCanvas(arg);

    }

    function priceandallgen(vn) {
        var1 = document.getElementById("custom_data_1").value;
        var2 = document.getElementById("custom_data_2").value;
        var3 = document.getElementById("custom_data_3").value;
        var4 = document.getElementById("custom_data_4").value;
        var5 = document.getElementById("custom_data_5").value;
        var6 = document.getElementById("custom_data_6").value;
        var7 = document.getElementById("custom_data_7").value;
        var8 = document.getElementById("custom_data_8").value;
        var9 = document.getElementById("custom_data_9").value;
        var10 = document.getElementById("custom_data_10").value;
        varprice = document.getElementById("totalpricelabeladd2crt").value;

        var materialChosen = jQuery('#materialTypeChosen').val();
        var thickChosen = jQuery('#thickChosen').val();
        var printOptionChosen = jQuery('#printOptionChosen').val();
        var holePunchChosen = jQuery('#holePunchChosen').val();
        var holeLocation = jQuery('#holeLocation').val();
        var stringColorChosen = jQuery('#stringColorChosen').val();
        var safetyPin = jQuery('#safetyPin').val();
        var grommetsChosen = jQuery('#grommetsChosen').val();
        var foilChosen = jQuery('#foilChosen').val();
        var surfaceChosen = jQuery('#surfaceChosen').val();
        var sizetag = jQuery('#sizetag').val();

        var dataURL;
        if (jQuery('#displaydesignnew_bck').hasClass('show') && jQuery('#canvascr').width() > 0) {

            var canvasFront = document.getElementById('canvascr');


            var newCanvas = document.createElement('canvas');
            newCanvas.id = 'newCanvas';
            newCanvas.width = canvasFront.width;
            newCanvas.height = canvasFront.height * 2 + 10;
            var ctxN = newCanvas.getContext('2d');
            ctxN.fillStyle = "#FFF";
            ctxN.fillRect(0, 0, canvasFront.width, canvasFront.height);
            ctxN.drawImage(canvasFront, 0, 0);

            var ctxN2 = newCanvas.getContext('2d');
            var canvasBack = document.getElementById('canvascr_bck');
            ctxN2.drawImage(canvasBack, 0, canvasBack.height);

        //ctxF.drawImage(ctxB, canvasFront.width, canvasFront.height*2);

            dataURL = newCanvas.toDataURL("image/png");
        //var link = document.createElement('a');
        //link.download = "merged.png";
        //link.href = newCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
        //link.click();
        } else {
            dataURL = '';
        }


        jQuery.ajax({
            url: 'https://xpresalabels.com/site/wp-admin/admin-ajax.php',
            type: 'post',
            data: {
                action: 'my_action_hangtag_add2cart',
                ctsmdate1: var1,
                ctsmdate2: var2,
                ctsmdate3: var3,
                ctsmdate4: var4,
                ctsmdate5: var5,
                ctsmdate6: var6,
                ctsmdate7: var7,
                ctsmdate8: var8,
                ctsmdate9: var9,
                ctsmdate10: var10,
                ctsmdateprice: varprice,
                materialChosen: materialChosen,
                thickChosen: thickChosen,
                printOptionChosen: printOptionChosen,
                holePunchChosen: holePunchChosen,
                holeLocation: holeLocation,
                stringColorChosen: stringColorChosen,
                safetyPin: safetyPin,
                grommetsChosen: grommetsChosen,
                foilChosen: foilChosen,
                surfaceChosen: surfaceChosen,
                sizetag: sizetag,
                imgMerged: dataURL
            },
            beforeSend: function() {
            // setting a timeout
                jQuery('#displaydesign').closest('.windowBody').find('.imgDesignPlaceholder').remove();
                jQuery('#displaydesign').closest('.windowBody').prepend(
                    "<div class='imgDesignPlaceholder'></div>")
            },
            success: function(data) {
                data = JSON.parse(data);
                console.log(data);
                if (data == 'fail') {
                    alert('No records found');
                } else {
                    jQuery('#hereallwillchnage').html(data.html);
                    if (data.buyNowLink != '') {
                        jQuery('input[name="buyLink"]').val(data.buyNowLink);
                        jQuery('input[value="Download Quote"]').removeClass('hide');
                        jQuery('#iha5').remove();
                    }
                    if (vn != 'sbmtQT') {
                        jQuery('button[value="37583"]').click();
                    }

                }
            }
        });
    }

    function priceandallgenanother() {
        var1 = document.getElementById("custom_data_1").value;
        var2 = document.getElementById("custom_data_2").value;
        var3 = document.getElementById("custom_data_3").value;
        var4 = document.getElementById("custom_data_4").value;
        var5 = document.getElementById("custom_data_5").value;
        var6 = document.getElementById("custom_data_6").value;
        var9 = document.getElementById("custom_data_9").value;
        var10 = document.getElementById("custom_data_10").value;
        var7 = document.getElementById("totalpricelabeladd2crt").value;
        ctsmdateprice = document.getElementById("totalpricelabeladd2crt").value;
        jQuery.ajax({
            url: 'https://xpresalabels.com/site/wp-admin/admin-ajax.php',
            type: 'post',
            data: {
                action: 'my_action_woven_add2cart',
                ctsmdate1: var1,
                ctsmdate2: var2,
                ctsmdate3: var3,
                ctsmdate4: var4,
                ctsmdate5: var5,
                ctsmdate6: var6,
                ctsmdate7: var7,
                ctsmdate9: var9,
                ctsmdate10: var10,
                ctsmdateprice: ctsmdateprice
            },
            beforeSend: function() {
            // setting a timeout
                jQuery('#displaydesign').closest('.windowBody').find('.imgDesignPlaceholder').remove();
                jQuery('#displaydesign').closest('.windowBody').prepend(
                    "<div class='imgDesignPlaceholder'></div>")
            },
            success: function(data) {
            //console.log(data);
                data = JSON.parse(data);
                if (data == 'fail') {
                    alert('No records found');
                } else {
                    jQuery('#hereallwillchnage').html(data.html);
                    jQuery('button[value="37583"]').click();
                //jQuery('.designtoolbutton').click();
                    alert('Please wait while the page is redirect');
                }
            }
        });
    }

/******* png to datauri **********/
    function getDataUri(url, color, callback) {
        color = (undefined == color) ? '#09f' : '#' + color;
        var image = new Image();
        image.onload = function() {
            var canvas = document.createElement('canvas');
            canvas.width = this.naturalWidth;
            canvas.height = this.naturalHeight;
            canvas.getContext('2d').drawImage(this, 0, 0);

            canvas.getContext('2d').globalCompositeOperation = "source-in";

        // draw color
            canvas.getContext('2d').fillStyle = color;
            canvas.getContext('2d').fillRect(0, 0, canvas.width, canvas.height);

            callback(canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, ''));
            callback(canvas.toDataURL('image/png'));
        };
        image.src = url;
    }

/******* hexcolor to rgb *********/
    function hexToRgb(color) {
        var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
        color = color.replace(shorthandRegex, function(m, r, g, b) {
            return r + r + g + g + b + b;
        });

        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : {
            r: 0,
            g: 0,
            b: 0
        };
    }

//goto text
    function gotoText() {
        jQuery("html, body").animate({
            scrollTop: jQuery('.inputTexts').offset().top
        }, 500);
    }

//goto labelsize
    function gotoLabelSize() {
        console.log(jQuery('.labelSize .selected').length);
        var to = (jQuery('.labelSize .selected').length > 0) ? jQuery('.labelSize .selected') : jQuery('.labelSize');
        jQuery("html, body").animate({
            scrollTop: to.offset().top - to.height()
        }, 500);
    }

//calculate text width function
    function getTextWidth(font, fontsize, txt) {

        var formattedWidth;
        if (txt == '') {
            formattedWidth = '0px';
        } else {
            var text = document.createElement("span");
            document.body.appendChild(text);
            text.style.font = font;
            text.style.fontSize = fontsize + "px";
            text.style.height = 'auto';
            text.style.width = 'auto';
            text.style.position = 'absolute';
            text.style.whiteSpace = 'no-wrap';
            text.innerHTML = txt;

            var width = Math.ceil(text.clientWidth);
            formattedWidth = width + "px";
        }

        return formattedWidth;
    //document.body.removeChild(text);
    }

//***** create logo from canvas *****//
    function createLogoCanvas(arg) {
        jQuery('#canvas_loader').show();
        jQuery('#displaydesignnew').next('canvas').remove();

    /** all variables **/
        var imageObj = new Image(),
        iconimg = document.getElementById('seliconhere').value,
        flag,
        txtXaxis = {},
        txtYaxis, wdth, h8, backgroundColor, color, lineHeight1, lineHeight2,
        lineHeight3, x, y, fontsizes, fontsize1, fontsize2, fontsize3, font, leftSpaceText, rightSpaceText,
        text, textline1, textline2, textline3, img = arg.img,
        cnv, canvas, ctx, textall, iconalign, totalTextHeight,
        fontHeight, textalign, maxmimumLength, maxmimumHeight, isBiggerText = false,
        imgWidth, imgHeight,
        rowHeights = [],
        scrollPos, go,
        widthErrorText =
        'Text width is greater than label size, please <a onclick="gotoLabelSize()">choose different width label</a> or <a onclick="gotoText()">add lesser text</a>.',
        heightErrorText =
        'Total text height is greater than label size, please <a onclick="gotoLabelSize()">choose different height label</a> or <a onclick="gotoText()">add lesser text</a>.';

    //get scrolled position
        scrollPos = jQuery(document).scrollTop();

    //canvas dimentions
        wdth = (undefined == arg.wdth) ? document.getElementById('canvaswidth').value : arg.wdth;
        h8 = (undefined == arg.h8) ? document.getElementById('canvasheight').value : arg.h8;
        color = (undefined == arg.color) ? document.getElementById('usertextcolor').value : arg.color;
        x = (undefined == arg.x) ? 0 : arg.x;
        y = (undefined == arg.y) ? 0 : arg.y;
        backgroundColor = (undefined === arg.backgroundColor) ? document.getElementById('userbgcolor').value : arg
        .backgroundColor;

    //get the values of the rows
        fontsize1 = ('auto' == document.getElementById('textbox1fontVal').value) ? 25 : document.getElementById(
            'textbox1fontVal').value;
        fontsize2 = ('auto' == document.getElementById('textbox2fontVal').value) ? 25 : document.getElementById(
            'textbox2fontVal').value;
        fontsize3 = ('auto' == document.getElementById('textbox3fontVal').value) ? 25 : document.getElementById(
            'textbox3fontVal').value;

        arg.fontsizes = (undefined === arg.fontsizes) ? {
            1: fontsize1,
            2: fontsize2,
            3: fontsize3
        } : arg.fontsizes;

    //text styles
        txtXaxis[1] = wdth / 2;
        lineHeight1 = ("" !== document.querySelector('.row1').innerText) ? parseFloat(getComputedStyle(document
            .querySelector('.row1')).lineHeight) : 0;
        lineHeight2 = ("" !== document.querySelector('.row2').innerText) ? parseFloat(getComputedStyle(document
            .querySelector('.row2')).lineHeight) : 0;
        lineHeight3 = ("" !== document.querySelector('.row3').innerText) ? parseFloat(getComputedStyle(document
            .querySelector('.row3')).lineHeight) : 0;
        txtYaxis = (h8 / 2 - (lineHeight2 + lineHeight3) / 2);
        iconalign = (undefined == arg.iconalign) ? document.getElementById('iconAlign').value : arg.iconalign;

        (undefined == textalign) ? textalign = 'center': '';
        ('m' === document.getElementById('selalignhere').value) ? textalign = 'center': '';
        ('l' === document.getElementById('selalignhere').value) ? textalign = 'start': '';
        ('r' === document.getElementById('selalignhere').value) ? textalign = 'end': '';

        font = (undefined == arg.font) ? document.getElementById('selfonthereName').value : arg.font;
        text = (undefined == arg.text) ? document.getElementById('usertextbox1').value : arg.text;
        textline1 = (undefined == arg.textline1) ? document.getElementById('usertextbox1').value : arg.textline1;
        textline2 = (undefined == arg.textline2) ? document.getElementById('usertextbox2').value : arg.textline2;
        textline3 = (undefined == arg.textline3) ? document.getElementById('usertextbox3').value : arg.textline3;

        jQuery('.displaydesignnew_bck_vw').css({
            'width': wdth + 'px',
            'height': h8 + 'px',
            'background-color': '#' + backgroundColor,
            'color': '#' + color,
            'font-family': font
        });

    //remove created canvas to replace the new
        jQuery('#myCanvas2').remove();

    //canvas properties
        canvas = document.createElement('canvas');
        canvas.setAttribute("id", "myCanvas2");
        canvas.width = wdth;
        canvas.height = h8;
        ctx = canvas.getContext('2d');

        imageObj.src = (img === undefined) ? 'https://xpresalabels.com/site/wp-content/plugins/xpresalabels/img/back.png' : arg.img;
        imageObj.crossOrigin = "anonymous";


        jQuery('#displaydesignnew').css({
            'width': wdth + 'px',
            'height': h8 + 'px',
        //'background-color': '#' + backgroundColor
        });

        jQuery('.row1').css({
            'font-size': fontsize1 + 'px',
            'font-family': font
        });
        jQuery('.row2').css({
            'font-size': fontsize2 + 'px',
            'font-family': font
        });
        jQuery('.row3').css({
            'font-size': fontsize3 + 'px',
            'font-family': font
        });

        jQuery('#texts > div').css('color', '#' + color);

        var row1TextWidth = jQuery('.row1').outerWidth();
        var row2TextWidth = jQuery('.row2').outerWidth();
        var row3TextWidth = jQuery('.row3').outerWidth();

    //maxmimumLength = parseInt(row1TextWidth) + parseInt(row2TextWidth) + parseInt(row3TextWidth);
        maxmimumHeight = parseInt(lineHeight1) + parseInt(lineHeight2) + parseInt(lineHeight3);

    //if img added calculate img height and width
        (document.getElementById('seliconhere').value != '') ? imgHeight = imgWidth = 50: imgHeight = imgWidth = 0;

        maxmimumLength = Math.round(Math.max(parseFloat(row1TextWidth), parseFloat(row2TextWidth), parseFloat(
            row3TextWidth)) + imgWidth);

        var h8Sum = 0,
        newFontSizes = [],
        newf, textParentWidth, arrw;
        textParentWidth = jQuery('#texts').width();



        arrw = [parseFloat(row1TextWidth), parseFloat(row2TextWidth), parseFloat(row3TextWidth)];
        jQuery('.icon_n_txt #texts > div').each(function() {
            h8Sum = h8Sum + parseInt(jQuery(this).css('height'));
            rowHeights.push(parseInt(jQuery(this).css('height')));
        });


        if (h8Sum >= h8 - 2) {
            jQuery('.icon_n_txt #texts > div').css('line-height', h8 / 3 + 'px');
        } else {
            jQuery('.icon_n_txt #texts > div').css('line-height', 'normal');
        }

        checkNadjustText(arrw, maxmimumLength, textParentWidth, 'front');
        jQuery('#holePunchChosen').val() !== '' ? adjustHole() : '';



        jQuery('.productPrevImg').attr('class', 'productPrevImg');
        if (seliconhere == '') {

            setTimeout(function() {
                html2canvas(jQuery("#displaydesignnew"), {
                    onrendered: function(canvas) {
                        canvas.id = 'canvascr';

                        jQuery('#displaydesignnew').next('canvas').remove();
                        jQuery('#displaydesignnew').after(canvas);

                    //console.log(classV);
                        if ((classV === 'woven_label woven_labelcfv')) {
                            jQuery('.productPrevImg').attr('class', '').addClass(
                                'productPrevImg woven_label woven_labelcf');
                            setTimeout(function() {
                                jQuery('.productPrevImg').attr('class', '').addClass(
                                    'productPrevImg woven_label woven_labelcfv');
                            }, 1000);
                        } else {
                            jQuery('.productPrevImg').attr('class', '').addClass('productPrevImg ' +
                                classV);
                        }

                        jQuery('#datactdFromCanvas').val(canvas.toDataURL("image/png"));
                        jQuery('#canvas_loader').hide();

                        window.scrollTo(0, scrollPos);
                    }
                });
            }, 3000);

        } else {
            getDataUri(seliconhere, color, function(dataUri) {
                jQuery('.icon_on_label_img').attr('src', dataUri);
                var imageHeight = jQuery('.icon_n_txt .icon_on_label img').height() / 2;
                jQuery('.icon_n_txt .icon_on_label').css('top', 'calc(50% - ' + imageHeight + 'px)');

                var image_i = new Image();
                image_i.onload = function() {
                    setTimeout(function() {
                        html2canvas(jQuery("#displaydesignnew"), {
                            onrendered: function(canvas) {
                                canvas.id = 'canvascr';

                                jQuery('#displaydesignnew').next('canvas').remove();
                                jQuery('#displaydesignnew').after(canvas);

                            //console.log(classV);
                                if ((classV === 'woven_label woven_labelcfv')) {
                                    jQuery('.productPrevImg').attr('class', '').addClass(
                                        'productPrevImg woven_label woven_labelcf');
                                    setTimeout(function() {
                                        jQuery('.productPrevImg').attr('class', '')
                                        .addClass(
                                            'productPrevImg woven_label woven_labelcfv'
                                            );
                                    }, 1000);
                                } else {
                                    jQuery('.productPrevImg').attr('class', '').addClass(
                                        'productPrevImg ' + classV);
                                }

                                jQuery('#datactdFromCanvas').val(canvas.toDataURL(
                                    "image/png"));
                                jQuery('#canvas_loader').hide();

                                window.scrollTo(0, scrollPos);
                            }
                        });
                    }, 3000);
                }
                image_i.src = dataUri;

            });


        }

        if (jQuery('div#displaydesignnew_bck').hasClass('hide') == false) {
            madeBackToCanvas();
        }

    // var calH8 = 500;
    // (jQuery(window).width() >= 768) ? jQuery('.panel, .proPreview').css('height', calH8) : '';
    }

    function checkNadjustText(arrw, maxmimumLength, textParentWidth, side) {
        side = (side == 'front') ? '' : '_bck';

    //console.log(side);

        var newFontSizes = [],
        font = document.getElementById('selfonthereName').value,
        fontsize1 = (document.getElementById('textbox1' + side + 'fontVal').value == 'auto') ? 25 : document
        .getElementById('textbox1' + side + 'fontVal').value,
        fontsize2 = (document.getElementById('textbox2' + side + 'fontVal').value == 'auto') ? 25 : document
        .getElementById('textbox2' + side + 'fontVal').value,
        fontsize3 = (document.getElementById('textbox3' + side + 'fontVal').value == 'auto') ? 25 : document
        .getElementById('textbox3' + side + 'fontVal').value;
        textline1 = document.getElementById('usertextbox1' + side).value,
        textline2 = document.getElementById('usertextbox2' + side).value,
        textline3 = document.getElementById('usertextbox3' + side).value,
        row1TextWidth = getTextWidth(font, newFontSizes[1], textline1),
        row2TextWidth = getTextWidth(font, newFontSizes[2], textline2),
        row3TextWidth = getTextWidth(font, newFontSizes[3], textline3);

    //console.log(maxmimumLength);
    //console.log(textParentWidth);

        if (maxmimumLength > textParentWidth) {
            for (var i = 0; i <= 2; i++) {
                var trgtfntsz = parseFloat(jQuery('.row' + (i + 1) + side).css('font-size'));
                newFontSizes[i + 1] = adjustText('.row' + (i + 1) + side, trgtfntsz, i + 1, side);
            }
            newFontSizes[1] = undefined == newFontSizes[1] ? fontsize1 : newFontSizes[1];
            newFontSizes[2] = undefined == newFontSizes[2] ? fontsize2 : newFontSizes[2];
            newFontSizes[3] = undefined == newFontSizes[3] ? fontsize2 : newFontSizes[3];

            arrw = [parseFloat(row1TextWidth), parseFloat(row2TextWidth), parseFloat(row3TextWidth)];
            maxmimumLength = Math.round((Math.max(arrw[0], arrw[1], arrw[2])));

            if (maxmimumLength < textParentWidth) {
                checkNadjustText(arrw, maxmimumLength, textParentWidth, side);
            }
        }

        function adjustText(selector, fontsize, num, side) {
            var selectedValue = jQuery('#textbox' + num + 'Font' + side).val();
            if (selectedValue === 'auto') {
                for (var i = fontsize; i > 0; i--) {
                    fontsize = fontsize - 1;
                    var textWdth = parseFloat(getTextWidth(font, fontsize, jQuery(selector).text()));
                    textWdth = jQuery(selector).width();
                    if (textWdth >= textParentWidth) {
                        fontsize = (fontsize == 0) ? 1 : fontsize;
                        jQuery(selector).css('font-size', fontsize + 'px');
                        var newf = parseFloat(jQuery(selector).css('font-size'));
                    } else {

                    }
                }
                return newf;
            } else {
            //return newf;
            }

        }
    }

/********* ON document ready **********/
    jQuery(document).on('ready', function() {
        jQuery('.dwn-pdf-btn a').click(function() {
            jQuery("input[name=labelsize]").val(jQuery('#custom_data_1').val());
            jQuery("input[name=sizetagm]").val(jQuery('input#sizetag').val());
            jQuery("input[name=labelcolor]").val(jQuery('#labelcolor').text());
            jQuery("input[name=labellogocolor]").val(jQuery('#logocolor').text());
            jQuery("input[name=labelfont]").val(jQuery('#designfont').text());
            jQuery("input[name=labeltotalprice]").val('USD' +
                jQuery('#totalpricelabeladd2crt').val());
            jQuery("input[name=labelsymbol]").val(jQuery('#symbolhere').text());
            jQuery("input[name=shape]").val(jQuery('#cutnfolddiv').text());

            jQuery("input[name='labmaterial']").val(jQuery('input#materialTypeChosen').val());
            jQuery("input[name='labthickness']").val(jQuery('#thickChosen').val());
            jQuery("input[name='labprintOption']").val(jQuery('#printOptionChosen').val());
            jQuery("input[name='labholePunch']").val(jQuery('#holePunchChosen').val());
            jQuery("input[name='labholeLocation']").val(jQuery('#holeLocation').val());
            jQuery("input[name='labsurface']").val(jQuery('#surfaceChosen').val());
            jQuery("input[name='labstring']").val(jQuery('#stringColorChosen').val());
            jQuery("input[name='labsafetypincolors']").val(jQuery('#safetyPin').val());
            jQuery("input[name='labgrommets']").val(jQuery('#grommetsChosen').val());
            jQuery("input[name='labfoils']").val(jQuery('#foilChosen').val());

            jQuery("input[name=Quantity]").val(jQuery('#quantity1').text());
            jQuery("input[name=displaydesigns]").val(jQuery('#displaydesign div img').attr('src'));
        });

        jQuery('.close').click(function() {
            jQuery('div#alertFor').removeClass('open');
        });

        document.getElementById("textbox1").value = "";

        selectThickness('.imgWrapW.default', '300gr', 0);
        selectSideOptions('#printOptions .default', 'One Sided');
        selectHoles('#holePunchs .default', '1/8', 0);
        selectHoleLocation('#holeLocations .default', 'Left - Center');
        selectSurface('#Surfaces .default', 'Flat', 0);
        selectFoil('.NoFoil.default', 'No Foil', 0);

        jQuery('.icon_on_label').prependTo('.icon_n_txt');

        setPricingTable();

        jQuery('#pantoneBG').ColorPicker({
            onShow: function(colpkr) {
                jQuery(colpkr).fadeIn(500);
                return false;
            },
            onHide: function(colpkr) {
                jQuery(colpkr).fadeOut(500);
                return false;
            },
            onChange: function(hsb, hex, rgb) {
                jQuery('#pantoneBG').css('backgroundColor', '#' + hex);
                jQuery('#pantoneBG').css('color', invertColor(hex, 'true'));

                document.getElementById("custom_data_2").value = '#' + hex;
                document.getElementById("labelcolor").innerHTML = '#' + hex;

                document.getElementById('userbgcolor').value = hex;
                jQuery('#pantoneBG').val("RGB: " + rgb.r + ',' + rgb.g + ',' + rgb.b);
                jQuery('#backGroundColors .colorSelection span').removeClass('selected');
            },
            onHide: function(hsb, hex, rgb) {
            //submitDesign();
                var arr = {
                    backgroundColor: hex
                }
                createLogoCanvas(arg);
            }

        });
        jQuery('#pantoneText').ColorPicker({

            onShow: function(colpkr) {
                jQuery(colpkr).fadeIn(500);
                return false;
            },
            onHide: function(colpkr) {
                jQuery(colpkr).fadeOut(500);
                return false;
            },
            onChange: function(hsb, hex, rgb) {
                jQuery('#pantoneText').css('backgroundColor', '#' + hex);
                jQuery('#pantoneText').css('color', invertColor(hex, 'true'));

                document.getElementById("custom_data_3").value = '#' + hex;
                document.getElementById("logocolor").innerHTML = '#' + hex;

                document.getElementById('usertextcolor').value = hex;
                jQuery('#pantoneText').val("RGB: " + rgb.r + ',' + rgb.g + ',' + rgb.b);
                jQuery('#textColors .colorSelection span').removeClass('selected');
            },
            onHide: function(hsb, hex, rgb) {
            //submitDesign();
                var arr = {
                    color: hex
                }
                createLogoCanvas(arg);
            }
        });

        var arg = {};
        createLogoCanvas(arg);

        jQuery('.designtoolbutton').click(function() {
        //alert('clicked');
            var custom_data_1 = document.getElementById("custom_data_1").value;
            var custom_data_2 = document.getElementById("custom_data_2").value;
            var custom_data_3 = document.getElementById("custom_data_3").value;
            var custom_data_4 = document.getElementById("custom_data_4").value;
            var custom_data_5 = document.getElementById("custom_data_5").value;
            var custom_data_6 = document.getElementById("custom_data_6").value;
            var custom_data_7 = document.getElementById("custom_data_7").value;
            var custom_data_8 = document.getElementById("custom_data_8").value;
            var custom_data_9 = document.getElementById("custom_data_9").value;
            var custom_data_10 = document.getElementById("custom_data_10").value;

            var materialChosen = jQuery('input#materialTypeChosen').val();
            var thicknessChosen = jQuery('input#thickChosen').val();
            var printOptionChosen = jQuery('input#printOptionChosen').val();
            var holePunchChosen = jQuery('input#holePunchChosen').val();
            var holeLocation = jQuery('input#holeLocation').val();
            var stringColorChosen = jQuery('input#stringColorChosen').val();
            var safetyPin = jQuery('input#safetyPin').val();
            var grommetsChosen = jQuery('input#grommetsChosen').val();
            var foilChosen = jQuery('input#foilChosen').val();
            var surfaceChosen = jQuery('input#surfaceChosen').val();


            var sizetag = document.getElementById("sizetag").value;
            var ajaxurl = 'https://xpresalabels.com/site/wp-admin/admin-ajax.php';
            jQuery.ajax({
            url: ajaxurl, //AJAX file path - admin_url('admin-ajax.php')
            type: "POST",
            data: {
                //action name
                action: 'wdm_add_user_custom_data_options',
                id: 37583,
                custom_data_1: custom_data_1,
                custom_data_2: custom_data_2,
                custom_data_3: custom_data_3,
                custom_data_4: custom_data_4,
                custom_data_5: custom_data_5,
                custom_data_6: custom_data_6,
                custom_data_7: custom_data_7,
                custom_data_9: custom_data_9,
                custom_data_10: custom_data_10,
                custom_data_8: custom_data_8,
                sizetag: sizetag,
                materialChosen: materialChosen,
                thicknessChosen: thicknessChosen,
                printOptionChosen: printOptionChosen,
                holePunchChosen: holePunchChosen,
                holeLocation: holeLocation,
                stringColorChosen: stringColorChosen,
                safetyPin: safetyPin,
                grommetsChosen: grommetsChosen,
                foilChosen: foilChosen,
                surfaceChosen: surfaceChosen,
            },
            async: false,
            success: function(data) {
                //console.log(data);
            }
        });
        });

                        // jQuery('.panel-heading').click(function() {
                        //     var arr = {};
                        //     createLogoCanvas(arr);
                        //     var trgt = jQuery(this).attr('data-target');
                        //     trgt == 'labels' ? (createLogoCanvas(arr), submitDesign(2)) : '';
                        //     jQuery('div[data-div="' + trgt + '"]').show().siblings().not('.cart-sec, .guideArea').hide();
                        // });

        jQuery('.panel-headings-wrapper').owlCarousel({
            loop: false,
            margin: 0,
            nav: true,
            dots: false,
            responsive: {
                0: {
                    items: 2
                },
                600: {
                    items: 3
                },
                1000: {
                    items: 4,
                },
                1200: {
                    items: 6,
                },
                1400: {
                    items: 6,
                }
            }
        });
    });

/* Tab openning */
jQuery(document.body).on('click', '.symbol-click', function() {
    var _this = jQuery(this);
    var _this_cat = _this.data('cat');
    //jQuery('.symbol-click').removeClass('selected');
    _this.addClass('selected').siblings().removeClass('selected');
    jQuery('#' + _this_cat).css('display', 'flex');
    jQuery('#' + _this_cat).siblings('div.designerIcons').css('display', 'none');

});

/* on scroll */
var scroll = true,
start_time, request_time, count = 0;
jQuery( document ).ready(function() {
    (scroll == false) ? jQuery('div#folds').prepend("<div class='imgDesignPlaceholder'></div>"): "";
    var _scrolled = jQuery(this).scrollTop();
    //var _scrolledDiv = jQuery('.aboutTesti').offset().top - jQuery('.aboutTesti').outerHeight();
    jQuery('.panel:not(.panel-primary)').css('display', 'none');
    scroll = true;
    start_time = new Date().getTime();
        /* Load folds */
    jQuery.ajax({
        url: 'https://xpresalabels.com/site/wp-admin/admin-ajax.php',
        type: 'post',
        cache: true,
        datattype: 'json',
        data: {
            action: 'load_shapes_hangtags',
            scroll: scroll

        },
        beforeSend: function() {

        },
        success: function(data) {
            jQuery('#folds').html(data);
                //default shape select
            //selectshape(4, '800', '700', 'hangtag_square', 'Square', '#folds .default');
            selectshape(4, '800', '700', 'hangtag_rectangle', 'Rectangle', '#folds .default')

            jQuery('#folds').imagesLoaded(function() {
                jQuery('.imgDesignPlaceholder').remove();
                showMore('hide', '#folds');
            });

                loadFunction('load_Sizes_hangtag', '#customLabels'); //load Custom Label Sizes
                loadFunction('load_materials', '#materials .materialSelection'); //load materials
                loadFunction('load_backGroundColors',
                    '#backGroundColors .colorSelection'); //load background colors
                loadFunction('load_thickness', '#thickness .thicknessSelection'); //load text colors


                /* Load fonts */
                jQuery.ajax({
                    url: 'https://xpresalabels.com/site/wp-admin/admin-ajax.php',
                    type: 'post',
                    cache: true,
                    data: {
                        action: 'my_action',
                        callRequest: 'myfonts'
                    },
                    beforeSend: function() {
                        jQuery('#fontsLoader').closest('.panel-body').css('position',
                            'relative');
                        jQuery('#fontsLoader').closest('.panel-body').find(
                            '.imgDesignPlaceholder').remove();
                        jQuery('#fontsLoader').closest('.panel-body').prepend(
                            "<div class='imgDesignPlaceholder'></div>")
                    },
                    success: function(data) {

                        jQuery('#fontsLoader').closest('.panel-body').find(
                            '.imgDesignPlaceholder').delay(1000).queue(function() {
                                jQuery(this).remove();
                            });
                            if (data == 'fail') {
                                alert('No records found');
                            } else {
                                jQuery('#fontsLoader').html(data);
                            }
                        }
                    });

                /* Load symbols */
                jQuery.ajax({
                    url: 'https://xpresalabels.com/site/wp-admin/admin-ajax.php',
                    type: 'post',
                    cache: true,
                    data: {
                        action: 'load_my_symbols',
                        callRequest: 'mysymbols'
                    },
                    beforeSend: function() {
                        // setting a timeout
                        jQuery('#fontsLoader').closest('.panel-body').css('position',
                            'relative');
                        jQuery('#fontsLoader').closest('.panel-body').find(
                            '.imgDesignPlaceholder').remove();
                        jQuery('#fontsLoader').closest('.panel-body').prepend(
                            "<div class='imgDesignPlaceholder'></div>")
                    },
                    success: function(data) {
                        jQuery('#fontsLoader').closest('.panel-body').find(
                            '.imgDesignPlaceholder').delay(1000).queue(function() {
                                jQuery(this).remove();
                            });
                            if (data == 'fail') {
                                alert('No records found');
                            } else {
                                jQuery('.iconSection').html(data);
                            }
                        }
                    });
            }
        });

});

function loadFunction(action, selector) {
    jQuery.ajax({
        url: 'https://xpresalabels.com/site/wp-admin/admin-ajax.php',
        type: 'post',
        cache: true,
        datattype: 'json',
        data: {
            action: action
        },
        success: function(data) {
            jQuery(selector).html(data);
            (action == 'load_materials') ? selectMaterial('figure.materialSelect.default', 'Flat', 0): '';
            showMore('hide', selector);
            var options = "";

            if (options != '') {
                console.log(options[0]);
                request_time = new Date().getTime() - start_time;

                jQuery(selector).imagesLoaded(function() {
                    addEditedOption(options);
                    console.log(count);
                    (count === 3) ? setTimeout(function() {
                        jQuery('.loading').removeClass('loading');
                    }, request_time): '';
                    count = count + 1;
                });
            } else {
                jQuery('.loading').removeClass('loading');
            }

            'load_materials' === action ? selectMaterial('#materials .default', 'Glossy', 0) : '';
        }
    });
}

function showMore(ev, selector) {
    //('#customLabels' === selector) ? adjustImageRatio() : '';
    var h8 = jQuery(selector + ' .panel-body-desig-order > div > div').outerHeight();
    (ev === 'hide') ? (
        jQuery(selector + ' .divider').each(function() {
            jQuery(this).slideUp();
        }),
        jQuery(selector + ' p.more-types > a').text('Show More').attr('onclick', "showMore('show' , '" + selector +
            "')")
        ) : (
        jQuery(selector + ' .divider').each(function() {
            jQuery(this).slideDown();
        }),
        jQuery(selector + ' p.more-types > a').text('Show Less').attr('onclick', "showMore('hide' , '" + selector +
            "')")
        );

    }

/* next */
    function nxt(d) {
    //alert();
        jQuery('.rght-add-to-cart-sec').show();

        var parent = jQuery(d).closest(".panel").attr('data-div');
        var arr = {};
    //parent == 'folds' ? (createLogoCanvas(arr), submitDesign(2)) : '';
        createLogoCanvas(arr);
        submitDesign(2);
        jQuery('div[data-target="' + parent + '"]').parent().next().find('.panel-heading').click();

        var myDiv = jQuery(d).closest(".panel").next('.panel');
        myDiv.animate({
            scrollTop: 0
        }, "fast");

        var owl = jQuery('.panel-headings-wrapper');
        owl.trigger('next.owl.carousel');
    }

    function repair() {
        var arr = {};
        createLogoCanvas(arr);
        submitDesign(2);
    }
    /* next */
    function nxt_new() {
        var lavel_size_select=jQuery('#custom_data_1').val();
        if(lavel_size_select==''){
            alert('Please select size to proceed');
            jQuery('.panel-heading').removeClass('active-h');
            jQuery('.mobilestep1').addClass("active-h");
            jQuery('.step1').addClass("active-h");
            jQuery('.customLabelSizes').show();
            jQuery('.customLabelSizes').prev("h4").addClass("section-open");
            jQuery('html, body').animate({
             scrollTop: jQuery(".customLabelSizes").offset().top-300
         }, 1000);
            return false;
        }



        var current_step=jQuery('#current_step').val();
        var next_step=parseInt(current_step)+1;

        var materialType=jQuery('#materialTypeChosen').val();
        var thickness=jQuery('#thickChosen').val();
        if(materialType=='' && next_step>2){
          alert('Please select material type');
          jQuery('.panel-heading').removeClass('active-h');
          jQuery('.mobilestep2').addClass("active-h");
          jQuery('.step2').addClass("active-h");
          jQuery('.materials_section').show();
          jQuery('.materials_section').prev("h4").addClass("section-open");
          jQuery('html, body').animate({
             scrollTop: jQuery(".materials_section").offset().top-300
         }, 1000);
          return false;
      }

      if(thickness=='' && next_step>2){
        alert('Please select thikness');
        jQuery('.panel-heading').removeClass('active-h');
        jQuery('.mobilestep2').addClass("active-h");
        jQuery('.step2').addClass("active-h");
        jQuery('.thickness_section').show();
        jQuery('.thickness_section').prev("h4").addClass("section-open");
        jQuery('html, body').animate({
         scrollTop: jQuery(".thickness_section").offset().top-300
     }, 1000);
        return false;
    }

    var background =jQuery('#custom_data_2').val();
    if(background=='' && next_step>4){
      alert('Please select background color to proceed');
      jQuery('.panel-heading').removeClass('active-h');
      jQuery('.mobilestep4').addClass("active-h");
      jQuery('.step4').addClass("active-h");
      jQuery('#backGroundColors').show();
      jQuery('#backGroundColors').prev("h4").addClass("section-open");
      jQuery('html, body').animate({
       scrollTop: jQuery("#backGroundColors").offset().top-400
   }, 1000);
      return false;
  }

  var holePunch=jQuery('#holePunchChosen').val();
  var holeLocation=jQuery('#holeLocation').val();
  var surface=jQuery('#surfaceChosen').val();

  if(holePunch=='' && next_step>5){
      alert('Please select hole location');
      jQuery('.panel-heading').removeClass('active-h');

      jQuery('.step5').trigger("click");

      jQuery('.mobilestep5').trigger("click");
      jQuery('.mobilestep5').addClass("active-h");
      jQuery('.step5').addClass("active-h");
      jQuery('.section_hole_punch').show();
      jQuery('.section_hole_punch').prev("h4").addClass("section-open");
      jQuery('html, body').animate({
       scrollTop: jQuery(".section_hole_punch").offset().top-400
   }, 1000);
      return false;
  }
  if(holeLocation=='' && next_step>5){
      alert('Please select hole location');
      jQuery('.panel-heading').removeClass('active-h');

      jQuery('.step5').trigger("click");

      jQuery('.mobilestep5').trigger("click");
      jQuery('.mobilestep5').addClass("active-h");
      jQuery('.step5').addClass("active-h");
      jQuery('.section_hole_location').show();
      jQuery('.section_hole_location').prev("h4").addClass("section-open");
      jQuery('html, body').animate({
       scrollTop: jQuery(".section_hole_location").offset().top-400
   }, 1000);
      return false;
  }

  if(surface=='' && next_step>5){
      alert('Please select surface');
      jQuery('.panel-heading').removeClass('active-h');

      jQuery('.step5').trigger("click");

      jQuery('.mobilestep5').trigger("click");
      jQuery('.mobilestep5').addClass("active-h");
      jQuery('.step5').addClass("active-h");
      jQuery('.section_surface').show();
      jQuery('.section_surface').prev("h4").addClass("section-open");
      jQuery('html, body').animate({
       scrollTop: jQuery(".section_surface").offset().top-400
   }, 1000);
      return false;
  }


  jQuery('.step'+next_step).trigger('click');
  jQuery('.mobilestep'+next_step).addClass('active-h');


  jQuery('#current_step').val(next_step);


  if(next_step>1){
      jQuery('.btn-prev').removeAttr('disabled');
  }
  else{
    jQuery('.btn-prev').prop("disabled", true);

}

if(next_step >= 6){
   jQuery('.btn-prev-next').hide();
   jQuery('.btn-canvas-submit').show();
}
else{
    jQuery('.btn-prev-next').show();
    jQuery('.btn-canvas-submit').hide();
}
console.log('.step'+next_step);

}


function prev_new() {
 var current_step=jQuery('#current_step').val();
 var prev_step=parseInt(current_step)-1;
 jQuery('.step'+prev_step).trigger('click');
 jQuery('.mobilestep'+prev_step).addClass('active-h');
 jQuery('#current_step').val(prev_step);
 if(prev_step>1){
  jQuery('.btn-prev').removeAttr('disabled');
}
else{
    jQuery('.btn-prev').prop("disabled", true);
    
}
if(prev_step==8 || prev_step>8){
   jQuery('.btn-prev-next').hide();
   jQuery('.btn-canvas-submit').show();
}
else{
    jQuery('.btn-prev-next').show();
    jQuery('.btn-canvas-submit').hide();
}
console.log(prev_step);

}


jQuery(document.body).on('click', '.panel-heading', function() {
//   return false;
 var step_id=jQuery(this).data('id');
      //alert(step_id);
 var lavel_size_select=jQuery('#custom_data_1').val();
 if(lavel_size_select=='' && step_id>1){
    alert('Please select size to proceed');
    jQuery('.panel-heading').removeClass('active-h');
    jQuery('.step1').trigger("click");
    jQuery('.mobilestep1').trigger("click");
    jQuery('.mobilestep1').addClass("active-h");
    jQuery('.step1').addClass("active-h");
    jQuery('.customLabelSizes').show();
    jQuery('.customLabelSizes').prev("h4").addClass("section-open");
    jQuery('html, body').animate({
       scrollTop: jQuery(".customLabelSizes").offset().top-400
   }, 1000);
    return false;
}
var materialType=jQuery('#materialTypeChosen').val();
var thickness=jQuery('#thickChosen').val();
var holePunch=jQuery('#holePunchChosen').val();
var holeLocation=jQuery('#holeLocation').val();
var surface=jQuery('#surfaceChosen').val();



if(materialType=='' && step_id>2){
  alert('Please select material type');
  jQuery('.panel-heading').removeClass('active-h');
  jQuery('.mobilestep2').addClass("active-h");
  jQuery('.step2').addClass("active-h");
  jQuery('.materials_section').show();
  jQuery('.materials_section').prev("h4").addClass("section-open");
  jQuery('html, body').animate({
     scrollTop: jQuery(".materials_section").offset().top-300
 }, 1000);
  return false;
}

if(thickness=='' && step_id>2){
    alert('Please select thikness');
    jQuery('.panel-heading').removeClass('active-h');
    jQuery('.mobilestep2').addClass("active-h");
    jQuery('.step2').addClass("active-h");
    jQuery('.thickness_section').show();
    jQuery('.thickness_section').prev("h4").addClass("section-open");
    jQuery('html, body').animate({
     scrollTop: jQuery(".thickness_section").offset().top-300
 }, 1000);
    return false;
}

var background =jQuery('#custom_data_2').val();
if(background=='' && step_id>4){
  alert('Please select background color to proceed');
  jQuery('.panel-heading').removeClass('active-h');

  jQuery('.step4').trigger("click");

  jQuery('.mobilestep4').trigger("click");
  jQuery('.mobilestep4').addClass("active-h");
  jQuery('.step4').addClass("active-h");
  jQuery('#backGroundColors').show();
  jQuery('#backGroundColors').prev("h4").addClass("section-open");
  jQuery('html, body').animate({
   scrollTop: jQuery("#backGroundColors").offset().top-400
}, 1000);
  return false;
}
if(holePunch=='' && step_id>5){
  alert('Please select hole location');
  jQuery('.panel-heading').removeClass('active-h');

  jQuery('.step5').trigger("click");

  jQuery('.mobilestep5').trigger("click");
  jQuery('.mobilestep5').addClass("active-h");
  jQuery('.step5').addClass("active-h");
  jQuery('.section_hole_punch').show();
  jQuery('.section_hole_punch').prev("h4").addClass("section-open");
  jQuery('html, body').animate({
   scrollTop: jQuery(".section_hole_punch").offset().top-400
}, 1000);
  return false;
}
if(holeLocation=='' && step_id>5){
  alert('Please select hole location');
  jQuery('.panel-heading').removeClass('active-h');

  jQuery('.step5').trigger("click");

  jQuery('.mobilestep5').trigger("click");
  jQuery('.mobilestep5').addClass("active-h");
  jQuery('.step5').addClass("active-h");
  jQuery('.section_hole_location').show();
  jQuery('.section_hole_location').prev("h4").addClass("section-open");
  jQuery('html, body').animate({
   scrollTop: jQuery(".section_hole_location").offset().top-400
}, 1000);
  return false;
}

if(surface=='' && step_id>5){
  alert('Please select surface');
  jQuery('.panel-heading').removeClass('active-h');

  jQuery('.step5').trigger("click");

  jQuery('.mobilestep5').trigger("click");
  jQuery('.mobilestep5').addClass("active-h");
  jQuery('.step5').addClass("active-h");
  jQuery('.section_surface').show();
  jQuery('.section_surface').prev("h4").addClass("section-open");
  jQuery('html, body').animate({
   scrollTop: jQuery(".section_surface").offset().top-400
}, 1000);
  return false;
}

jQuery('#current_step').val(step_id);
var arr = {};
createLogoCanvas(arr);
submitDesign(2);
var trgt = jQuery(this).attr('data-target');
jQuery('div[data-div="' + trgt + '"]').show().siblings().not('.cart-sec, .guideArea').hide();
if(step_id>1){
  jQuery('.btn-prev').removeAttr('disabled');
}
else{
    jQuery('.btn-prev').prop("disabled", true);
    
}
if(step_id==6 || step_id>6){
   jQuery('.btn-prev-next').hide();
   jQuery('.btn-canvas-submit').show();
}
else{
    jQuery('.btn-prev-next').show();
    jQuery('.btn-canvas-submit').hide();
}

});

jQuery(document.body).on('click', '.btn-canvas-submit', function() {
    jQuery('.proPreview-deg-ord-print').addClass('model-preview');
    jQuery('.add-amount').addClass('change-quantity');
    jQuery('.close-preview').show();
    jQuery('.btn-cart-canvas').show();
    jQuery('.btn-prev-next').hide();
    jQuery('.btn-canvas-submit').hide();

});
jQuery(document.body).on('click', '.close-preview', function() {
    jQuery('.proPreview-deg-ord-print').removeClass('model-preview');
    jQuery('.add-amount').removeClass('change-quantity');
    jQuery('.btn-cart-canvas').hide();
    jQuery('.btn-prev-next').show();
    jQuery('.btn-canvas-submit').hide();
    jQuery('.close-preview').hide();
    

});

//**** Submit Ajax ****//
function submitDesign(v, d, vn) {
    jQuery('.windowBody').addClass('loads');

    jQuery('#customLabels').append('<div class="imgDesignPlaceholder"></div>');

    iconSize = document.getElementById("iconSize").value;
    valtxcolo = document.getElementById("usertextcolor").value;
    val = document.getElementById("setselectsize").value;
    colorval = document.getElementById("userbgcolor").value;
    mytext1 = document.getElementById("usertextbox1").value;
    mytext2 = document.getElementById("usertextbox2").value;
    mytext3 = document.getElementById("usertextbox3").value;
    seliconhere = document.getElementById("seliconhere").value;
    varalign = document.getElementById("selalignhere").value;
    userwidth = document.getElementById("selectedwidth").value;
    userheight = document.getElementById("selectedheight").value;
    calculatedSize = document.getElementById("calculatedSize").value;
    fontpadTop = document.getElementById("fontpadTop").value;
    lineSpecingC = document.getElementById("lineSpecingC").value;
    lineSpecingCLast = document.getElementById("lineSpecingCLast").value;
    line1align = document.getElementById("alignline1").value;
    line2align = document.getElementById("alignline2").value;
    line3align = document.getElementById("alignline3").value;
    varfonthere = document.getElementById("selfonthere").value;
    //additionalcomm = document.getElementById("addicomm").value;
    cutnfoldoption = document.getElementById("cutnfolddivforajax").value;
    iconPosition = parseInt(document.getElementById("iconPosition").value);

    if (iconPosition == 0 || isNaN(iconPosition)) {
        iconPosition = 10;
    }

    //console.log(userwidth + " / " + iconPosition);
    var pricebackcolcal = '0';
    var priceiconcal = '0';
    var prcietextcal = '0';

    pricebackcolcal = document.getElementById("backgroungcol").value;
    priceiconcal = document.getElementById("iconpricedisp").value;
    prcietextcal = document.getElementById("usertextcolorprcie").value;

    /*checking font*/
    var firstcustomfonts = document.getElementById("textbox1fontVal").value;
    if (firstcustomfonts == '') {
        firstcustomfonts = 0;
    }
    var secondcustomfonts = document.getElementById("textbox2fontVal").value;
    if (secondcustomfonts == '') {
        secondcustomfonts = 0;
    }
    var thirdcustomfonts = document.getElementById("textbox3fontVal").value;
    if (thirdcustomfonts == '') {
        thirdcustomfonts = 0;
    }


    if (pricebackcolcal == '') {
        pricebackcolcal = 0;
    }
    if (priceiconcal == '') {
        priceiconcal = 0;
    }
    if (prcietextcal == '') {
        prcietextcal = 0;
    }

    var otherprice = parseFloat(pricebackcolcal) + parseFloat(priceiconcal) + parseFloat(prcietextcal);
                                    var myinputprice = '';
        var pricequantity = ;
                                        var myinputprice = '';
        var pricequantity = ;
        
    var quantityforpdfwldo = document.getElementById("totalquantity").value;
    var priceperlabelforpdfwldo = document.getElementById("unitpricehere").value;
    var totalpricelabelpdfwldo = document.getElementById("totalpricelabeladd2crt").value;

    /*if (quantityforpdfwldo != '' && priceperlabelforpdfwldo != '') {
        var totalpricelabelpdfwldo = quantityforpdfwldo * priceperlabelforpdfwldo;
    }*/


    /*********** merge two canvas ***************/
    var dataURL;
    if (jQuery('#displaydesignnew_bck').hasClass('show') && jQuery('#canvascr').width() > 0) {
        //console.log('ankan');
        var canvasFront = document.getElementById('canvascr');


        var newCanvas = document.createElement('canvas');
        newCanvas.id = 'newCanvas';
        newCanvas.width = canvasFront.width;
        newCanvas.height = canvasFront.height * 2 + 10;
        var ctxN = newCanvas.getContext('2d');
        ctxN.fillStyle = "#FFF";
        ctxN.fillRect(0, 0, canvasFront.width, canvasFront.height);
        ctxN.drawImage(canvasFront, 0, 0);

        var ctxN2 = newCanvas.getContext('2d');
        var canvasBack = document.getElementById('canvascr_bck');
        ctxN2.drawImage(canvasBack, 0, canvasBack.height);

        //ctxF.drawImage(ctxB, canvasFront.width, canvasFront.height*2);

        dataURL = newCanvas.toDataURL("image/png");
        jQuery('#datactdFromCanvas').val(dataURL);
        //var link = document.createElement('a');
        //link.download = "merged.png";
        //link.href = newCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
        //link.click();
    } else {
        dataURL = '';
    }

    /*text color for pdf*/
    //var textcolforpdfsend = document.getElementById("textcolforpdf").value;
    var backgroungcol1 = document.getElementById("userbgcolor").value;
    var textcolforpdfsend = document.getElementById("usertextcolor").value;
    var9a = document.getElementById("custom_data_9").value;
    var10a = document.getElementById("custom_data_10").value;
    var sizes = userwidth + 'x' + userheight;
    jQuery.ajax({
        url: 'https://xpresalabels.com/site/wp-admin/admin-ajax.php',
        type: 'post',
        data: {
            action: 'my_action_hangtag',
            keyword: val,
            size: sizes,
            usertext1: mytext1,
            usertext2: mytext2,
            usertext3: mytext3,
            selectedwidth: userwidth,
            selectedheight: userheight,
            colorhere: colorval,
            textcolorhere: valtxcolo,
            selectedicon: seliconhere,
            fontsize: calculatedSize,
            topSpace: fontpadTop,
            lineSpecing: lineSpecingC,
            lineSpecingLast: lineSpecingCLast,
            cutnfoldoptionsend: cutnfoldoption,
            iconsize: iconSize,
            alignment1: line1align,
            alignment2: line2align,
            alignment3: line3align,
            selectedfont: varfonthere,
            quantityforpdfwldopdf: quantityforpdfwldo,
            priceperlabelforpdfwldopdf: priceperlabelforpdfwldo,
            totalpricelabelpdfwldopdf: totalpricelabelpdfwldo,
            colorbackghere: backgroungcol1,
            textcolforpdfsend1: textcolforpdfsend,
            iconAlign: iconPosition,
            //additionalcompas: additionalcomm,
            extravalue: "Sandip",
            firstcustomfontsn: firstcustomfonts,
            secondcustomfontsn: secondcustomfonts,
            thirdcustomfontsn: thirdcustomfonts,
            myvar9here: var9a,
            myvar10here: var10a,
            sizetag: jQuery('input#sizetag').val(),
            dataFromCanvas: jQuery('#datactdFromCanvas').val(),
            imgMerged: dataURL
        },
        beforeSend: function() {
            //setting a timeout
            jQuery('#displaydesign').closest('.windowBody').find('.imgDesignPlaceholder').remove();
            jQuery('#displaydesign').closest('.windowBody').prepend(
                "<div class='imgDesignPlaceholder'></div>");
        },
        success: function(data) {
            console.log(JSON.parse(data));

            var img = new Image();
            img.src = JSON.parse(data);
            img.onerror = function() {
                alert(
                    'There is an error saving your image, please refresh your browser and retry choosing the options'
                    );
                location.reload();
                return false;
            }

            jQuery('input[name="imagelogo"]').val(JSON.parse(data));
            if (data == 'fail') {
                alert('No records found');
            } else {
                jQuery('#displaydesign').html(data);
                if (v === 1) {
                    priceandallgen(vn);
                } else {
                    jQuery('#displaydesign').closest('.windowBody').find('.imgDesignPlaceholder').delay(
                        1000).queue(function() {
                            jQuery(this).remove();
                        });
                        jQuery('.windowBody').removeClass('loads');
                    }
                }
                (flagD == 'ok') ? adjustImageRatio(): '';

            //show hide shapes
                var data6 = document.getElementById("custom_data_6").value;
                jQuery('#' + data6).show().siblings().not('.btn-grp, h4.panel-title').hide();
                jQuery('.imgDesignPlaceholder').remove();
            }
        });
}

//all images loaded count function
jQuery(document).ready(function($){
    $.fn.extend({
        imagesLoaded: function(callback, cycling) {
            var i, ic,
            c = true,
            $this = $(this),
            t = $this.find('img').andSelf(),
            l = t.length,
            img = [];
            for (i = 0; i < l; i++) {
                if (t[i].tagName === "IMG") {

                    ic = ('fileSize' in t[i] && t[i].fileSize < 0 && t[i].count > 10) ? true : t[i]
                    .complete;

                    c = (c && ic && t[i].height !== 0); // complete flag

                    if (ic === false) {
                        img.push(t[i]);
                        t[i].count = (t[i].count || 0) + 1;
                    }
                }
            }
            if (c) {
                if (typeof callback === "function") {
                    callback();
                }
            } else {
                setTimeout(function() {
                    $(img).imagesLoaded(callback, true);
                }, 200);
            }
            // maintain chainability
            if (!cycling) {
                return $this;
            }
        }
    });
});

var a = [];

function saveForLater(p) {
    var arr = {};
    createLogoCanvas(arr);
    submitDesign(2);

    var foldOption = jQuery('div#folds .selected > img').attr('data-arr');

    var labelSizw = jQuery('.customLabelSizes .col-lg-4.col-md-4.col-sm-4.col-xs-6.selected').attr('data-arr');

    var text1 = jQuery('input#textbox1').val();
    var text2 = jQuery('input#textbox2').val();
    var text3 = jQuery('input#textbox3').val();
    var textAlign = jQuery('div#inputTexts .algn-sec .selected').parent().index() + 1;

    var text1Size = jQuery('select#textbox1Font').val();
    var text2Size = jQuery('select#textbox2Font').val();
    var text3Size = jQuery('select#textbox3Font').val();

    var font = jQuery('.fontWrapper .selected').index() + 1;

    var backColor = (jQuery('#backGroundColors span.colorContainer.selected').length > 0) ? jQuery(
        '#backGroundColors span.colorContainer.selected').index() + 1 : jQuery('input#userbgcolor').val();

    var textColor = (jQuery('#textColors span.colorContainer.selected').length > 0) ? jQuery(
        '#textColors span.colorContainer.selected').index() + 1 : jQuery('input#usertextcolor').val();

    var symbolTitleClick = jQuery('.designerIconsCat .selected').index() + 1;
    var symbolClick = jQuery('.iconSection > div > a.selected').attr('data-arr');
    var iconAlign = jQuery('.algn-sec.algn-sec-icon.col-lg-4 li .selected').parent().index() + 1;

    var material = jQuery('figure.materialSelect.selected').parent().index() + 1;

    var thickness = jQuery('.imgWrapW.selected').index() + 1;

    var printOption = jQuery('.oneSide.selected').parent().index() + 1;

    var holePunch = jQuery('div#holeLocations .selected').index() + 1;

    var surface = jQuery('div#Surfaces .selected').index() + 1;

    var string = jQuery('.strings > ul > li').index() + 1;

    var safetypin = jQuery('.choosePins ul li').index() + 1;
    var safetypincolors = jQuery('.SafetyPinColors > ul > li').index() + 1;

    var grommets = jQuery('.grommets > ul > li').index() + 1;

    var foils = jQuery('.foils > ul > li').index() + 1;

    var quantity = jQuery('input#totalquantity').val();

    var arrToSave_hd = [];
    arrToSave_hd.push({
        foldOption: parseInt(foldOption),
        labelSizw: labelSizw,
        text1: text1,
        text2: text2,
        text3: text3,
        text1Size: text1Size,
        text2Size: text2Size,
        text3Size: text3Size,
        textAlign: textAlign,
        font: font,
        backColor: backColor,
        textColor: textColor,
        material: material,
        thickness: thickness,
        printOption: printOption,
        holePunch: holePunch,
        surface: surface,
        quantity: quantity,
        string: string,
        safetypin: safetypin,
        safetypincolors: safetypincolors,
        grommets: grommets,
        foils: foils,
        quantity: quantity,
        symbolTitleClick: symbolTitleClick,
        symbolClick: symbolClick,
        iconAlign: iconAlign
    });

    console.log(arrToSave_hd);
    p = (p == undefined) ? '' : p;
    jQuery.ajax({
        url: 'https://xpresalabels.com/site/wp-admin/admin-ajax.php',
        type: 'post',
        cache: true,
        datattype: 'json',
        data: {
            action: 'saveForLater_HD',
            arrToSave_hd: arrToSave_hd,
            p: p
        },
        beforeSend: function() {

        },
        success: function(data) {
            var d = data.split('/');
            console.log(d);
            var myAccountPageUrl =
            'https://xpresalabels.com/site/my-account/';
            if (d[1] == 'login=false') {
                jQuery.fancybox.open(
                    '<div class="message"> <h2>Please Login to continue</h2> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <a class="btn btn-info" href="' +
                    myAccountPageUrl + '?' + d[0] +
                    '">Login</a> </div><div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <a class="btn btn-info" href="' +
                    myAccountPageUrl + '?' + d[0] + '">Sign up</a> </div></div></div>');
            } else if (d[0] == 'already added') {
                jQuery.fancybox.open(
                    '<div class="message"> <h2>Want to replace previously saved item?</h2> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <a class="btn btn-info" href="javascript:void(0)" data-fancybox-close onclick="saveForLater(1)">Yes</a> </div><div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <a class="btn btn-info" data-fancybox-close href="javascript:void(0)" >No</a> </div></div></div>'
                    );
            } else {
                jQuery.fancybox.open(
                    '<div class="message"> <h2>Product saved!</h2> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <a class="btn btn-info" href="' +
                    myAccountPageUrl +
                    '/saved-items/">View saved product</a> </div><div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <a class="btn btn-info" data-fancybox-close href="javascript:void(0)" >Continue customizing</a> </div></div></div>'
                    );
            }
        }
    });
}

function adjustImageRatio() {
    jQuery('div#customLabels .divider').show();
    jQuery('.row-sec .customLabelGenImgPrev').each(function() {

        var wddhSdBe = parseInt(jQuery(this).attr('dat-width'));
        var h8SdBe = parseInt(jQuery(this).attr('dat-height'));

        var ratio = wddhSdBe / h8SdBe;

        var parWdth = jQuery(this).parent().outerWidth() - 20;
        var parH8 = jQuery(this).parent().outerHeight() - 20;

        if (wddhSdBe > parWdth) {

            var dpi = 75;
            var dividend = (parWdth * dpi) / wddhSdBe;
            var resWdth = (wddhSdBe / 75) * dividend;
            var resH8 = (h8SdBe / 75) * dividend;

            // jQuery(this).css({
            //     'width': resWdth + 'px',
            //     'height': resH8 + 'px',
            //     //'background': 'red'
            // });
        }

    });
    jQuery('div#customLabels .divider').hide();
    flagD = 'notOk';
}

function addEditedOption(options) {

    jQuery('div#folds [data-arr="' + options[0].foldOption + '"]').parent().addClass('selected').children().click();
    jQuery('div#customLabels [data-arr="' + options[0].labelSizw + '"]').addClass('selected').click();

    jQuery('input#textbox1').val(options[0].text1);
    jQuery('input#textbox2').val(options[0].text2);
    jQuery('input#textbox3').val(options[0].text3);

    jQuery('select#textbox1Font').val(options[0].textbox1Font);
    jQuery('select#textbox2Font').val(options[0].textbox2Font);
    jQuery('select#textbox3Font').val(options[0].textbox3Font);

    jQuery('select#textbox1Font, select#textbox2Font, select#textbox3Font').trigger('change');

    jQuery('div#inputTexts .algn-sec ul li:nth-child(' + options[0].textAlign + ') > a').addClass('selected').click();

    jQuery('.fontWrapper > a:nth-child(' + options[0].font + ')').addClass('selected').click();

    isNaN(options[0].backColor) ? changePantoneBG(options[0].backColor) : jQuery(
        '#backGroundColors .colorSelection > span:nth-child(' + options[0].backColor + ')').addClass('selected')
    .click();

    isNaN(options[0].textColor) ? changePantoneText(options[0].textColor) : jQuery(
        '#textColors .colorSelection > span:nth-child(' + options[0].textColor + ')').addClass('selected').click();

    //jQuery('#textColors .colorSelection > span.colorContainer:nth-child('+options[0].textColor+')').addClass('selected').click();

    for (var i = 0; i < options[0].textColor.length; i++) {
        if (jQuery('#logocolors .colors_l span[data-arr="' + options[0].textColor[i] + '"]').length > 0) {
            jQuery('#logocolors .colors_l span[data-arr="' + options[0].textColor[i] + '"]').addClass('selected')
            .click();
        } else {
            changePantoneText(options[0].textColor[i]);
            jQuery('.additionalColors button').click();
        }
    }

    jQuery('.designerIconsCat ul li:nth-child(' + options[0].symbolTitleClick + ')').addClass('selected').click();
    jQuery('.iconSection [data-arr="' + options[0].symbolClick + '"]').addClass('selected').click();
    jQuery('.algn-sec.algn-sec-icon.col-lg-4 li:nth-child(' + options[0].iconAlign + ')').addClass('selected').click();

    jQuery('.materialSelection .row .col-lg-3.col-md-3.col-sm-3.col-xs-6:nth-child(' + options[0].material + ')')
    .addClass('selected').find('.materialSelect').click();

    jQuery('.imgWrapW:nth-child(' + options[0].thickness + ')').click();

    jQuery('#printOptions .row .col-lg-6.col-md-6.col-sm-6.col-xs-6:nth-child(' + options[0].printOption + ')')
    .addClass('selected').find('.oneSide').click();

    jQuery('#holePunchs .row .col-lg-6.col-md-6.col-sm-6.col-xs-6:nth-child(' + options[0].holePunch + ')').click();

    jQuery('#holeLocations .row .col-lg-3.col-md-3.col-sm-3.col-xs-3:nth-child(' + options[0].holePunch + ')').click();

    jQuery('#Surfaces .row .col-lg-4.col-md-4.col-sm-4.col-xs-4:nth-child(' + options[0].surface + ')').click();

    jQuery('#Strings ul li:nth-child(' + options[0].string + ')').click();

    jQuery('.choosePins ul li:nth-child(' + options[0].safetypin + ')').click();
    jQuery('#SafetyPins ul li:nth-child(' + options[0].safetypincolors + ')').click();

    jQuery('#Grommets ul li:nth-child(' + options[0].grommets + ')').click();

    jQuery('#Foils ul li:nth-child(' + options[0].foils + ')').click();
}

function changePantoneText(color) {
    jQuery('#pantoneText').css('background-color', '#' + color);
    jQuery('#pantoneText').val('#' + color);
    selecttextcolor(color, '#' + color, '0.70');
}

function changePantoneBG(color) {
    jQuery('#pantoneBG').css('background-color', '#' + color);
    jQuery('#pantoneBG').val('#' + color);
    selectcolor(color, '#' + color, '');
}

jQuery('select#sizeTag').change(function() {
    var dsval = jQuery(this).val();
    (dsval !== 'Choose') ? (jQuery('span#sizetagchosen').text(dsval), jQuery('input#sizetag').val(dsval)) : (
        jQuery('span#sizetagchosen').text('N/A'), jQuery('input#sizetag').val('N/A'));
});

function selectMaterial(d, name, price) {
    jQuery('.materialSelect').removeClass('selected');
    jQuery(d).addClass('selected');
    jQuery('#materialTypeChosen, #newMaterial').val(name);
    jQuery('#materialType').text(name);

    addOnPrice('Material: ' + name, 'selectmaterial', price);
}

function selectThickness(d, thickness, price) {
    jQuery(d).addClass('selected').siblings().removeClass('selected');
    jQuery('#thickChosen, #newThickness').val(thickness);
    jQuery('#labthickness').text(thickness);
    addOnPrice('Thickness ' + thickness, 'thick', price);
}

function selectSideOptions(d, printSide) {
    jQuery(d).addClass('selected');
    jQuery('.oneSide').not(d).removeClass('selected');
    jQuery('#printOptionChosen, #newPrintOption').val(printSide);
    jQuery('#labprintOption').text(printSide);

    if (printSide == 'Both Sided') {
        jQuery('.panel-body.panel-body-2').addClass('full');
        jQuery('#displaydesignnew_bck').addClass('show').removeClass('hide');

        if (jQuery('#addOnForBack').length < 1) {
            jQuery('#tttl').before(
                '<div class="productPrevContRow" id="addOnForBack"> <span class="productPrevContRowTitle">For Back printing:</span> <span class="productPrevContRowDes">x2</span></span> </div>'
                );
            var rsltPrice = jQuery('#totalpricelabeladd2crt').val() * 2;
            jQuery('#totalpricelabeladd2crt').val(rsltPrice);
            jQuery('#totalprice1').text(rsltPrice);
        }
    } else {
        jQuery('.panel-body.panel-body-2').removeClass('full');
        jQuery('#displaydesignnew_bck').removeClass('show').addClass('hide');

        if (jQuery('#addOnForBack').length > 0) {
            jQuery('#addOnForBack').remove();
            var rsltPrice = jQuery('#totalpricelabeladd2crt').val() / 2;
            jQuery('#totalpricelabeladd2crt').val(rsltPrice);
            jQuery('#totalprice1').text(rsltPrice);
        }
    }
}

function selectHoles(d, holePunch, price) {
    jQuery(d).addClass('selected').siblings().removeClass('selected');
    jQuery('#holePunchChosen, #newholePunch').val(holePunch);
    jQuery('#labHolePunch').text(holePunch);
    holePunch = holePunch.replace('/', '-');
    jQuery('div#displaydesignnew').attr('class', '');
    jQuery('div#displaydesignnew').addClass('holeAdded hole' + holePunch);

    addOnPrice('Hole: ' + holePunch, 'holeAddon', price);
    var arg = {};
    createLogoCanvas(arg);
}

function adjustHole() {
    jQuery('.holeIcon').remove();
    var holeLocation = (jQuery('input#newHoleLocation').val() == "") ? '' : jQuery('input#newHoleLocation').val()
    .replace(' - ', '');
    jQuery('#displaydesignnew').prepend('<div class="holeIcon ' + holeLocation +
        '"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAATxJREFUeNq8lj1LQmEYht9zBMHVSQkaRBAKoUkIWpuCRAiEwP6FEDS1OfYzClybXByiWQSbwkiENlEKxUHe7hueEw7nw/R9vOGCAweei/eDcx/PWmtikgHnoA5K4ADkwAeYgBfwDDpxQwwlIWRAE0ztZvkEjYhZoZIyGNrt8gpySZIa+La7has6iZJUwNy6yXh9RYEgKy9chluX4nxfzv9Obo7LnIJrPngwcfgQpI37jEDBF5uGgDkEZ5RcGt3UuV1LxZUwPUqs8kom+5D8XWHN/FCyUpaMKHlTlvR86QPNtHnwR3gYKAlmIB9s15OSpAUWntzgIuhL3br8bh0Ht4t5BzcOBQtQpSCs45sOeoTFd5HU8Vc7NOSXNGzijwQpgsd/DF+CB2lYs6lk/c/lHvQjhnfBLYsvbs6vAAMAs0Vd3XlsYicAAAAASUVORK5CYII="></div>'
        );
}

function selectHoleLocation(d, HoleLocation) {
    jQuery(d).addClass('selected').siblings().removeClass('selected');
    jQuery('#holeLocation, #newHoleLocation').val(HoleLocation);
    jQuery('#labHoleLocation').text(HoleLocation);
    var arg = {};
    createLogoCanvas(arg);
}

function selectSurface(d, surface, price) {
    jQuery(d).addClass('selected').siblings().removeClass('selected');
    jQuery('#surfaceChosen, #newSurface').val(surface);
    jQuery('#labSurface').text(surface);
    addOnPrice('Surface: ' + surface, 'surfaceAddOn', price);
}

function selectString(d, string, price) {
    jQuery(d).addClass('selected').siblings().removeClass('selected');
    jQuery('#stringColorChosen, #newStringColor').val(string);
    jQuery('#labStringColor').text(string);
    addOnPrice('String: ' + string, 'stringAddOn', price);
}

function selectSafetyPin(d, pin, price) {
    jQuery(d).addClass('selected').siblings().removeClass('selected');
    jQuery('#safetyPin, #newSafetyPin').val(pin);
    jQuery('#labSafetyPin').text(pin);
    addOnPrice('Safety Pin: ' + pin, 'pinAddOn', price);
}

function selectGrommet(d, grommet, price) {
    jQuery(d).addClass('selected').siblings().removeClass('selected');
    jQuery('#grommetsChosen, #newGrommets').val(grommet);
    jQuery('#labGrommets').text(grommet);
    addOnPrice('Grommet: ' + grommet, 'grommetAddOn', price);
}

function selectFoil(d, foil, price) {
    jQuery(d).addClass('selected').siblings().removeClass('selected');
    jQuery('#foilChosen, #newFoil').val(foil);
    jQuery('#labFoil').text(foil);
    addOnPrice('Foil: ' + foil, 'foilAddOn', price);
}

//mail sent data save and pdf
document.addEventListener('wpcf7mailsent', function(event) {
//document.addEventListener( 'wpcf7submit', function( event ) {
    if ('12046' == event.detail.contactFormId) {
        window.location.href = "https://www.xpresalabels.com/thank-you-quote/";
//console.log(jQuery('form.wpcf7-form').serialize());
//event.preventDefault();
// var usertextbox1Val = jQuery('input#usertextbox1').val();
// var usertextbox2Val = jQuery('input#usertextbox2').val();
// var usertextbox3Val = jQuery('input#usertextbox3').val();
// jQuery.ajax({
//     type: 'POST',
//     url: 'https://xpresalabels.com/site/wp-admin/admin-ajax.php',
//     data: {
//         data: jQuery('form.wpcf7-form').serialize() + '&usertextbox1Val=' + usertextbox1Val +
//             '&usertextbox2Val=' + usertextbox2Val + '&usertextbox3Val=' + usertextbox3Val,
//         action: 'cf7FormSubmit_HD',
//     },
//     success: function(data) {
//         console.log(data);
//         window.open("https://xpresalabels.com/site/tcpdf/tcpdf/pdfhangtagdesign.php",
//             '_blank');
//         window.location.href = "https://xpresalabels.com/thank-you-quote/";
//     }
// });
    }
}, false);

jQuery('.choosePins ul li').click(function() {
    jQuery(this).addClass('selected').siblings().removeClass('selected');
    if (jQuery(this).hasClass('yes')) {
        selectSafetyPin('.Black', 'Black', 50);
        jQuery('.SafetyPinColors').slideDown();
    } else {
        jQuery('#labSafetyPin').text('N/A');
        jQuery('.SafetyPinColors li').removeClass('selected');
        jQuery('.SafetyPinColors').slideUp();
    }
});

function addOnPrice(tag, action, price) {
    action = action.replace(' ', '');

    var totalPrice = parseFloat(jQuery('#totalquantity').val()) * parseFloat(jQuery('#unitpricehere').val());
    jQuery('span#priceAdded').each(function() {
        var thisPrice = parseFloat(jQuery(this).text());
        totalPrice = totalPrice + thisPrice;
    });
    //console.log(totalPrice);

    if (jQuery('#' + action).length > 0) {
        var extraAmount = parseInt(jQuery('#' + action + ' #priceAdded').text());
        var totalPrice = totalPrice - extraAmount;

        jQuery('#' + action).remove();
    }
    //console.log(totalPrice);
    var resultPrice = parseInt(totalPrice) + parseInt(price);
    //console.log(resultPrice);
    jQuery('#addOns').append('<div class="productPrevContRow" id="' + action +
        '"> <span class="productPrevContRowTitle">' + tag +
        '</span> <span class="productPrevContRowDes">$<span id="priceAdded">' + price + '</span></span> </div>');

    jQuery('#totalpricelabeladd2crt').val(resultPrice);
    jQuery('#totalprice1').text(resultPrice);

    if (jQuery('input#printOptionChosen').val() == 'Both Sided' && jQuery('#addOnForBack').length > 0) {
        jQuery('#addOnForBack').remove();
        jQuery('#tttl').before(
            '<div class="productPrevContRow" id="addOnForBack"> <span class="productPrevContRowTitle">For Back printing:</span> <span class="productPrevContRowDes">x2</span></span> </div>'
            );
        var rsltPrice = resultPrice * 2;
        jQuery('#totalpricelabeladd2crt').val(rsltPrice);
        jQuery('#totalprice1').text(rsltPrice);
    }
}

function saveBeforeAdd() {
    var arr = {};
    createLogoCanvas(arr);
    submitDesign(2);
}

/************ back side functions ************/
function selecttext_new(p, t) {
    var v = jQuery(t).val();
    jQuery('#usertextbox' + p + '_bck').val(v);
    jQuery('.row' + p + '_bck').text(v);

    var n = jQuery(t).val();

    var row1TextWidth = jQuery('.row1_bck').outerWidth(),
    row2TextWidth = jQuery('.row2_bck').outerWidth(),
    row3TextWidth = jQuery('.row3_bck').outerWidth(),
    arrfgh = [parseFloat(row1TextWidth), parseFloat(row2TextWidth), parseFloat(row3TextWidth)],
    maxmimumLength = Math.round(Math.max(parseFloat(row1TextWidth), parseFloat(row2TextWidth), parseFloat(
        row3TextWidth))),
    textParentWidth = jQuery('#texts_bck').width();
    checkNadjustText(arrfgh, maxmimumLength, textParentWidth, 'bck');

    madeBackToCanvas();
}

function manualFontChange_bck(p, t) {
    var n = jQuery(t).val();
    jQuery('#textbox' + p + '_bckfontVal').val(n);
    if (n == 'auto') {
        jQuery('.row' + p + '_bck').css('font-size', '25px');
        var row1TextWidth = jQuery('.row1_bck').outerWidth(),
        row2TextWidth = jQuery('.row2_bck').outerWidth(),
        row3TextWidth = jQuery('.row3_bck').outerWidth(),
        arrfgh = [parseFloat(row1TextWidth), parseFloat(row2TextWidth), parseFloat(row3TextWidth)],
        maxmimumLength = Math.round(Math.max(parseFloat(row1TextWidth), parseFloat(row2TextWidth), parseFloat(
            row3TextWidth))),
        textParentWidth = jQuery('#texts_bck').width();
        checkNadjustText(arrfgh, maxmimumLength, textParentWidth, 'bck');

    } else {
        jQuery('.row' + p + '_bck').css('font-size', n + 'px');
    }
    madeBackToCanvas();
}



jQuery('.close-panel').click(function() {
    jQuery('.panel-body.panel-body-2').removeClass('full');
});

function selectalign_bck(cls) {
    jQuery('div#texts_bck').attr('class', '').addClass(cls);;
}

function getTextWidth(font, fontsize, txt) {
    var formattedWidth;
    if (txt == '') {
        formattedWidth = '0px';
    } else {
        var text = document.createElement("span");
        document.body.appendChild(text);
        text.style.font = font;
        text.style.fontSize = fontsize + "px";
        text.style.height = 'auto';
        text.style.width = 'auto';
        text.style.position = 'absolute';
        text.style.whiteSpace = 'no-wrap';
        text.innerHTML = txt;

        var width = Math.ceil(text.clientWidth);
        formattedWidth = width + "px";
    }
    return formattedWidth;
}

function madeBackToCanvas() {

    setTimeout(function() {
        html2canvas(jQuery(".displaydesignnew_bck_vw"), {
            onrendered: function(canvas) {
                canvas.id = 'canvascr_bck';

                jQuery('.displaydesignnew_bck_vw').next('canvas').remove();
                jQuery('.displaydesignnew_bck_vw').after(canvas);


                if (jQuery('.displaydesignnew_bck_vw').hasClass('Circle_h') && jQuery('#canvascr')
                    .length > 0) {
                    var imgs = new Image();
                imgs.src =
                'https://xpresalabels.com/site/wp-content/plugins/xpresalabels/assets/images/pattern-overlay.png';

                imgs.onload = function() {
                    var c_n = document.getElementById("canvascr_bck");
                    var ctx_n = c_n.getContext("2d");
                    ctx_n.drawImage(imgs, 0, 0);
                    ctx_n.globalCompositeOperation = 'destination-in';
                    ctx_n.beginPath();
                    ctx_n.arc(c_n.width / 2, c_n.height / 2, c_n.height / 2, 0, Math.PI *
                        2);
                    ctx_n.closePath();
                    ctx_n.fill();
                }
            }


        }
    });
    }, 3000);

}
/************ back side functions ************/

jQuery(document).ready(function() {
    jQuery('.toggle-less').click(function() {
        var txt = jQuery(".label-input-details").is(':visible') ? 'See More' : 'See Less';
        jQuery(this).text(txt);
        jQuery(this).toggleClass('toggle');
        jQuery('.label-input-details').slideToggle();
    });
    //headerTopMargin();
});

// var targetTopHeader = '.header_top_holder';
var previewBox = '#previewRow';
var targetHSpace = '.previewRowHeight';

function previewBoxTopMargin() {
    // var tHeight = $(targetTopHeader).innerHeight();
    var bHeight = jQuery(previewBox).innerHeight();
    jQuery(targetHSpace).css('height', bHeight + "px");
};
jQuery(window).on('load resize', function() {
    previewBoxTopMargin();
});

jQuery('.add-amount').click(function() {
    jQuery('.panel-headings-wrapper .owl-item .panel-heading').removeClass("active-h");
    jQuery('.panel-headings-wrapper').trigger('to.owl.carousel', 18);
    jQuery('.mobilestep18').addClass("active-h");
    jQuery('.step18').addClass("active-h");
    jQuery('#amnt_qbltm').slideDown().siblings().slideUp();
});
jQuery(document.body).on('click', '.change-quantity', function() {
    jQuery('.panel-headings-wrapper .owl-item .panel-heading').removeClass("active-h");
    jQuery('.panel-headings-wrapper').trigger('to.owl.carousel', 18);
    jQuery('.mobilestep18').addClass("active-h");
    jQuery('.step18').addClass("active-h");
    jQuery('#amnt_qbltm').slideDown().siblings().slideUp();
    jQuery('.proPreview-deg-ord-print').removeClass('model-preview');

    jQuery('.btn-cart-canvas').hide();
    jQuery('.btn-prev-next').hide();
    jQuery('.btn-canvas-submit').show();
    jQuery('.close-preview').hide();
    jQuery('.add-amount').removeClass('change-quantity');
});


jQuery(document).on('click','.panel-title',function(){
   jQuery(this).toggleClass("section-open");
   console.log('test');
   jQuery(this).next("div").slideToggle();

});
jQuery(document.body).on('click', '.qaPanelCustomProductItem h4', function() {
   var div_to_show=jQuery(this).data('id');
   // jQuery('.qaPanelCustomProductItem h4').removeClass('show');
   jQuery('.qaPanelCustomProductItem').removeClass('open');
   jQuery('#'+div_to_show).addClass('open');
   jQuery('.'+div_to_show).show();
   jQuery(this).addClass('show');

});

jQuery(document.body).on('click', '.qaPanelCustomProductItem h4.show', function() {
   var div_to_show=jQuery(this).data('id');

   jQuery('.qaPanelCustomProductItem').removeClass('open');

   jQuery('.'+div_to_show).hide();
   jQuery(this).removeClass('show');

});
</script>

<script type="text/javascript" src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/jqupload/ion.rangeSlider.min.js">
</script>

<script type="text/javascript" src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/assets/js/pluginScript.js"></script>
<script type="text/javascript" src="https://xpresalabels.com/site/wp-content/plugins/xpresalabels/assets/js/cnvs.js"></script>

{"id":10297,"date":"2020-02-24T12:56:17","date_gmt":"2020-02-24T12:56:17","guid":{"rendered":"http:\/\/10.0.14.107\/DesignPros\/xpresalabels\/?page_id=10297"},"modified":"2026-02-17T06:19:04","modified_gmt":"2026-02-17T11:19:04","slug":"hang-tag-label-design","status":"publish","type":"page","link":"https:\/\/xpresalabels.com\/site\/hang-tag-label-design\/","title":{"rendered":"Hang Tags"},"content":{"rendered":"\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"designTool.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-10297","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Custom Hang Tags for Clothing &amp; Apparel Branding | Xpresa<\/title>\n<meta name=\"description\" content=\"Design custom hang tags online with our easy tool. Choose shape, size, finish &amp; add your logo. Professional quality for apparel. Order in minutes!\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Custom Hang Tags for Clothing &amp; Apparel Branding | Xpresa\" \/>\n<meta property=\"og:description\" content=\"Design custom hang tags online with our easy tool. Choose shape, size, finish &amp; add your logo. Professional quality for apparel. Order in minutes!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/xpresalabels.com\/site\/hang-tag-label-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Xpresa Labels\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/xpresalabels\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-17T11:19:04+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@xpresalabels\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/xpresalabels.com\/site\/hang-tag-label-design\/\",\"url\":\"https:\/\/xpresalabels.com\/site\/hang-tag-label-design\/\",\"name\":\"Custom Hang Tags for Clothing & Apparel Branding | Xpresa\",\"isPartOf\":{\"@id\":\"https:\/\/xpresalabels.com\/site\/#website\"},\"datePublished\":\"2020-02-24T12:56:17+00:00\",\"dateModified\":\"2026-02-17T11:19:04+00:00\",\"description\":\"Design custom hang tags online with our easy tool. Choose shape, size, finish & add your logo. Professional quality for apparel. Order in minutes!\",\"breadcrumb\":{\"@id\":\"https:\/\/xpresalabels.com\/site\/hang-tag-label-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/xpresalabels.com\/site\/hang-tag-label-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/xpresalabels.com\/site\/hang-tag-label-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/xpresalabels.com\/site\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hang Tags\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/xpresalabels.com\/site\/#website\",\"url\":\"https:\/\/xpresalabels.com\/site\/\",\"name\":\"Xpresa Labels\",\"description\":\"Custom Woven Clothing Labels and Tags\",\"publisher\":{\"@id\":\"https:\/\/xpresalabels.com\/site\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/xpresalabels.com\/site\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/xpresalabels.com\/site\/#organization\",\"name\":\"Xpresa Labels\",\"url\":\"https:\/\/xpresalabels.com\/site\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/xpresalabels.com\/site\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/xpresalabels.com\/site\/wp-content\/uploads\/2022\/03\/logo.jpg\",\"contentUrl\":\"https:\/\/xpresalabels.com\/site\/wp-content\/uploads\/2022\/03\/logo.jpg\",\"width\":110,\"height\":80,\"caption\":\"Xpresa Labels\"},\"image\":{\"@id\":\"https:\/\/xpresalabels.com\/site\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/facebook.com\/xpresalabels\/\",\"https:\/\/x.com\/xpresalabels\",\"https:\/\/linkedin.com\/company\/xpresa-labels--custom-woven-printed-labels\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Custom Hang Tags for Clothing & Apparel Branding | Xpresa","description":"Design custom hang tags online with our easy tool. Choose shape, size, finish & add your logo. Professional quality for apparel. Order in minutes!","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Custom Hang Tags for Clothing & Apparel Branding | Xpresa","og_description":"Design custom hang tags online with our easy tool. Choose shape, size, finish & add your logo. Professional quality for apparel. Order in minutes!","og_url":"https:\/\/xpresalabels.com\/site\/hang-tag-label-design\/","og_site_name":"Xpresa Labels","article_publisher":"https:\/\/facebook.com\/xpresalabels\/","article_modified_time":"2026-02-17T11:19:04+00:00","twitter_card":"summary_large_image","twitter_site":"@xpresalabels","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/xpresalabels.com\/site\/hang-tag-label-design\/","url":"https:\/\/xpresalabels.com\/site\/hang-tag-label-design\/","name":"Custom Hang Tags for Clothing & Apparel Branding | Xpresa","isPartOf":{"@id":"https:\/\/xpresalabels.com\/site\/#website"},"datePublished":"2020-02-24T12:56:17+00:00","dateModified":"2026-02-17T11:19:04+00:00","description":"Design custom hang tags online with our easy tool. Choose shape, size, finish & add your logo. Professional quality for apparel. Order in minutes!","breadcrumb":{"@id":"https:\/\/xpresalabels.com\/site\/hang-tag-label-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/xpresalabels.com\/site\/hang-tag-label-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/xpresalabels.com\/site\/hang-tag-label-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/xpresalabels.com\/site\/"},{"@type":"ListItem","position":2,"name":"Hang Tags"}]},{"@type":"WebSite","@id":"https:\/\/xpresalabels.com\/site\/#website","url":"https:\/\/xpresalabels.com\/site\/","name":"Xpresa Labels","description":"Custom Woven Clothing Labels and Tags","publisher":{"@id":"https:\/\/xpresalabels.com\/site\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/xpresalabels.com\/site\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/xpresalabels.com\/site\/#organization","name":"Xpresa Labels","url":"https:\/\/xpresalabels.com\/site\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/xpresalabels.com\/site\/#\/schema\/logo\/image\/","url":"https:\/\/xpresalabels.com\/site\/wp-content\/uploads\/2022\/03\/logo.jpg","contentUrl":"https:\/\/xpresalabels.com\/site\/wp-content\/uploads\/2022\/03\/logo.jpg","width":110,"height":80,"caption":"Xpresa Labels"},"image":{"@id":"https:\/\/xpresalabels.com\/site\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/facebook.com\/xpresalabels\/","https:\/\/x.com\/xpresalabels","https:\/\/linkedin.com\/company\/xpresa-labels--custom-woven-printed-labels"]}]}},"_links":{"self":[{"href":"https:\/\/xpresalabels.com\/site\/wp-json\/wp\/v2\/pages\/10297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xpresalabels.com\/site\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/xpresalabels.com\/site\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/xpresalabels.com\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xpresalabels.com\/site\/wp-json\/wp\/v2\/comments?post=10297"}],"version-history":[{"count":1,"href":"https:\/\/xpresalabels.com\/site\/wp-json\/wp\/v2\/pages\/10297\/revisions"}],"predecessor-version":[{"id":55277,"href":"https:\/\/xpresalabels.com\/site\/wp-json\/wp\/v2\/pages\/10297\/revisions\/55277"}],"wp:attachment":[{"href":"https:\/\/xpresalabels.com\/site\/wp-json\/wp\/v2\/media?parent=10297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}