<link href="<?php echo base_url();?>assets/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/style.css">
<style>
    .prev_container_div{
        width: 667px; 
        height:500px; 
        overflow: hidden; 
        margin: auto; 
        text-align: center; 
        position: relative;
    }
</style>
<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="main-content">
    <div class="page-content">
        <div class="container-fluid">
            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h3 style="color: #40dcfd; text-transform: lowercase;">my gallery / <?php echo $locationName;?></h3>
                    </div>
                </div>
            </div>
            <!-- end page title -->
        </div>
        
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <div class="row">
                        <div class="prev_container_div" id="">
                            <img id="overlay" src="<?php echo base_url();?>uploads/default-overlay.png" style="position: absolute; top: 0; left: 0;object-fit:contain">
                            <img id="bgfeatured" src="http://d38x82mkkml5o1.cloudfront.net/<?php echo $detail['bg_comp_url'];?>" style="position: absolute; left: 0; visibility: hidden;">
                            <img id="overlay1" src="<?php echo base_url();?>uploads/default-overlay.png"  style="position: absolute; top: 0; left: 0;">
                            <img id="featured" src="http://d38x82mkkml5o1.cloudfront.net/<?php echo $detail['orig_comp_detail_url'];?>" style="position: absolute; top: 0; left: 0; object-fit: contain;">
                            <img id="frame" src="<?php echo base_url();?>uploads/default-overlay.png" style="position: absolute; top: 0; left: 0;">
                            <div style="position: absolute; top: 0; left: 0; overflow: hidden;" id="watermark_div">
                                <?php
                                    if(count($activate_status) > 0 || count($payg) > 0 || count($preactivate_status) > 0){
                                ?>
                                    <img id="watermark" src="<?php echo base_url();?>uploads/default-overlay.png" style="position: absolute; top: 0; left: 0; object-fit: contain;">
                                <?php 
                                    }else{
                                ?>
                                    <img id="watermark" src="http://d38x82mkkml5o1.cloudfront.net/<?php echo $detail['watermarkfile'];?>" style="position: absolute; top: 0; left: 0; object-fit: contain; ">
                                <?php
                                    }
                                ?>   
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div id="slide-wrapper">
                            <img id="slideLeft" class="arrow" src="<?php echo base_url();?>assets/img/arrow-left.png">
    
                            <div id="slider">
                                <?php 
                                    if(count($gallery_list) > 0){
                                        foreach($gallery_list as $key => $val){
                                ?>
                                            <img class="thumbnail <?php if($detail['id'] == $val['id']){?>active<?php }?>" data="http://d38x82mkkml5o1.cloudfront.net/<?php echo $val['bg_comp_url'];?>" src="http://d38x82mkkml5o1.cloudfront.net/<?php echo $val['orig_comp_detail_url'];?>?<?php echo $val['id'];?>" data_location_id="<?php echo $val['location_id'];?>">
                                <?php
                                        }
                                    }
                                ?>                            
                            </div>
    
                            <img id="slideRight" class="arrow" src="<?php echo base_url();?>assets/img/arrow-right.png">
                        </div>                        
                    </div>

                    <div class="row">
                        <div class="col-md-12 text-center mt-4">
                            <?php 
                                if(count($activate_status) > 0){
                            ?>
                                <button type="button" class="btn btn-primary mr-3" onclick="process_func(1);" style="border-radius: 50px;">
                                    Process
                                    <i class="fa fa-send"></i>
                                </button>
                            <?php
                                }else if(count($preactivate_status) > 0){
                            ?>
                                <button type="button" class="btn btn-primary mr-3" onclick="process_func(2);" style="border-radius: 50px;">
                                    Process
                                    <i class="fa fa-send"></i>
                                </button>
                            <?php
                                }else if(count($payg) > 0){
                            ?>
                                <button type="button" class="btn btn-primary mr-3" onclick="process_func(0);" style="border-radius: 50px;">
                                    Process
                                    <i class="fa fa-send"></i>
                                </button>
                            <?php
                                }else{
                            ?>
                                <button type="button" disabled class="btn btn-primary mr-3" style="border-radius: 50px;">
                                    Process
                                    <i class="fa fa-send"></i>
                                </button>
                            <?php
                                }
                            ?>
                            <button type="button" class="btn btn-primary ml-3" style="border-radius: 50px;" onclick="process_watermark_func()">
                                Preview
                                <i class="fa fa-image"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-md-2" style="padding-top:20px;">
                    <div class="over-frame">
                        <h4 style="color: #40dcfd;">Overlay</h4>
                    </div>   
                    
                    <div id="slider-overlay">
                        <?php
                            if(count($background_list) > 0){
                        ?>
                                <div style="text-align: center">
                                    <img class="overlay active" src="<?php echo base_url();?>uploads/c_empty.png">
                                    <h6>None</h6>
                                </div>
                        <?php
                                if(!empty($detail['bg_comp_url'])){
                                    foreach ($background_list as $key => $val){
                                        if($val['category_id'] == 1){
                                            if($val['orderID'] == 1){
                                                if($is_single_gallery == 1){
                                                    if($detail['location_id'] == $val['location_id']){
                        ?>
                                                        <div style="text-align: center">
                                                            <img class="overlay original" overlay_id="<?php echo $val["location_id"];?>" data_width="<?php echo $val["width"];?>" data_height="<?php echo $val["height"];?>" data_rate="<?php echo $val["rate"];?>" data_rotate="<?php echo $val["rotate"];?>" src="http://d38x82mkkml5o1.cloudfront.net/<?php echo $val["comp_attachment"];?>">
                                                           <h6><?php echo $val['title'];?></h6>
                                                        </div>
                        <?php
                                                    }
                                                }else{
                        ?>
                                                    <div style="text-align: center">
                                                        <img class="overlay fe"  overlay_id="<?php echo $val["location_id"];?>" data_width="<?php echo $val["width"];?>" data_height="<?php echo $val["height"];?>" data_rate="<?php echo $val["rate"];?>" data_rotate="<?php echo $val["rotate"];?>" src="http://d38x82mkkml5o1.cloudfront.net/<?php echo $val["comp_attachment"];?>">
                                                        <h6><?php echo $val['title'];?></h6>
                                                    </div>
                        <?php
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        ?>
                    </div>
                    
                </div>

                <div class="col-md-2" style="padding-top:20px;">
                    <div class="over-frame">
                        <h4 style="color: #40dcfd;">Frame</h4>
                    </div>                            
                    <div id="slider-overlay">
                        <?php
                            if(count($background_list) > 0){
                        ?>
                                <div style="text-align: center">
                                    <img class="frame active" src="<?php echo base_url();?>uploads/c_empty.png">
                                    <h6>None</h6>
                                </div>
                        <?php
                                foreach ($background_list as $key => $val){
                                    if($val['category_id'] == 2){
                        ?>
                                    <div style="text-align: center">
                                        <img  class="frame" frame_id="<?php echo $val["location_id"];?>" src="http://d38x82mkkml5o1.cloudfront.net/<?php echo $val["comp_attachment"];?>">
                                        <h6><?php echo $val['title'];?></h6>
                                    </div>
                        <?php
                                    }
                                }
                            }
                        ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Sweet Alerts js -->
    <script src="<?php echo base_url();?>assets/libs/sweetalert2/sweetalert2.min.js"></script>

    <!-- Sweet alert init js-->
    <script src="<?php echo base_url();?>assets/js/pages/sweet-alerts.init.js"></script>

    <script type="text/javascript">
        var overlay_id = 0;
        var frame_id = 0;
        var package_history_id = '<?php if($detail["package_history_id"] != ""){echo $detail["package_history_id"];}else{echo 0;}?>';
        var prepackage_history_id = '<?php if($detail["prepackage_history_id"] != ""){echo $detail["prepackage_history_id"];}else{echo 0;}?>';
        var gallery_id = '<?php echo $detail["id"];?>';
        var bg_comp_url = 'http://d38x82mkkml5o1.cloudfront.net/<?php echo $detail['bg_comp_url'];?>';
        var img_gallery_url = 'http://d38x82mkkml5o1.cloudfront.net/<?php echo $detail['orig_comp_detail_url'];?>';
        var overlay = document.getElementsByClassName('overlay');
        var originoverlayurl;
        
                 
        getMeta("http://d38x82mkkml5o1.cloudfront.net/<?php echo $detail['orig_comp_detail_url'];?>");
        
		let thumbnails = document.getElementsByClassName('thumbnail');

		let activeImages = document.getElementsByClassName('active');

		for (var i=0; i < thumbnails.length; i++){

			thumbnails[i].addEventListener('click', function(){
				
				if (activeImages.length > 0){
					activeImages[0].classList.remove('active');			
                }
                
                img_gallery_url = this.src;
                getMeta(img_gallery_url.split('?')[0]);
                gallery_id = img_gallery_url.split('?')[1];
                
                var bgImg = document.querySelector("#featured");
                var currbgWidth = bgImg.clientWidth;
                var currbgHeight = bgImg.clientHeight;

				this.classList.add('active');
				$("#featured").attr('src', img_gallery_url);
				$("#bgfeatured").attr('src', "<?php echo base_url();?>uploads/default-overlay.png");
				$("#overlay").attr('src', "<?php echo base_url();?>uploads/default-overlay.png");
				$("#overlay1").attr('src', '<?php echo base_url();?>uploads/default-overlay.png'); 
				$("#frame").attr('src', "<?php echo base_url();?>uploads/default-overlay.png");
				bg_comp_url = this.getAttribute("data");
				
				if(<?php echo $is_single_gallery;?> == 1){
				    get_overlay_func(this.getAttribute("data_location_id"));
				}
			})
		}
	
		function get_overlay_func(location_id){
            $.ajax({
                method: "POST",
                url: "<?php echo base_url();?>GalleryController/get_overlay_info",
                data: {
                    edit_location_id: location_id
                }
            })
            .done(function(msg) {
                var json_obj = JSON.parse(msg);
                
                var html = '';
				if(json_obj.length > 0){
				    html += '<div style="text-align: center">';
                    html += '    <img class="overlay active" src="<?php echo base_url();?>uploads/c_empty.png">';
                    html += '    <h6>None</h6>';
                    html += '</div>';
					for(var i = 0; i < json_obj.length; i++){
						if(json_obj[i].category_id == 1){
                            if(json_obj[i].orderID == 1){
                                if(<?php echo $is_single_gallery;?> == 1){
                                    if(location_id == json_obj[i].location_id){
                                        html += '<div style="text-align: center">';
                                        html += '   <img class="overlay original"  overlay_id="'+json_obj[i].location_id+'" data_width="'+json_obj[i].width+'" data_height="'+json_obj[i].height+'" data_rate="'+json_obj[i].rate+'" data_rotate="'+json_obj[i].rotate+'" src="http://d38x82mkkml5o1.cloudfront.net/' + json_obj[i].comp_attachment+ '">';
                                        html += '   <h6>'+json_obj[i].title+'</h6>';
                                        html += '</div>';
                                    }
                                }
                            }
                        }
					}
					
					$("#slider-overlay").html(html);
					
					overlay = document.getElementsByClassName('overlay');
					
					for (var i=0; i < overlay.length; i++){
                        if(i == 0){
                            overlay[i].addEventListener('click', function(){
                                if (activeImages.length > 0){
                                    activeImages[0].classList.remove('active');
                                }
                
                                this.classList.add('active');
                                $("#featured").attr('src', img_gallery_url);
                                $("#bgfeatured").attr('src', "<?php echo base_url();?>uploads/default-overlay.png");
                                $("#overlay").attr('src', "<?php echo base_url();?>uploads/default-overlay.png");
                                $("#overlay1").attr('src', '<?php echo base_url();?>uploads/default-overlay.png'); 
                                
                                getMeta(img_gallery_url);
                            })                
                        }else{
                            overlay[i].addEventListener('click', function(){
                                if (activeImages.length > 0){
                                    activeImages[0].classList.remove('active');
                                }		
                                
                                document.getElementById('bgfeatured').style.visibility = 'visible';
                                
                                var img_overlay_url = this.src;
                                overlay_id = this.getAttribute("overlay_id");
                
                                this.classList.add('active');
                                $("#overlay").attr('src', img_overlay_url);
                                $("#bgfeatured").attr('src', bg_comp_url);
                                
                                getMeta(img_overlay_url);
                                
                                <?php 
                                    if(count($background_list) > 0){
                                        foreach($background_list as $key => $val){
                                            if($val['orderID'] == 2){
                                ?>
                                                if(overlay_id == '<?php echo $val["location_id"];?>'){
                                                    $("#overlay1").attr('src', 'http://d38x82mkkml5o1.cloudfront.net/'+'<?php echo $val["comp_attachment"];?>');
                                                }else{
                                                    $("#overlay1").attr('src', '<?php echo base_url();?>uploads/default-overlay.png'); 
                                                }
                                <?php
                                            }
                                        }
                                    }
                                ?>
                                
                                $("#featured").attr('src', '<?php echo base_url();?>uploads/default-overlay.png');
                                
                                var currWidth = document.getElementById("overlay").clientWidth;
                                var currHeight = document.getElementById("overlay").clientHeight;
                                
                                //Get image width, height
                                var bgImg = document.querySelector("#bgfeatured");
                                var currbgWidth = bgImg.clientWidth;
                                var currbgHeight = bgImg.clientHeight;
                                var is_portrait = true; 
                                
                                var img_width;
                                var img_height;
                                var img_position_x;
                                var img_position_y;
                                
                                var img_rate = currbgWidth / currbgHeight;
                                
                                if((currbgWidth / currbgHeight) > (4 / 3))
                                    is_portrait = false;
                                else
                                    is_portrait = true;
                                    
                                if(is_portrait = false){
                                    img_height = currWidth * this.getAttribute("data_rate") * img_rate;
                                    img_width = currWidth * this.getAttribute("data_rate"); 
                                    img_position_x = currWidth * this.getAttribute("data_width") - currWidth * this.getAttribute("data_rate") / 2;
                                    img_position_y = currHeight * this.getAttribute("data_height");
                                }else{
                                    var overate = $(".original")[0].clientWidth/$(".original")[0].clientHeight;
                                    img_width = currHeight * this.getAttribute("data_rate") * img_rate/667*document.getElementById("overlay").clientWidth;
                                    img_height = currHeight * this.getAttribute("data_rate")/667*document.getElementById("overlay").clientWidth; 
                                    img_position_x = currWidth * this.getAttribute("data_width") - currHeight * this.getAttribute("data_rate") * img_rate / 2*document.getElementById("overlay").clientWidth/667;
                                    // img_position_y = currHeight * this.getAttribute("data_height")+(666/overate - document.getElementById("overlay").clientWidth/overate)/(10);
                                    img_position_y = 500/666*document.getElementById("overlay").clientWidth * this.getAttribute("data_height")+(500 - 500/666*document.getElementById("overlay").clientWidth)/2;
                                    console.log(document.getElementById("overlay").clientWidth)
                                    console.log(overate)
                                    console.log(currHeight/overate)
                                    console.log("-------------------")
                                    console.log(this.getAttribute("data_height"))
                                    // img_width = currHeight * this.getAttribute("data_rate") * img_rate;
                                    // img_height = currHeight * this.getAttribute("data_rate"); 
                                    // img_position_x = currWidth * this.getAttribute("data_width") - currHeight * this.getAttribute("data_rate") * img_rate / 2;
                                    // img_position_y = currHeight * this.getAttribute("data_height");
                                }
                                
                                document.getElementById('bgfeatured').style.left = img_position_x +'px';
                                document.getElementById('bgfeatured').style.bottom = img_position_y +'px';
                                document.getElementById('bgfeatured').style.width = img_width +'px';
                                document.getElementById('bgfeatured').style.height = img_height +'px';
                                
                                document.getElementById('bgfeatured').style.webkitTransform = 'rotate('+this.getAttribute("data_rotate")+'deg)'; 
                                document.getElementById('bgfeatured').style.mozTransform    = 'rotate('+this.getAttribute("data_rotate")+'deg)'; 
                                document.getElementById('bgfeatured').style.msTransform     = 'rotate('+this.getAttribute("data_rotate")+'deg)'; 
                                document.getElementById('bgfeatured').style.oTransform      = 'rotate('+this.getAttribute("data_rotate")+'deg)'; 
                                document.getElementById('bgfeatured').style.transform       = 'rotate('+this.getAttribute("data_rotate")+'deg)'; 
                            })
                        }
                    }
				}
            });
		}
		
		function watermark(currbgWidth, currbgHeight){
		    var curr_rate_w = document.getElementById("overlay").clientWidth / currbgWidth;
		    var curr_rate_h = document.getElementById("overlay").clientHeight / currbgHeight;
		    if(curr_rate_w > curr_rate_h) {
		        currbgHeight = document.getElementById("overlay").clientHeight;
		        currbgWidth = currbgWidth * curr_rate_h;
		    } else {
		        currbgWidth = document.getElementById("overlay").clientWidth;
		        currbgHeight = currbgHeight * curr_rate_w;
		    }
            if(!/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
            || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4)))
            {
                document.getElementById('watermark_div').style.left = (document.getElementById("overlay").clientWidth - currbgWidth)/2 +'px';
            }
            document.getElementById('watermark_div').style.top = (document.getElementById("overlay").clientHeight - currbgHeight)/2 +'px';
            document.getElementById('watermark_div').style.width = currbgWidth +'px';
            document.getElementById('watermark_div').style.height = currbgHeight +'px';
            
            if(document.getElementById("overlay").src == '<?php echo base_url();?>uploads/default-overlay.png'){
                document.getElementById('frame').style.left = (document.getElementById("overlay").clientHeight - currbgWidth)/2 +'px';
                document.getElementById('frame').style.top = (document.getElementById("overlay").clientHeight - currbgHeight)/2 +'px';
                document.getElementById('frame').style.width = currbgWidth +'px';
                document.getElementById('frame').style.height = currbgHeight +'px';
            }else{
                document.getElementById('frame').style.left = 0 +'px';
                document.getElementById('frame').style.top = 0 +'px';
                document.getElementById('frame').style.width = document.getElementById("overlay").clientWidth +'px';
                document.getElementById('frame').style.height = document.getElementById("overlay").clientHeight +'px';
            }
		}
		
		function getMeta(url){   
		    var img = new Image();
            img.onload = function(){
                watermark( this.width, this.height );
             };
            img.src = url;
        }

		let buttonRight = document.getElementById('slideRight');
		let buttonLeft = document.getElementById('slideLeft');

		buttonLeft.addEventListener('click', function(){
			document.getElementById('slider').scrollLeft -= 180
		})

		buttonRight.addEventListener('click', function(){
			document.getElementById('slider').scrollLeft += 180
		})

        for (var i=0; i < overlay.length; i++){
            if(i == 0){
                overlay[i].addEventListener('click', function(){
                    if (activeImages.length > 0){
                        activeImages[0].classList.remove('active');
                    }
    
                    this.classList.add('active');
                    $("#featured").attr('src', img_gallery_url);
                    $("#bgfeatured").attr('src', "<?php echo base_url();?>uploads/default-overlay.png");
                    $("#overlay").attr('src', "<?php echo base_url();?>uploads/default-overlay.png");
                    $("#overlay1").attr('src', '<?php echo base_url();?>uploads/default-overlay.png'); 
                    
                    getMeta(img_gallery_url);
                })                
            }else{
                overlay[i].addEventListener('click', function(){
                    if (activeImages.length > 0){
                        activeImages[0].classList.remove('active');
                    }		
                    
                    document.getElementById('bgfeatured').style.visibility = 'visible';
                    
                    var img_overlay_url = this.src;
                    overlay_id = this.getAttribute("overlay_id");
    
                    this.classList.add('active');
                    $("#overlay").attr('src', img_overlay_url);
                    $("#bgfeatured").attr('src', bg_comp_url);
                    
                    getMeta(img_overlay_url);
                    
                    <?php 
                        if(count($background_list) > 0){
                            foreach($background_list as $key => $val){
                                if($val['orderID'] == 2){
                    ?>
                                    if(overlay_id == '<?php echo $val["location_id"];?>'){
                                        $("#overlay1").attr('src', 'http://d38x82mkkml5o1.cloudfront.net/'+'<?php echo $val["comp_attachment"];?>');
                                    }else{
                                        $("#overlay1").attr('src', '<?php echo base_url();?>uploads/default-overlay.png'); 
                                    }
                    <?php
                                }
                            }
                        }
                    ?>
                    
                    $("#featured").attr('src', '<?php echo base_url();?>uploads/default-overlay.png');
                    var currWidth = document.getElementById("overlay").clientWidth;
                    var currHeight = document.getElementById("overlay").clientHeight;
                    //Get image width, height
                    var bgImg = document.querySelector("#bgfeatured");
                    var currbgWidth = bgImg.clientWidth;
                    var currbgHeight = bgImg.clientHeight;
                    var is_portrait = true; 
                    
                    var img_width;
                    var img_height;
                    var img_position_x;
                    var img_position_y;
                    
                    var img_rate = currbgWidth / currbgHeight;
                    
                    if((currbgWidth / currbgHeight) > (4 / 3))
                        is_portrait = false;
                    else
                        is_portrait = true;
                        
                    if(is_portrait = false){
                         console.log("------------------f211212ewwefwefwefweffewwfe212");
                        var overate = $(".original")[0].clientWidth/$(".original")[0].clientHeight;
                        img_height = currWidth * this.getAttribute("data_rate") * img_rate;
                        img_width = currWidth * this.getAttribute("data_rate"); 
                        img_position_x = currWidth * this.getAttribute("data_width") - currWidth * this.getAttribute("data_rate") / 2;
                        img_position_y = currHeight * this.getAttribute("data_height");
                    }else{
                        console.log("------------------fewwefwefwefweffewwfe212");
                        var overate = $(".original")[0].clientWidth/$(".original")[0].clientHeight-0.15;
                        img_width = currHeight * this.getAttribute("data_rate") * img_rate/667*document.getElementById("overlay").clientWidth;
                        img_height = currHeight * this.getAttribute("data_rate")/666*document.getElementById("overlay").clientWidth; 
                        img_position_x = currWidth * this.getAttribute("data_width") - currHeight * this.getAttribute("data_rate") * img_rate / 2*document.getElementById("overlay").clientWidth/667;
                        img_position_y = 500/666*document.getElementById("overlay").clientWidth * this.getAttribute("data_height")+(500 - 500/666*document.getElementById("overlay").clientWidth)/2;             
                    }
                    
                    document.getElementById('bgfeatured').style.left = img_position_x +'px';
                    document.getElementById('bgfeatured').style.bottom = img_position_y +'px';
                    document.getElementById('bgfeatured').style.width = img_width +'px';
                    document.getElementById('bgfeatured').style.height = img_height +'px';
                    
                    document.getElementById('bgfeatured').style.webkitTransform = 'rotate('+this.getAttribute("data_rotate")+'deg)'; 
                    document.getElementById('bgfeatured').style.mozTransform    = 'rotate('+this.getAttribute("data_rotate")+'deg)'; 
                    document.getElementById('bgfeatured').style.msTransform     = 'rotate('+this.getAttribute("data_rotate")+'deg)'; 
                    document.getElementById('bgfeatured').style.oTransform      = 'rotate('+this.getAttribute("data_rotate")+'deg)'; 
                    document.getElementById('bgfeatured').style.transform       = 'rotate('+this.getAttribute("data_rotate")+'deg)'; 
                })
            }
        }

        let frame = document.getElementsByClassName('frame');

        for (var i=0; i < frame.length; i++){
            if(i == 0){
                frame[i].addEventListener('click', function(){
                
                    if (activeImages.length > 0){
                        activeImages[0].classList.remove('active');
                    }	
                    
                    this.classList.add('active')
                    $("#frame").attr('src', "<?php echo base_url();?>uploads/default-overlay.png");
                })
            }else{
                frame[i].addEventListener('click', function(){
                
                    if (activeImages.length > 0){
                        activeImages[0].classList.remove('active');
                    }	
                    
                    var img_frame_url = this.src;
                    frame_id = this.getAttribute("frame_id");
    
                    this.classList.add('active');
                    $("#frame").attr('src', img_frame_url);
                    
                    getMeta(img_gallery_url.split('?')[0]);
                })
            }
        }
    
        var timer;
        
        function process_func(type){
            if(overlay_id == 0 && frame_id == 0){
                Swal.fire({ title: "Failed!", text: "Please select at least one overlay or frame", confirmButtonColor: "#556ee6" });
            }else{
                var t;
                Swal.fire({
                    title: "Processing...",
                    html: '<p class="mt-2">Please wait...</p><strong></strong',
                    timer: 300000,
                    onBeforeOpen: function () {
                        Swal.showLoading(),
                            (t = setInterval(function () {
                                Swal.getContent().querySelector("strong").textContent = Math.round((300000 - Swal.getTimerLeft())/1000);
                            }, 1000));
                    },
                    onClose: function () {
                        clearInterval(t);
                    },
                });
                
                if(type == 1){
                    $.ajax({
                        method: "POST",
                        url: "https://makeabl.net/api/process_merge",
                        data: {
                            gallery_id: gallery_id,
                            overlay_id: overlay_id,
                            frame_id: frame_id,
                            package_history_id: package_history_id,
                            process_type: 1
                        }
                    })
                    .done(function(msg) {
                        if(msg.result == "success"){
                            $.ajax({
                                method: "POST",
                                url: "<?php echo base_url();?>PaygPaypalController/disablepg",
                                data: {
                                    gallery_id: gallery_id
                                }
                            })
                            .done(function(res) {
                                if(res == "success")
                                    Swal.fire({ title: "Success!", text: "Please check processed image in album page!", type: "success", confirmButtonColor: "#556ee6" });
                            });
                        }
                    });
                }else if(type == 2){
                    $.ajax({
                        method: "POST",
                        url: "https://makeabl.net/api/process_merge",
                        data: {
                            gallery_id: gallery_id,
                            overlay_id: overlay_id,
                            frame_id: frame_id,
                            package_history_id: prepackage_history_id,
                            process_type: 2
                        }
                    })
                    .done(function(msg) {
                        if(msg.result == "success"){
                            $.ajax({
                                method: "POST",
                                url: "<?php echo base_url();?>PaygPaypalController/disablepg",
                                data: {
                                    gallery_id: gallery_id
                                }
                            })
                            .done(function(res) {
                                if(res == "success")
                                    Swal.fire({ title: "Success!", text: "Please check processed image in album page!", type: "success", confirmButtonColor: "#556ee6" });
                            });
                        }
                    });
                }else if(type == 0){
                    $.ajax({
                        method: "POST",
                        url: "https://makeabl.net/api/process_merge",
                        data: {
                            gallery_id: gallery_id,
                            overlay_id: overlay_id,
                            frame_id: frame_id,
                            package_history_id: 0,
                            process_type: 0
                        }
                    })
                    .done(function(msg) {
                        if(msg.result == "success"){
                            $.ajax({
                                method: "POST",
                                url: "<?php echo base_url();?>PaygPaypalController/disablepg",
                                data: {
                                    gallery_id: gallery_id
                                }
                            })
                            .done(function(res) {
                                if(res == "success")
                                    Swal.fire({ title: "Success!", text: "Please check processed image in album page!", type: "success", confirmButtonColor: "#556ee6" });
                            });
                        }
                    });
                }
            }
        }

        function process_watermark_func(){
            if(overlay_id == 0 && frame_id == 0){
                Swal.fire({ title: "Failed!", text: "Please select at least one overlay or frame", confirmButtonColor: "#556ee6" });
            }else{
                var t;
                Swal.fire({
                    title: "Processing...",
                    html: '<p class="mt-2">Please wait...</p><strong></strong',
                    timer: 300000,
                    onBeforeOpen: function () {
                        Swal.showLoading(),
                            (t = setInterval(function () {
                                Swal.getContent().querySelector("strong").textContent = Math.round((300000 - Swal.getTimerLeft())/1000);
                            }, 1000));
                    },
                    onClose: function () {
                        clearInterval(t);
                    },
                });                
                
                $.ajax({
                    method: "POST",
                    url: "https://makeabl.net/api/process_merge_watermark",
                    data: {
                        gallery_id: gallery_id,
                        overlay_id: overlay_id,
                        frame_id: frame_id
                    }
                })
                .done(function(msg) {
                    if(msg.result == "success"){
                        $.ajax({
                            method: "POST",
                            url: "<?php echo base_url();?>PaygPaypalController/disablepg",
                            data: {
                                gallery_id: gallery_id
                            }
                        })
                        .done(function(res) {
                            if(res == "success")
                                Swal.fire({ title: "Success!", text: "Please check processed image in album page!", type: "success", confirmButtonColor: "#556ee6" });
                        });
                    }
                });
            }
        }
      
	</script>