@include('header')


<!-- 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;
}

#preview1 img {
    max-width:300px; max-height:250px;    
}
	
#preview2c .panel {
    min-width:300px !important;
     min-height:50px !important ;    
}  
#preview3c .panel {
     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;    
}


#preview4c .panel {

     min-height:50px !important ; 
}
  .ui-resizable-se{border:1px solid #fff;background-color:#ff0000;} 
  
  .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 ;    
}
.btn{border-radius: 0px;}
 .active{box-shadow:1px 1px 5px rgba(0, 0, 0, 0.7);}
	</style>
    <div class="container">
    	<h3>Now lets create a Picture for your Ad</h3>
    	<div class="bordered-panel select-pic_ad">
            <form class="form-inline mtopbot20">
                <select class="form-control" id="pic">
                    <option value="Picture Gallery"  >Picture Gallery</option>
                      <option value="My Computer" >My Computer</option>
                      <option value="No Image" >No Image</option>
                </select>
            </form>
            
                <div class="row panel" id="select-pic">
                	<h4 class="mtopbot30 text-center">Select a Picture below</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-right">
                    <a href="banner-gallery?campaign_id=&grpid=" class="btn btn-orange btn-sm">More</a>
                    </div>
                                    </div>
                <div class="clearfix panel hidden" id="browse-pic">
                	<div class="col-sm-5 mtop100">
                    	Browse a Picture from your Computer 
                                <a class="text-light-grey large-font" tabindex="0" role="button" data-toggle="popover"  data-trigger="hover" title="{{trans('createad.Dismissible_popover_banner_brw_pic')}}" data-content="{{trans('createad.Dismissible_popover_banner_brw_pic_detail')}}"><i class="fa fa-question-circle"></i></a>
                           
						<div class="input-group input-group">
							<span class="input form-control" id="url_target"></span>
							<div class="input-group-addon">
                                                        <div id="browse" class="btn btn-grey"> Browse
                                                        <input type="file" id="imgInp" class="" />
							</div>
							</div>
						</div>
                                <span style="font-size:13px;">Please upload .jpg or .png format image only</span>
                    	
                    </div>
                    <div class="col-sm-5 pull-right">
                    	<div class="panel">
                    		<img src="themes/images/noimage.jpg" class="img-centered img-responsive" alt="" id="blah" />
                        </div>
                    </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" title="{{trans('createad.Dismissible_popover_banner_show_bg')}}" 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-6 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" title="{{trans('createad.Dismissible_popover_banner_txt_pic')}}" data-content="{{trans('createad.Dismissible_popover_banner_txt_pic_detail')}}"><i class="fa fa-question-circle"></i></a></p>
                    	 
                    	
                        <b id="bg2" style="float:left;">
                       <input id="langdemo1" />
                        </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" title="{{trans('createad.Dismissible_popover_banner_txt_color')}}" data-content="{{trans('createad.Dismissible_popover_banner_txt_color_detail')}}"><i class="fa fa-question-circle"></i></a>
                     
                         <select id="bg3" 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" title="{{trans('createad.Dismissible_popover_banner_font_size')}}" data-content="{{trans('createad.Dismissible_popover_banner_font_size_detail')}}"><i class="fa fa-question-circle"></i></a>
                        <select id="bg8" style="font-size: 12px; width: 100px;float:left;">
                            <option value="">Style</option> 
                              
                              <option value="Italic">Italic</option>
                              <option value="UnderLine">UnderLine</option>
                            </select>
                            <textarea rows="1" id="area5" class="form-control"></textarea>
                        <small>Text not be more than 5 words</small>
                        <small class="pull-right">*This text will appear on picture</small>	
                    </div>
                    <div class="clearfix">  
                    <div class="col-xs-12 pic_preview" id="div300X250" style="border">
                        <p class="large-font" style="margin-top: 10px;text-align:center;">  <input type="button" name="preview" class="btn btn-green btn-lg" id="preview" value="View Preview" /></p> 
                        <div class="col-sm-6 mtopbot15 brds" style="" >
                        	300 x 250
                            <div class="row">
                            	<div class="col-sm-8">
                                    <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>
                        </div>
                        
                        <div class="col-sm-6 mtopbot15 " style="">
                            <div class="brds">
                        	300 x 50
                            <div class="row">
                            	<div class="col-sm-8" id= "preview2c">
                                    <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>
                            </div>
                        </div>
                    </div>
                        <div class="clearfix">  
                        <div class="col-sm-6 mtopbot15 " style="">
                            <div class="brds">
                        	320 x 50
                            <div class="row">
                            	<div class="col-sm-8" id= "preview4c">
                                    <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>
                            </div>
                        </div> 
                   <div class="col-sm-6 mtopbot15 " style="">
                            <div class="brds">
                        	250X300
                            <div class="row">
                            	<div class="col-sm-8" id= "preview3c">
                                    <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>
                            </div>
                        </div>
                        </div>
                        <div class="clearfix">  
                         <div class="col-sm-6 mtopbot15 " style="">
                            <div class="brds">
                        	320X480
                            <div class="row">
                            	<div class="col-sm-8" id= "preview5c">
                                    <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>
                            </div>
                        </div>
                   
                    </div>
                    <div class="clearfix">     
                          <div class="col-sm-12 mtopbot15">
                            <div class="brds">
                        	728X90
                            <div class="row">
                            	<div class="col-sm-8" id= "preview6c">
                                    <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>
                            </div>
                        </div> 
                </div>
                        <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="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-edit" method="post"  name="bnr_creation" id="bnr_creation" onsubmit="return bnr_creation();">       
                <div class="text-center mtopbot15">
                <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="campaign_id" id="campaign_id" value=""/>	 
                    <input type="hidden" name="grpid" id="grpid" value=""/>	
                     <input type="submit" class="btn btn-orange" value="Upload" />
                </div>
                     </form>
                
            
         </div>
    </div>
        </div>
    </div>
</body>
<!-- content area end -->  
@include('footer')
<!--=========================================================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');
 })
 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: '',
			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" />
<!-- Custom Theme JavaScript -->

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

{!! Html::script("themes/js/spectrum.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">
    
    
    <!-- Custom Theme JavaScript -->
if($('body').find('#langdemo1').length !=0) {
	$(function() {
		$("#langdemo1").spectrum({
		  flat: false,
		  showInput: true,
		});
	});
}


      $('#preview').on('click', function() { // code
          
          var txtsize=$("#bg3").val();
          
          var txtstyle=$("#bg8").val();
      
      $('#crop1,#crop2,#crop3,#crop4','#crop5','#crop6').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);
      //$('#preview1 b').css('font-size',txtsize+'px');
      var text = $("#area5").val();
      
      var bd='';
      
      var x=$("#bg2 .sp-preview-inner").attr('style');
      
	//var x='background-color:#fff;';
      var tcl=x.split('background-color:');
      
      if($("#pic").val()=='Picture Gallery')
      {
         var values_images = $('.gallery-pic label.active > img').attr('src');  
         bd='<img id="theImg" class="mv" src="'+values_images+'" />' ;
           $("#imagefrom").val('Picture Gallery');
      }
      else if($("#pic").val()=='My Computer')
      {
           var values_images = $('.panel >img').attr('src');
            bd='<img id="theImg" class="mv" src="'+values_images+'" />' ;
           /* var imgty=$('#url_target').html();
            var imgtyA = imgty.split(".");
            var imgtypes=imgtyA[1];
           
            var dwdts=$('#dw1').attr('download');
            var ndwdt=dwdts.split(".");
            var ndwvval= ndwdt[0]+'.'+imgtypes;
            $('#dw1').attr('download',ndwvval);
            
            
             var dwdts2=$('#dw2').attr('download');
            var ndwdt2=dwdts2.split(".");
            var ndwvval2= ndwdt2[0]+'.'+imgtypes;
            $('#dw2').attr('download',ndwvval2);
            var dwdts3=$('#dw3').attr('download');
            var ndwdt3=dwdts3.split(".");
            var ndwvval3= ndwdt3[0]+'.'+imgtypes;
            $('#dw3').attr('download',ndwvval3);
            var dwdts4=$('#dw4').attr('download');
            var ndwdt4=dwdts4.split(".");
            var ndwvval4= ndwdt4[0]+'.'+imgtypes;
            $('#dw4').attr('download',ndwvval4);
             var dwdts5=$('#dw5').attr('download');
            var ndwdt5=dwdts5.split(".");
            var ndwvval5= ndwdt5[0]+'.'+imgtypes;
            $('#dw5').attr('download',ndwvval5);
            var dwdts6=$('#dw6').attr('download');
            var ndwdt6=dwdts6.split(".");
            var ndwvval6= ndwdt6[0]+'.'+imgtypes;
            $('#dw6').attr('download',ndwvval6);
            
           */
            
            
            
            
               $("#imagefrom").val('My Computer');
      }
      else if($("#pic").val()=='No Image')
      {
           var values_images = "";
             $("#imagefrom").val('No Image');
      }
      
      var tstyle='';
      var tstyle1=0;
      if($.trim(txtstyle)!='')
      {
          if(txtstyle=='UnderLine')
          {
              tstyle='text-decoration:underline;';
            }
          if(txtstyle=='Italic')
          {
              tstyle1=1;
            }
            
          $('#text_style').val(txtstyle);  
      }
      
      var data= bd + '<b class="mv" style="margin-top:0,0,0,0; color:'+tcl[1]+'; font-size:'+txtsize+'px;'+tstyle+'">';
      if(tstyle1==1){
          data +='<i>'+text+'</i>';
          }else{
             data += text;
              }
data += '</b>';
      $("#preview1,#preview2,#preview3,#preview4,#preview5,#preview6").append(data);
      $("#select_values").val(color+';text='+text+';imagevalue='+values_images);
       $("#cropimage_data").val(values_images);


 //$( "#theImg .mv" ).resizable();
 
        $('#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);
        
    	}
    });
    
        $('#preview2 #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);
        
    	}
    });
        $('#preview3 #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);
        
    	}
    });
        $('#preview4 #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);
        
    	}
    });
        
           $('#preview5 #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);
        
    	}
           });
           $('#preview6 #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);
        
    	}
    });
 //dislplay:inline-block
    
//image move Top and left data
 $('.mv').draggable({
        appendTo: 'body',
        scroll: false,
	drag: function(event) {
        var top = $(this).position().top;
        var left = $(this).position().left;
	//console.log('Top:'+top+'  Left:'+left);
        
    	}
    });
    
        });
        
        $("#save1").on("click",function(){
         var imagefrom = $("#imagefrom").val();
      var image_lefts = $("#preview1 #theImg").css("left");
   $("#image_left_postion").val(image_lefts);
     var image_left= $("#image_left_postion").val();
     
      var image_Tops = $("#preview1 #theImg").css("top");    
     
        $("#image_top_postion").val(image_Tops);
        var image_Top=  $("#image_top_postion").val();
     
         var text_lefts=$("#preview1 b").css("left");
         
          $("#text_left_postion").val(text_lefts);
            var text_left=  $("#text_left_postion").val();
         
         var text_tops=$("#preview1 b").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 b").text();
        $("#input_text").val(input_text);
        var input_texts=$("#input_text").val();
        
         var input_text_color=$("#preview1 b").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 b").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="+text_left+"&image_Top="+image_Top+"&image_left="+image_left+"&text_top="+text_top+"&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 #theImg").css("left");
   $("#image_left_postion").val(image_lefts);
     var image_left= $("#image_left_postion").val();
     
      var image_Tops = $("#preview2 #theImg").css("top");    
     
        $("#image_top_postion").val(image_Tops);
        var image_Top=  $("#image_top_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 b").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 b").text();
        $("#input_text").val(input_text);
        var input_texts=$("#input_text").val();
        
         var input_text_color=$("#preview2 b").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 b").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();
         
         
         
          //$('#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="+text_left+"&image_Top="+image_Top+"&image_left="+image_left+"&text_top="+text_top+"&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 #theImg").css("left");
   $("#image_left_postion").val(image_lefts);
     var image_left= $("#image_left_postion").val();
     
      var image_Tops = $("#preview3 #theImg").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_tops=$("#preview3 b").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 b").text();
        $("#input_text").val(input_text);
        var input_texts=$("#input_text").val();
        
         var input_text_color=$("#preview3 b").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 b").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();
         
         // $('#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="+text_left+"&image_Top="+image_Top+"&image_left="+image_left+"&text_top="+text_top+"&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 #theImg").css("left");
   $("#image_left_postion").val(image_lefts);
     var image_left= $("#image_left_postion").val();
     
      var image_Tops = $("#preview4 #theImg").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_tops=$("#preview4 b").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 b").text();
        $("#input_text").val(input_text);
        var input_texts=$("#input_text").val();
        
         var input_text_color=$("#preview4 b").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 b").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();
         
         
         // $('#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="+text_left+"&image_Top="+image_Top+"&image_left="+image_left+"&text_top="+text_top+"&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 #theImg").css("left");
   $("#image_left_postion").val(image_lefts);
     var image_left= $("#image_left_postion").val();
     
      var image_Tops = $("#preview5 #theImg").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_left=  $("#text_left_postion").val();
      
         $("#text_top_postion").val(position.top+'px');
    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 b").text();
        $("#input_text").val(input_text);
        var input_texts=$("#input_text").val();
        
         var input_text_color=$("#preview5 b").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 b").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 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="+text_left+"&image_Top="+image_Top+"&image_left="+image_left+"&text_top="+text_top+"&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);

                     $('#dw5').css('display','block');
                     $('#dw5').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);
        }
    
           });
    
    });
    
    
    $("#save6").on("click",function(){
        var imagefrom = $("#imagefrom").val();
      var image_lefts = $("#preview6 #theImg").css("left");
   $("#image_left_postion").val(image_lefts);
     var image_left= $("#image_left_postion").val();
     
      var image_Tops = $("#preview6 #theImg").css("top");    
     
        $("#image_top_postion").val(image_Tops);
        var image_Top=  $("#image_top_postion").val();
     
         
          var text_lefts=$("#preview6 b");
          var position = text_lefts.position();
          $("#text_left_postion").val(position.left+'px');
          
          var text_left=  $("#text_left_postion").val();
      
         $("#text_top_postion").val(position.top+'px');
    var text_top= $("#text_top_postion").val();
    
         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 b").text();
        $("#input_text").val(input_text);
        var input_texts=$("#input_text").val();
        
         var input_text_color=$("#preview6 b").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 b").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 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="+text_left+"&image_Top="+image_Top+"&image_left="+image_left+"&text_top="+text_top+"&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);
                     
                     $('#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
				});

    });
    
     $("#dw2").on("click",function(){
          var photosd=$(this).attr('title');
          photosd = 'banner_images/'+photosd;
       popupResult({
					src: photosd
				});

    });
    
     $("#dw3").on("click",function(){
          var photosd=$(this).attr('title');
          photosd = 'banner_images/'+photosd;
       popupResult({
					src: photosd
				});

    });
    
     $("#dw4").on("click",function(){
          var photosd=$(this).attr('title');
          photosd = 'banner_images/'+photosd;
       popupResult({
					src: photosd
				});

    });
    
     $("#dw5").on("click",function(){
          var photosd=$(this).attr('title');
          photosd = 'banner_images/'+photosd;
       popupResult({
					src: photosd
				});

    });
    
     $("#dw6").on("click",function(){
          var photosd=$(this).attr('title');
          photosd = 'banner_images/'+photosd;
       popupResult({
					src: photosd
				});

    });
    
    function cnfrm(strflg){
      if(strflg==true){
       var pv= $('.sweet-alert img').attr('src');
        $( ".hcrp" ).each(function() {
            if($.trim($( this ).val())==''){
                $( this ).val(pv);
                var thisids=$(this).attr('id');
               
                if($.trim(thisids)=='imgcrps1'){
                     $('#save1').css('display','none');
                     $('#dw1').css('display','none'); 
                }
                if($.trim(thisids)=='imgcrps2'){
                    $('#save2').css('display','none');
                     $('#dw2').css('display','none'); 
                }
                if($.trim(thisids)=='imgcrps3'){
                    $('#save3').css('display','none');
                     $('#dw3').css('display','none'); 
                }
                 if($.trim(thisids)=='imgcrps4'){
                     $('#save4').css('display','none');
                     $('#dw4').css('display','none'); 
                }
                 if($.trim(thisids)=='imgcrps5'){
                     $('#save5').css('display','none');
                     $('#dw5').css('display','none'); 
                }
                 if($.trim(thisids)=='imgcrps6'){
                      $('#save6').css('display','none');
                     $('#dw6').css('display','none'); 
                }
                 $('#dw1').css('display','none');
                 $('#dw2').css('display','none');
                 $('#dw3').css('display','none');
                 $('#dw4').css('display','none');
                 $('#dw5').css('display','none');
                 $('#dw6').css('display','none');
                 breakOut = true;
               
                 return false;
            }
          });
        
        }
    }
    
    $("#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() 
    });
    
    
       $(".rfs").on("click",function(){
       window.location.href='banner-page-creation';
    });
    
    
    
</script>

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

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

</body>

</html>