@include('header')
{!! csrf_field() !!}

<!-- content area -->
<link rel="stylesheet" type="text/css" href="themes/css/spectrum.css">
<style>
    #preview1 {
        width:300px; height:250px;
        overflow-x:hidden; overflow-y:hidden;
        clear:both;
    }

    #preview1 img {
        max-width:300px; max-height:250px;
    }

    #preview2c .panel {
        min-width:300px !important;
        min-height:50px !important ;
        clear:both;
    }
    #preview3c .panel {
        clear: both;
        float: left;
        min-width:250px !important;
        min-height:300px !important ;
    }

    #preview2 {
        width:300px; height:50px;
        overflow-x:hidden; overflow-y:hidden;
    }

    #preview2 img {
        max-width:300px; max-height:50px;
    }

    #preview3 {
        width:250px; height:300px !important;
        overflow-x:hidden; overflow-y:hidden;
    }
    #preview3 img {
        max-width:252px; max-height:302px;
    }
    #preview4 {
        width:320px; height:50px;
        overflow-x:hidden; overflow-y:hidden;
    }
    #preview4 img {
        max-width:320px; max-height:50px;
    }

    #resizeDiv{color:#ccc;font-weight: 700;}
    //#theImg{border:2px dashed #ccc;}

    #preview7 {
        width:180px; height:150px !important;
        overflow-x:hidden; overflow-y:hidden;
        margin-top: 44px;
    }
 #preview7 img {
        max-width:180px; max-height:150px;
    }

     #preview8 {
        width:160px; height:600px !important;
        overflow-x:hidden; overflow-y:hidden;
        margin-top: 44px;
    }
 #preview8 img {
        max-width:160px; max-height:600px;
    }
      #preview9 {
        width:300px; height:600px !important;
        overflow-x:hidden; overflow-y:hidden;
        margin-top: 44px;
    }
 #preview9 img {
        max-width:300px; max-height:600px;
    }


#preview10 {
        width:320px; height:53px !important;
        overflow-x:hidden; overflow-y:hidden;
        margin-top: 44px;
    }
 #preview10 img {
        max-width:320px; max-height:53px;
    }


#preview11 {
        width:300px; height:75px !important;
        overflow-x:hidden; overflow-y:hidden;
        margin-top: 44px;
    }
 #preview11 img {
        max-width:300px; max-height:75px;
    }


#preview12 {
        width:216px; height:36px !important;
        overflow-x:hidden; overflow-y:hidden;
        margin-top: 44px;
    }
 #preview12 img {
        max-width:216px; max-height:36px;
    }


#preview13 {
        width:216px; height:54px !important;
        overflow-x:hidden; overflow-y:hidden;
        margin-top: 44px;
    }
 #preview12 img {
        max-width:216px; max-height:54px;
    }




#preview14 {
        width:168px; height:28px !important;
        overflow-x:hidden; overflow-y:hidden;
        margin-top: 44px;
    }
 #preview14 img {
        max-width:168px; max-height:28px;
    }


#preview15 {
        width:168px; height:42px !important;
        overflow-x:hidden; overflow-y:hidden;
        margin-top: 44px;
    }
 #preview15 img {
        max-width:168px; max-height:42px;
    }


#preview16 {
        width:120px; height:20px !important;
        overflow-x:hidden; overflow-y:hidden;
        margin-top: 44px;
    }
 #preview16 img {
        max-width:120px; max-height:20px;
    }


#preview17 {
        width:120px; height:30px !important;
        overflow-x:hidden; overflow-y:hidden;
        margin-top: 44px;
    }
 #preview17 img {
        max-width:120px; max-height:30px;
    }


#preview18 {
        width:88px; height:31px !important;
        overflow-x:hidden; overflow-y:hidden;
        margin-top: 44px;
    }
 #preview18 img {
        max-width:88px; max-height:31px;
    }


#preview19 {
        width:468px; height:60px !important;
        overflow-x:hidden; overflow-y:hidden;
        margin-top: 44px;
    }
 #preview19 img {
        max-width:468px; max-height:60px;
    }

#preview20 {
        width:468px; height:320px !important;
        overflow-x:hidden; overflow-y:hidden;
        margin-top: 44px;
    }
 #preview20 img {
        max-width:468px; max-height:320px;
    }
    
    .draggable
    {
        position: relative;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        zoom: 1;
        *display: inline;

        cursor: hand;
        cursor: pointer;
    }

    .resizable
    {
        width: 100px;
        border: 1px solid #bb0000;
    }
    .resizable img
    {
        width: 100%;
    }

    .ui-resizable-handle
    {
        background: #f5dc58;
        border: 1px solid #FFF;
        width: 9px;
        height: 9px;

        z-index: 2;
    }
    .ui-resizable-se
    {
        right: -5px;
        bottom: -5px;
    }

    .ui-rotatable-handle
    {
        background: #f5dc58;
        border: 1px solid #FFF;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -o-border-radius: 5px;
        -webkit-border-radius: 5px;
        cursor: pointer;

        height:        10px;
        left:          50%;
        margin:        0 0 0 -5px;
        position:      absolute;
        top:           -5px;
        width:         10px;
    }
    .ui-rotatable-handle.ui-draggable-dragging
    {
        visibility:  hidden;
    }
    /*
    .ui-resizable-s{
        background: rgba(0, 0, 0, 0.9) none repeat scroll 0 0;
          height: 15px !important;

        width: 10px !important;
    }*/
    .ui-resizable-e{
        height: 11px !important;
        width: 10px !important;
    }
    .ui-resizable-n{
        height: 11px !important;
        width: 10px !important;
        left:43px !important;
        top:0px !important;
    }
    .ui-resizable-w{
        height: 11px !important;
        width: 10px !important;
    }

    .ui-resizable-nw{
        height: 11px !important;
        width: 10px !important;
        left: 0 !important;
        top:0 !important;
    }
    .ui-resizable-ne{
        height: 11px !important;
        width: 10px !important;
        right: 0 !important;
        top:0 !important;
    }
    .ui-resizable-se{
        background: #f5dc58 none repeat scroll 0 0 !important;
        height: 11px !important;
        width: 10px !important;
    }
    .ui-resizable-sw{
        height: 11px !important;
        width: 10px !important;
        bottom:0 !important;
        left: 0 !important;
    }
    .ui-resizable-s {
        bottom: 1px !important;
        cursor: s-resize;
        height: 9px !important;
        left: 43px !important;

        width: 10px!important;
    }
    .ui-resizable-w {
        cursor: w-resize;
        height: 10px !important;
        left: -5px !important;
        top: 20px !important;
        width: 7px !important;
    }
    .ui-resizable-e {
        cursor: e-resize;
        height: 100%;
        right: 0 !important;
        top: 20px !important;
        width: 7px !important;
    }

    .ui-icon{background: none;}


    #preview4c .panel {

        min-height:50px !important ;
    }


    .brds{border:1px solid #ccc;padding: 3px; border-radius: 4px;}
    .mtop100{margin-top:10px;}
    .crp{width:39%;}
    .crps{width: 85%;}

    #preview5 {
        width:320px; height:480px !important;
        overflow-x:hidden; overflow-y:hidden;
    }
    #preview5 img {
        max-width:322px; max-height:482px;
    }

    #preview5c .panel {
        min-width:320px !important;
        min-height:480px !important ;
    }

    #preview6 {

        width:728px; height:90px !important;
        overflow-x:hidden; overflow-y:hidden;
    }
    #preview6 img {
        max-width:728px; max-height:90px;
    }

    #preview6c .panel {
        min-width:728px !important;
        min-height:90px !important ;
    }
    
    
     #preview7 {

        width:180px; height:150px !important;
        overflow-x:hidden; overflow-y:hidden;
    }
    #preview7 img {
        max-width:180px; max-height:150px;
    }

    #preview7c .panel {
        min-width:180px !important;
        min-height:150px !important ;
    }


 #preview8 {

        width:160px; height:600px !important;
        overflow-x:hidden; overflow-y:hidden;
    }
    #preview8 img {
        max-width:160px; max-height:600px;
    }

    #preview8c .panel {
        min-width:160px !important;
        min-height:600px !important ;
    }


 #preview9 {

        width:300px; height:600px !important;
        overflow-x:hidden; overflow-y:hidden;
    }
    #preview9 img {
        max-width:300px; max-height:600px;
    }

    #preview9c .panel {
        min-width:300px !important;
        min-height:600px !important ;
    }



 #preview10 {

        width:320px; height:53px !important;
        overflow-x:hidden; overflow-y:hidden;
    }
    #preview10 img {
        max-width:320px; max-height:53px;
    }

    #preview10c .panel {
        min-width:320px !important;
        min-height:53px !important ;
    }




 #preview11 {

        width:300px; height:75px !important;
        overflow-x:hidden; overflow-y:hidden;
    }
    #preview11 img {
        max-width:300px; max-height:75px;
    }

    #preview11c .panel {
        min-width:300px !important;
        min-height:75px !important ;
    }

 #preview12 {

        width:320px; height:75px !important;
        overflow-x:hidden; overflow-y:hidden;
    }
    #preview12 img {
        max-width:320px; max-height:75px;
    }

    #preview12c .panel {
        min-width:320px !important;
        min-height:75px !important ;
    }


 #preview13 {

        width:216px; height:36px !important;
        overflow-x:hidden; overflow-y:hidden;
    }
    #preview13 img {
        max-width:216px; max-height:36px;
    }

    #preview13c .panel {
        min-width:216px !important;
        min-height:36px !important ;
    }





 #preview14 {

        width:216px; height:54px !important;
        overflow-x:hidden; overflow-y:hidden;
    }
    #preview14 img {
        max-width:216px; max-height:54px;
    }

    #preview14c .panel {
        min-width:216px !important;
        min-height:54px !important ;
    }




 #preview15 {

        width:168px; height:28px !important;
        overflow-x:hidden; overflow-y:hidden;
    }
    #preview15 img {
        max-width:168px; max-height:28px;
    }

    #preview15c .panel {
        min-width:168px !important;
        min-height:28px !important ;
    }







#preview16 {

        width:168px; height:42px !important;
        overflow-x:hidden; overflow-y:hidden;
    }
    #preview15 img {
        max-width:168px; max-height:42px;
    }

    #preview15c .panel {
        min-width:168px !important;
        min-height:42px !important ;
    }




#preview17 {

        width:120px; height:20px !important;
        overflow-x:hidden; overflow-y:hidden;
    }
    #preview17 img {
        max-width:120px; max-height:20px;
    }

    #preview17c .panel {
        min-width:120px !important;
        min-height:20px !important ;
    }



#preview18 {

        width:120px; height:30px !important;
        overflow-x:hidden; overflow-y:hidden;
    }
    #preview17 img {
        max-width:120px; max-height:30px;
    }

    #preview17c .panel {
        min-width:120px !important;
        min-height:30px !important ;
    }



#preview19 {

        width:88px; height:31px !important;
        overflow-x:hidden; overflow-y:hidden;
    }
    #preview17 img {
        max-width:88px; max-height:31px;
    }

    #preview17c .panel {
        min-width:88px !important;
        min-height:31px !important ;
    }


#preview19 {

        width:468px; height:60px !important;
        overflow-x:hidden; overflow-y:hidden;
    }
    #preview19 img {
        max-width:468px; max-height:60px;
    }

    #preview19c .panel {
        min-width:468px !important;
        min-height:60px !important ;
    }


#preview20{

        width:480px; height:320px !important;
        overflow-x:hidden; overflow-y:hidden;
    }
    #preview20 img {
        max-width:480px; max-height:320px;
    }

    #preview20c .panel {
        min-width:480px !important;
        min-height:320px !important ;
    }
    
    .btn{border-radius: 0px;}
    .active{box-shadow:1px 1px 5px rgba(0, 0, 0, 0.7);}
    .bhoechie-tab .active{box-shadow:none !important;}
    .list-group .greentb{background-color: #7E7979 !important; color:#fff;}
    .greentb:hover{background-color: #7E7979 !important;color:#fff;}
    .greentb a.active::after {
        border-bottom: 13px solid transparent;
        border-left: 10px solid #5A55A3 !important;
        border-top: 13px solid transparent;
        content: "";
        left: 100%;
        margin-top: -13px;
        position: absolute;
        top: 50%;
    }
    .greentb a.active .fa {
        background-color: #7E7979 !important;
        color: #000 !important;
    }
    .greentb .fa-check{color:#ccc !important;}
    .sweet-alert{width:auto !important;}
    b .mv{word-break: break-all;}
    b .mv{word-wrap: break-word;}

    div.bhoechie-tab-container{
        z-index: 10;
        background-color: #ffffff;
        padding: 0 !important;
        border-radius: 4px;
        -moz-border-radius: 4px;
        border:1px solid #ddd;
        margin-top: 20px;
        margin-left: 50px;
        -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
        box-shadow: 0 6px 12px rgba(0,0,0,.175);
        -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
        background-clip: padding-box;
        opacity: 0.97;
        filter: alpha(opacity=97);
    }
    div.bhoechie-tab-menu{
        padding-right: 0;
        padding-left: 0;
        padding-bottom: 0;
    }
    div.bhoechie-tab-menu div.list-group{
        margin-bottom: 0;
    }
    div.bhoechie-tab-menu div.list-group>a{
        margin-bottom: 0;
    }
    div.bhoechie-tab-menu div.list-group>a .glyphicon,
    div.bhoechie-tab-menu div.list-group>a .fa {
        color: #5A55A3;
    }
    div.bhoechie-tab-menu div.list-group>a:first-child{
        border-top-right-radius: 0;
        -moz-border-top-right-radius: 0;
    }
    div.bhoechie-tab-menu div.list-group>a:last-child{
        border-bottom-right-radius: 0;
        -moz-border-bottom-right-radius: 0;
    }
    div.bhoechie-tab-menu div.list-group>a.active,
    div.bhoechie-tab-menu div.list-group>a.active .glyphicon,
    div.bhoechie-tab-menu div.list-group>a.active .fa{
        background-color: #5A55A3;
        background-image: #5A55A3;
        color: #ffffff;
    }
    div.bhoechie-tab-menu div.list-group>a.active:after{
        content: '';
        position: absolute;
        left: 100%;
        top: 50%;
        margin-top: -13px;
        border-left: 0;
        border-bottom: 13px solid transparent;
        border-top: 13px solid transparent;
        border-left: 10px solid #5A55A3;
    }

    div.bhoechie-tab-content{
        background-color: #ffffff;
        /* border: 1px solid #eeeeee; */
        padding-left: 20px;
        padding-top: 10px;
    }

    div.bhoechie-tab div.bhoechie-tab-content:not(.active){
        display: none;
    }

    .list-group-item{background-color: #E4E9E4;}
.bordered-panel{margin-top: 0;padding-bottom:0;}
</style>
<div class="container" id="my_account_tabs">
      @include('main-tab')  
</div>
<div class="container">
    
    <div class="bordered-panel select-pic_ad">
        <h3>Now let's create a Picture for your Advertisement</h3>
        <form class="form-inline mtopbot20">
            <input type="hidden" name="_token" value="{!!  csrf_token()  !!}" />
            <select class="form-control" id="pic">

                <option value="My Computer" >My Computer</option>
                <option value="Picture Gallery"  >Picture Gallery</option>
                <option value="No Image" >No Image</option>
            </select>
        </form>

        <div class="row panel hidden" id="select-pic">
            <h4 class="mtopbot30 text-center">You can select a picture relevant to your Advertisement from the gallery</h4>
            <!-- gallery pic -->
                            <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12 gallery-pic">
                    <label class="vtg">
                        <input type="radio" name="gallery" />
                        <img src="themes/images/gallery/Picture-Gallery_03.jpg" alt="" class="img-responsive img-thumbnail" />
                    </label>
                </div>
                <!-- gallery pic end -->
                <!-- gallery pic -->
                <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12 gallery-pic">
                    <label class="vtg">
                        <input type="radio" name="gallery" />
                        <img src="themes/images/gallery/Picture-Gallery_05.jpg" alt="" class="img-responsive img-thumbnail" />
                    </label>
                </div>
                <!-- gallery pic end -->
                <!-- gallery pic -->
                <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12 gallery-pic">
                    <label class="vtg">
                        <input type="radio" name="gallery" />
                        <img src="themes/images/gallery/Picture-Gallery_07.jpg" alt="" class="img-responsive img-thumbnail" />
                    </label>
                </div>
                <!-- gallery pic end -->
                <!-- gallery pic -->
                <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12 gallery-pic">
                    <label class="vtg">
                        <input type="radio" name="gallery" />
                        <img src="themes/images/gallery/Picture-Gallery_10.jpg" alt="" class="img-responsive img-thumbnail" />
                    </label>
                </div>
                <!-- gallery pic end -->
                <!-- gallery pic -->
                <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12 gallery-pic">
                    <label class="vtg">
                        <input type="radio" name="gallery" />
                        <img src="themes/images/gallery/Picture-Gallery_17.jpg" alt="" class="img-responsive img-thumbnail" />
                    </label>
                </div>
                <!-- gallery pic end -->
                <!-- gallery pic -->
                <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12 gallery-pic">
                    <label class="vtg">
                        <input type="radio" name="gallery" />
                        <img src="themes/images/gallery/Picture-Gallery_20.jpg" alt="" class="img-responsive img-thumbnail" />
                    </label>
                </div>
                <!-- gallery pic end -->
                <div class="form-group col-sm-12 text-center">
                    <a href="banner-gallery?catbind=&cook_key=" class="btn btn-orange btn-sm">More</a>
                </div>
        </div>
        <div class="clearfix panel " id="browse-pic">
            <div class="col-sm-8 pull-left">
                <div class="panel">
                    <img src="themes/images/noimage.jpg" class="img-centered img-responsive" alt="" id="blah" />
                </div>
            </div>
            <div class="col-sm-4 mtop100">
                Upload a Picture from your Computer
                <a class="text-light-grey large-font" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_brw_pic_detail')}}"><i class="fa fa-question-circle"></i></a>

                <div class="input-group input-group">

                    <div id="browse" class="btn btn-grey"> Upload
                        <input type="file" id="imgInpk" class="" />
                    </div>

                </div>
                <span style="font-size:13px;">Please upload .jpg or .png format image only</span>

            </div>

        </div>

        <hr/>
        <div class="ptopbot30 row">
            <div class="col-sm-12 col-xs-12">
                <p class="large-font pull-left">Background Color  <a class="text-light-grey large-font" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_show_bg_detail')}}"><i class="fa fa-question-circle"></i></a></p>

                <b id="bg1" style="float: left;margin-top:16px;margin-left:10px;">
                    <input id="langdemo" />
                </b>



            </div>
            <br>
            <div class="col-sm-12 col-xs-12" id="sample">
                <p class="large-font">Add Your Text <a class="text-light-grey large-font" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_pic_detail')}}"><i class="fa fa-question-circle"></i></a></p>


                <textarea rows="1" id="area5" class="form-control" style="width:510px;clear:both;"   ></textarea>
                <small class="pull-left">Text not be more than 5 words</small>
                <small class="pull-left" style="margin-left:120px;">*This text will appear on picture</small>
                <input type="hidden" name="preview" class="btn btn-green btn-lg" id="preview" value="View Preview" />
            </div>

            <div class="row">
                <div class="col-lg-11 col-md-11 col-sm-11 col-xs-11 bhoechie-tab-container">
                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 bhoechie-tab-menu">
                        <div class="list-group">
                            <a href="#" class="list-group-item active text-center" id="li300x50">
                                300X50
                            </a>
                            <a href="#" class="list-group-item text-center " id="li320x50">
                                320X50
                            </a>
                            <a href="#" class="list-group-item text-center" id="li300x250">
                                300X250
                            </a>
                            <a href="#" class="list-group-item text-center" id="li250x300">
                                250X300
                            </a>
                            <a href="#" class="list-group-item text-center" id="li320x480">
                                320X480
                            </a>
                            <a href="#" class="list-group-item text-center" id="li728x90">
                                728X90
                            </a>
                            <a href="#" class="list-group-item  text-center" id="li180X150">
                                180X150
                            </a>
                            <a href="#" class="list-group-item text-center " id="li160X600">
                                160X600
                            </a>
                            <a href="#" class="list-group-item text-center" id="li300X600">
                                300X600
                            </a>
                            <a href="#" class="list-group-item text-center" id="li320X53">
                                320X53
                            </a>
                            <a href="#" class="list-group-item text-center" id="li300X75">
                                300X75
                            </a>
                            <a href="#" class="list-group-item text-center" id="li216X36">
                                216X36
                            </a>
                            <a href="#" class="list-group-item  text-center" id="li216X54">
                                216X54
                            </a>
                            <a href="#" class="list-group-item text-center " id="li168X28">
                                168X28
                            </a>
                            <a href="#" class="list-group-item text-center" id="li168X42">
                                168X42
                            </a>
                            <a href="#" class="list-group-item text-center" id="li120X20">
                                120X20
                            </a>
                            <a href="#" class="list-group-item text-center" id="li120X30">
                                120X30
                            </a>
                            <a href="#" class="list-group-item text-center" id="li88X31">
                                88X31
                            </a>
                            <a href="#" class="list-group-item text-center" id="li468X60">
                                468X60
                            </a>
                            <a href="#" class="list-group-item text-center" id="li480X320">
                                480X320
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 bhoechie-tab">
                        <!-- flight section -->
                        <div class="bhoechie-tab-content active">
                            <div class="col-sm-8" id= "preview2c">
                                <br/>
                                <b id="prv2" style="float:left;">
                                    <input id="langdemo12" />
                                </b>
                                <a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <select id="prv2txtC" style="font-size: 12px; width: 100px;float:left;">
                                    <option value="16">Small</option>
                                    <option value="20">Medium</option>
                                    <option value="24">Large</option>
                                </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <div  id= "preview2" class="panel" style="">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <a href="javascript:;"  id="save2"  class="btn btn-sm  btn-orange mtop100"><i class="fa fa-image"></i> Create Banner</a>
                                <a href="#" title='' style="display:none;" id="dw2" class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>


                                <a href="javascript:void(0);"  style="display:none;" id="crop1"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                            </div>
                            <div id="preview2cPr"></div>
                        </div>
                        <!-- train section -->
                        <div class="bhoechie-tab-content">
                            <div class="col-sm-8" id= "preview4c">
                                <br/>
                                <b id="prv4" style="float:left;">
                                    <input id="langdemo14" />
                                </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <select id="prv4txtC" style="font-size: 12px; width: 100px;float:left;">
                                    <option value="16">Small</option>
                                    <option value="20">Medium</option>
                                    <option value="24">Large</option>
                                </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <div  id="preview4"  class="panel" style="">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <a href="javascript:;" id="save4"  class="btn btn-sm btn-orange mtop100"><i class="fa fa-image"></i> Create Banner</a>
                                <a href="#" title='' style="display:none;" id="dw4"  class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                <a href="javascript:void(0);"  style="display:none;" id="crop4"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                            </div>
                            <div id="preview4cPr"></div>
                        </div>

                        <!-- hotel search -->
                        <div class="bhoechie-tab-content">
                            <div id="preview1nc" class="col-sm-8">
                                <br/>
                                <b id="prv1" style="float:left;">
                                    <input id="langdemo11" />
                                </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <select id="prv1txtC" style="font-size: 12px; width: 100px;float:left;">
                                    <option value="16">Small</option>
                                    <option value="20">Medium</option>
                                    <option value="24">Large</option>
                                </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <div id= "preview1" class="panel " style="display:block" >

                                </div>
                            </div>
                            <div class="col-sm-4">
                                <a href="javascript:;" id="save1" class="btn btn-sm btn-orange mtop100"><i class="fa fa-image"></i> Create Banner</a>
                                <a href="#" title='' style="display:none;" id="dw1"  class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                <a href="javascript:void(0);"  style="display:none;" id="crop1"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                            </div>
                            <div id="preview1ncPr"></div>
                        </div>
                        <div class="bhoechie-tab-content">
                            <div class="col-sm-8" id= "preview3c">
                                <br/>
                                <b id="prv3" style="float:left;">
                                    <input id="langdemo13" />
                                </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <select id="prv3txtC" style="font-size: 12px; width: 100px;float:left;">
                                    <option value="16">Small</option>
                                    <option value="20">Medium</option>
                                    <option value="24">Large</option>
                                </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <div  id= "preview3" class="panel" style="">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <a href="javascript:;"  id="save3"  class="btn btn-sm  btn-orange"><i class="fa fa-image"></i> Create Banner</a>
                                <a href="#" title='' style="display:none;" id="dw3" class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                <a href="javascript:void(0);"  style="display:none;" id="crop1"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                            </div>
                            <div id="preview3cPr"></div>
                        </div>
                        <div class="bhoechie-tab-content">
                            <div class="col-sm-8" id= "preview5c">
                                <br/>
                                <b id="prv5" style="float:left;">
                                    <input id="langdemo15" />
                                </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <select id="prv5txtC" style="font-size: 12px; width: 100px;float:left;">
                                    <option value="16">Small</option>
                                    <option value="20">Medium</option>
                                    <option value="24">Large</option>
                                </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <div  id= "preview5" class="panel" style="">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <a href="javascript:;"  id="save5"  class="btn btn-sm  btn-orange"><i class="fa fa-image"></i> Create Banner</a>
                                <a href="#" title='' style="display:none;" id="dw5"  class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                <a href="javascript:void(0);"  style="display:none;" id="crop5"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                            </div>
                            <div id="preview5cPr"></div>
                        </div>
                        <div class="bhoechie-tab-content">
                            <div class="col-sm-12" id= "preview6c">
                                <br/>
                                <b id="prv6" style="float:left;">
                                    <input id="langdemo16" />
                                </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <select id="prv6txtC" style="font-size: 12px; width: 100px;float:left;">
                                    <option value="16">Small</option>
                                    <option value="20">Medium</option>
                                    <option value="24">Large</option>
                                </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <div  id="preview6"  class="panel" style="">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <a href="javascript:;" id="save6"  class="btn btn-sm btn-orange mtop100"><i class="fa fa-image"></i> Create Banner</a>
                                <a href="#" title='' style="display:none;" id="dw6"  class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                <a href="javascript:void(0);"  style="display:none;" id="crop6"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                            </div>
                            <div id="preview6cPr"></div>
                        </div>


                        <!-- 180 X150 START-->
                           <div class="bhoechie-tab-content">
                            <div class="col-sm-12" id= "preview7c">
                                <br/>
                                <b id="prv7" style="float:left;">
                                    <input id="langdemo17" />
                                </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <select id="prv7txtC" style="font-size: 12px; width: 100px;float:left;">
                                    <option value="16">Small</option>
                                    <option value="20">Medium</option>
                                    <option value="24">Large</option>
                                </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <div  id="preview7"  class="panel" style="">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <a href="javascript:;" id="save7"  class="btn btn-sm btn-orange mtop100"><i class="fa fa-image"></i> Create Banner</a>
                                <a href="#" title='' style="display:none;" id="dw7"  class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                <a href="javascript:void(0);"  style="display:none;" id="crop7"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                            </div>
                            <div id="preview7cPr"></div>
                        </div>
                        <!-- 180X150 END -->
                        <!-- 160X600 START-->
                           <div class="bhoechie-tab-content">
                            <div class="col-sm-12" id= "preview8c">
                                <br/>
                                <b id="prv8" style="float:left;">
                                    <input id="langdemo18" />
                                </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <select id="prv8txtC" style="font-size: 12px; width: 100px;float:left;">
                                    <option value="16">Small</option>
                                    <option value="20">Medium</option>
                                    <option value="24">Large</option>
                                </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <div  id="preview8"  class="panel" style="">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <a href="javascript:;" id="save8"  class="btn btn-sm btn-orange mtop100"><i class="fa fa-image"></i> Create Banner</a>
                                <a href="#" title='' style="display:none;" id="dw8"  class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                <a href="javascript:void(0);"  style="display:none;" id="crop8"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                            </div>
                            <div id="preview7cPr"></div>
                        </div>
                        <!---160X600 END -->


 <!-- 300X600 START-->
                           <div class="bhoechie-tab-content">
                            <div class="col-sm-12" id= "preview9c">
                                <br/>
                                <b id="prv9" style="float:left;">
                                    <input id="langdemo19" />
                                </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <select id="prv9txtC" style="font-size: 12px; width: 100px;float:left;">
                                    <option value="16">Small</option>
                                    <option value="20">Medium</option>
                                    <option value="24">Large</option>
                                </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <div  id="preview9"  class="panel" style="">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <a href="javascript:;" id="save9"  class="btn btn-sm btn-orange mtop100"><i class="fa fa-image"></i> Create Banner</a>
                                <a href="#" title='' style="display:none;" id="dw9"  class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                <a href="javascript:void(0);"  style="display:none;" id="crop9"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                            </div>
                            <div id="previe9cPr"></div>
                        </div>
                        <!---300X600 END -->


 <!-- 320X53 START-->
                           <div class="bhoechie-tab-content">
                            <div class="col-sm-12" id= "preview10c">
                                <br/>
                                <b id="prv10" style="float:left;">
                                    <input id="langdemo20" />
                                </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <select id="prv10txtC" style="font-size: 12px; width: 100px;float:left;">
                                    <option value="16">Small</option>
                                    <option value="20">Medium</option>
                                    <option value="24">Large</option>
                                </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <div  id="preview10"  class="panel" style="">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <a href="javascript:;" id="save10"  class="btn btn-sm btn-orange mtop100"><i class="fa fa-image"></i> Create Banner</a>
                                <a href="#" title='' style="display:none;" id="dw10"  class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                <a href="javascript:void(0);"  style="display:none;" id="crop10"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                            </div>
                            <div id="previe10cPr"></div>
                        </div>
                        <!---320X53 END -->

                        <!-- 300X75 START-->
                           <div class="bhoechie-tab-content">
                            <div class="col-sm-12" id= "preview11c">
                                <br/>
                                <b id="prv11" style="float:left;">
                                    <input id="langdemo21" />
                                </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <select id="prv11txtC" style="font-size: 12px; width: 100px;float:left;">
                                    <option value="16">Small</option>
                                    <option value="20">Medium</option>
                                    <option value="24">Large</option>
                                </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <div  id="preview11"  class="panel" style="">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <a href="javascript:;" id="save11"  class="btn btn-sm btn-orange mtop100"><i class="fa fa-image"></i> Create Banner</a>
                                <a href="#" title='' style="display:none;" id="dw11"  class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                <a href="javascript:void(0);"  style="display:none;" id="crop11"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                            </div>
                            <div id="previe11cPr"></div>
                        </div>
                        <!---300X75 END -->

 <!-- 216X36 START-->
                           <div class="bhoechie-tab-content">
                            <div class="col-sm-12" id= "preview12c">
                                <br/>
                                <b id="prv12" style="float:left;">
                                    <input id="langdemo22" />
                                </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <select id="prv12txtC" style="font-size: 12px; width: 100px;float:left;">
                                    <option value="16">Small</option>
                                    <option value="20">Medium</option>
                                    <option value="24">Large</option>
                                </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <div  id="preview12"  class="panel" style="">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <a href="javascript:;" id="save12"  class="btn btn-sm btn-orange mtop100"><i class="fa fa-image"></i> Create Banner</a>
                                <a href="#" title='' style="display:none;" id="dw12"  class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                <a href="javascript:void(0);"  style="display:none;" id="crop12"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                            </div>
                            <div id="previe12cPr"></div>
                        </div>
                        <!--216X36 END -->

 <!-- 216X54 START-->
                           <div class="bhoechie-tab-content">
                            <div class="col-sm-13" id= "preview13c">
                                <br/>
                                <b id="prv13" style="float:left;">
                                    <input id="langdemo23" />
                                </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <select id="prv13txtC" style="font-size: 12px; width: 100px;float:left;">
                                    <option value="16">Small</option>
                                    <option value="20">Medium</option>
                                    <option value="24">Large</option>
                                </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <div  id="preview13"  class="panel" style="">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <a href="javascript:;" id="save13"  class="btn btn-sm btn-orange mtop100"><i class="fa fa-image"></i> Create Banner</a>
                                <a href="#" title='' style="display:none;" id="dw13"  class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                <a href="javascript:void(0);"  style="display:none;" id="crop13"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                            </div>
                            <div id="previe13cPr"></div>
                        </div>
                        <!-- 216X54 END -->


 <!-- 216X54 START-->
                           <div class="bhoechie-tab-content">
                            <div class="col-sm-14" id= "preview14c">
                                <br/>
                                <b id="prv14" style="float:left;">
                                    <input id="langdemo24" />
                                </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <select id="prv14txtC" style="font-size: 12px; width: 100px;float:left;">
                                    <option value="16">Small</option>
                                    <option value="20">Medium</option>
                                    <option value="24">Large</option>
                                </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <div  id="preview14"  class="panel" style="">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <a href="javascript:;" id="save14"  class="btn btn-sm btn-orange mtop100"><i class="fa fa-image"></i> Create Banner</a>
                                <a href="#" title='' style="display:none;" id="dw14"  class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                <a href="javascript:void(0);"  style="display:none;" id="crop14"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                            </div>
                            <div id="previe14cPr"></div>
                        </div>
                        <!-- 216X54 END -->


 <!-- 168X28 START-->
                           <div class="bhoechie-tab-content">
                            <div class="col-sm-15" id= "preview15c">
                                <br/>
                                <b id="prv15" style="float:left;">
                                    <input id="langdemo25" />
                                </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <select id="prv15txtC" style="font-size: 12px; width: 100px;float:left;">
                                    <option value="16">Small</option>
                                    <option value="20">Medium</option>
                                    <option value="24">Large</option>
                                </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <div  id="preview15"  class="panel" style="">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <a href="javascript:;" id="save15"  class="btn btn-sm btn-orange mtop100"><i class="fa fa-image"></i> Create Banner</a>
                                <a href="#" title='' style="display:none;" id="dw15"  class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                <a href="javascript:void(0);"  style="display:none;" id="crop15"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                            </div>
                            <div id="previe15cPr"></div>
                        </div>
                        <!-- 168X28 END -->

 <!-- 168X42 START-->
                           <div class="bhoechie-tab-content">
                            <div class="col-sm-16" id= "preview16c">
                                <br/>
                                <b id="prv16" style="float:left;">
                                    <input id="langdemo26" />
                                </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <select id="prv16txtC" style="font-size: 12px; width: 100px;float:left;">
                                    <option value="16">Small</option>
                                    <option value="20">Medium</option>
                                    <option value="24">Large</option>
                                </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <div  id="preview16"  class="panel" style="">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <a href="javascript:;" id="save16"  class="btn btn-sm btn-orange mtop100"><i class="fa fa-image"></i> Create Banner</a>
                                <a href="#" title='' style="display:none;" id="dw16"  class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                <a href="javascript:void(0);"  style="display:none;" id="crop16"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                            </div>
                            <div id="previe16cPr"></div>
                        </div>
                        <!-- 168X42 END -->


 <!-- 120X120 START-->
                           <div class="bhoechie-tab-content">
                            <div class="col-sm-16" id= "preview17c">
                                <br/>
                                <b id="prv17" style="float:left;">
                                    <input id="langdemo27" />
                                </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <select id="prv17txtC" style="font-size: 12px; width: 100px;float:left;">
                                    <option value="17">Small</option>
                                    <option value="20">Medium</option>
                                    <option value="24">Large</option>
                                </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <div  id="preview17"  class="panel" style="">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <a href="javascript:;" id="save17"  class="btn btn-sm btn-orange mtop100"><i class="fa fa-image"></i> Create Banner</a>
                                <a href="#" title='' style="display:none;" id="dw17"  class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                <a href="javascript:void(0);"  style="display:none;" id="crop17"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                            </div>
                            <div id="previe17cPr"></div>
                        </div>
                        <!-- 12X42 END -->

 <!-- 120X30 START-->
                           <div class="bhoechie-tab-content">
                            <div class="col-sm-16" id= "preview18c">
                                <br/>
                                <b id="prv18" style="float:left;">
                                    <input id="langdemo28" />
                                </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <select id="prv18txtC" style="font-size: 12px; width: 100px;float:left;">
                                    <option value="18">Small</option>
                                    <option value="20">Medium</option>
                                    <option value="24">Large</option>
                                </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <div  id="preview18"  class="panel" style="">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <a href="javascript:;" id="save18"  class="btn btn-sm btn-orange mtop100"><i class="fa fa-image"></i> Create Banner</a>
                                <a href="#" title='' style="display:none;" id="dw18"  class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                <a href="javascript:void(0);"  style="display:none;" id="crop18"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                            </div>
                            <div id="previe18cPr"></div>
                        </div>
                        <!-- 12X30 END -->

 <!-- 88X31 START-->
                           <div class="bhoechie-tab-content">
                            <div class="col-sm-16" id= "preview19c">
                                <br/>
                                <b id="prv19" style="float:left;">
                                    <input id="langdemo29" />
                                </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <select id="prv19txtC" style="font-size: 12px; width: 100px;float:left;">
                                    <option value="19">Small</option>
                                    <option value="20">Medium</option>
                                    <option value="24">Large</option>
                                </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <div  id="preview19"  class="panel" style="">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <a href="javascript:;" id="save19"  class="btn btn-sm btn-orange mtop100"><i class="fa fa-image"></i> Create Banner</a>
                                <a href="#" title='' style="display:none;" id="dw19"  class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                <a href="javascript:void(0);"  style="display:none;" id="crop19"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                            </div>
                            <div id="previe19cPr"></div>
                        </div>
                        <!-- 88X31 END -->
 <!-- 468X60 START-->
                           <div class="bhoechie-tab-content">
                            <div class="col-sm-16" id= "preview20c">
                                <br/>
                                <b id="prv20" style="float:left;">
                                    <input id="langdemo30" />
                                </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <select id="prv20txtC" style="font-size: 12px; width: 100px;float:left;">
                                    <option value="20">Small</option>
                                    <option value="20">Medium</option>
                                    <option value="24">Large</option>
                                </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <div  id="preview20"  class="panel" style="">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <a href="javascript:;" id="save20"  class="btn btn-sm btn-orange mtop100"><i class="fa fa-image"></i> Create Banner</a>
                                <a href="#" title='' style="display:none;" id="dw20"  class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                <a href="javascript:void(0);"  style="display:none;" id="crop20"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                            </div>
                            <div id="previe20cPr"></div>
                        </div>
                        <!-- 468X60 END -->



<!-- 468X320 START-->
                           <div class="bhoechie-tab-content">
                            <div class="col-sm-16" id= "preview20c">
                                <br/>
                                <b id="prv21" style="float:left;">
                                    <input id="langdemo31" />
                                </b><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;"  tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <select id="prv21txtC" style="font-size: 12px; width: 100px;float:left;">
                                    <option value="20">Small</option>
                                    <option value="20">Medium</option>
                                    <option value="24">Large</option>
                                </select><a class="text-light-grey large-font pull-left" style="padding: 0px 5px; margin: 0px;" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>

                                <div  id="preview20"  class="panel" style="">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <a href="javascript:;" id="save21"  class="btn btn-sm btn-orange mtop100"><i class="fa fa-image"></i> Create Banner</a>
                                <a href="#" title='' style="display:none;" id="dw21"  class="btn btn-sm btn-orange mtop100 crps"><i class="fa fa-expand"></i> View and Confirm</a>
                                <a href="javascript:void(0);"  style="display:none;" id="crop21"  class="btn btn-sm btn-orange mtop100 crp"><i class="fa fa-crop"></i> Crop</a>
                            </div>
                            <div id="previe20cPr"></div>
                        </div>
                        <!-- 468X320 END -->

                    </div>
                </div>
            </div>


            <div class="clearfix">






                <form class="gallery-form" action="cropimage_post" method="post"  name="crop_tools" id="crop_tools">
                    <input type="hidden" name="select_values"  id="select_values" />
                    <input type="hidden" name="_token" value="{!!  csrf_token()  !!}" />
                    <input type="hidden" name="back_ground_color"  id="back_ground_color" />

                    <input type="hidden" name="text_color"  id="text_color" />

                    <input type="hidden" name="input_text"  id="input_text" />

                    <input type="hidden" name="selected_image" id="selected_image" />

                    <input type="hidden" name="text_top_postion"  id="text_top_postion" />

                    <input type="hidden" name="text_left_postion"  id="text_left_postion" />

                    <input type="hidden" name="image_left_postion"  id="image_left_postion" />

                    <input type="hidden" name="image_top_postion"  id="image_top_postion" />

                    <input type="hidden" name="text_size"  id="text_size" />

                    <input type="hidden" name="text_style"  id="text_style" />

                    <input type="hidden" name="banner_x" id="banner_x" />

                    <input type="hidden" name="banner_y" id="banner_y" />

                    <input type="hidden" name="cropimage_data" id="cropimage_data" />
                    <input type="hidden" name="image_height" id="image_height" />
                    <input type="hidden" name="image_width" id="image_width" />
                    <input type="hidden" name="imagefrom" id="imagefrom" />
                </form>
                <form class="gallery-form" action="creatad-crop/upload-banner-add" method="post"  name="bnr_creation" id="bnr_creation" onsubmit="return bnr_creation();">
                    <div class="text-center mtopbot15">
                        <input type="hidden" name="_token" value="{!!  'csrf_token()'  !!}" />
                        <input type="hidden" name="imgcrp1" id="imgcrps1" class="hcrp" value=""/>
                        <input type="hidden" name="imgcrp2" id="imgcrps2" class="hcrp" value=""/>
                        <input type="hidden" name="imgcrp3" id="imgcrps3" class="hcrp" value=""/>
                        <input type="hidden" name="imgcrp4" id="imgcrps4" class="hcrp" value=""/>
                        <input type="hidden" name="imgcrp5" id="imgcrps5" class="hcrp" value=""/>
                        <input type="hidden" name="imgcrp6" id="imgcrps6" class="hcrp" value=""/>
                              <input type="hidden" name="imgcrp7" id="imgcrps7" class="hcrp" value=""/>
                    <input type="hidden" name="imgcrp8" id="imgcrps8" class="hcrp" value=""/>
                      <input type="hidden" name="imgcrp9" id="imgcrps9" class="hcrp" value=""/>
                        <input type="hidden" name="imgcrp10" id="imgcrps10" class="hcrp" value=""/>
                          <input type="hidden" name="imgcrp11" id="imgcrps11" class="hcrp" value=""/>
                            <input type="hidden" name="imgcrp12" id="imgcrps12" class="hcrp" value=""/>
                                 <input type="hidden" name="imgcrp13" id="imgcrps13" class="hcrp" value=""/>
     <input type="hidden" name="imgcrp14" id="imgcrps14" class="hcrp" value=""/>
     <input type="hidden" name="imgcrp15" id="imgcrps15" class="hcrp" value=""/>     
     <input type="hidden" name="imgcrp16" id="imgcrps16" class="hcrp" value=""/>
     <input type="hidden" name="imgcrp17" id="imgcrps17" class="hcrp" value=""/>
     <input type="hidden" name="imgcrp18" id="imgcrps18" class="hcrp" value=""/>
     <input type="hidden" name="imgcrp19" id="imgcrps19" class="hcrp" value=""/>
     <input type="hidden" name="imgcrp20" id="imgcrps20" class="hcrp" value=""/>
                        <input type="hidden" name="cook_key" id="cook_key" value=""/>
                        <input type="hidden" name="catbind" id="catbind" value=""/>
                        <input type="submit" class="btn btn-orange" value="Upload" />
                    </div>
                </form>


            </div>
        </div>
    </div>
</div>
</body>
<!-- content area end -->
@include('footer_inside')
<!--=========================================================code end================================================-->


{!! Html::script('themes/js/jquery.js'); !!}
<!-- Bootstrap Core JavaScript -->

{!! Html::script("themes/js/bootstrap.min.js"); !!}

<script>
    //$.noConflict();
    $(document).ready(function () {
        $('[data-toggle="popover"]').popover();
    });

    $('.vtg').click(function () {

        $('.vtg').removeClass('active');
        $(this).addClass('active');
        mypreview('active');
    })
    function bnr_creation()
    {
        alert('bnr_creation');
        return false;
    }


    /*popupResult({
     src: resp
     });
     */
    function popupResult(result) {
        var html;
        if (result.html) {
            html = result.html;
        }
        if (result.src) {
            html = '<img src="' + result.src + '" />';
        }
        swal({
            title: result.title,
            html: true,
            text: html,
            allowOutsideClick: true
        });
        setTimeout(function () {
            $('.sweet-alert').css('margin', function () {
                var top = -1 * ($(this).height() / 2),
                        left = -1 * ($(this).width() / 2);

                return top + 'px 0 0 ' + left + 'px';
            });
        }, 1);
    }

</script>


<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<link rel="Stylesheet" type="text/css" href="themes/crp/bower_components/sweetalert/dist/sweetalert.css" />


<script src="themes/crp/bower_components/sweetalert/dist/sweetalert.min.js"></script>

{!! Html::script("themes/js/spectrum-banner.js"); !!}

{!! Html::script("themes/js/nicEdit.js"); !!}
<!-- this page js -->


<script type="text/javascript">
    bkLib.onDomLoaded(function () {
//  new nicEditor({buttonList : ['fontFamily','fontSize','bold','italic','underline','forecolor']}).panelInstance('area5');
    });
</script>
    <script type="text/javascript">



            $(document).ready(function () {
        $("div.bhoechie-tab-menu>div.list-group>a").click(function (e) {
            e.preventDefault();
            $(this).siblings('a.active').removeClass("active");
            $(this).addClass("active");
            var index = $(this).index();
            $("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active");
            $("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active");
            mypreview('str');
        });
    });
    if ($('body').find('#langdemo1').length != 0) {
        $(function () {
            $("#langdemo1").spectrum({
                flat: false,
                showInput: true,
            });
        });
    }

    $(function () {
        $("#langdemo11").spectrum({
            flat: false,
            showInput: true,
            clearText: 'bgg2',
        });
    });

    $(function () {
        $("#langdemo12").spectrum({
            flat: false,
            showInput: true,
            clearText: 'bgg2',
        });
    });

    $(function () {
        $("#langdemo13").spectrum({
            flat: false,
            showInput: true,
            clearText: 'bgg2',
        });
    });

    $(function () {
        $("#langdemo14").spectrum({
            flat: false,
            showInput: true,
            clearText: 'bgg2',
        });
    });

    $(function () {
        $("#langdemo15").spectrum({
            flat: false,
            showInput: true,
            clearText: 'bgg2',
        });
    });

    $(function () {
        $("#langdemo16").spectrum({
            flat: false,
            showInput: true,
            clearText: 'bgg2',
        });
    });



$(function () {
    $("#langdemo17,#langdemo18,#langdemo19,#langdemo20,#langdemo21,#langdemo22,#langdemo23,#langdemo24,#langdemo25,#langdemo26,#langdemo27,#langdemo28,#langdemo29,#langdemo30").spectrum({
        flat: false,
        showInput: true,
        clearText: 'bgg2',
    });
});





    $("#prv1txtC").change(function () {
        mypreview('str');
    });
    $("#prv2txtC").change(function () {
        mypreview('str');
    });
    $("#prv3txtC").change(function () {
        mypreview('str');
    });
    $("#prv4txtC").change(function () {
        mypreview('str');
    });
    $("#prv5txtC").change(function () {
        mypreview('str');
    });
    $("#prv6txtC").change(function () {
        mypreview('str');
    });

    $("#prv7txtC").change(function () {
        mypreview('str');
    });

    $("#prv8txtC").change(function () {
        mypreview('str');
    });
    $("#prv9txtC").change(function () {
        mypreview('str');
    });
    $("#prv10txtC").change(function () {
        mypreview('str');
    });
    $("#prv11txtC").change(function () {
        mypreview('str');
    });


    $("#prv12txtC").change(function () {
        mypreview('str');
    });

    $("#prv13txtC").change(function () {
        mypreview('str');
    });



    $("#prv14txtC").change(function () {
        mypreview('str');
    });

    $("#prv15txtC").change(function () {
        mypreview('str');
    });


    $("#prv16txtC").change(function () {
        mypreview('str');
    });

    $("#prv17txtC").change(function () {
        mypreview('str');
    });


    $("#prv18txtC").change(function () {
        mypreview('str');
    });

    $("#prv19txtC").change(function () {
        mypreview('str');
    });

    $("#prv20txtC").change(function () {
        mypreview('str');
    });

    $('#preview').on('click', function () { // code

        //for preview1
        var txtsize1 = $("#prv1txtC").val();
        //for preview2
        var txtsize2 = $("#prv2txtC").val();
        //for preview3
        var txtsize3 = $("#prv3txtC").val();
        //for preview4
        var txtsize4 = $("#prv4txtC").val();
        //for preview5
        var txtsize4 = $("#prv5txtC").val();
        //for preview6
        var txtsize4 = $("#prv6txtC").val();
 //for preview7
        var txtsize4 = $("#prv7txtC").val();
 //for preview8
        var txtsize4 = $("#prv8txtC").val();
        //for preview9
        var txtsize4 = $("#prv9txtC").val();
       //for preview10
        var txtsize4 = $("#prv10txtC").val();

       //for preview11
        var txtsize4 = $("#prv11txtC").val();

               //for preview12
        var txtsize4 = $("#prv12txtC").val();

       //for preview13
        var txtsize4 = $("#prv13txtC").val();
       //for preview14
        var txtsize4 = $("#prv14txtC").val();

               //for preview10
        var txtsize4 = $("#prv15txtC").val();

       //for preview10
        var txtsize4 = $("#prv16txtC").val();

       //for preview10
        var txtsize4 = $("#prv17txtC").val();


       //for preview10
        var txtsize4 = $("#prv18txtC").val();

               //for preview10
        var txtsize4 = $("#prv19txtC").val();


               //for preview10
        var txtsize4 = $("#prv20txtC").val();





        $("#preview1,#preview2,#preview3,#preview4,#preview5,#preview6,#preview7,#preview8,#preview9,#preview10,#preview11,#preview12,#preview13,#preview14,#preview15,#preview16,#preview17,#preview18,#preview19,#preview20").html("");

        //var txtsize=$("#bg3").val();

        // var txtstyle=$("#bg8").val();

        $('#crop1,#crop2,#crop3,#crop4', '#crop5', '#crop6','#crop7','#crop8','#crop9','#crop10','#crop11','#crop12','#crop13','#crop14','#crop15','#crop16','#crop17','#crop18','#crop19','#crop20').css('display', 'block');
        //$("#preview1,#preview2,#preview3,#preview4,#preview5,#preview6").html("");
        var color = $("#bg1 .sp-preview-inner").attr('style');

        $("#preview1").attr('style', color);

        $("#preview2").attr('style', color);

        $("#preview3").attr('style', color);

        $("#preview4").attr('style', color);

        $("#preview5").attr('style', color);

        $("#preview6").attr('style', color);
        $("#preview7").attr('style', color);
        $("#preview8").attr('style', color);
        $("#preview9").attr('style', color);
        $("#preview10").attr('style', color);
        $("#preview11").attr('style', color);
        $("#preview12").attr('style', color);
        $("#preview13").attr('style', color);
        $("#preview14").attr('style', color);
        $("#preview15").attr('style', color);
        $("#preview16").attr('style', color);
        $("#preview17").attr('style', color);
        $("#preview18").attr('style', color);
        $("#preview19").attr('style', color);
        $("#preview20").attr('style', color);

        //$('#preview1 b').css('font-size',txtsize+'px');
        var text = $("#area5").val();

        var bd1 = '';
        var bd2 = '';
        var bd3 = '';
        var bd4 = '';
        var bd5 = '';
        var bd6 = '';
        var bd7 = '';
        var bd8 = '';
        var bd9 = '';
        var bd10 = '';
        var bd11 = '';
        var bd12 = '';
        var bd13 = '';
        var bd14 = '';
        var bd15 = '';
        var bd16 = '';
        var bd17 = '';
        var bd18 = '';
        var bd19 = '';
        var bd620 = '';

        var x1 = $("#prv1 .sp-preview-inner").attr('style');
        var x2 = $("#prv2 .sp-preview-inner").attr('style');
        var x3 = $("#prv3 .sp-preview-inner").attr('style');
        var x4 = $("#prv4 .sp-preview-inner").attr('style');
        var x5 = $("#prv5 .sp-preview-inner").attr('style');
        var x6 = $("#prv6 .sp-preview-inner").attr('style');
        var x7 = $("#prv7 .sp-preview-inner").attr('style');

var x8 = $("#prv8 .sp-preview-inner").attr('style');
var x9 =$("#prv9 .sp-preview-inner").attr('style');
var x10 =$("#prv10 .sp-preview-inner").attr('style');
var x11 =$("#prv11 .sp-preview-inner").attr('style');
var x12 =$("#prv12 .sp-preview-inner").attr('style');
var x13 =$("#prv13 .sp-preview-inner").attr('style');
var x14 =$("#prv14 .sp-preview-inner").attr('style');
var x15 =$("#prv15 .sp-preview-inner").attr('style');
var x16 =$("#prv16 .sp-preview-inner").attr('style');
var x17 =$("#prv17 .sp-preview-inner").attr('style');
var x18 =$("#prv18 .sp-preview-inner").attr('style');
var x19 =$("#prv19 .sp-preview-inner").attr('style');
var x20 =$("#prv20 .sp-preview-inner").attr('style');
        //var x='background-color:#fff;';
var tcl1 = x1.split('background-color:');
var tcl2 = x2.split('background-color:');
var tcl3 = x3.split('background-color:');
var tcl4 = x4.split('background-color:');
var tcl5 = x5.split('background-color:');
var tcl6 = x6.split('background-color:');

var tcl7 = x7.split('background-color:');
var tcl8 = x8.split('background-color:');
var tcl9 = x9.split('background-color:');
var tcl10 = x10.split('background-color:');
var tcl11 = x11.split('background-color:');
var tcl12 = x12.split('background-color:');
var tcl13 = x13.split('background-color:');
var tcl14 = x14.split('background-color:');
var tcl15 = x15.split('background-color:');
var tcl16 = x16.split('background-color:');
var tcl17 = x17.split('background-color:');
var tcl18 = x18.split('background-color:');
var tcl19 = x19.split('background-color:');
var tcl20 = x20.split('background-color:');

        if ($("#pic").val() == 'Picture Gallery')
        {
            var values_images = $('.gallery-pic label.active > img').attr('src');
            bd1 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style="" /></div>';
            bd2 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
            bd3 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
            bd4 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
            bd5 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
            bd6 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
            bd7 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
            bd8 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
            bd9 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
            bd10 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
    bd11 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
    bd12 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
    bd13 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
    bd14 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
    bd15 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
    bd16 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
    bd17 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
    bd18 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
    bd19 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
    bd20 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
    $("#imagefrom").val('Picture Gallery');
            }
            else if ($("#pic").val() == 'My Computer')
            {
            var values_images = $('.panel >img').attr('src');
            bd1 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
            bd2 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
            bd3 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
            bd4 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
            bd5 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
            bd6 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
            bd7 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
            bd8 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
            bd9 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
            bd10 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
    bd11 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
    bd12 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
    bd13 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
    bd14 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
    bd15 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
    bd16 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
    bd17 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
    bd18 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
    bd19 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
    bd20 = '<div class="draggable "><img id="theImg" class="resizable" src="' + values_images + '" style=""/></div>';
            $("#imagefrom").val('My Computer');
            }
            else if ($("#pic").val() == 'No Image')
                    {
                        var values_images = "";
                        $("#imagefrom").val('No Image');
                    }


                    var data1 = bd1 + '<div class="mv m1" id="myDIV" style="margin-top:0,0,0,0; color:' + tcl1[1] + '; font-size:' + txtsize1 + 'px;">' + text + '</div>';
                    var data2 = bd2 + '<div class="mv m2" id="myDIV2" style="margin-top:0,0,0,0; color:' + tcl2[1] + '; font-size:' + txtsize1 + 'px;float:right;">' + text + '</div>';
                    var data3 = bd3 + '<div class="mv m3" id="myDIV3" style="margin-top:0,0,0,0; color:' + tcl3[1] + '; font-size:' + txtsize1 + 'px;">' + text + '</div>';
                    var data4 = bd4 + '<div class="mv m4" id="myDIV4" style="margin-top:0,0,0,0; color:' + tcl4[1] + '; font-size:' + txtsize1 + 'px;float:right;">' + text + '</div>';
                    var data5 = bd5 + '<div class="mv m5" id="myDIV5" style="margin-top:0,0,0,0; color:' + tcl5[1] + '; font-size:' + txtsize1 + 'px;">' + text + '</div>';
                    var data6 = bd6 + '<div class="mv m6" id="myDIV6" style="margin-top:0,0,0,0; color:' + tcl6[1] + '; font-size:' + txtsize1 + 'px;float:right;">' + text + '</div>';
                    var data7 = bd7 + '<div class="mv m7" id="myDIV7" style="margin-top:0,0,0,0; color:' + tcl7[1] + '; font-size:' + txtsize1 + 'px;float:right;">' + text + '</div>';
                    var data8 = bd8 + '<div class="mv m8" id="myDIV8" style="margin-top:0,0,0,0; color:' + tcl8[1] + '; font-size:' + txtsize1 + 'px;float:right;">' + text + '</div>';
                    var data9 = bd9 + '<div class="mv m9" id="myDIV9" style="margin-top:0,0,0,0; color:' + tcl9[1] + '; font-size:' + txtsize1 + 'px;float:right;">' + text + '</div>';
                    var data10 = bd10 + '<div class="mv m10" id="myDIV10" style="margin-top:0,0,0,0; color:' + tcl10[1] + '; font-size:' + txtsize1 + 'px;float:right;">' + text + '</div>';
                    var data11 = bd11 + '<div class="mv m11" id="myDIV11" style="margin-top:0,0,0,0; color:' + tcl11[1] + '; font-size:' + txtsize1 + 'px;float:right;">' + text + '</div>';
                    var data12 = bd12 + '<div class="mv m12" id="myDIV12" style="margin-top:0,0,0,0; color:' + tcl12[1] + '; font-size:' + txtsize1 + 'px;float:right;">' + text + '</div>';
                    var data13 = bd13 + '<div class="mv m13" id="myDIV13" style="margin-top:0,0,0,0; color:' + tcl13[1] + '; font-size:' + txtsize1 + 'px;float:right;">' + text + '</div>';
                    var data14 = bd14 + '<div class="mv m14" id="myDIV14" style="margin-top:0,0,0,0; color:' + tcl14[1] + '; font-size:' + txtsize1 + 'px;float:right;">' + text + '</div>';
                    var data15 = bd15 + '<div class="mv m15" id="myDIV15" style="margin-top:0,0,0,0; color:' + tcl15[1] + '; font-size:' + txtsize1 + 'px;float:right;">' + text + '</div>';
                    var data16 = bd16 + '<div class="mv m16" id="myDIV16" style="margin-top:0,0,0,0; color:' + tcl16[1] + '; font-size:' + txtsize1 + 'px;float:right;">' + text + '</div>';
                    var data17 = bd17 + '<div class="mv m17" id="myDIV17" style="margin-top:0,0,0,0; color:' + tcl17[1] + '; font-size:' + txtsize1 + 'px;float:right;">' + text + '</div>';
                    var data18 = bd18 + '<div class="mv m18" id="myDIV18" style="margin-top:0,0,0,0; color:' + tcl18[1] + '; font-size:' + txtsize1 + 'px;float:right;">' + text + '</div>';
                    var data19 = bd19 + '<div class="mv m19" id="myDIV19" style="margin-top:0,0,0,0; color:' + tcl19[1] + '; font-size:' + txtsize1 + 'px;float:right;">' + text + '</div>';
                    var data20 = bd20 + '<div class="mv m20" id="myDIV20" style="margin-top:0,0,0,0; color:' + tcl20[1] + '; font-size:' + txtsize1 + 'px;float:right;">' + text + '</div>';


                    $("#preview1").append(data1);
                    $("#preview2").append(data2);
                    $("#preview3").append(data3);
                    $("#preview4").append(data4);
                    $("#preview5").append(data5);
                    $("#preview6").append(data6);
                    $("#preview7").append(data7);
                    $("#preview8").append(data8);
                    $("#preview9").append(data9);
                    $("#preview10").append(data10);
                    $("#preview11").append(data11);
                     $("#preview12").append(data12);
                      $("#preview13").append(data13);
                       $("#preview14").append(data14);
                        $("#preview15").append(data15);
                         $("#preview16").append(data16);
                          $("#preview17").append(data17);
                           $("#preview18").append(data18);
                            $("#preview19").append(data19);
                             $("#preview20").append(data20);

$("#select_values").val(color + ';text=' + text + ';imagevalue=' + values_images);
                    $("#cropimage_data").val(values_images);


//$( "#theImg .mv" ).resizable();

/*  $('#preview1 #resizeDiv').draggable(
 {
 appendTo: 'body',
                            scroll: false,

                            drag: function(event) {
                            var top = $(this).position().top;
                            var left = $(this).position().left;
                            //console.log('Top:'+top+'  Left:'+left);

                            }
                            });
                            $('#preview1 #theImg').resizable({
                            handles: 'n, e, s, w'
                            } );
                            */

                           /*$('#preview1 #theImg').resizable().draggable({
                            appendTo: 'body',
                            scroll: false,

                            drag: function(event) {
                            var top = $(this).position().top;
                            var left = $(this).position().left;
                            //console.log('Top:'+top+'  Left:'+left);

                            }
                            });*/

$('#preview1 .draggable').draggable({
    containment: "parent",
    drag: function (event) {

        var left = $(this).position().left;


        var cntrLeft = left;


        $('#preview1 .draggable').css('left', (cntrLeft) + "px");



    }
});

$('#preview1 .resizable').resizable({
    containment: '#preview1',
aspectRatio: true,
handles: 'se',
stop: function (event, ui) {

    height = $(this).height();

    width = $(this).width();
    $('#preview1 .draggable').css('height', height - 2);
    $('#preview1 .draggable').css('width', width - 2);
}

});

$('#preview2 .draggable').draggable({
containment: "parent",
drag: function (event) {
    var top = $(this).position().top;
    var left = $(this).position().left;
    var cntrLeft = left;


    $('#preview2 .draggable').css('left', (cntrLeft) + "px");

}
});

$('#preview2 .resizable').resizable({
containment: '#preview2',
aspectRatio: true,
handles: 'se',
stop: function (event, ui) {

    height = $(this).height();

    width = $(this).width();
    $('#preview2 .draggable').css('height', height - 2);
    $('#preview2 .draggable').css('width', width - 2);
}
});
$('#preview3 .draggable').draggable({
containment: "parent",
drag: function (event) {
    var top = $(this).position().top;
    var left = $(this).position().left;
    var cntrLeft = left;
    $('#preview3 .draggable').css('left', (cntrLeft) + "px");

}
});

$('#preview3 .resizable').resizable({
containment: '#preview3',
aspectRatio: true,
handles: 'se',
stop: function (event, ui) {

    height = $(this).height();

    width = $(this).width();
    $('#preview3 .draggable').css('height', height - 2);
    $('#preview3 .draggable').css('width', width - 2);
}
});
$('#preview4 .draggable').draggable({
containment: "parent",
drag: function (event) {
    var top = $(this).position().top;
    var left = $(this).position().left;
    var cntrLeft = left;
    $('#preview4 .draggable').css('left', (cntrLeft) + "px");

}
});

$('#preview4 .resizable').resizable({
containment: '#preview4',
aspectRatio: true,
handles: 'se',
stop: function (event, ui) {

    height = $(this).height();

    width = $(this).width();
    $('#preview4 .draggable').css('height', height - 2);
    $('#preview4 .draggable').css('width', width - 2);
}
});
$('#preview5 .draggable').draggable({
containment: "parent",
drag: function (event) {
    var top = $(this).position().top;
    var left = $(this).position().left;
    var cntrLeft = left;
    $('#preview5 .draggable').css('left', (cntrLeft) + "px");

}
});

$('#preview5 .resizable').resizable({
containment: '#preview5',
aspectRatio: true,
handles: 'se',
stop: function (event, ui) {

    height = $(this).height();

    width = $(this).width();
    $('#preview5 .draggable').css('height', height - 2);
    $('#preview5 .draggable').css('width', width - 2);
}
});
$('#preview6 .draggable').draggable({
containment: "parent",
drag: function (event) {
    var top = $(this).position().top;
    var left = $(this).position().left;
    var cntrLeft = left;
    $('#preview6 .draggable').css('left', (cntrLeft) + "px");

}
});

$('#preview6 .resizable').resizable({
containment: '#preview6',
aspectRatio: true,
handles: 'se',
stop: function (event, ui) {

    height = $(this).height();

    width = $(this).width();
    $('#preview6 .draggable').css('height', height - 2);
    $('#preview6 .draggable').css('width', width - 2);
}
});




$('#preview7 .draggable').draggable({
    containment: "parent",
    drag: function (event) {

        var left = $(this).position().left;


        var cntrLeft = left;


        $('#preview7 .draggable').css('left', (cntrLeft) + "px");



    }
});




$('#preview7 .resizable').resizable({
    containment: '#preview7',
aspectRatio: true,
handles: 'se',
stop: function (event, ui) {

    height = $(this).height();

    width = $(this).width();
    $('#preview7 .draggable').css('height', height - 2);
    $('#preview7 .draggable').css('width', width - 2);
}

});



$('#preview8 .draggable').draggable({
    containment: "parent",
    drag: function (event) {

        var left = $(this).position().left;


        var cntrLeft = left;


        $('#preview8 .draggable').css('left', (cntrLeft) + "px");



    }
});

$('#preview8 .resizable').resizable({
    containment: '#preview7',
aspectRatio: true,
handles: 'se',
stop: function (event, ui) {

    height = $(this).height();

    width = $(this).width();
    $('#preview7 .draggable').css('height', height - 2);
    $('#preview7 .draggable').css('width', width - 2);
}

});




$('#preview9 .draggable').draggable({
    containment: "parent",
    drag: function (event) {

        var left = $(this).position().left;


        var cntrLeft = left;


        $('#preview9 .draggable').css('left', (cntrLeft) + "px");



    }
});

$('#preview9 .resizable').resizable({
    containment: '#preview7',
aspectRatio: true,
handles: 'se',
stop: function (event, ui) {

    height = $(this).height();

    width = $(this).width();
    $('#preview9 .draggable').css('height', height - 2);
    $('#preview9 .draggable').css('width', width - 2);
}

});



$('#preview10 .draggable').draggable({
    containment: "parent",
    drag: function (event) {

        var left = $(this).position().left;


        var cntrLeft = left;


        $('#preview10 .draggable').css('left', (cntrLeft) + "px");



    }
});

$('#preview10 .resizable').resizable({
    containment: '#preview7',
aspectRatio: true,
handles: 'se',
stop: function (event, ui) {

    height = $(this).height();

    width = $(this).width();
    $('#preview10 .draggable').css('height', height - 2);
    $('#preview10 .draggable').css('width', width - 2);
}

});


$('#preview11 .draggable').draggable({
    containment: "parent",
    drag: function (event) {

        var left = $(this).position().left;


        var cntrLeft = left;


        $('#preview11 .draggable').css('left', (cntrLeft) + "px");



    }
});

$('#preview11 .resizable').resizable({
    containment: '#preview7',
aspectRatio: true,
handles: 'se',
stop: function (event, ui) {

    height = $(this).height();

    width = $(this).width();
    $('#preview11 .draggable').css('height', height - 2);
    $('#preview11 .draggable').css('width', width - 2);
}

});




$('#preview12 .draggable').draggable({
    containment: "parent",
    drag: function (event) {

        var left = $(this).position().left;


        var cntrLeft = left;


        $('#preview12 .draggable').css('left', (cntrLeft) + "px");



    }
});

$('#preview12 .resizable').resizable({
    containment: '#preview7',
aspectRatio: true,
handles: 'se',
stop: function (event, ui) {

    height = $(this).height();

    width = $(this).width();
    $('#preview12 .draggable').css('height', height - 2);
    $('#preview12 .draggable').css('width', width - 2);
}

});




$('#preview13 .draggable').draggable({
    containment: "parent",
    drag: function (event) {

        var left = $(this).position().left;


        var cntrLeft = left;


        $('#preview13 .draggable').css('left', (cntrLeft) + "px");



    }
});

$('#preview13 .resizable').resizable({
    containment: '#preview7',
aspectRatio: true,
handles: 'se',
stop: function (event, ui) {

    height = $(this).height();

    width = $(this).width();
    $('#preview13 .draggable').css('height', height - 2);
    $('#preview13 .draggable').css('width', width - 2);
}

});

$('#preview14 .draggable').draggable({
    containment: "parent",
    drag: function (event) {

        var left = $(this).position().left;


        var cntrLeft = left;


        $('#preview14 .draggable').css('left', (cntrLeft) + "px");



    }
});

$('#preview14 .resizable').resizable({
    containment: '#preview7',
aspectRatio: true,
handles: 'se',
stop: function (event, ui) {

    height = $(this).height();

    width = $(this).width();
    $('#preview14 .draggable').css('height', height - 2);
    $('#preview14 .draggable').css('width', width - 2);
}

});


$('#preview15 .draggable').draggable({
    containment: "parent",
    drag: function (event) {

        var left = $(this).position().left;


        var cntrLeft = left;


        $('#preview15 .draggable').css('left', (cntrLeft) + "px");



    }
});

$('#preview15 .resizable').resizable({
    containment: '#preview7',
aspectRatio: true,
handles: 'se',
stop: function (event, ui) {

    height = $(this).height();

    width = $(this).width();
    $('#preview15 .draggable').css('height', height - 2);
    $('#preview15 .draggable').css('width', width - 2);
}

});



$('#preview16 .draggable').draggable({
    containment: "parent",
    drag: function (event) {

        var left = $(this).position().left;


        var cntrLeft = left;


        $('#preview16 .draggable').css('left', (cntrLeft) + "px");



    }
});

$('#preview16 .resizable').resizable({
    containment: '#preview7',
aspectRatio: true,
handles: 'se',
stop: function (event, ui) {

    height = $(this).height();

    width = $(this).width();
    $('#preview16 .draggable').css('height', height - 2);
    $('#preview16 .draggable').css('width', width - 2);
}

});




$('#preview17 .draggable').draggable({
    containment: "parent",
    drag: function (event) {

        var left = $(this).position().left;


        var cntrLeft = left;


        $('#preview17 .draggable').css('left', (cntrLeft) + "px");



    }
});

$('#preview17 .resizable').resizable({
    containment: '#preview7',
aspectRatio: true,
handles: 'se',
stop: function (event, ui) {

    height = $(this).height();

    width = $(this).width();
    $('#preview17 .draggable').css('height', height - 2);
    $('#preview17 .draggable').css('width', width - 2);
}

});

$('#preview18 .draggable').draggable({
    containment: "parent",
    drag: function (event) {

        var left = $(this).position().left;


        var cntrLeft = left;


        $('#preview18 .draggable').css('left', (cntrLeft) + "px");



    }
});

$('#preview18 .resizable').resizable({
    containment: '#preview7',
aspectRatio: true,
handles: 'se',
stop: function (event, ui) {

    height = $(this).height();

    width = $(this).width();
    $('#preview18 .draggable').css('height', height - 2);
    $('#preview18 .draggable').css('width', width - 2);
}

});


$('#preview19 .draggable').draggable({
    containment: "parent",
    drag: function (event) {

        var left = $(this).position().left;


        var cntrLeft = left;


        $('#preview19 .draggable').css('left', (cntrLeft) + "px");



    }
});

$('#preview19 .resizable').resizable({
    containment: '#preview7',
aspectRatio: true,
handles: 'se',
stop: function (event, ui) {

    height = $(this).height();

    width = $(this).width();
    $('#preview19 .draggable').css('height', height - 2);
    $('#preview19 .draggable').css('width', width - 2);
}

});


$('#preview20 .draggable').draggable({
    containment: "parent",
    drag: function (event) {

        var left = $(this).position().left;


        var cntrLeft = left;


        $('#preview20 .draggable').css('left', (cntrLeft) + "px");



    }
});

$('#preview20 .resizable').resizable({
    containment: '#preview7',
aspectRatio: true,
handles: 'se',
stop: function (event, ui) {

    height = $(this).height();

    width = $(this).width();
    $('#preview20 .draggable').css('height', height - 2);
    $('#preview20 .draggable').css('width', width - 2);
}

});




//dislplay:inline-block





//image move Top and left data


$('.mv').draggable({
drag: function (event) {

    var top = $(this).position().top;
    var left = $(this).position().left;
}
});

});

$("#save1").on("click", function () {
var imagefrom = $("#imagefrom").val();
var image_lefts = $("#preview1 .draggable").css("left");
$("#image_left_postion").val(image_lefts);
var image_left = $("#image_left_postion").val();
var image_Tops = $("#preview1 .draggable").css("top");

$("#image_top_postion").val(image_Tops);
var image_Top = $("#image_top_postion").val();

var text_lefts = $("#preview1 .m1").css("left");
var text_lefts2 = text_lefts.replace('px', '');

var text_vtops = $("#preview1 .m1").css("top");
var text_vtops2 = text_vtops.replace('px', '');
var elmnt = document.getElementById("myDIV");

var x = elmnt.offsetLeft;
var y = elmnt.offsetTop;

x = x + 'px';
y = y + 'px';


if ($("#pic").val() == 'No Image') {
var img_wth = '0';
} else {
var img_wth = $("#preview1 .draggable").css("width");
var img_wth = img_wth.replace('px', '');
}
text_lefts2 = $.trim(text_lefts2);

var image_leftsk = $("#preview1 .draggable").css("left");


text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);

text_lefts = text_lefts + 'px';

$("#text_left_postion").val(text_lefts);
var text_left = $("#text_left_postion").val();

var text_tops = $("#preview1 .m1").css("top");
$("#text_top_postion").val(text_tops);
var text_top = $("#text_top_postion").val();

var background_colorw = $("#preview1").css('background-color');
$("#back_ground_color").val(background_colorw);
var back_ground_color = $("#back_ground_color").val();

var input_text = $("#preview1 .m1").text();
$("#input_text").val(input_text);
var input_texts = $("#input_text").val();

var input_text_color = $("#preview1 .m1").css('color');
$("#text_color").val(input_text_color);
var text_color = $("#text_color").val();

var banner_xs = $("#preview1").css('width');
$("#banner_x").val(banner_xs);
var banner_x = $("#banner_x").val();

var banner_ys = $("#preview1").css('height');
$("#banner_y").val(banner_ys);
var banner_y = $("#banner_y").val();

var selected_image = $("#preview1 img").attr('src');
$("#selected_image").val(selected_image);

var selected_image = $("#selected_image").val();

var text_size = $("#preview1 .m1").css("font-size");

$("#text_size").val(text_size);
var text_size = $("#text_size").val();


//$('#crop1').css('display','block');


var image_hieght_px = $("#preview1 #theImg").css("height");


$("#image_height").val(image_hieght_px);

var image_heights = $("#image_height").val();



var image_width_px = $("#preview1 #theImg").css("width");

$("#image_width").val(image_width_px);

var image_width = $("#image_width").val();



var data = "";
$.ajax({
url: 'banner-creation',
type: 'POST',
datatype: 'json',
data: "imagefrom=" + imagefrom + "&selected_image=" + selected_image + "&banner_x=" + banner_x + "&banner_y=" + banner_y + "&text_color=" + text_color + "&input_text=" + input_texts + "&back_ground_color=" + back_ground_color + "&text_left=" + x + "&image_Top=" + image_Top + "&image_left=" + image_left + "&text_top=" + y + "&text_size=" + text_size + "&image_hieghts=" + image_heights + "&image_width=" + image_width,
success: function (data) {
    $('#dw1').css('display', 'block');
    $('#dw1').attr('title', data);

    $('#dw2').css('display', 'none');
    $('#dw2').attr('title', data);

    $('#dw3').css('display', 'none');
    $('#dw3').attr('title', data);

    $('#dw4').css('display', 'none');
    $('#dw4').attr('title', data);
    $('#dw5').css('display', 'none');
    $('#dw5').attr('title', data);
    $('#dw6').css('display', 'none');
    $('#dw6').attr('title', data);


},
error: function (XMLHttpRequest, textStatus, errorThrown) {
    alert(errorThrown + "---" + textStatus);
}

});

});

$("#save2").on("click", function () {
var imagefrom = $("#imagefrom").val();
var image_lefts = $("#preview2 .draggable").css("left");
$("#image_left_postion").val(image_lefts);
var image_left = $("#image_left_postion").val();

var image_Tops = $("#preview2 .draggable").css("top");

$("#image_top_postion").val(image_Tops);
var image_Top = $("#image_top_postion").val();


var text_lefts = $("#preview2 .m2").css("left");
var text_lefts2 = text_lefts.replace('px', '');
if ($("#pic").val() == 'No Image') {
var img_wth = '0';
} else {
var img_wth = $("#preview2 .draggable").css("width");
var img_wth = img_wth.replace('px', '');
}

text_lefts2 = $.trim(text_lefts2);

var image_leftsk = $("#preview2 .draggable").css("left");


text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);

text_lefts = text_lefts + 'px';

$("#text_left_postion").val(text_lefts);
var text_left = $("#text_left_postion").val();

/*var text_lefts=$("#preview2 b").css("left");
$("#text_left_postion").val(text_lefts);
var text_left=  $("#text_left_postion").val();*/

var text_tops = $("#preview2 .m2").css("top");
$("#text_top_postion").val(text_tops);
var text_top = $("#text_top_postion").val();

var background_colorw = $("#preview2").css('background-color');
$("#back_ground_color").val(background_colorw);
var back_ground_color = $("#back_ground_color").val();

var input_text = $("#preview2 .m2").text();
$("#input_text").val(input_text);
var input_texts = $("#input_text").val();

var input_text_color = $("#preview2 .m2").css('color');
$("#text_color").val(input_text_color);
var text_color = $("#text_color").val();

var banner_xs = $("#preview2").css('width');
$("#banner_x").val(banner_xs);
var banner_x = $("#banner_x").val();

var banner_ys = $("#preview2").css('height');
$("#banner_y").val(banner_ys);
var banner_y = $("#banner_y").val();

var selected_image = $("#preview2 img").attr('src');
$("#selected_image").val(selected_image);

var selected_image = $("#selected_image").val();

var text_size = $("#preview2 .m2").css("font-size");

$("#text_size").val(text_size);
var text_size = $("#text_size").val();

var image_hieght_px = $("#preview2 #theImg").css("height");


$("#image_height").val(image_hieght_px);

var image_hieghts = $("#image_height").val();



var image_width_px = $("#preview2 #theImg").css("width");

$("#image_width").val(image_width_px);

var image_width = $("#image_width").val();

var elmnt = document.getElementById("myDIV2");

var x = elmnt.offsetLeft;
var y = elmnt.offsetTop;

x = x + 'px';
y = y + 'px';

//$('#crop2').css('display','block');

var data = "";
$.ajax({
url: 'banner-creation',
type: 'POST',
datatype: 'json',
data: "imagefrom=" + imagefrom + "&selected_image=" + selected_image + "&banner_x=" + banner_x + "&banner_y=" + banner_y + "&text_color=" + text_color + "&input_text=" + input_texts + "&back_ground_color=" + back_ground_color + "&text_left=" + x + "&image_Top=" + image_Top + "&image_left=" + image_left + "&text_top=" + y + "&text_size=" + text_size + "&image_hieghts=" + image_hieghts + "&image_width=" + image_width,
success: function (data) {
    $('#dw1').css('display', 'none');
    $('#dw2').css('display', 'block');
    $('#dw2').attr('title', data);



    $('#dw3').css('display', 'none');
    $('#dw3').attr('title', data);

    $('#dw4').css('display', 'none');
    $('#dw4').attr('title', data);

    $('#dw5').css('display', 'none');
    $('#dw5').attr('title', data);

    $('#dw6').css('display', 'none');
    $('#dw6').attr('title', data);


},
error: function (XMLHttpRequest, textStatus, errorThrown) {
    alert(errorThrown + "---" + textStatus);
}

});

});


$("#save3").on("click", function () {
var imagefrom = $("#imagefrom").val();
var image_lefts = $("#preview3 .draggable").css("left");
$("#image_left_postion").val(image_lefts);
var image_left = $("#image_left_postion").val();

var image_Tops = $("#preview3 .draggable").css("top");

$("#image_top_postion").val(image_Tops);
var image_Top = $("#image_top_postion").val();

/*var text_lefts=$("#preview3 b").css("left");
$("#text_left_postion").val(text_lefts);
var text_left=  $("#text_left_postion").val();*/

var text_lefts = $("#preview3 .m3").css("left");
var text_lefts2 = text_lefts.replace('px', '');
if ($("#pic").val() == 'No Image') {
var img_wth = '0';
} else {
var img_wth = $("#preview3 .draggable").css("width");
var img_wth = img_wth.replace('px', '');
}

text_lefts2 = $.trim(text_lefts2);

var image_leftsk = $("#preview3 .draggable").css("left");


text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);

text_lefts = text_lefts + 'px';

$("#text_left_postion").val(text_lefts);
var text_left = $("#text_left_postion").val();

var text_tops = $("#preview3 .m3").css("top");
$("#text_top_postion").val(text_tops);
var text_top = $("#text_top_postion").val();

var background_colorw = $("#preview3").css('background-color');
$("#back_ground_color").val(background_colorw);
var back_ground_color = $("#back_ground_color").val();

var input_text = $("#preview3 .m3").text();
$("#input_text").val(input_text);
var input_texts = $("#input_text").val();

var input_text_color = $("#preview3 .m3").css('color');
$("#text_color").val(input_text_color);
var text_color = $("#text_color").val();

var banner_xs = $("#preview3").css('width');
$("#banner_x").val(banner_xs);
var banner_x = $("#banner_x").val();

var banner_ys = $("#preview3").css('height');
$("#banner_y").val(banner_ys);
var banner_y = $("#banner_y").val();

var selected_image = $("#preview3 img").attr('src');
$("#selected_image").val(selected_image);

var selected_image = $("#selected_image").val();

var text_size = $("#preview3 .m3").css("font-size");

$("#text_size").val(text_size);
var text_size = $("#text_size").val();

var image_hieght_px = $("#preview3 #theImg").css("height");


$("#image_height").val(image_hieght_px);

var image_hieghts = $("#image_height").val();



var image_width_px = $("#preview3 #theImg").css("width");

$("#image_width").val(image_width_px);

var image_width = $("#image_width").val();
var elmnt = document.getElementById("myDIV3");

var x = elmnt.offsetLeft;
var y = elmnt.offsetTop;

x = x + 'px';
y = y + 'px';
// $('#crop3').css('display','block');

var data = "";
$.ajax({
url: 'banner-creation',
type: 'POST',
datatype: 'json',
data: "imagefrom=" + imagefrom + "&selected_image=" + selected_image + "&banner_x=" + banner_x + "&banner_y=" + banner_y + "&text_color=" + text_color + "&input_text=" + input_texts + "&back_ground_color=" + back_ground_color + "&text_left=" + x + "&image_Top=" + image_Top + "&image_left=" + image_left + "&text_top=" + y + "&text_size=" + text_size + "&image_hieghts=" + image_hieghts + "&image_width=" + image_width,
success: function (data) {
    $('#dw1').css('display', 'none');
    $('#dw2').css('display', 'none');

    $('#dw3').css('display', 'block');
    $('#dw3').attr('title', data);

    $('#dw4').css('display', 'none');
    $('#dw4').attr('title', data);

    $('#dw5').css('display', 'none');
    $('#dw5').attr('title', data);

    $('#dw6').css('display', 'none');
    $('#dw6').attr('title', data);


},
error: function (XMLHttpRequest, textStatus, errorThrown) {
    alert(errorThrown + "---" + textStatus);
}

});

});


$("#save4").on("click", function () {
var imagefrom = $("#imagefrom").val();
var image_lefts = $("#preview4 .draggable").css("left");
$("#image_left_postion").val(image_lefts);
var image_left = $("#image_left_postion").val();

var image_Tops = $("#preview4 .draggable").css("top");

$("#image_top_postion").val(image_Tops);
var image_Top = $("#image_top_postion").val();

/* var text_lefts=$("#preview4 b").css("left");
$("#text_left_postion").val(text_lefts);
var text_left=  $("#text_left_postion").val();*/

var text_lefts = $("#preview4 .m4").css("left");
var text_lefts2 = text_lefts.replace('px', '');
if ($("#pic").val() == 'No Image') {
var img_wth = '0';
} else {
var img_wth = $("#preview4 .draggable").css("width");
var img_wth = img_wth.replace('px', '');
}

text_lefts2 = $.trim(text_lefts2);

var image_leftsk = $("#preview4 .draggable").css("left");


text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);

text_lefts = text_lefts + 'px';

$("#text_left_postion").val(text_lefts);
var text_left = $("#text_left_postion").val();

var text_tops = $("#preview4 .m4").css("top");
$("#text_top_postion").val(text_tops);
var text_top = $("#text_top_postion").val();

var background_colorw = $("#preview4").css('background-color');
$("#back_ground_color").val(background_colorw);
var back_ground_color = $("#back_ground_color").val();

var input_text = $("#preview4 .m4").text();
$("#input_text").val(input_text);
var input_texts = $("#input_text").val();

var input_text_color = $("#preview4 .m4").css('color');
$("#text_color").val(input_text_color);
var text_color = $("#text_color").val();

var banner_xs = $("#preview4").css('width');
$("#banner_x").val(banner_xs);
var banner_x = $("#banner_x").val();

var banner_ys = $("#preview4").css('height');
$("#banner_y").val(banner_ys);
var banner_y = $("#banner_y").val();

var selected_image = $("#preview4 img").attr('src');
$("#selected_image").val(selected_image);

var selected_image = $("#selected_image").val();

var text_size = $("#preview4 .m4").css("font-size");

$("#text_size").val(text_size);
var text_size = $("#text_size").val();

var image_hieght_px = $("#preview4 #theImg").css("height");


$("#image_height").val(image_hieght_px);

var image_hieghts = $("#image_height").val();



var image_width_px = $("#preview4 #theImg").css("width");

$("#image_width").val(image_width_px);

var image_width = $("#image_width").val();
var elmnt = document.getElementById("myDIV4");

var x = elmnt.offsetLeft;
var y = elmnt.offsetTop;

x = x + 'px';
y = y + 'px';

// $('#crop4').css('display','block');

var data = "";
$.ajax({
url: 'banner-creation',
type: 'POST',
datatype: 'json',
data: "imagefrom=" + imagefrom + "&selected_image=" + selected_image + "&banner_x=" + banner_x + "&banner_y=" + banner_y + "&text_color=" + text_color + "&input_text=" + input_texts + "&back_ground_color=" + back_ground_color + "&text_left=" + x + "&image_Top=" + image_Top + "&image_left=" + image_left + "&text_top=" + y + "&text_size=" + text_size + "&image_hieghts=" + image_hieghts + "&image_width=" + image_width,
success: function (data) {
    $('#dw1').css('display', 'none');
    $('#dw2').css('display', 'none');

    $('#dw2').css('display', 'none');


    $('#dw3').css('display', 'none');

    $('#dw4').css('display', 'block');
    $('#dw4').attr('title', data);

    $('#dw5').css('display', 'none');
    $('#dw5').attr('title', data);

    $('#dw6').css('display', 'none');
    $('#dw6').attr('title', data);


},
error: function (XMLHttpRequest, textStatus, errorThrown) {
    alert(errorThrown + "---" + textStatus);
}

});

});


$("#save5").on("click", function () {
var imagefrom = $("#imagefrom").val();
var image_lefts = $("#preview5 .draggable").css("left");
$("#image_left_postion").val(image_lefts);
var image_left = $("#image_left_postion").val();

var image_Tops = $("#preview5 .draggable").css("top");

$("#image_top_postion").val(image_Tops);
var image_Top = $("#image_top_postion").val();

/*var text_lefts=$("#preview5 b");
var position = text_lefts.position();
$("#text_left_postion").val(position.left+'px');*/

var text_lefts = $("#preview5 .m5").css("left");
var text_lefts2 = text_lefts.replace('px', '');
if ($("#pic").val() == 'No Image') {
var img_wth = '0';
} else {
var img_wth = $("#preview5 .draggable").css("width");
var img_wth = img_wth.replace('px', '');
}

text_lefts2 = $.trim(text_lefts2);

var image_leftsk = $("#preview5 .draggable").css("left");


text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);

text_lefts = text_lefts + 'px';

$("#text_left_postion").val(text_lefts);
var text_left = $("#text_left_postion").val();



var text_tops = $("#preview5 .m5").css("top");
$("#text_top_postion").val(text_tops);
var text_top = $("#text_top_postion").val();

var background_colorw = $("#preview5").css('background-color');
$("#back_ground_color").val(background_colorw);
var back_ground_color = $("#back_ground_color").val();

var input_text = $("#preview5 .m5").text();
$("#input_text").val(input_text);
var input_texts = $("#input_text").val();

var input_text_color = $("#preview5 .m5").css('color');
$("#text_color").val(input_text_color);
var text_color = $("#text_color").val();

var banner_xs = $("#preview5").css('width');
$("#banner_x").val(banner_xs);
var banner_x = $("#banner_x").val();

var banner_ys = $("#preview5").css('height');
$("#banner_y").val(banner_ys);
var banner_y = $("#banner_y").val();

var selected_image = $("#preview5 img").attr('src');
$("#selected_image").val(selected_image);

var selected_image = $("#selected_image").val();

var text_size = $("#preview5 .m5").css("font-size");

$("#text_size").val(text_size);
var text_size = $("#text_size").val();

var image_hieght_px = $("#preview5 #theImg").css("height");


$("#image_height").val(image_hieght_px);

var image_hieghts = $("#image_height").val();



var image_width_px = $("#preview5 #theImg").css("width");

$("#image_width").val(image_width_px);

var image_width = $("#image_width").val();

// $('#crop5').css('display','block');
var elmnt = document.getElementById("myDIV5");

var x = elmnt.offsetLeft;
var y = elmnt.offsetTop;

x = x + 'px';
y = y + 'px';
var data = "";
$.ajax({
url: 'banner-creation',
type: 'POST',
datatype: 'json',
data: "imagefrom=" + imagefrom + "&selected_image=" + selected_image + "&banner_x=" + banner_x + "&banner_y=" + banner_y + "&text_color=" + text_color + "&input_text=" + input_texts + "&back_ground_color=" + back_ground_color + "&text_left=" + x + "&image_Top=" + image_Top + "&image_left=" + image_left + "&text_top=" + y + "&text_size=" + text_size + "&image_hieghts=" + image_hieghts + "&image_width=" + image_width,
success: function (data) {
    $('#dw1').css('display', 'none');
    $('#dw2').css('display', 'none');

    $('#dw3').css('display', 'none');
    $('#dw3').attr('title', data);

    $('#dw5').css('display', 'block');
    $('#dw5').attr('title', data);

    $('#dw4').css('display', 'none');
    $('#dw4').attr('title', data);



    $('#dw6').css('display', 'none');
    $('#dw6').attr('title', data);


},
error: function (XMLHttpRequest, textStatus, errorThrown) {
    alert(errorThrown + "---" + textStatus);
}

});

});


$("#save6").on("click", function () {
var imagefrom = $("#imagefrom").val();
var image_lefts = $("#preview6 .draggable").css("left");
$("#image_left_postion").val(image_lefts);
var image_left = $("#image_left_postion").val();

var image_Tops = $("#preview6 .draggable").css("top");

$("#image_top_postion").val(image_Tops);
var image_Top = $("#image_top_postion").val();

var text_lefts = $("#preview6 .m6").css("left");
var text_lefts2 = text_lefts.replace('px', '');
if ($("#pic").val() == 'No Image') {
var img_wth = '0';
} else {
var img_wth = $("#preview6 .draggable").css("width");
var img_wth = img_wth.replace('px', '');
}

text_lefts2 = $.trim(text_lefts2);

var image_leftsk = $("#preview6 .draggable").css("left");


text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);

text_lefts = text_lefts + 'px';

$("#text_left_postion").val(text_lefts);
var text_left = $("#text_left_postion").val();
var text_top = $("#preview6 .m6").css("top");


$("#text_top_postion").val(text_top);


var background_colorw = $("#preview6").css('background-color');
$("#back_ground_color").val(background_colorw);
var back_ground_color = $("#back_ground_color").val();

var input_text = $("#preview6 .m6").text();
$("#input_text").val(input_text);
var input_texts = $("#input_text").val();

var input_text_color = $("#preview6 .m6").css('color');
$("#text_color").val(input_text_color);
var text_color = $("#text_color").val();

var banner_xs = $("#preview6").css('width');
$("#banner_x").val(banner_xs);
var banner_x = $("#banner_x").val();

var banner_ys = $("#preview6").css('height');
$("#banner_y").val(banner_ys);
var banner_y = $("#banner_y").val();

var selected_image = $("#preview6 img").attr('src');
$("#selected_image").val(selected_image);

var selected_image = $("#selected_image").val();

var text_size = $("#preview6 .m6").css("font-size");

$("#text_size").val(text_size);
var text_size = $("#text_size").val();

var image_hieght_px = $("#preview6 #theImg").css("height");


$("#image_height").val(image_hieght_px);

var image_hieghts = $("#image_height").val();



var image_width_px = $("#preview6 #theImg").css("width");

$("#image_width").val(image_width_px);

var image_width = $("#image_width").val();

// $('#crop6').css('display','block');
var elmnt = document.getElementById("myDIV6");

var x = elmnt.offsetLeft;
var y = elmnt.offsetTop;

x = x + 'px';
y = y + 'px';
var data = "";
$.ajax({
url: 'banner-creation',
type: 'POST',
datatype: 'json',
data: "imagefrom=" + imagefrom + "&selected_image=" + selected_image + "&banner_x=" + banner_x + "&banner_y=" + banner_y + "&text_color=" + text_color + "&input_text=" + input_texts + "&back_ground_color=" + back_ground_color + "&text_left=" + x + "&image_Top=" + image_Top + "&image_left=" + image_left + "&text_top=" + y + "&text_size=" + text_size + "&image_hieghts=" + image_hieghts + "&image_width=" + image_width,
success: function (data) {
    $('#dw1').css('display', 'none');
    $('#dw2').css('display', 'none');

    $('#dw3').css('display', 'none');
    $('#dw3').attr('title', data);

    $('#dw6').css('display', 'block');
    $('#dw6').attr('title', data);

    $('#dw4').css('display', 'none');
    $('#dw4').attr('title', data);

    $('#dw5').css('display', 'none');
    $('#dw5').attr('title', data);




},
error: function (XMLHttpRequest, textStatus, errorThrown) {
    alert(errorThrown + "---" + textStatus);
}

});

});



$("#save7").on("click", function () {
var imagefrom = $("#imagefrom").val();
var image_lefts = $("#preview7 .draggable").css("left");
$("#image_left_postion").val(image_lefts);
var image_left = $("#image_left_postion").val();

var image_Tops = $("#preview7 .draggable").css("top");

$("#image_top_postion").val(image_Tops);
var image_Top = $("#image_top_postion").val();

var text_lefts = $("#preview7 .m7").css("left");
var text_lefts2 = text_lefts.replace('px', '');
if ($("#pic").val() == 'No Image') {
var img_wth = '0';
} else {
var img_wth = $("#preview7 .draggable").css("width");
var img_wth = img_wth.replace('px', '');
}

text_lefts2 = $.trim(text_lefts2);

var image_leftsk = $("#preview7 .draggable").css("left");


text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);

text_lefts = text_lefts + 'px';

$("#text_left_postion").val(text_lefts);
var text_left = $("#text_left_postion").val();
var text_top = $("#preview7 .m7").css("top");


$("#text_top_postion").val(text_top);


var background_colorw = $("#preview7").css('background-color');
$("#back_ground_color").val(background_colorw);
var back_ground_color = $("#back_ground_color").val();

var input_text = $("#preview7 .m7").text();
$("#input_text").val(input_text);
var input_texts = $("#input_text").val();

var input_text_color = $("#preview7 .m7").css('color');
$("#text_color").val(input_text_color);
var text_color = $("#text_color").val();

var banner_xs = $("#preview7").css('width');
$("#banner_x").val(banner_xs);
var banner_x = $("#banner_x").val();

var banner_ys = $("#preview7").css('height');
$("#banner_y").val(banner_ys);
var banner_y = $("#banner_y").val();

var selected_image = $("#preview7 img").attr('src');
$("#selected_image").val(selected_image);

var selected_image = $("#selected_image").val();

var text_size = $("#preview7 .m7").css("font-size");

$("#text_size").val(text_size);
var text_size = $("#text_size").val();

var image_hieght_px = $("#preview7 #theImg").css("height");


$("#image_height").val(image_hieght_px);

var image_hieghts = $("#image_height").val();



var image_width_px = $("#preview7 #theImg").css("width");

$("#image_width").val(image_width_px);

var image_width = $("#image_width").val();

// $('#crop7').css('display','block');
var elmnt = document.getElementById("myDIV7");

var x = elmnt.offsetLeft;
var y = elmnt.offsetTop;

x = x + 'px';
y = y + 'px';
var data = "";
$.ajax({
url: 'banner-creation',
type: 'POST',
datatype: 'json',
data: "imagefrom=" + imagefrom + "&selected_image=" + selected_image + "&banner_x=" + banner_x + "&banner_y=" + banner_y + "&text_color=" + text_color + "&input_text=" + input_texts + "&back_ground_color=" + back_ground_color + "&text_left=" + x + "&image_Top=" + image_Top + "&image_left=" + image_left + "&text_top=" + y + "&text_size=" + text_size + "&image_hieghts=" + image_hieghts + "&image_width=" + image_width,
success: function (data) {
    $('#dw1').css('display', 'none');
    $('#dw2').css('display', 'none');

    $('#dw3').css('display', 'none');
    $('#dw3').attr('title', data);

    $('#dw7').css('display', 'block');
    $('#dw7').attr('title', data);

    $('#dw4').css('display', 'none');
    $('#dw4').attr('title', data);

    $('#dw5').css('display', 'none');
    $('#dw5').attr('title', data);

  $('#dw6').css('display', 'none');
    $('#dw6').attr('title', data);


},
error: function (XMLHttpRequest, textStatus, errorThrown) {
    alert(errorThrown + "---" + textStatus);
}

});

});

$("#save8").on("click", function () {
var imagefrom = $("#imagefrom").val();
var image_lefts = $("#preview8 .draggable").css("left");
$("#image_left_postion").val(image_lefts);
var image_left = $("#image_left_postion").val();

var image_Tops = $("#preview8 .draggable").css("top");

$("#image_top_postion").val(image_Tops);
var image_Top = $("#image_top_postion").val();

var text_lefts = $("#preview8 .m8").css("left");
var text_lefts2 = text_lefts.replace('px', '');
if ($("#pic").val() == 'No Image') {
var img_wth = '0';
} else {
var img_wth = $("#preview8 .draggable").css("width");
var img_wth = img_wth.replace('px', '');
}

text_lefts2 = $.trim(text_lefts2);

var image_leftsk = $("#preview8 .draggable").css("left");


text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);

text_lefts = text_lefts + 'px';

$("#text_left_postion").val(text_lefts);
var text_left = $("#text_left_postion").val();
var text_top = $("#preview8 .m8").css("top");


$("#text_top_postion").val(text_top);


var background_colorw = $("#preview8").css('background-color');
$("#back_ground_color").val(background_colorw);
var back_ground_color = $("#back_ground_color").val();

var input_text = $("#preview8 .m8").text();
$("#input_text").val(input_text);
var input_texts = $("#input_text").val();

var input_text_color = $("#preview8 .m8").css('color');
$("#text_color").val(input_text_color);
var text_color = $("#text_color").val();

var banner_xs = $("#preview8").css('width');
$("#banner_x").val(banner_xs);
var banner_x = $("#banner_x").val();

var banner_ys = $("#preview8").css('height');
$("#banner_y").val(banner_ys);
var banner_y = $("#banner_y").val();

var selected_image = $("#preview8 img").attr('src');
$("#selected_image").val(selected_image);

var selected_image = $("#selected_image").val();

var text_size = $("#preview8 .m8").css("font-size");

$("#text_size").val(text_size);
var text_size = $("#text_size").val();

var image_hieght_px = $("#preview8 #theImg").css("height");


$("#image_height").val(image_hieght_px);

var image_hieghts = $("#image_height").val();



var image_width_px = $("#preview8 #theImg").css("width");

$("#image_width").val(image_width_px);

var image_width = $("#image_width").val();

// $('#crop8').css('display','block');
var elmnt = document.getElementById("myDIV8");

var x = elmnt.offsetLeft;
var y = elmnt.offsetTop;

x = x + 'px';
y = y + 'px';
var data = "";
$.ajax({
url: 'banner-creation',
type: 'POST',
datatype: 'json',
data: "imagefrom=" + imagefrom + "&selected_image=" + selected_image + "&banner_x=" + banner_x + "&banner_y=" + banner_y + "&text_color=" + text_color + "&input_text=" + input_texts + "&back_ground_color=" + back_ground_color + "&text_left=" + x + "&image_Top=" + image_Top + "&image_left=" + image_left + "&text_top=" + y + "&text_size=" + text_size + "&image_hieghts=" + image_hieghts + "&image_width=" + image_width,
success: function (data) {
    $('#dw1').css('display', 'none');
    $('#dw2').css('display', 'none');

    $('#dw3').css('display', 'none');
    $('#dw3').attr('title', data);

    $('#dw8').css('display', 'block');
    $('#dw8').attr('title', data);

    $('#dw4').css('display', 'none');
    $('#dw4').attr('title', data);

    $('#dw5').css('display', 'none');
    $('#dw5').attr('title', data);

  $('#dw6').css('display', 'none');
    $('#dw6').attr('title', data);


},
error: function (XMLHttpRequest, textStatus, errorThrown) {
    alert(errorThrown + "---" + textStatus);
}

});

});

$("#save9").on("click", function () {
var imagefrom = $("#imagefrom").val();
var image_lefts = $("#preview9 .draggable").css("left");
$("#image_left_postion").val(image_lefts);
var image_left = $("#image_left_postion").val();

var image_Tops = $("#preview9 .draggable").css("top");

$("#image_top_postion").val(image_Tops);
var image_Top = $("#image_top_postion").val();

var text_lefts = $("#preview9 .m9").css("left");
var text_lefts2 = text_lefts.replace('px', '');
if ($("#pic").val() == 'No Image') {
var img_wth = '0';
} else {
var img_wth = $("#preview9 .draggable").css("width");
var img_wth = img_wth.replace('px', '');
}

text_lefts2 = $.trim(text_lefts2);

var image_leftsk = $("#preview9 .draggable").css("left");


text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);

text_lefts = text_lefts + 'px';

$("#text_left_postion").val(text_lefts);
var text_left = $("#text_left_postion").val();
var text_top = $("#preview9 .m9").css("top");


$("#text_top_postion").val(text_top);


var background_colorw = $("#preview9").css('background-color');
$("#back_ground_color").val(background_colorw);
var back_ground_color = $("#back_ground_color").val();

var input_text = $("#preview9 .m9").text();
$("#input_text").val(input_text);
var input_texts = $("#input_text").val();

var input_text_color = $("#preview9 .m9").css('color');
$("#text_color").val(input_text_color);
var text_color = $("#text_color").val();

var banner_xs = $("#preview9").css('width');
$("#banner_x").val(banner_xs);
var banner_x = $("#banner_x").val();

var banner_ys = $("#preview9").css('height');
$("#banner_y").val(banner_ys);
var banner_y = $("#banner_y").val();

var selected_image = $("#preview9 img").attr('src');
$("#selected_image").val(selected_image);

var selected_image = $("#selected_image").val();

var text_size = $("#preview9 .m9").css("font-size");

$("#text_size").val(text_size);
var text_size = $("#text_size").val();

var image_hieght_px = $("#preview9 #theImg").css("height");


$("#image_height").val(image_hieght_px);

var image_hieghts = $("#image_height").val();



var image_width_px = $("#preview9 #theImg").css("width");

$("#image_width").val(image_width_px);

var image_width = $("#image_width").val();

// $('#crop9').css('display','block');
var elmnt = document.getElementById("myDIV9");

var x = elmnt.offsetLeft;
var y = elmnt.offsetTop;

x = x + 'px';
y = y + 'px';
var data = "";
$.ajax({
url: 'banner-creation',
type: 'POST',
datatype: 'json',
data: "imagefrom=" + imagefrom + "&selected_image=" + selected_image + "&banner_x=" + banner_x + "&banner_y=" + banner_y + "&text_color=" + text_color + "&input_text=" + input_texts + "&back_ground_color=" + back_ground_color + "&text_left=" + x + "&image_Top=" + image_Top + "&image_left=" + image_left + "&text_top=" + y + "&text_size=" + text_size + "&image_hieghts=" + image_hieghts + "&image_width=" + image_width,
success: function (data) {
    $('#dw1').css('display', 'none');
    $('#dw2').css('display', 'none');

    $('#dw3').css('display', 'none');
    $('#dw3').attr('title', data);

    $('#dw9').css('display', 'block');
    $('#dw9').attr('title', data);

    $('#dw4').css('display', 'none');
    $('#dw4').attr('title', data);

    $('#dw5').css('display', 'none');
    $('#dw5').attr('title', data);

  $('#dw6').css('display', 'none');
    $('#dw6').attr('title', data);


},
error: function (XMLHttpRequest, textStatus, errorThrown) {
    alert(errorThrown + "---" + textStatus);
}

});

});



$("#save10").on("click", function () {
var imagefrom = $("#imagefrom").val();
var image_lefts = $("#preview10 .draggable").css("left");
$("#image_left_postion").val(image_lefts);
var image_left = $("#image_left_postion").val();

var image_Tops = $("#preview10 .draggable").css("top");

$("#image_top_postion").val(image_Tops);
var image_Top = $("#image_top_postion").val();

var text_lefts = $("#preview10 .m10").css("left");
var text_lefts2 = text_lefts.replace('px', '');
if ($("#pic").val() == 'No Image') {
var img_wth = '0';
} else {
var img_wth = $("#preview10 .draggable").css("width");
var img_wth = img_wth.replace('px', '');
}

text_lefts2 = $.trim(text_lefts2);

var image_leftsk = $("#preview10 .draggable").css("left");


text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);

text_lefts = text_lefts + 'px';

$("#text_left_postion").val(text_lefts);
var text_left = $("#text_left_postion").val();
var text_top = $("#preview10 .m10").css("top");


$("#text_top_postion").val(text_top);


var background_colorw = $("#preview10").css('background-color');
$("#back_ground_color").val(background_colorw);
var back_ground_color = $("#back_ground_color").val();

var input_text = $("#preview10 .m10").text();
$("#input_text").val(input_text);
var input_texts = $("#input_text").val();

var input_text_color = $("#preview10 .m10").css('color');
$("#text_color").val(input_text_color);
var text_color = $("#text_color").val();

var banner_xs = $("#preview10").css('width');
$("#banner_x").val(banner_xs);
var banner_x = $("#banner_x").val();

var banner_ys = $("#preview10").css('height');
$("#banner_y").val(banner_ys);
var banner_y = $("#banner_y").val();

var selected_image = $("#preview10 img").attr('src');
$("#selected_image").val(selected_image);

var selected_image = $("#selected_image").val();

var text_size = $("#preview10 .m10").css("font-size");

$("#text_size").val(text_size);
var text_size = $("#text_size").val();

var image_hieght_px = $("#preview10 #theImg").css("height");


$("#image_height").val(image_hieght_px);

var image_hieghts = $("#image_height").val();



var image_width_px = $("#preview10 #theImg").css("width");

$("#image_width").val(image_width_px);

var image_width = $("#image_width").val();

// $('#crop10').css('display','block');
var elmnt = document.getElementById("myDIV10");

var x = elmnt.offsetLeft;
var y = elmnt.offsetTop;

x = x + 'px';
y = y + 'px';
var data = "";
$.ajax({
url: 'banner-creation',
type: 'POST',
datatype: 'json',
data: "imagefrom=" + imagefrom + "&selected_image=" + selected_image + "&banner_x=" + banner_x + "&banner_y=" + banner_y + "&text_color=" + text_color + "&input_text=" + input_texts + "&back_ground_color=" + back_ground_color + "&text_left=" + x + "&image_Top=" + image_Top + "&image_left=" + image_left + "&text_top=" + y + "&text_size=" + text_size + "&image_hieghts=" + image_hieghts + "&image_width=" + image_width,
success: function (data) {
    $('#dw1').css('display', 'none');
    $('#dw2').css('display', 'none');

    $('#dw3').css('display', 'none');
    $('#dw3').attr('title', data);

    $('#dw10').css('display', 'block');
    $('#dw10').attr('title', data);

    $('#dw4').css('display', 'none');
    $('#dw4').attr('title', data);

    $('#dw5').css('display', 'none');
    $('#dw5').attr('title', data);

  $('#dw6').css('display', 'none');
    $('#dw6').attr('title', data);


},
error: function (XMLHttpRequest, textStatus, errorThrown) {
    alert(errorThrown + "---" + textStatus);
}

});

});



$("#save11").on("click", function () {
var imagefrom = $("#imagefrom").val();
var image_lefts = $("#preview11 .draggable").css("left");
$("#image_left_postion").val(image_lefts);
var image_left = $("#image_left_postion").val();

var image_Tops = $("#preview11 .draggable").css("top");

$("#image_top_postion").val(image_Tops);
var image_Top = $("#image_top_postion").val();

var text_lefts = $("#preview11 .m11").css("left");
var text_lefts2 = text_lefts.replace('px', '');
if ($("#pic").val() == 'No Image') {
var img_wth = '0';
} else {
var img_wth = $("#preview11 .draggable").css("width");
var img_wth = img_wth.replace('px', '');
}

text_lefts2 = $.trim(text_lefts2);

var image_leftsk = $("#preview11 .draggable").css("left");


text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);

text_lefts = text_lefts + 'px';

$("#text_left_postion").val(text_lefts);
var text_left = $("#text_left_postion").val();
var text_top = $("#preview11 .m11").css("top");


$("#text_top_postion").val(text_top);


var background_colorw = $("#preview11").css('background-color');
$("#back_ground_color").val(background_colorw);
var back_ground_color = $("#back_ground_color").val();

var input_text = $("#preview11 .m11").text();
$("#input_text").val(input_text);
var input_texts = $("#input_text").val();

var input_text_color = $("#preview11 .m11").css('color');
$("#text_color").val(input_text_color);
var text_color = $("#text_color").val();

var banner_xs = $("#preview11").css('width');
$("#banner_x").val(banner_xs);
var banner_x = $("#banner_x").val();

var banner_ys = $("#preview11").css('height');
$("#banner_y").val(banner_ys);
var banner_y = $("#banner_y").val();

var selected_image = $("#preview11 img").attr('src');
$("#selected_image").val(selected_image);

var selected_image = $("#selected_image").val();

var text_size = $("#preview11 .m11").css("font-size");

$("#text_size").val(text_size);
var text_size = $("#text_size").val();

var image_hieght_px = $("#preview11 #theImg").css("height");


$("#image_height").val(image_hieght_px);

var image_hieghts = $("#image_height").val();



var image_width_px = $("#preview11 #theImg").css("width");

$("#image_width").val(image_width_px);

var image_width = $("#image_width").val();

// $('#crop11').css('display','block');
var elmnt = document.getElementById("myDIV11");

var x = elmnt.offsetLeft;
var y = elmnt.offsetTop;

x = x + 'px';
y = y + 'px';
var data = "";
$.ajax({
url: 'banner-creation',
type: 'POST',
datatype: 'json',
data: "imagefrom=" + imagefrom + "&selected_image=" + selected_image + "&banner_x=" + banner_x + "&banner_y=" + banner_y + "&text_color=" + text_color + "&input_text=" + input_texts + "&back_ground_color=" + back_ground_color + "&text_left=" + x + "&image_Top=" + image_Top + "&image_left=" + image_left + "&text_top=" + y + "&text_size=" + text_size + "&image_hieghts=" + image_hieghts + "&image_width=" + image_width,
success: function (data) {
    $('#dw1').css('display', 'none');
    $('#dw2').css('display', 'none');

    $('#dw3').css('display', 'none');
    $('#dw3').attr('title', data);

    $('#dw11').css('display', 'block');
    $('#dw11').attr('title', data);

    $('#dw4').css('display', 'none');
    $('#dw4').attr('title', data);

    $('#dw5').css('display', 'none');
    $('#dw5').attr('title', data);

  $('#dw6').css('display', 'none');
    $('#dw6').attr('title', data);


},
error: function (XMLHttpRequest, textStatus, errorThrown) {
    alert(errorThrown + "---" + textStatus);
}

});

});

$("#save12").on("click", function () {
var imagefrom = $("#imagefrom").val();
var image_lefts = $("#preview12 .draggable").css("left");
$("#image_left_postion").val(image_lefts);
var image_left = $("#image_left_postion").val();

var image_Tops = $("#preview12 .draggable").css("top");

$("#image_top_postion").val(image_Tops);
var image_Top = $("#image_top_postion").val();

var text_lefts = $("#preview12 .m12").css("left");
var text_lefts2 = text_lefts.replace('px', '');
if ($("#pic").val() == 'No Image') {
var img_wth = '0';
} else {
var img_wth = $("#preview12 .draggable").css("width");
var img_wth = img_wth.replace('px', '');
}

text_lefts2 = $.trim(text_lefts2);

var image_leftsk = $("#preview12 .draggable").css("left");


text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);

text_lefts = text_lefts + 'px';

$("#text_left_postion").val(text_lefts);
var text_left = $("#text_left_postion").val();
var text_top = $("#preview12 .m12").css("top");


$("#text_top_postion").val(text_top);


var background_colorw = $("#preview12").css('background-color');
$("#back_ground_color").val(background_colorw);
var back_ground_color = $("#back_ground_color").val();

var input_text = $("#preview12 .m12").text();
$("#input_text").val(input_text);
var input_texts = $("#input_text").val();

var input_text_color = $("#preview12 .m12").css('color');
$("#text_color").val(input_text_color);
var text_color = $("#text_color").val();

var banner_xs = $("#preview12").css('width');
$("#banner_x").val(banner_xs);
var banner_x = $("#banner_x").val();

var banner_ys = $("#preview12").css('height');
$("#banner_y").val(banner_ys);
var banner_y = $("#banner_y").val();

var selected_image = $("#preview12 img").attr('src');
$("#selected_image").val(selected_image);

var selected_image = $("#selected_image").val();

var text_size = $("#preview12 .m12").css("font-size");

$("#text_size").val(text_size);
var text_size = $("#text_size").val();

var image_hieght_px = $("#preview12 #theImg").css("height");


$("#image_height").val(image_hieght_px);

var image_hieghts = $("#image_height").val();



var image_width_px = $("#preview12 #theImg").css("width");

$("#image_width").val(image_width_px);

var image_width = $("#image_width").val();

// $('#crop12').css('display','block');
var elmnt = document.getElementById("myDIV12");

var x = elmnt.offsetLeft;
var y = elmnt.offsetTop;

x = x + 'px';
y = y + 'px';
var data = "";
$.ajax({
url: 'banner-creation',
type: 'POST',
datatype: 'json',
data: "imagefrom=" + imagefrom + "&selected_image=" + selected_image + "&banner_x=" + banner_x + "&banner_y=" + banner_y + "&text_color=" + text_color + "&input_text=" + input_texts + "&back_ground_color=" + back_ground_color + "&text_left=" + x + "&image_Top=" + image_Top + "&image_left=" + image_left + "&text_top=" + y + "&text_size=" + text_size + "&image_hieghts=" + image_hieghts + "&image_width=" + image_width,
success: function (data) {
    $('#dw1').css('display', 'none');
    $('#dw2').css('display', 'none');

    $('#dw3').css('display', 'none');
    $('#dw3').attr('title', data);

    $('#dw12').css('display', 'block');
    $('#dw12').attr('title', data);

    $('#dw4').css('display', 'none');
    $('#dw4').attr('title', data);

    $('#dw5').css('display', 'none');
    $('#dw5').attr('title', data);

  $('#dw6').css('display', 'none');
    $('#dw6').attr('title', data);


},
error: function (XMLHttpRequest, textStatus, errorThrown) {
    alert(errorThrown + "---" + textStatus);
}

});

});


$("#save13").on("click", function () {
var imagefrom = $("#imagefrom").val();
var image_lefts = $("#preview13 .draggable").css("left");
$("#image_left_postion").val(image_lefts);
var image_left = $("#image_left_postion").val();

var image_Tops = $("#preview13 .draggable").css("top");

$("#image_top_postion").val(image_Tops);
var image_Top = $("#image_top_postion").val();

var text_lefts = $("#preview13 .m13").css("left");
var text_lefts2 = text_lefts.replace('px', '');
if ($("#pic").val() == 'No Image') {
var img_wth = '0';
} else {
var img_wth = $("#preview13 .draggable").css("width");
var img_wth = img_wth.replace('px', '');
}

text_lefts2 = $.trim(text_lefts2);

var image_leftsk = $("#preview13 .draggable").css("left");


text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);

text_lefts = text_lefts + 'px';

$("#text_left_postion").val(text_lefts);
var text_left = $("#text_left_postion").val();
var text_top = $("#preview13 .m13").css("top");


$("#text_top_postion").val(text_top);


var background_colorw = $("#preview13").css('background-color');
$("#back_ground_color").val(background_colorw);
var back_ground_color = $("#back_ground_color").val();

var input_text = $("#preview13 .m13").text();
$("#input_text").val(input_text);
var input_texts = $("#input_text").val();

var input_text_color = $("#preview13 .m13").css('color');
$("#text_color").val(input_text_color);
var text_color = $("#text_color").val();

var banner_xs = $("#preview13").css('width');
$("#banner_x").val(banner_xs);
var banner_x = $("#banner_x").val();

var banner_ys = $("#preview13").css('height');
$("#banner_y").val(banner_ys);
var banner_y = $("#banner_y").val();

var selected_image = $("#preview13 img").attr('src');
$("#selected_image").val(selected_image);

var selected_image = $("#selected_image").val();

var text_size = $("#preview13 .m13").css("font-size");

$("#text_size").val(text_size);
var text_size = $("#text_size").val();

var image_hieght_px = $("#preview13 #theImg").css("height");


$("#image_height").val(image_hieght_px);

var image_hieghts = $("#image_height").val();



var image_width_px = $("#preview13 #theImg").css("width");

$("#image_width").val(image_width_px);

var image_width = $("#image_width").val();

// $('#crop13').css('display','block');
var elmnt = document.getElementById("myDIV13");

var x = elmnt.offsetLeft;
var y = elmnt.offsetTop;

x = x + 'px';
y = y + 'px';
var data = "";
$.ajax({
url: 'banner-creation',
type: 'POST',
datatype: 'json',
data: "imagefrom=" + imagefrom + "&selected_image=" + selected_image + "&banner_x=" + banner_x + "&banner_y=" + banner_y + "&text_color=" + text_color + "&input_text=" + input_texts + "&back_ground_color=" + back_ground_color + "&text_left=" + x + "&image_Top=" + image_Top + "&image_left=" + image_left + "&text_top=" + y + "&text_size=" + text_size + "&image_hieghts=" + image_hieghts + "&image_width=" + image_width,
success: function (data) {
    $('#dw1').css('display', 'none');
    $('#dw2').css('display', 'none');

    $('#dw3').css('display', 'none');
    $('#dw3').attr('title', data);

    $('#dw13').css('display', 'block');
    $('#dw13').attr('title', data);

    $('#dw4').css('display', 'none');
    $('#dw4').attr('title', data);

    $('#dw5').css('display', 'none');
    $('#dw5').attr('title', data);

  $('#dw6').css('display', 'none');
    $('#dw6').attr('title', data);


},
error: function (XMLHttpRequest, textStatus, errorThrown) {
    alert(errorThrown + "---" + textStatus);
}

});

});



$("#save14").on("click", function () {
var imagefrom = $("#imagefrom").val();
var image_lefts = $("#preview14 .draggable").css("left");
$("#image_left_postion").val(image_lefts);
var image_left = $("#image_left_postion").val();

var image_Tops = $("#preview14 .draggable").css("top");

$("#image_top_postion").val(image_Tops);
var image_Top = $("#image_top_postion").val();

var text_lefts = $("#preview14 .m14").css("left");
var text_lefts2 = text_lefts.replace('px', '');
if ($("#pic").val() == 'No Image') {
var img_wth = '0';
} else {
var img_wth = $("#preview14 .draggable").css("width");
var img_wth = img_wth.replace('px', '');
}

text_lefts2 = $.trim(text_lefts2);

var image_leftsk = $("#preview14 .draggable").css("left");


text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);

text_lefts = text_lefts + 'px';

$("#text_left_postion").val(text_lefts);
var text_left = $("#text_left_postion").val();
var text_top = $("#preview14 .m14").css("top");


$("#text_top_postion").val(text_top);


var background_colorw = $("#preview14").css('background-color');
$("#back_ground_color").val(background_colorw);
var back_ground_color = $("#back_ground_color").val();

var input_text = $("#preview14 .m14").text();
$("#input_text").val(input_text);
var input_texts = $("#input_text").val();

var input_text_color = $("#preview14 .m14").css('color');
$("#text_color").val(input_text_color);
var text_color = $("#text_color").val();

var banner_xs = $("#preview14").css('width');
$("#banner_x").val(banner_xs);
var banner_x = $("#banner_x").val();

var banner_ys = $("#preview14").css('height');
$("#banner_y").val(banner_ys);
var banner_y = $("#banner_y").val();

var selected_image = $("#preview14 img").attr('src');
$("#selected_image").val(selected_image);

var selected_image = $("#selected_image").val();

var text_size = $("#preview14 .m14").css("font-size");

$("#text_size").val(text_size);
var text_size = $("#text_size").val();

var image_hieght_px = $("#preview14 #theImg").css("height");


$("#image_height").val(image_hieght_px);

var image_hieghts = $("#image_height").val();



var image_width_px = $("#preview14 #theImg").css("width");

$("#image_width").val(image_width_px);

var image_width = $("#image_width").val();

// $('#crop14').css('display','block');
var elmnt = document.getElementById("myDIV14");

var x = elmnt.offsetLeft;
var y = elmnt.offsetTop;

x = x + 'px';
y = y + 'px';
var data = "";
$.ajax({
url: 'banner-creation',
type: 'POST',
datatype: 'json',
data: "imagefrom=" + imagefrom + "&selected_image=" + selected_image + "&banner_x=" + banner_x + "&banner_y=" + banner_y + "&text_color=" + text_color + "&input_text=" + input_texts + "&back_ground_color=" + back_ground_color + "&text_left=" + x + "&image_Top=" + image_Top + "&image_left=" + image_left + "&text_top=" + y + "&text_size=" + text_size + "&image_hieghts=" + image_hieghts + "&image_width=" + image_width,
success: function (data) {
    $('#dw1').css('display', 'none');
    $('#dw2').css('display', 'none');

    $('#dw3').css('display', 'none');
    $('#dw3').attr('title', data);

    $('#dw14').css('display', 'block');
    $('#dw14').attr('title', data);

    $('#dw4').css('display', 'none');
    $('#dw4').attr('title', data);

    $('#dw5').css('display', 'none');
    $('#dw5').attr('title', data);

  $('#dw6').css('display', 'none');
    $('#dw6').attr('title', data);


},
error: function (XMLHttpRequest, textStatus, errorThrown) {
    alert(errorThrown + "---" + textStatus);
}

});

});




$("#save15").on("click", function () {
var imagefrom = $("#imagefrom").val();
var image_lefts = $("#preview15 .draggable").css("left");
$("#image_left_postion").val(image_lefts);
var image_left = $("#image_left_postion").val();

var image_Tops = $("#preview15 .draggable").css("top");

$("#image_top_postion").val(image_Tops);
var image_Top = $("#image_top_postion").val();

var text_lefts = $("#preview15 .m15").css("left");
var text_lefts2 = text_lefts.replace('px', '');
if ($("#pic").val() == 'No Image') {
var img_wth = '0';
} else {
var img_wth = $("#preview15 .draggable").css("width");
var img_wth = img_wth.replace('px', '');
}

text_lefts2 = $.trim(text_lefts2);

var image_leftsk = $("#preview15 .draggable").css("left");


text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);

text_lefts = text_lefts + 'px';

$("#text_left_postion").val(text_lefts);
var text_left = $("#text_left_postion").val();
var text_top = $("#preview15 .m15").css("top");


$("#text_top_postion").val(text_top);


var background_colorw = $("#preview15").css('background-color');
$("#back_ground_color").val(background_colorw);
var back_ground_color = $("#back_ground_color").val();

var input_text = $("#preview15 .m15").text();
$("#input_text").val(input_text);
var input_texts = $("#input_text").val();

var input_text_color = $("#preview15 .m15").css('color');
$("#text_color").val(input_text_color);
var text_color = $("#text_color").val();

var banner_xs = $("#preview15").css('width');
$("#banner_x").val(banner_xs);
var banner_x = $("#banner_x").val();

var banner_ys = $("#preview15").css('height');
$("#banner_y").val(banner_ys);
var banner_y = $("#banner_y").val();

var selected_image = $("#preview15 img").attr('src');
$("#selected_image").val(selected_image);

var selected_image = $("#selected_image").val();

var text_size = $("#preview15 .m15").css("font-size");

$("#text_size").val(text_size);
var text_size = $("#text_size").val();

var image_hieght_px = $("#preview15 #theImg").css("height");


$("#image_height").val(image_hieght_px);

var image_hieghts = $("#image_height").val();



var image_width_px = $("#preview15 #theImg").css("width");

$("#image_width").val(image_width_px);

var image_width = $("#image_width").val();

// $('#crop15').css('display','block');
var elmnt = document.getElementById("myDIV15");

var x = elmnt.offsetLeft;
var y = elmnt.offsetTop;

x = x + 'px';
y = y + 'px';
var data = "";
$.ajax({
url: 'banner-creation',
type: 'POST',
datatype: 'json',
data: "imagefrom=" + imagefrom + "&selected_image=" + selected_image + "&banner_x=" + banner_x + "&banner_y=" + banner_y + "&text_color=" + text_color + "&input_text=" + input_texts + "&back_ground_color=" + back_ground_color + "&text_left=" + x + "&image_Top=" + image_Top + "&image_left=" + image_left + "&text_top=" + y + "&text_size=" + text_size + "&image_hieghts=" + image_hieghts + "&image_width=" + image_width,
success: function (data) {
    $('#dw1').css('display', 'none');
    $('#dw2').css('display', 'none');

    $('#dw3').css('display', 'none');
    $('#dw3').attr('title', data);

    $('#dw15').css('display', 'block');
    $('#dw15').attr('title', data);

    $('#dw4').css('display', 'none');
    $('#dw4').attr('title', data);

    $('#dw5').css('display', 'none');
    $('#dw5').attr('title', data);

  $('#dw6').css('display', 'none');
    $('#dw6').attr('title', data);


},
error: function (XMLHttpRequest, textStatus, errorThrown) {
    alert(errorThrown + "---" + textStatus);
}

});

});



$("#save16").on("click", function () {
var imagefrom = $("#imagefrom").val();
var image_lefts = $("#preview16 .draggable").css("left");
$("#image_left_postion").val(image_lefts);
var image_left = $("#image_left_postion").val();

var image_Tops = $("#preview16 .draggable").css("top");

$("#image_top_postion").val(image_Tops);
var image_Top = $("#image_top_postion").val();

var text_lefts = $("#preview16 .m16").css("left");
var text_lefts2 = text_lefts.replace('px', '');
if ($("#pic").val() == 'No Image') {
var img_wth = '0';
} else {
var img_wth = $("#preview16 .draggable").css("width");
var img_wth = img_wth.replace('px', '');
}

text_lefts2 = $.trim(text_lefts2);

var image_leftsk = $("#preview16 .draggable").css("left");


text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);

text_lefts = text_lefts + 'px';

$("#text_left_postion").val(text_lefts);
var text_left = $("#text_left_postion").val();
var text_top = $("#preview16 .m16").css("top");


$("#text_top_postion").val(text_top);


var background_colorw = $("#preview16").css('background-color');
$("#back_ground_color").val(background_colorw);
var back_ground_color = $("#back_ground_color").val();

var input_text = $("#preview16 .m16").text();
$("#input_text").val(input_text);
var input_texts = $("#input_text").val();

var input_text_color = $("#preview16 .m16").css('color');
$("#text_color").val(input_text_color);
var text_color = $("#text_color").val();

var banner_xs = $("#preview16").css('width');
$("#banner_x").val(banner_xs);
var banner_x = $("#banner_x").val();

var banner_ys = $("#preview16").css('height');
$("#banner_y").val(banner_ys);
var banner_y = $("#banner_y").val();

var selected_image = $("#preview16 img").attr('src');
$("#selected_image").val(selected_image);

var selected_image = $("#selected_image").val();

var text_size = $("#preview16 .m16").css("font-size");

$("#text_size").val(text_size);
var text_size = $("#text_size").val();

var image_hieght_px = $("#preview16 #theImg").css("height");


$("#image_height").val(image_hieght_px);

var image_hieghts = $("#image_height").val();



var image_width_px = $("#preview16 #theImg").css("width");

$("#image_width").val(image_width_px);

var image_width = $("#image_width").val();

// $('#crop16').css('display','block');
var elmnt = document.getElementById("myDIV16");

var x = elmnt.offsetLeft;
var y = elmnt.offsetTop;

x = x + 'px';
y = y + 'px';
var data = "";
$.ajax({
url: 'banner-creation',
type: 'POST',
datatype: 'json',
data: "imagefrom=" + imagefrom + "&selected_image=" + selected_image + "&banner_x=" + banner_x + "&banner_y=" + banner_y + "&text_color=" + text_color + "&input_text=" + input_texts + "&back_ground_color=" + back_ground_color + "&text_left=" + x + "&image_Top=" + image_Top + "&image_left=" + image_left + "&text_top=" + y + "&text_size=" + text_size + "&image_hieghts=" + image_hieghts + "&image_width=" + image_width,
success: function (data) {
    $('#dw1').css('display', 'none');
    $('#dw2').css('display', 'none');

    $('#dw3').css('display', 'none');
    $('#dw3').attr('title', data);

    $('#dw16').css('display', 'block');
    $('#dw16').attr('title', data);

    $('#dw4').css('display', 'none');
    $('#dw4').attr('title', data);

    $('#dw5').css('display', 'none');
    $('#dw5').attr('title', data);

  $('#dw6').css('display', 'none');
    $('#dw6').attr('title', data);


},
error: function (XMLHttpRequest, textStatus, errorThrown) {
    alert(errorThrown + "---" + textStatus);
}

});

});



$("#save17").on("click", function () {
var imagefrom = $("#imagefrom").val();
var image_lefts = $("#preview17 .draggable").css("left");
$("#image_left_postion").val(image_lefts);
var image_left = $("#image_left_postion").val();

var image_Tops = $("#preview17 .draggable").css("top");

$("#image_top_postion").val(image_Tops);
var image_Top = $("#image_top_postion").val();

var text_lefts = $("#preview17 .m17").css("left");
var text_lefts2 = text_lefts.replace('px', '');
if ($("#pic").val() == 'No Image') {
var img_wth = '0';
} else {
var img_wth = $("#preview17 .draggable").css("width");
var img_wth = img_wth.replace('px', '');
}

text_lefts2 = $.trim(text_lefts2);

var image_leftsk = $("#preview17 .draggable").css("left");


text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);

text_lefts = text_lefts + 'px';

$("#text_left_postion").val(text_lefts);
var text_left = $("#text_left_postion").val();
var text_top = $("#preview17 .m17").css("top");


$("#text_top_postion").val(text_top);


var background_colorw = $("#preview17").css('background-color');
$("#back_ground_color").val(background_colorw);
var back_ground_color = $("#back_ground_color").val();

var input_text = $("#preview17 .m17").text();
$("#input_text").val(input_text);
var input_texts = $("#input_text").val();

var input_text_color = $("#preview17 .m17").css('color');
$("#text_color").val(input_text_color);
var text_color = $("#text_color").val();

var banner_xs = $("#preview17").css('width');
$("#banner_x").val(banner_xs);
var banner_x = $("#banner_x").val();

var banner_ys = $("#preview17").css('height');
$("#banner_y").val(banner_ys);
var banner_y = $("#banner_y").val();

var selected_image = $("#preview17 img").attr('src');
$("#selected_image").val(selected_image);

var selected_image = $("#selected_image").val();

var text_size = $("#preview17 .m17").css("font-size");

$("#text_size").val(text_size);
var text_size = $("#text_size").val();

var image_hieght_px = $("#preview17 #theImg").css("height");


$("#image_height").val(image_hieght_px);

var image_hieghts = $("#image_height").val();



var image_width_px = $("#preview17 #theImg").css("width");

$("#image_width").val(image_width_px);

var image_width = $("#image_width").val();

// $('#crop17').css('display','block');
var elmnt = document.getElementById("myDIV17");

var x = elmnt.offsetLeft;
var y = elmnt.offsetTop;

x = x + 'px';
y = y + 'px';
var data = "";
$.ajax({
url: 'banner-creation',
type: 'POST',
datatype: 'json',
data: "imagefrom=" + imagefrom + "&selected_image=" + selected_image + "&banner_x=" + banner_x + "&banner_y=" + banner_y + "&text_color=" + text_color + "&input_text=" + input_texts + "&back_ground_color=" + back_ground_color + "&text_left=" + x + "&image_Top=" + image_Top + "&image_left=" + image_left + "&text_top=" + y + "&text_size=" + text_size + "&image_hieghts=" + image_hieghts + "&image_width=" + image_width,
success: function (data) {
    $('#dw1').css('display', 'none');
    $('#dw2').css('display', 'none');

    $('#dw3').css('display', 'none');
    $('#dw3').attr('title', data);

    $('#dw17').css('display', 'block');
    $('#dw17').attr('title', data);

    $('#dw4').css('display', 'none');
    $('#dw4').attr('title', data);

    $('#dw5').css('display', 'none');
    $('#dw5').attr('title', data);

  $('#dw6').css('display', 'none');
    $('#dw6').attr('title', data);


},
error: function (XMLHttpRequest, textStatus, errorThrown) {
    alert(errorThrown + "---" + textStatus);
}

});

});


$("#save18").on("click", function () {
var imagefrom = $("#imagefrom").val();
var image_lefts = $("#preview18 .draggable").css("left");
$("#image_left_postion").val(image_lefts);
var image_left = $("#image_left_postion").val();

var image_Tops = $("#preview18 .draggable").css("top");

$("#image_top_postion").val(image_Tops);
var image_Top = $("#image_top_postion").val();

var text_lefts = $("#preview18 .m18").css("left");
var text_lefts2 = text_lefts.replace('px', '');
if ($("#pic").val() == 'No Image') {
var img_wth = '0';
} else {
var img_wth = $("#preview18 .draggable").css("width");
var img_wth = img_wth.replace('px', '');
}

text_lefts2 = $.trim(text_lefts2);

var image_leftsk = $("#preview18 .draggable").css("left");


text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);

text_lefts = text_lefts + 'px';

$("#text_left_postion").val(text_lefts);
var text_left = $("#text_left_postion").val();
var text_top = $("#preview18 .m18").css("top");


$("#text_top_postion").val(text_top);


var background_colorw = $("#preview18").css('background-color');
$("#back_ground_color").val(background_colorw);
var back_ground_color = $("#back_ground_color").val();

var input_text = $("#preview18 .m18").text();
$("#input_text").val(input_text);
var input_texts = $("#input_text").val();

var input_text_color = $("#preview18 .m18").css('color');
$("#text_color").val(input_text_color);
var text_color = $("#text_color").val();

var banner_xs = $("#preview18").css('width');
$("#banner_x").val(banner_xs);
var banner_x = $("#banner_x").val();

var banner_ys = $("#preview18").css('height');
$("#banner_y").val(banner_ys);
var banner_y = $("#banner_y").val();

var selected_image = $("#preview18 img").attr('src');
$("#selected_image").val(selected_image);

var selected_image = $("#selected_image").val();

var text_size = $("#preview18 .m18").css("font-size");

$("#text_size").val(text_size);
var text_size = $("#text_size").val();

var image_hieght_px = $("#preview18 #theImg").css("height");


$("#image_height").val(image_hieght_px);

var image_hieghts = $("#image_height").val();



var image_width_px = $("#preview18 #theImg").css("width");

$("#image_width").val(image_width_px);

var image_width = $("#image_width").val();

// $('#crop18').css('display','block');
var elmnt = document.getElementById("myDIV18");

var x = elmnt.offsetLeft;
var y = elmnt.offsetTop;

x = x + 'px';
y = y + 'px';
var data = "";
$.ajax({
url: 'banner-creation',
type: 'POST',
datatype: 'json',
data: "imagefrom=" + imagefrom + "&selected_image=" + selected_image + "&banner_x=" + banner_x + "&banner_y=" + banner_y + "&text_color=" + text_color + "&input_text=" + input_texts + "&back_ground_color=" + back_ground_color + "&text_left=" + x + "&image_Top=" + image_Top + "&image_left=" + image_left + "&text_top=" + y + "&text_size=" + text_size + "&image_hieghts=" + image_hieghts + "&image_width=" + image_width,
success: function (data) {
    $('#dw1').css('display', 'none');
    $('#dw2').css('display', 'none');

    $('#dw3').css('display', 'none');
    $('#dw3').attr('title', data);

    $('#dw18').css('display', 'block');
    $('#dw18').attr('title', data);

    $('#dw4').css('display', 'none');
    $('#dw4').attr('title', data);

    $('#dw5').css('display', 'none');
    $('#dw5').attr('title', data);

  $('#dw6').css('display', 'none');
    $('#dw6').attr('title', data);


},
error: function (XMLHttpRequest, textStatus, errorThrown) {
    alert(errorThrown + "---" + textStatus);
}

});

});




$("#save19").on("click", function () {
var imagefrom = $("#imagefrom").val();
var image_lefts = $("#preview19 .draggable").css("left");
$("#image_left_postion").val(image_lefts);
var image_left = $("#image_left_postion").val();

var image_Tops = $("#preview19 .draggable").css("top");

$("#image_top_postion").val(image_Tops);
var image_Top = $("#image_top_postion").val();

var text_lefts = $("#preview19 .m19").css("left");
var text_lefts2 = text_lefts.replace('px', '');
if ($("#pic").val() == 'No Image') {
var img_wth = '0';
} else {
var img_wth = $("#preview19 .draggable").css("width");
var img_wth = img_wth.replace('px', '');
}

text_lefts2 = $.trim(text_lefts2);

var image_leftsk = $("#preview19 .draggable").css("left");


text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);

text_lefts = text_lefts + 'px';

$("#text_left_postion").val(text_lefts);
var text_left = $("#text_left_postion").val();
var text_top = $("#preview19 .m19").css("top");


$("#text_top_postion").val(text_top);


var background_colorw = $("#preview19").css('background-color');
$("#back_ground_color").val(background_colorw);
var back_ground_color = $("#back_ground_color").val();

var input_text = $("#preview19 .m19").text();
$("#input_text").val(input_text);
var input_texts = $("#input_text").val();

var input_text_color = $("#preview19 .m19").css('color');
$("#text_color").val(input_text_color);
var text_color = $("#text_color").val();

var banner_xs = $("#preview19").css('width');
$("#banner_x").val(banner_xs);
var banner_x = $("#banner_x").val();

var banner_ys = $("#preview19").css('height');
$("#banner_y").val(banner_ys);
var banner_y = $("#banner_y").val();

var selected_image = $("#preview19 img").attr('src');
$("#selected_image").val(selected_image);

var selected_image = $("#selected_image").val();

var text_size = $("#preview19 .m19").css("font-size");

$("#text_size").val(text_size);
var text_size = $("#text_size").val();

var image_hieght_px = $("#preview19 #theImg").css("height");


$("#image_height").val(image_hieght_px);

var image_hieghts = $("#image_height").val();



var image_width_px = $("#preview19 #theImg").css("width");

$("#image_width").val(image_width_px);

var image_width = $("#image_width").val();

// $('#crop19').css('display','block');
var elmnt = document.getElementById("myDIV19");

var x = elmnt.offsetLeft;
var y = elmnt.offsetTop;

x = x + 'px';
y = y + 'px';
var data = "";
$.ajax({
url: 'banner-creation',
type: 'POST',
datatype: 'json',
data: "imagefrom=" + imagefrom + "&selected_image=" + selected_image + "&banner_x=" + banner_x + "&banner_y=" + banner_y + "&text_color=" + text_color + "&input_text=" + input_texts + "&back_ground_color=" + back_ground_color + "&text_left=" + x + "&image_Top=" + image_Top + "&image_left=" + image_left + "&text_top=" + y + "&text_size=" + text_size + "&image_hieghts=" + image_hieghts + "&image_width=" + image_width,
success: function (data) {
    $('#dw1').css('display', 'none');
    $('#dw2').css('display', 'none');

    $('#dw3').css('display', 'none');
    $('#dw3').attr('title', data);

    $('#dw19').css('display', 'block');
    $('#dw19').attr('title', data);

    $('#dw4').css('display', 'none');
    $('#dw4').attr('title', data);

    $('#dw5').css('display', 'none');
    $('#dw5').attr('title', data);

  $('#dw6').css('display', 'none');
    $('#dw6').attr('title', data);


},
error: function (XMLHttpRequest, textStatus, errorThrown) {
    alert(errorThrown + "---" + textStatus);
}

});

});



$("#save20").on("click", function () {
var imagefrom = $("#imagefrom").val();
var image_lefts = $("#preview20 .draggable").css("left");
$("#image_left_postion").val(image_lefts);
var image_left = $("#image_left_postion").val();

var image_Tops = $("#preview20 .draggable").css("top");

$("#image_top_postion").val(image_Tops);
var image_Top = $("#image_top_postion").val();

var text_lefts = $("#preview20 .m20").css("left");
var text_lefts2 = text_lefts.replace('px', '');
if ($("#pic").val() == 'No Image') {
var img_wth = '0';
} else {
var img_wth = $("#preview20 .draggable").css("width");
var img_wth = img_wth.replace('px', '');
}

text_lefts2 = $.trim(text_lefts2);

var image_leftsk = $("#preview20 .draggable").css("left");


text_lefts = parseInt($.trim(img_wth)) + parseInt(text_lefts2);

text_lefts = text_lefts + 'px';

$("#text_left_postion").val(text_lefts);
var text_left = $("#text_left_postion").val();
var text_top = $("#preview20 .m20").css("top");


$("#text_top_postion").val(text_top);


var background_colorw = $("#preview20").css('background-color');
$("#back_ground_color").val(background_colorw);
var back_ground_color = $("#back_ground_color").val();

var input_text = $("#preview20 .m20").text();
$("#input_text").val(input_text);
var input_texts = $("#input_text").val();

var input_text_color = $("#preview20 .m20").css('color');
$("#text_color").val(input_text_color);
var text_color = $("#text_color").val();

var banner_xs = $("#preview20").css('width');
$("#banner_x").val(banner_xs);
var banner_x = $("#banner_x").val();

var banner_ys = $("#preview20").css('height');
$("#banner_y").val(banner_ys);
var banner_y = $("#banner_y").val();

var selected_image = $("#preview20 img").attr('src');
$("#selected_image").val(selected_image);

var selected_image = $("#selected_image").val();

var text_size = $("#preview20 .m20").css("font-size");

$("#text_size").val(text_size);
var text_size = $("#text_size").val();

var image_hieght_px = $("#preview20 #theImg").css("height");


$("#image_height").val(image_hieght_px);

var image_hieghts = $("#image_height").val();



var image_width_px = $("#preview20 #theImg").css("width");

$("#image_width").val(image_width_px);

var image_width = $("#image_width").val();

// $('#crop20').css('display','block');
var elmnt = document.getElementById("myDIV20");

var x = elmnt.offsetLeft;
var y = elmnt.offsetTop;

x = x + 'px';
y = y + 'px';
var data = "";
$.ajax({
url: 'banner-creation',
type: 'POST',
datatype: 'json',
data: "imagefrom=" + imagefrom + "&selected_image=" + selected_image + "&banner_x=" + banner_x + "&banner_y=" + banner_y + "&text_color=" + text_color + "&input_text=" + input_texts + "&back_ground_color=" + back_ground_color + "&text_left=" + x + "&image_Top=" + image_Top + "&image_left=" + image_left + "&text_top=" + y + "&text_size=" + text_size + "&image_hieghts=" + image_hieghts + "&image_width=" + image_width,
success: function (data) {
    $('#dw1').css('display', 'none');
    $('#dw2').css('display', 'none');

    $('#dw3').css('display', 'none');
    $('#dw3').attr('title', data);

    $('#dw20').css('display', 'block');
    $('#dw20').attr('title', data);

    $('#dw4').css('display', 'none');
    $('#dw4').attr('title', data);

    $('#dw5').css('display', 'none');
    $('#dw5').attr('title', data);

  $('#dw6').css('display', 'none');
    $('#dw6').attr('title', data);


},
error: function (XMLHttpRequest, textStatus, errorThrown) {
    alert(errorThrown + "---" + textStatus);
}

});

});



$("#dw1").on("click", function () {
var photosd = $(this).attr('title');
photosd = 'banner_images/' + photosd;
popupResult({
src: photosd,
title: '300X250'
});

});

$("#dw2").on("click", function () {
var photosd = $(this).attr('title');
photosd = 'banner_images/' + photosd;
popupResult({
src: photosd,
title: '300X50'
});

});

$("#dw3").on("click", function () {
var photosd = $(this).attr('title');
photosd = 'banner_images/' + photosd;
popupResult({
src: photosd,
title: '250X300'
});

});

$("#dw4").on("click", function () {
var photosd = $(this).attr('title');
photosd = 'banner_images/' + photosd;
popupResult({
src: photosd,
title: '320X50'
});

});

$("#dw5").on("click", function () {
var photosd = $(this).attr('title');
photosd = 'banner_images/' + photosd;
popupResult({
src: photosd,
title: '320X480'
});

});

$("#dw6").on("click", function () {
var photosd = $(this).attr('title');
photosd = 'banner_images/' + photosd;
popupResult({
src: photosd,
title: '728X90'
});

});


$("#dw7").on("click", function () {
var photosd = $(this).attr('title');
photosd = 'banner_images/' + photosd;
popupResult({
src: photosd,
title: '180X150'
});

});


$("#dw8").on("click", function () {
var photosd = $(this).attr('title');
photosd = 'banner_images/' + photosd;
popupResult({
src: photosd,
title: '160X600'
});

});

$("#dw9").on("click", function () {
var photosd = $(this).attr('title');
photosd = 'banner_images/' + photosd;
popupResult({
src: photosd,
title: '300X600'
});

});


$("#dw10").on("click", function () {
var photosd = $(this).attr('title');
photosd = 'banner_images/' + photosd;
popupResult({
src: photosd,
title: '320X53'
});

});


$("#dw11").on("click", function () {
var photosd = $(this).attr('title');
photosd = 'banner_images/' + photosd;
popupResult({
src: photosd,
title: '300X75'
});

});


$("#dw12").on("click", function () {
var photosd = $(this).attr('title');
photosd = 'banner_images/' + photosd;
popupResult({
src: photosd,
title: '216X36'
});

});

$("#dw13").on("click", function () {
var photosd = $(this).attr('title');
photosd = 'banner_images/' + photosd;
popupResult({
src: photosd,
title: '216X54'
});

});


$("#dw14").on("click", function () {
var photosd = $(this).attr('title');
photosd = 'banner_images/' + photosd;
popupResult({
src: photosd,
title: '168X28'
});

});


$("#dw15").on("click", function () {
var photosd = $(this).attr('title');
photosd = 'banner_images/' + photosd;
popupResult({
src: photosd,
title: '168X42'
});

});

$("#dw16").on("click", function () {
var photosd = $(this).attr('title');
photosd = 'banner_images/' + photosd;
popupResult({
src: photosd,
title: '120X120'
});

});

$("#dw17").on("click", function () {
var photosd = $(this).attr('title');
photosd = 'banner_images/' + photosd;
popupResult({
src: photosd,
title: '120X30'
});

});
$("#dw18").on("click", function () {
var photosd = $(this).attr('title');
photosd = 'banner_images/' + photosd;
popupResult({
src: photosd,
title: '88X31'
});

});



$("#dw19").on("click", function () {
var photosd = $(this).attr('title');
photosd = 'banner_images/' + photosd;
popupResult({
src: photosd,
title: '468X60'
});

});


$("#dw20").on("click", function () {
var photosd = $(this).attr('title');
photosd = 'banner_images/' + photosd;
popupResult({
src: photosd,
title: '480X320'
});

});



function cnfrm(strflg) {
if (strflg == true) {
var pv = $('.sweet-alert img').attr('src');
var h2title = $('.sweet-alert h2').html();
if ($.trim(h2title) == '300X50') {
    $('#save2').css('display', 'none');
    $('#dw2').css('display', 'none');
    $('#preview2c').css('display', 'none');
    $('#preview2cPr').html('<img src="' + pv + '" />');
                    $('#imgcrps1').val(pv);
                    $('#li300x50').addClass('greentb');
                    $('#li300x50').html('300X50 <i class="fa fa-check" style="float: right;background-color:#7E7979;"></i>');
                                }
                                if ($.trim(h2title) == '320X50') {
                                    $('#save4').css('display', 'none');
                                    $('#dw4').css('display', 'none');
                                    $('#preview4c').css('display', 'none');
                                    $('#preview4cPr').html('<img src="' + pv + '" />');
                                                    $('#imgcrps2').val(pv);
                                                    $('#li320x50').addClass('greentb');
                                                    $('#li320x50').html('320X50 <i class="fa fa-check" style="float: right;background-color:#7E7979;"></i>');
                                                                }
                                                                if ($.trim(h2title) == '300X250') {
                                                                    $('#save1').css('display', 'none');
                                                                    $('#dw1').css('display', 'none');
                                                                    $('#preview1nc').css('display', 'none');
                                                                    $('#preview1ncPr').html('<img src="' + pv + '" />');
                                                                                    $('#imgcrps3').val(pv);
                                                                                    $('#li300x250').addClass('greentb');
                                                                                    $('#li300x250').html('300X250 <i class="fa fa-check" style="float: right;background-color:#7E7979;"></i>');
                                                                                                }
                                                                                                if ($.trim(h2title) == '250X300') {
                                                                                                    $('#save3').css('display', 'none');
                                                                                                    $('#dw3').css('display', 'none');
                                                                                                    $('#preview3c').css('display', 'none');
                                                                                                    $('#preview3cPr').html('<img src="' + pv + '" />');
                                                                                                                    $('#imgcrps4').val(pv);
                                                                                                                    $('#li250x300').addClass('greentb');
                                                                                                                    $('#li250x300').html('250X300 <i class="fa fa-check" style="float: right;background-color:#7E7979;"></i>');
                                                                                                                                }
                                                                                                                                if ($.trim(h2title) == '320X480') {
                                                                                                                                    $('#save5').css('display', 'none');
                                                                                                                                    $('#dw5').css('display', 'none');
                                                                                                                                    $('#preview5c').css('display', 'none');
                                                                                                                                    $('#preview5cPr').html('<img src="' + pv + '" />');
                                                                                                                                               $('#imgcrps5').val(pv);
                                                                                                                                                    $('#li320x480').addClass('greentb');
                                                                                                                                                    $('#li320x480').html('320X480 <i class="fa fa-check" style="float: right;background-color:#7E7979;"></i>');
                                                                                                                                                                }
                                                                                                                    if ($.trim(h2title) == '728X90') {
                                                                                                                        $('#save6').css('display', 'none');
                                                                                                                        $('#dw6').css('display', 'none');
                                                                                                                        $('#preview6c').css('display', 'none');
                                                                                                                        $('#preview6cPr').html('<img src="' + pv + '" />');
                                                                                                                                        $('#imgcrps6').val(pv);
                                                                                                                                        $('#li728x90').addClass('greentb');
                                                                                                                                        $('#li728x90').html('728X90 <i class="fa fa-check" style="float: right;background-color:#7E7979;"></i>');
                                                                                                                                    }

        if ($.trim(h2title) == '180X150') {
$('#save7').css('display', 'none');
$('#dw7').css('display', 'none');
$('#preview7c').css('display', 'none');
$('#preview7cPr').html('<img src="' + pv + '" />');
$('#imgcrps7').val(pv);
$('#li180X150').addClass('greentb');
$('#li180X150').html('180X150 <i class="fa fa-check" style="float: right;background-color:#7E7979;"></i>');
        }
if ($.trim(h2title) == '160X600') {
$('#save8').css('display', 'none');
$('#dw8').css('display', 'none');
$('#preview8c').css('display', 'none');
$('#preview8cPr').html('<img src="' + pv + '" />');
$('#imgcrps8').val(pv);
$('#li160X600').addClass('greentb');
$('#li160X600').html('160X600 <i class="fa fa-check" style="float: right;background-color:#7E7979;"></i>');
}

if ($.trim(h2title) == '320X53') {
$('#save9').css('display', 'none');
$('#dw9').css('display', 'none');
$('#preview9c').css('display', 'none');
$('#preview9cPr').html('<img src="' + pv + '" />');
$('#imgcrps9').val(pv);
$('#li320X53').addClass('greentb');
$('#li320X53').html('320X53 <i class="fa fa-check" style="float: right;background-color:#7E7979;"></i>');
}

if ($.trim(h2title) == '300X75') {
$('#save10').css('display', 'none');
$('#dw10').css('display', 'none');
$('#preview10c').css('display', 'none');
$('#preview10cPr').html('<img src="' + pv + '" />');
$('#imgcrps10').val(pv);
$('#li300X75').addClass('greentb');
$('#li300X75').html('300X75 <i class="fa fa-check" style="float: right;background-color:#7E7979;"></i>');
}

if ($.trim(h2title) == '216X36') {
$('#save11').css('display', 'none');
$('#dw11').css('display', 'none');
$('#preview11c').css('display', 'none');
$('#preview11cPr').html('<img src="' + pv + '" />');
$('#imgcrps11').val(pv);
$('#li216X36').addClass('greentb');
$('#li216X36').html('216X36 <i class="fa fa-check" style="float: right;background-color:#7E7979;"></i>');
}




if ($.trim(h2title) == '216X54') {
$('#save12').css('display', 'none');
$('#dw12').css('display', 'none');
$('#preview12c').css('display', 'none');
$('#preview12cPr').html('<img src="' + pv + '" />');
$('#imgcrps12').val(pv);
$('#li216X54').addClass('greentb');
$('#li216X54').html('216X54 <i class="fa fa-check" style="float: right;background-color:#7E7979;"></i>');
}

if ($.trim(h2title) == '168X28') {
$('#save13').css('display', 'none');
$('#dw13').css('display', 'none');
$('#preview13c').css('display', 'none');
$('#preview13cPr').html('<img src="' + pv + '" />');
$('#imgcrps13').val(pv);
$('#li168X28').addClass('greentb');
$('#li168X28').html('168X28 <i class="fa fa-check" style="float: right;background-color:#7E7979;"></i>');
}

if ($.trim(h2title) == '168X42') {
$('#save14').css('display', 'none');
$('#dw14').css('display', 'none');
$('#preview14c').css('display', 'none');
$('#preview14cPr').html('<img src="' + pv + '" />');
$('#imgcrps14').val(pv);
$('#li168X42').addClass('greentb');
$('#li168X42').html('168X42 <i class="fa fa-check" style="float: right;background-color:#7E7979;"></i>');
}

if ($.trim(h2title) == '120X20') {
$('#save15').css('display', 'none');
$('#dw15').css('display', 'none');
$('#preview15c').css('display', 'none');
$('#preview15cPr').html('<img src="' + pv + '" />');
$('#imgcrps15').val(pv);
$('#li120X20').addClass('greentb');
$('#li120X20').html('120X20 <i class="fa fa-check" style="float: right;background-color:#7E7979;"></i>');
}


if ($.trim(h2title) == '120X30') {
$('#save16').css('display', 'none');
$('#dw16').css('display', 'none');
$('#preview16c').css('display', 'none');
$('#preview16cPr').html('<img src="' + pv + '" />');
$('#imgcrps16').val(pv);
$('#li120X30').addClass('greentb');
$('#li120X30').html('120X30 <i class="fa fa-check" style="float: right;background-color:#7E7979;"></i>');
}

if ($.trim(h2title) == '88X31') {
$('#save17').css('display', 'none');
$('#dw17').css('display', 'none');
$('#preview17c').css('display', 'none');
$('#preview17cPr').html('<img src="' + pv + '" />');
$('#imgcrps17').val(pv);
$('#li88X31').addClass('greentb');
$('#li88X31').html('88X31 <i class="fa fa-check" style="float: right;background-color:#7E7979;"></i>');
}


if ($.trim(h2title) == '468X60') {
$('#save18').css('display', 'none');
$('#dw18').css('display', 'none');
$('#preview18c').css('display', 'none');
$('#preview18cPr').html('<img src="' + pv + '" />');
$('#imgcrps18').val(pv);
$('#li468X60').addClass('greentb');
$('#li468X60').html('468X60 <i class="fa fa-check" style="float: right;background-color:#7E7979;"></i>');
}




if ($.trim(h2title) == '480X320') {
$('#save19').css('display', 'none');
$('#dw19').css('display', 'none');
$('#preview19c').css('display', 'none');
$('#preview19cPr').html('<img src="' + pv + '" />');
$('#imgcrps19').val(pv);
$('#li480X320').addClass('greentb');
$('#li480X320').html('480X320 <i class="fa fa-check" style="float: right;background-color:#7E7979;"></i>');
}
}}
$("#crop1").on("click", function () {
$("#crop_tools").submit()
});
$("#crop2").on("click", function () {
   $("#crop_tools").submit()
});
$("#crop3").on("click", function () {
$("#crop_tools").submit()
 });
$("#crop4").on("click", function () {
    $("#crop_tools").submit()

    });


$("#crop5").on("click", function () {
$("#crop_tools").submit()
});


$("#crop6").on("click", function () {
$("#crop_tools").submit()
});

$("#crop7").on("click", function () {
$("#crop_tools").submit()
});
$("#crop8").on("click", function () {
$("#crop_tools").submit()
});
$("#crop9").on("click", function () {
$("#crop_tools").submit()
});
$("#crop10").on("click", function () {
$("#crop_tools").submit()
});
$("#crop11").on("click", function () {
$("#crop_tools").submit()
});
$("#crop12").on("click", function () {
$("#crop_tools").submit()
});
$("#crop13").on("click", function () {
$("#crop_tools").submit()
});
$("#crop14").on("click", function () {
$("#crop_tools").submit()
});
$("#crop15").on("click", function () {
$("#crop_tools").submit()
});
$("#crop16").on("click", function () {
$("#crop_tools").submit()
});
$("#crop18").on("click", function () {
$("#crop_tools").submit()
});
$("#crop19").on("click", function () {
$("#crop_tools").submit()
});
$("#crop20").on("click", function () {
$("#crop_tools").submit()
});



$(".rfs").on("click", function () {
window.location.href = 'banner-page-creation';
});


function mypreview(str)
{
//alert(str);
$('#preview').trigger('click');

}



function readURLK(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
mypreview('mycomputer');
}

reader.readAsDataURL(input.files[0]);

}
}

$("#imgInpk").change(function () {
readURLK(this);
});

$("#area5").on('keyup', function postinput() {
var v = wordCount(this.value);
if (v.words <= 5) {
mypreview('text');
} else {
alert('Sorry, you cannot enter text more than 5 words.');
}
});


function wordCount(val) {
var wom = val.match(/\S+/g);
return {
charactersNoSpaces: val.replace(/\s+/g, '').length,
characters: val.length,
words: wom ? wom.length : 0,
lines: val.split(/\r*\n/).length
};
}


</script>

{!! Html::script("themes/js/custom.js"); !!}

<script>
                                                                                                                                                                                                                                                                                                                                                            /* $(document).ready(function () {
                                                                                                                                                                                                                                                                                                                                                             $('[data-toggle="popover"]').popover();
                                                                                                                                                                                                                                                                                                                                                             });*/
</script>

</body>

</html>