@extends('layouts.master')
@section('page_title', 'Image Library')
@section('content')
    <div class="container">
        {{ Form::page_header("Image Library", "paper_stack") }}
        <div class="grey-bg curve_container">
            <div class="row">
                <div class="col-md-3 detail-left-side">
                    <p id="all-list" class="promo-img-type chosen">All Images (<span id="all-count">{{ $promo_images->count() }}</span>)</p>
                    <p id="default-list" class="promo-img-type">Default Image</p>
                    <p id="main-list" class="promo-img-type">{{ \App\Helpers\Promo_Image_Helper::main_image_label(',') }} (<span id="main-count">{{ $image_counts->get('main_images') }}</span>)</p>
                    <p id="network-list" class="promo-img-type">{{ \App\Helpers\Promo_Image_Helper::network_image_label(',') }} (<span id="network-count">{{ $image_counts->get('network_images') }}</span>)</p>
                    <p id="landing-list" class="promo-img-type">{{ \App\Helpers\Promo_Image_Helper::landing_image_label(',') }} (<span id="landing-count">{{ $image_counts->get('landing_images') }}</span>)</p>
                    <p id="square-list" class="promo-img-type">{{ \App\Helpers\Promo_Image_Helper::square_image_label(',') }} (<span id="square-count">{{ $image_counts->get('square_images') }}</span>)</p>
                    <p id="sponsor-list" class="promo-img-type">{{ \App\Helpers\Promo_Image_Helper::sponsor_image_label(',') }} (<span id="sponsor-count">{{ $image_counts->get('sponsor_images') }}</span>)</p>
                    <p id="facebook-ad-list" class="promo-img-type">Facebook Ad, 1200 X 628 (<span id="facebook-ad-count">{{ $image_counts->get('facebook_ad_images') }}</span>)</p>
                    <p id="facebook-carousel-list" class="promo-img-type">Facebook Carousel, 600 X 600 (<span id="facebook-carousel-count">{{ $image_counts->get('facebook_carousel_images') }}</span>)</p>
                    <p id="email-header-list" class="promo-img-type">Email Header, 600px (<span id="email-header-count">{{ $image_counts->get('email_header_images') }}</span>)</p>
                    <p id="wordpress-list" class="promo-img-type">Wordpress Image, 675 X 372 (<span id="wordpress-count">{{ $image_counts->get('wordpress_image') }}</span>)</p>
                    <input type="button" value="Add an image" class="img-library-btn add-img">
                    <hr id="img-btn-list-divider">
                    <p id="all-logos" class="logo-type">Logos (<span id="logos-count">{{ $logos->count() }}</span>)</p>
                    <p id="email-header-logos" class="logo-type">Email Header, &le;390w (<span id="email-header-count">{{ $logo_counts->get('email_headers') }}</span>)</p>
                    <p id="network-promo-logos" class="logo-type">Network Promo, &le;100h (<span id="network-promo-count">{{ $logo_counts->get('network_promos') }}</span>)</p>
                    <p id="sponsor-image-logos" class="logo-type">Sponsor Image, &le;125h (<span id="sponsor-image-count">{{ $logo_counts->get('sponsor_images') }}</span>)</p>
                    <input type="button" value="Add a logo" class="img-library-btn add-logo">
                </div>
                <div class="col-md-9 detail-right-side">
                    <div class="white-bg">
                        <div class="promo-img-grid-container">
                            <p class="img-grid-title">All Images</p>
                            <p hidden id="default-explanation">Default images must have been created in four sizes: main, network, landing, and square. The images below have all the necessary sizes in the library.</p>
                            <div id="thumbnail-plus-hover-wrapper">
                                @foreach($promo_images as $image)
                                    <div id="image-{{ $image->promo_image }}" class="each-promo-img-container">
                                        {!! Html::image($image->thumbnail_image, null, ['class' => 'thumbnail-img']) !!}
                                        {!! Form::hidden('image-id', $image->promo_image) !!}
                                        {!! Form::hidden('original-img', $image->original_image) !!}
                                        {!! Form::hidden('main-img', $image->main_image) !!}
                                        {!! Form::hidden('resize-main-img', $image->resize_main_image) !!}
                                        {!! Form::hidden('network-img', $image->network_image) !!}
                                        {!! Form::hidden('resize-network-img', $image->resize_network_image) !!}
                                        {!! Form::hidden('landing-img', $image->landing_image) !!}
                                        {!! Form::hidden('resize-landing-img', $image->resize_landing_image) !!}
                                        {!! Form::hidden('square-img', $image->square_image) !!}
                                        {!! Form::hidden('resize-square-img', $image->resize_square_image) !!}
                                        {!! Form::hidden('sponsor-img', $image->sponsor_image) !!}
                                        {!! Form::hidden('resize-sponsor-img', $image->resize_sponsor_image) !!}
                                        {!! Form::hidden('facebook-ad-img', $image->facebook_ad_image) !!}
                                        {!! Form::hidden('resize-facebook-ad-img', $image->resize_facebook_ad_image) !!}
                                        {!! Form::hidden('facebook-carousel-img', $image->facebook_carousel_image) !!}
                                        {!! Form::hidden('resize-facebook-carousel-img', $image->resize_facebook_carousel_image) !!}
                                        {!! Form::hidden('email-header-img', $image->email_header_image) !!}
                                        {!! Form::hidden('resize-email-header-img', $image->resize_email_header_image) !!}
                                        {!! Form::hidden('wordpress-img', $image->wordpress_image) !!}
                                        {!! Form::hidden('resize-wordpress-img', $image->resize_wordpress_image) !!}
                                        {!! Html::image($image->original_image, null, ['class' => 'hover-image', 'hidden' => true]) !!}
                                    </div>
                                @endforeach
                                @foreach($logos as $logo)
                                    <div hidden id="logo-{{ $logo->promo_logo }}" class="each-logo-container">
                                        {!! Html::image($logo->thumbnail_logo, null, ['class' => 'thumbnail-logo']) !!}
                                        {!! Form::hidden('logo-id', $logo->promo_logo) !!}
                                        {!! Form::hidden('original-logo', $logo->original_logo) !!}
                                        {!! Form::hidden('email-header', $logo->email_logo) !!}
                                        {!! Form::hidden('network-promo', $logo->network_logo) !!}
                                        {!! Form::hidden('sponsor-logo', $logo->sponsor_logo) !!}
                                        {!! Html::image($logo->original_logo, null, ['class' => 'hover-image', 'hidden' => true]) !!}
                                    </div>
                                @endforeach
                            </div>
                            {!! Form::open(['id' => 'default-img-form']) !!}
                            <div id="thumbnail-plus-default-radio-wrapper">
                                <div class="clearfix">
                                    @foreach($promo_images as $image)
                                        @if($image->main_image && $image->network_image && $image->landing_image && $image->square_image)
                                            <div hidden id="default-{{ $image->promo_image }}" class="default-img-container">
                                                {!! Html::image($image->thumbnail_image) !!}
                                                @if($image->default == 1)
                                                    <label class="default-img-radio-label">
                                                        {!! Form::radio('default', $image->promo_image, true, ['class' => 'default-img-radio-btn']) !!}
                                                        <span>Default</span>
                                                    </label>
                                                @else
                                                    <label class="default-img-radio-label">
                                                        {!! Form::radio('default', $image->promo_image, null, ['class' => 'default-img-radio-btn']) !!}
                                                        <span>Set as Default</span>
                                                    </label>
                                                @endif
                                            </div>
                                        @endif
                                    @endforeach
                                </div>
                                <div id="save-default-wrapper" class="clearfix">
                                    <input hidden id="save-default-btn" type="button" value="SET MAIN DEFAULT IMAGE" class="img-library-btn">
                                </div>
                                <div id="email_header_library" class="clearfix hidden">
                                    <p class="img-grid-title-header">Default Email Header Image</p>
                                    <div class="clearfix email-header-default-image-list">
                                        @foreach($promo_images as $image)
                                            <div id="image-header-{{ $image->promo_image }}" class="each-promo-img-container-header">
                                                <div hidden id="default-header-{{ $image->promo_image }}" class="default-img-container">
                                                    {!! Html::image($image->thumbnail_image) !!}
                                                    @if($image->default_header == 1)
                                                        <label class="default-img-radio-label">
                                                            {!! Form::radio('default_header', $image->promo_image, true, ['class' => 'default-img-radio-btn']) !!}
                                                            <span>Default</span>
                                                        </label>
                                                    @else
                                                        <label class="default-img-radio-label">
                                                            {!! Form::radio('default_header', $image->promo_image, null, ['class' => 'default-img-radio-btn']) !!}
                                                            <span>Set as Default</span>
                                                        </label>
                                                    @endif
                                                </div>
                                                {!! Form::hidden('email-header-img', $image->email_header_image) !!}
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="clearfix"><input id="save-default-header-btn" type="button" value="SET DEFAULT EMAIL HEADER" class="img-library-btn"></div>
                                </div>
                            </div>
                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('shared.modals._upload_image_modal')

    {{--Crop Image Modal--}}
    <div id="crop-img-modal" class="modal fade">
        <div id="crop-modal-size" class="modal-dialog" style="width: 800px">
            <div class="modal-content">
                <div class="modal-header" style="border-color: #d7d7d7">
                    <input class="cancel-modal" type="button" data-dismiss="modal" value="Cancel">
                    <h4 class="modal-title promo-modal-title">Add an Image to the Image Library</h4>
                </div>
                <div class="modal-body">
                    <div style="background-color: #e4e4e4;">
                        <div id="crop-window">
                            <div id="drag-banner" align="center">Drag to Reposition</div>
                            <div hidden id="wait-cover"><div><div>Please Wait</div></div></div>
                        </div>
                    </div>
                    <input id="reposition-btn" type="button" value="Reposition Image" class="crop-img-modal-btn cropping">
                    <input hidden id="cancel-crop" type="button" value="Cancel Reposition" class="crop-img-modal-btn cropping">
                    <p class="crop-modal-label">Resize <span id="resize-label">Main</span> Image</p>
                    <label id="original-dimensions" class="crop-modal-text"></label><br>
                    {!! Form::open(['id' => 'crop-img-form']) !!}
                    <div class="crop-img-radio-row">
                        {!! Form::radio('radio_resize', 'no resize', true, ['style' => 'width: 13px;']) !!}
                        <label class="crop-modal-text" style="margin-right: 33px"> Don't Resize</label>
                        {!! Form::radio('radio_resize', 'resize', null, ['style' => 'width: 13px;']) !!}
                        <label class="crop-modal-text">
                            {!! Form::text('custom_width', null, ['id' => 'custom-width-box', 'class' => 'resize-dimension-box']) !!} Minimum width: <span id="min-width">598</span> px
                        </label>
                    </div>
                    <div hidden id="width-error">
                        <label class="modal-error">The desired width is less than the minimum width.</label>
                        <br>
                    </div>
                    <div hidden id="height-error">
                        <label class="modal-error">The height of the new image is less than the minimum height for this promo image type.</label>
                        <br>
                    </div>
                    <div hidden id="image-size-error">
                        <label class="modal-error">The new image cannot be larger than the original.</label>
                        <br>
                    </div>
                    <div hidden id="no-width-error">
                        <label class="modal-error">Please insert a custom width to resize the image.</label>
                        <br>
                    </div>
                    <input id="resize-btn" name="resize" disabled type="button" value="Resize" class="crop-img-modal-btn">
                    <p class="crop-modal-label">Select a Promo Image</p>
                    <label hidden id="crop-error" class="modal-error">The image is too small for this promo.</label>
                    <div class="image-type-container">
                        <div id="main" class="image-type-selection">
                            @include('shared._svg_rect_template', ['x' => 11, 'y' => 11, 'width' => 87, 'height' => 61])
                            <p>Main Image</p>
                            <p>{{ \App\Helpers\Promo_Image_Helper::MAIN_IMAGE_WIDTH }} X {{ \App\Helpers\Promo_Image_Helper::MAIN_IMAGE_HEIGHT }}</p>
                        </div>
                        <div id="network" class="image-type-selection">
                            @include('shared._svg_rect_template', ['x' => 13, 'y' => 33, 'width' => 83, 'height' => 39])
                            <p>Network Image</p>
                            <p>{{ \App\Helpers\Promo_Image_Helper::NETWORK_IMAGE_WIDTH }} X {{ \App\Helpers\Promo_Image_Helper::NETWORK_IMAGE_HEIGHT }}</p>
                        </div>
                        <div id="landing" class="image-type-selection">
                            @include('shared._svg_rect_template', ['x' => 16, 'y' => 33, 'width' => 77, 'height' => 39])
                            <p>Landing Image</p>
                            <p>{{ \App\Helpers\Promo_Image_Helper::LANDING_IMAGE_WIDTH }} X {{ \App\Helpers\Promo_Image_Helper::LANDING_IMAGE_HEIGHT }}</p>
                        </div>
                        <div id="square" class="image-type-selection">
                            @include('shared._svg_rect_template', ['x' => 35, 'y' => 33, 'width' => 39, 'height' => 39])
                            <p>Square Image</p>
                            <p>{{ \App\Helpers\Promo_Image_Helper::SQUARE_IMAGE_WIDTH }} X {{ \App\Helpers\Promo_Image_Helper::SQUARE_IMAGE_HEIGHT }}</p>
                        </div>
                        <div id="sponsor" class="image-type-selection">
                            @include('shared._svg_rect_template', ['x' => 16, 'y' => 33, 'width' => 77, 'height' => 39])
                            <p>Sponsor Image</p>
                            <p>{{ \App\Helpers\Promo_Image_Helper::SPONSOR_IMAGE_WIDTH }} X {{ \App\Helpers\Promo_Image_Helper::SPONSOR_IMAGE_HEIGHT }}</p>
                        </div>
                        <div id="facebook_ad" class="image-type-selection">
                            @include('shared._svg_rect_template', ['x' => 11, 'y' => 25, 'width' => 87, 'height' => 47])
                            <p>Facebook Ad</p>
                            <p>1200 X 628</p>
                        </div>
                        <div id="facebook_carousel" class="image-type-selection">
                            @include('shared._svg_rect_template', ['x' => 27, 'y' => 17, 'width' => 55, 'height' => 55])
                            <p>Facebook Carousel</p>
                            <p>600 X 600</p>
                        </div>
                        <div id="email_header" class="image-type-selection">
                            @include('shared._svg_rect_template', ['x' => 27, 'y' => 17, 'width' => 55, 'height' => 55])
                            <p>Email Header</p>
                            <p>600 X <span id="email_header_height_label">Auto</span></p>
                        </div>
                        <div id="wordpress" class="image-type-selection">
                            @include('shared._svg_rect_template', ['x' => 11, 'y' => 25, 'width' => 87, 'height' => 47])
                            <p>Wordpress Image</p>
                            <p>675 X 372</p>
                        </div>
                    </div>
                    <br>
                    {!! Form::hidden('post_id') !!}
                    {!! Form::hidden('post_src') !!}
                    {!! Form::hidden('post_type', 'main') !!}
                    {!! Form::hidden('post_width', 598) !!}
                    {!! Form::hidden('post_height', 416) !!}
                    {!! Form::hidden('post_x_coordinate', 0) !!}
                    {!! Form::hidden('post_y_coordinate', 0) !!}
                    {!! Form::hidden('original') !!}
                    <input id="save-crop-btn" name="save" type="button" value="Save" class="crop-img-modal-btn">
                    <input id="copy-object-btn" value="Copy" name="copy" type="button" class="crop-img-modal-btn">
                    <input id="delete-img-btn" type="button" value="Delete" class="crop-img-modal-btn"><br>
                    <label hidden id="delete-img-error" class="modal-error" style="float: right"></label>
                    {!! Form::close() !!}
                    {!! Form::hidden('original-width') !!}
                    {!! Form::hidden('original-height') !!}
                    {!! Form::hidden('superimposed-logo', $sponsor_logo) !!}
                </div>
            </div>
        </div>
    </div>

    {{--Resize Logo Modal--}}
    <div id="resize-logo-modal" class="modal fade">
        <div class="modal-dialog" style="width: 700px">
            <div class="modal-content">
                <div class="modal-header" style="border-color: #d7d7d7">
                    <input class="cancel-modal" type="button" data-dismiss="modal" value="Cancel">
                    <h4 class="modal-title promo-modal-title">Add a Logo to the Image Library</h4>
                </div>
                <div class="modal-body">
                    <div style="background-color: #e4e4e4">
                        <div id="logo-window">
                            <div hidden id="logo-cover"><div><div>Please Wait</div></div></div>
                        </div>
                    </div>
                    <p class="crop-modal-label">Resize <span id="logo-resize-label">Email Header</span></p>
                    <label id="logo-dimensions" class="crop-modal-text"></label><br>
                    {!! Form::open(['id' => 'resize-logo-form']) !!}
                    <div class="crop-img-radio-row">
                        {!! Form::radio('logo_resize', 'do_not_resize', true, ['style' => 'width: 13px;']) !!}
                        <label class="crop-modal-text" style="margin-right: 33px;"> Don't Resize</label>
                        {!! Form::radio('logo_resize', 'resize', null, ['style' => 'width: 13px']) !!}
                        <label class="crop-modal-text">
                            {!! Form::text('new_dimension', null, ['id' => 'logo-dimension-box', 'class' => 'resize-dimension-box']) !!} Maximum <span id="max-dimension">width: 390</span> px
                        </label>
                    </div>
                    <div hidden id="dimension-error">
                        <label class="modal-error">The new logo will be too big for this type.</label>
                        <br>
                    </div>
                    <div hidden id="logo-size-error">
                        <label class="modal-error">The new logo cannot be larger than the original.</label>
                        <br>
                    </div>
                    <div hidden id="original-reset-error">
                        <label class="modal-error">This logo type is already set to the original logo.</label>
                        <br>
                    </div>
                    <div hidden id="no-dimension-error">
                        <label class="modal-error">Please insert a custom width/height to resize the image.</label>
                        <br>
                    </div>
                    <input id="original-reset-btn" type="button" value="Reset to Original" class="crop-img-modal-btn">
                    <p class="crop-modal-label">Select a Logo Type</p>
                    <div class="image-type-container">
                        <div id="promo_logo" class="logo-type-selection selected">
                            @include('shared._svg_rect_with_arrow', ['x' => 11, 'y' => 11, 'width' => 87, 'height' => 61])
                            <p>Email Header</p>
                            <p>390px max width</p>
                        </div>
                        <div id="promo_logo_network" class="logo-type-selection">
                            @include('shared._svg_rect_vertical_arrow', ['x' => 16, 'y' => 33, 'width' => 77, 'height' => 39])
                            <p>Network Promo</p>
                            <p>100px max height</p>
                        </div>
                        <div id="promo_logo_sponsor" class="logo-type-selection">
                            @include('shared._svg_rect_vertical_arrow', ['x' => 16, 'y' => 33, 'width' => 77, 'height' => 39])
                            <p>Sponsor Image</p>
                            <p>125px max height</p>
                        </div>
                    </div>
                    <br>
                    <input id="save-logo-type-btn" name="save" type="button" value="Save" class="crop-img-modal-btn">
                    <input id="delete-logo-btn" type="button" value="Delete" class="crop-img-modal-btn">
                    {!! Form::hidden('post_logo_id') !!}
                    {!! Form::hidden('post_original_logo') !!}
                    {!! Form::hidden('post_logo_type', 'promo_logo') !!}
                    {!! Form::close() !!}
                    {!! Form::hidden('logo-original-width') !!}
                    {!! Form::hidden('logo-original-height') !!}
                </div>
            </div>
        </div>
    </div>
@endsection
@section('page_script')
    @include('shared_script.modals._upload_image_script')
    <script>
        function draggable() {
            $('#draggable-img').draggable({
                drag: function(event, ui) {
                    var cropWindow = $('#crop-window');
                    var draggableImg = $('#draggable-img');

                    var y1 = cropWindow.height();
                    var y2 = draggableImg.height();
                    var x1 = cropWindow.width();
                    var x2 = draggableImg.width();

                    if (ui.position.top >= 0) ui.position.top = 0;
                    else if (ui.position.top <= (y1 - y2)) ui.position.top = y1 - y2;

                    if (ui.position.left >= 0) ui.position.left = 0;
                    else if (ui.position.left <= (x1 - x2)) ui.position.left = x1 - x2;
                },
                stop: function(event, ui) {
                    $(':hidden[name=post_x_coordinate]').val(-ui.position.left);
                    $(':hidden[name=post_y_coordinate]').val(-ui.position.top);
                }
            });
        }

        $(document).ready(function() {
            var copy_btn = $('#copy-object-btn');
            var droppedFile = false;
            var selectedCrop = 'main';
            var selectedLogo = 'promo_logo';
            var cropSelections = {
                main: {
                    width: 598,
                    height: 416,
                    label: 'Main',
                    resizeImage: 'resize-main-img',
                    croppedImage: 'main-img',
                    count: 'main-count',
                    list: 'main-list'
                },
                network: {
                    width: 507,
                    height: 189,
                    label: 'Network',
                    resizeImage: 'resize-network-img',
                    croppedImage: 'network-img',
                    count: 'network-count',
                    list: 'network-list'
                },
                landing: {
                    width: 500,
                    height: 250,
                    label: 'Landing',
                    resizeImage: 'resize-landing-img',
                    croppedImage: 'landing-img',
                    count: 'landing-count',
                    list: 'landing-list'
                },
                square: {
                    width: 250,
                    height: 250,
                    label: 'Square',
                    resizeImage: 'resize-square-img',
                    croppedImage: 'square-img',
                    count: 'square-count',
                    list: 'square-list'
                },
                sponsor: {
                    width: 500,
                    height: 250,
                    label: 'Sponsor',
                    resizeImage: 'resize-sponsor-img',
                    croppedImage: 'sponsor-img',
                    count: 'sponsor-count',
                    list: 'sponsor-list'
                },
                facebook_ad: {
                    width: 1200,
                    height: 628,
                    label: 'Facebook Ad',
                    resizeImage: 'resize-facebook-ad-img',
                    croppedImage: 'facebook-ad-img',
                    count: 'facebook-ad-count',
                    list: 'facebook-ad-list'
                },
                facebook_carousel: {
                    width: 600,
                    height: 600,
                    label: 'Facebook Carousel',
                    resizeImage: 'resize-facebook-carousel-img',
                    croppedImage: 'facebook-carousel-img',
                    count: 'facebook-carousel-count',
                    list: 'facebook-carousel-list'
                },
                email_header : {
                    width: 600,
                    height: 338,
                    label: 'Email Header',
                    resizeImage: 'resize-email-header-img',
                    croppedImage: 'email-header-img',
                    count: 'email-header-count',
                    list: 'email-header-list'
                },
                wordpress : {
                    width: 675,
                    height: 372,
                    label: 'Wordpress Image',
                    resizeImage: 'resize-wordpress-img',
                    croppedImage: 'wordpress-img',
                    count: 'wordpress-count',
                    list: 'wordpress-list'
                }
            };

            var listSelections = {
                'main-list': {
                    source: 'main-img',
                    title: '{{ \App\Helpers\Promo_Image_Helper::main_image_label(',') }}',
                    selection: 'main'
                },
                'network-list': {
                    source: 'network-img',
                    title: '{{ \App\Helpers\Promo_Image_Helper::network_image_label(',') }}',
                    selection: 'network'
                },
                'landing-list': {
                    source: 'landing-img',
                    title: '{{ \App\Helpers\Promo_Image_Helper::landing_image_label(',') }}',
                    selection: 'landing'
                },
                'square-list': {
                    source: 'square-img',
                    title: '{{ \App\Helpers\Promo_Image_Helper::square_image_label(',') }}',
                    selection: 'square'
                },
                'sponsor-list': {
                    source: 'sponsor-img',
                    title: '{{ \App\Helpers\Promo_Image_Helper::sponsor_image_label(',') }}',
                    selection: 'sponsor'
                },
                'email-header-list':{
                    source: 'email-header-img',
                    title: '{{ \App\Helpers\Promo_Image_Helper::email_header_image_label(',') }}',
                    selection: 'email_header'
                },
                'wordpress-list':{
                    source: 'wordpress-img',
                    title: '{{ \App\Helpers\Promo_Image_Helper::wordpress_image_label(',') }}',
                    selection: 'wordpress'
                },
                'facebook-ad-list': {
                    source: 'facebook-ad-img',
                    title: 'Facebook Ad, 1200 X 628',
                    selection: 'facebook_ad'
                },
                'facebook-carousel-list': {
                    source: 'facebook-carousel-img',
                    title: 'Facebook Carousel, 600 X 600',
                    selection: 'facebook_carousel'
                },
                'email-header-logos': {
                    source: 'email-header',
                    title: 'Email Header, \u2264390w',
                    selection: 'promo_logo'
                },
                'network-promo-logos': {
                    source: 'network-promo',
                    title: 'Network Promo, \u2264100h',
                    selection: 'promo_logo_network'
                },
                'sponsor-image-logos': {
                    source: 'sponsor-logo',
                    title: 'Sponsor Image, \u2264125h',
                    selection: 'promo_logo_sponsor'
                }
            };

            var logoSelections = {
                promo_logo: {
                    maxDimension: 390,
                    label: 'Email Header',
                    dimensionLabel: 'width: 390',
                    logoImage: 'email-header',
                    count: 'email-header-count',
                    list: 'email-header-logos'
                },
                promo_logo_network: {
                    maxDimension: 100,
                    label: 'Network Promo',
                    dimensionLabel: 'height: 100',
                    logoImage: 'network-promo',
                    count: 'network-promo-count',
                    list: 'network-promo-logos'
                },
                promo_logo_sponsor: {
                    maxDimension: 125,
                    label: 'Sponsor Image',
                    dimensionLabel: 'height: 125',
                    logoImage: 'sponsor-logo',
                    count: 'sponsor-image-count',
                    list: 'sponsor-image-logos'
                }
            };

            $('form').on('submit', function(e) {
                e.preventDefault();
            });

            function calculate_email_header_height(a,b){
                var aa = a;
                var bb = b;
                var eh_ratio_out = 600 / aa;
                var as_ratio_out = bb * eh_ratio_out;
                return Math.round(as_ratio_out);
            }

            $('#original-reset-btn').on('click', function() {
                var dimensions = $('#logo-dimensions').text().split(' ');
                var originalWidth = parseInt($(':hidden[name=logo-original-width]').val());
                var originalHeight = parseInt($(':hidden[name=logo-original-height]').val());

                if (originalWidth == parseInt(dimensions[1]) && originalHeight == parseInt(dimensions[3])) {
                    $('#original-reset-error').show();
                } else {
                    $.ajax({
                        dataType: 'json',
                        url: '{{ action('SuperAdminImageLibraryController@original_logo_reset', compact('business')) }}',
                        type: 'post',
                        data: $('#resize-logo-form').serialize(),
                        success: function(response) {
                            var logoCover = $('#logo-cover');
                            logoCover.fadeIn();
                            var logoWindow = $('#logo-window');
                            logoWindow.find('img').remove();
                            logoWindow.append('<img src="' + $(':hidden[name=post_original_logo]').val() + '">');
                            $('#dimension-error').hide();
                            $('#logo-size-error').hide();
                            $('#original-reset-error').hide();

                            $('#logo-dimensions').text('Dimensions: ' + $(':hidden[name=logo-original-width]').val() + ' X ' + $(':hidden[name=logo-original-height]').val());

                            var id = $(':hidden[name=post_logo_id]').val();
                            var logo = $('#logo-' + id);
                            var url = response.url + '?' + new Date().getTime();
                            var logoType = $(':hidden[name=post_logo_type]').val();
                            var logoImage = logoSelections[logoType].logoImage;

                            logo.find(':hidden[name=' + logoImage + ']').val(url);

                            logoCover.fadeOut();
                        }
                    });
                }
            });

            $('#save-logo-type-btn').on('click', function() {
                var newDimension = 0;
                var logoDimensionBox = $('#logo-dimension-box');
                if (logoDimensionBox.val() != '') newDimension = parseInt(logoDimensionBox.val());
                var maxDimension = parseInt($('#max-dimension').text().split(' ').pop());
                var logoType = $(':hidden[name=post_logo_type]').val();
                var originalDimension = 0;

                if (logoType == 'promo_logo') originalDimension = parseInt($(':hidden[name=logo-original-width]').val());
                else originalDimension = parseInt($(':hidden[name=logo-original-height]').val());

                if (newDimension == 0 && $('input[name=logo_resize]:checked').val() == 'resize') $('#no-dimension-error').show();
                else if (newDimension > maxDimension) $('#dimension-error').show();
                else if (newDimension > originalDimension) $('#logo-size-error').show();
                else {
                    $('#dimension-error').hide();
                    $('#logo-size-error').hide();
                    $('#original-reset-error').hide();
                    $('#no-dimension-error').hide();
                    $('#logo-cover').fadeIn();
                    $.ajax({
                        dataType: 'json',
                        url: '{{ action('SuperAdminImageLibraryController@save_resize_logo', compact('business')) }}',
                        type: 'post',
                        data: $('#resize-logo-form').serialize(),
                        success: function(response) {
                            var id = $(':hidden[name=post_logo_id]').val();
                            var logo = $('#logo-' + id);
                            var url = response.url + '?' + new Date().getTime();
                            var logoImage = logoSelections[logoType].logoImage;

                            if (logo.find(':hidden[name=' + logoImage + ']').val() == '') {
                                var count = $('#' + logoSelections[logoType].count);
                                count.text(parseInt(count.text()) + 1);
                            }

                            logo.find(':hidden[name=' + logoImage + ']').val(url);

                            var logoWindow = $('#logo-window');
                            logoWindow.find('img').remove();
                            logoWindow.append('<img src="' + url + '">');

                            $('#logo-dimensions').text('Dimensions: ' + response.width + ' X ' + response.height);

                            if (logoSelections[logoType].list == $('.logo-type.chosen').attr('id')) {
                                logo.show();
                                logo.find('.hover-image').remove();
                                logo.append('<img hidden class="hover-image" src="' + url + '">');
                            }

                            $('#logo-cover').fadeOut();
                        }
                    });
                }
            });

            $('#save-crop-btn').on('click', function() {
                $('#crop-error').hide();
                $('#wait-cover').fadeIn();
                $.ajax({
                    dataType: 'json',
                    url: '{{ action('SuperAdminImageLibraryController@post_cropped_promo_image', compact('business')) }}',
                    type: 'post',
                    data: $('#crop-img-form').serialize(),
                    success: function(response) {
                        var id = $(':hidden[name=post_id]').val();
                        var image = $('#image-' + id);
                        var url = response.url + '?' + new Date().getTime();
                        var postType = $(':hidden[name=post_type]');
                        var cropType = cropSelections[postType.val()].croppedImage;

                        if (image.find(':hidden[name=' + cropType + ']').val() == '') {
                            var cropCount = $('#' + cropSelections[postType.val()].count);
                            cropCount.text(parseInt(cropCount.text()) + 1);
                        }

                        image.find(':hidden[name=' + cropType + ']').val(url);

                        $('#cropped-img').remove();
                        $('#crop-window').append('<img id="croppable-img" src="' + url + '">');

                        if (cropSelections[postType.val()].list == $('.promo-img-type.chosen').attr('id')) {
                            image.show();
                            image.find('.hover-image').remove();
                            image.append('<img hidden class="hover-image" src="' + url + '">');
                        }



                        $('#draggable-img').hide();
                        $('#drag-banner').hide();
                        $('#reposition-btn').show();
                        $('#cancel-crop').hide();
                        $('#wait-cover').fadeOut();

                        if (!$('#default-' + id).length && image.find(':hidden[name=main-img]').val() != '' &&
                            image.find(':hidden[name=network-img]').val() != '' &&
                            image.find(':hidden[name=landing-img]').val() != '' &&
                            image.find(':hidden[name=square-img]').val() != '') {
                            $('#thumbnail-plus-default-radio-wrapper').append(
                                '<div hidden id="default-' + id + '" class="default-img-container">' +
                                '<img src="' + image.find('.thumbnail-img').attr('src') + '">' +
                                '<label class="default-img-radio-label">' +
                                '<input type="radio" name="default" class="default-img-radio-btn" value="' + id + '"> ' +
                                '<span>Set as Default</span>' +
                                '</label></div>'
                            );
                        }

                        if(postType.val() == 'email_header'){
                            $('.email-header-default-image-list').append(
                                '<div hidden id="default-header-' + id + '" class="default-img-container">' +
                                '<img src="' + image.find('.thumbnail-img').attr('src') + '">' +
                                '<label class="default-img-radio-label">' +
                                '<input type="radio" name="default_header" class="default-img-radio-btn" value="' + id + '"> ' +
                                '<span>Set as Default</span>' +
                                '</label></div>'
                            );
                        }
                        copy_btn.val('Copy');
                        copy_btn.prop('disabled', false);
                    }
                });
            });

            $('#resize-btn').on('click', function() {
                var customWidth = 0;
                var customWidthBox = $('#custom-width-box');
                if (customWidthBox.val() != '') customWidth = parseInt(customWidthBox.val());
                var minWidth = parseInt($('#min-width').text());
                var originalWidth = parseInt($(':hidden[name=original-width]').val());

                if (customWidth == 0) $('#no-width-error').show();
                else if (customWidth < minWidth) $('#width-error').show();
                else if (customWidth > originalWidth) $('#image-size-error').show();
                else {
                    $('#no-width-error').hide();
                    $('#width-error').hide();
                    $('#image-size-error').hide();
                    $('#wait-cover').fadeIn();
                    $.ajax({
                        dataType: 'json',
                        url: '{{ action('SuperAdminImageLibraryController@save_resize_image', compact('business')) }}',
                        type: 'post',
                        data: $('#crop-img-form').serialize(),
                        success: function(response) {
                            if (response.hasOwnProperty('error')) $('#height-error').show();
                            else {
                                $('#height-error').hide();
                                var image = $('#image-' + $(':hidden[name=post_id]').val());
                                var url = response.url + '?' + new Date().getTime();
                                var resizeType = cropSelections[$(':hidden[name=post_type]').val()].resizeImage;

                                $(':hidden[name=post_src]').val(url);

                                image.find(':hidden[name=' + resizeType + ']').val(url);

                                $('#draggable-img').remove();
                                $('#crop-window').append('<img id="draggable-img" src="' + url + '">');
                                draggable();

                                $('#original-dimensions').text('Dimensions: ' + response.width + ' x ' + response.height);
                            }

                            $('#wait-cover').fadeOut();
                        }
                    });
                }
            });

            $('#save-default-btn').on('click', function() {
                $.ajax({
                    dataType: 'json',
                    url: '{{ action('SuperAdminImageLibraryController@save_default_promo_image', compact('business')) }}',
                    type: 'post',
                    data: $('#default-img-form').serialize(),
                    success: function(response) {
                        if (response.hasOwnProperty('old')) {
                            var oldDefault = $('#default-' + response.old);
                            oldDefault.find('span').text('Set as Default');
                        }

                        var newDefault = $('#default-' + response.new);
                        newDefault.find(':radio').prop('checked', true);
                        newDefault.find('span').text('Default');
                    }
                });
            });

            $('#save-default-header-btn').on('click',function () {
                $.ajax({
                    dataType: 'json',
                    url : '{!! action('SuperAdminImageLibraryController@save_default_header_promo_image', compact('business')) !!}',
                    type : 'post',
                    data: $('#default-img-form').serialize(),
                    success: function(response) {
                        if (response.hasOwnProperty('old')) {
                            var oldDefault = $('#default-header-' + response.old);
                            oldDefault.find('span').text('Set as Default');
                        }

                        var newDefault = $('#default-header-' + response.new);
                        newDefault.find(':radio').prop('checked', true);
                        newDefault.find('span').text('Default');
                    }
                });
            });

            $('#email_header_height_label').text(calculate_email_header_height($(':hidden[name=original-width]').val(),$(':hidden[name=original-height]').val()));

            $('.image-type-selection').on('click', function() {
                $('#custom-width-box').val('');
                $('#no-width-error').hide();
                $('#width-error').hide();
                $('#height-error').hide();
                $('#image-size-error').hide();
                $('#delete-img-error').hide();
                var error = $('#crop-error');
                error.hide();
                $('#cancel-crop').hide();
                var cropId = $(this).attr('id');
                var image = $('#image-' + $(':hidden[name=post_id]').val());
                var width = cropSelections[cropId].width;
                var height = cropSelections[cropId].height;

                $(':hidden[name=post_x_coordinate]').val(0);
                $(':hidden[name=post_y_coordinate]').val(0);

                var originalWidth = $(':hidden[name=original-width]').val();
                var originalHeight = $(':hidden[name=original-height]').val();

                if (originalWidth < width || originalHeight < height) error.show();
                else {
                    if (cropId == 'facebook_ad') $('#crop-modal-size').css('width', '1300px');
                    else $('#crop-modal-size').css('width', '800px');

                    var cropWindow = $('#crop-window');

                    cropWindow.find('img').remove();

                    var imgToCrop = $(':hidden[name=post_src]');
                    var resizeImg = image.find(':hidden[name=' + cropSelections[cropId].resizeImage + ']');

                    if (resizeImg.val() != '') imgToCrop.val(resizeImg.val() + '?' + new Date().getTime());
                    else imgToCrop.val($(':hidden[name=original]').val());

                    var croppedSrc = image.find(':hidden[name=' + cropSelections[cropId].croppedImage + ']');

                    cropWindow.append("<img id='cropped-img'>");
                    var croppedImg = $('#cropped-img');

                    cropWindow.append("<img id='draggable-img'>");
                    var draggableImg = $('#draggable-img');
                    draggableImg.attr('src', imgToCrop.val());
                    draggable();

                    if (cropId == 'sponsor') cropWindow.prepend('<img id="watermark" src="' + $(':hidden[name=superimposed-logo]').val() + '">');
                    var watermark = $('#watermark');

                    if (croppedSrc.val() != '') {
                        croppedImg.attr('src', croppedSrc.val() + '?' + new Date().getTime());
                        croppedImg.show();
                        draggableImg.hide();
                        watermark.hide();
                        $('#drag-banner').hide();
                        $('#reposition-btn').show();
                    } else {
                        draggableImg.show();
                        watermark.show();
                        croppedImg.hide();
                        $('#drag-banner').show();
                        $('#reposition-btn').hide();
                    }


                    cropWindow.css({width: width, height: height});
                    $(':hidden[name=post_type]').val(cropId);
                    $(':hidden[name=post_width]').val(width);
                    $(':hidden[name=post_height]').val(height);

                    if(cropId == 'email_header'){
                        var maxWidth = 600;
                        var email_header_ratio = maxWidth / originalWidth;
                        var email_aspect_ratio = originalHeight * email_header_ratio;
                        cropWindow.css({width: width, height: email_aspect_ratio});
                        $(':hidden[name=post_height]').val(Math.round(email_aspect_ratio));
                    }

                    $('#min-width').text(width);
                    $('.image-type-selection').removeClass('selected');
                    $(this).addClass('selected');
                    $('#resize-label').text(cropSelections[cropId].label);

                    var img = new Image();
                    img.onload = function() { $('#original-dimensions').text('Dimensions: ' + img.width + ' x ' + img.height); };
                    img.src = imgToCrop.val();

                    var has_bucket_object = $('img#cropped-img').prop('src');
                    if (has_bucket_object === '')
                    {
                        copy_btn.val('Cannot copy unsaved image');
                        copy_btn.prop('disabled', true);
                    }
                    else
                    {
                        copy_btn.val('Copy');
                        copy_btn.prop('disabled', false);
                    }
                }
            });

            copy_btn.click(function() {
                var _url = $('img#cropped-img, img#croppable-img')[0];
                _url = _url.src.split('?')[0];
                var _textarea = document.createElement('textarea');
                document.body.appendChild(_textarea);
                _textarea.textContent = _url;
                _textarea.select();
                document.execCommand('copy');
                document.body.removeChild(_textarea);
                $(this).val('Copied to clipboard');
            });

            $('.logo-type-selection').on('click', function() {
                $('#logo-dimension-box').val('');
                $('#dimension-error').hide();
                $('#logo-size-error').hide();
                $('#original-reset-error').hide();
                $('#no-dimension-error').hide();

                var logoType = $(this).attr('id');
                var logoWindow = $('#logo-window');
                logoWindow.find('img').remove();

                $('#logo-resize-label').text(logoSelections[logoType].label);
                $('#max-dimension').text(logoSelections[logoType].dimensionLabel);
                $(':hidden[name=post_logo_type]').val(logoType);

                var logo = $('#logo-' + $(':hidden[name=post_logo_id]').val());
                var existingLogo = logo.find(':hidden[name=' + logoSelections[logoType].logoImage + ']').val();

                if (existingLogo != '') logoWindow.append('<img src="' + existingLogo + '?' + new Date().getTime() + '">');
                else logoWindow.append('<img src="' + $(':hidden[name=post_original_logo]').val() + '">');

                $('.logo-type-selection').removeClass('selected');
                $(this).addClass('selected');

                var img = new Image();
                img.onload = function() { $('#logo-dimensions').text('Dimensions: ' + img.width + ' X ' + img.height); };
                img.src = logoWindow.find('img').attr('src');
            });

            $('.promo-img-type').on('click', function() {
                $('.logo-type').removeClass('chosen');
                $('.promo-img-type').removeClass('chosen');
                $(this).addClass('chosen');
                $('.each-logo-container').hide();

                var id = $(this).attr('id');
                if (id == 'all-list') {
                    $('.img-grid-title').text('All Images');
                    $('#default-explanation').hide();
                    $('#save-default-btn').hide();
                    $('.default-img-container').hide();
                    $('#email_header_library').hide();
                    $('.each-promo-img-container').show().each(function() {
                        $(this).find('.hover-image').remove();
                        var originalImage = $(':hidden[name=original-img]');
                        $(this).append('<img hidden class="hover-image" src="' + $(this).find(originalImage).val() +'">');
                    });
                    selectedCrop = 'main';
                } else if (id == 'default-list') {
                    $('.img-grid-title').text('Default Image');
                    $('#default-explanation').show();
                    $('#save-default-btn').show();
                    $('.each-promo-img-container').hide();
                    $('.default-img-container').show();
                    $('#email_header_library').removeClass('hidden');
                    $('#email_header_library').show();


                    $('.each-promo-img-container-header').each(function() {
                        //var image = $(':hidden[name=' + 'email-header-list'+[id].source + ']');
                        var image = $(':hidden[name="email-header-img"]');
                        if ($(this).find(image).val() != '') {
                            $(this).show();
                        } else{ $(this).hide(); }
                        $(this).find('.hover-image').remove();
                        $(this).append('<img hidden class="hover-image" src="' + $(this).find(image).val() + '">');

                    });
                } else {
                    $('.img-grid-title').text(listSelections[id].title);
                    $('#default-explanation').hide();
                    $('#save-default-btn').hide();
                    $('#email_header_library').hide();
                    $('.default-img-container').hide();
                    $('.each-promo-img-container').each(function() {
                        var image = $(':hidden[name=' + listSelections[id].source + ']');
                        if ($(this).find(image).val() != '') $(this).show();
                        else $(this).hide();
                        $(this).find('.hover-image').remove();
                        $(this).append('<img hidden class="hover-image" src="' + $(this).find(image).val() + '">');

                    });
                    selectedCrop = listSelections[id].selection;
                }
            });

            $('.logo-type').on('click', function() {
                $('.promo-img-type').removeClass('chosen');
                $('.logo-type').removeClass('chosen');
                $(this).addClass('chosen');
                $('.each-promo-img-container').hide();
                $('.default-img-container').hide();
                $('#default-explanation').hide();
                $('#save-default-btn').hide();

                var id = $(this).attr('id');
                if (id == 'all-logos') {
                    $('.img-grid-title').text('Logos');
                    $('.each-logo-container').show().each(function() {
                        $(this).find('.hover-image').remove();
                        var originalLogo = $(':hidden[name=original-logo]');
                        $(this).append('<img hidden class="hover-image" src="' + $(this).find(originalLogo).val() + '">');
                    });
                    selectedLogo = 'promo_logo';
                } else {
                    $('.img-grid-title').text(listSelections[id].title);
                    $('.each-logo-container').each(function() {
                        var image = $(':hidden[name=' + listSelections[id].source + ']');
                        if ($(this).find(image).val() != '') $(this).show();
                        else $(this).hide();
                        $(this).find('.hover-image').remove();
                        $(this).append('<img hidden class="hover-image" src="' + $(this).find(image).val() + '">');
                    });
                    selectedLogo = listSelections[id].selection;
                }
            });

            $('input[name=radio_resize]').on('change', function() {
                if ($(this).val() == 'resize') $('#resize-btn').prop('disabled', false);
                else $('#resize-btn').prop('disabled', true);
            });

            $('#thumbnail-plus-hover-wrapper').on('click', '.each-promo-img-container', function() {
                $(':hidden[name=post_id]').val($(this).find(':hidden[name=image-id]').val());
                var original = $(':hidden[name=original]');
                original.val($(this).find(':hidden[name=original-img]').val());

                var img = new Image();
                img.onload = function() {
                    $(':hidden[name=original-width]').val(img.width);
                    $(':hidden[name=original-height]').val(img.height);

                    if ($('.promo-img-type.chosen').attr('id') == 'all-list') {
                        if (img.width >= 598 && img.height >= 416 ) $('#main').trigger('click');
                        else if (img.width >= 507 && img.height >= 189) $('#network').trigger('click');
                        else if (img.width >= 500 && img.height >= 250) $('#landing').trigger('click');
                        else $('#square').trigger('click');
                    } else $('#' + selectedCrop).trigger('click');

                    $('#crop-img-modal').modal('show');

                    var modal_email_header_ratio_out = 600 / img.width;
                    var modalemail_aspect_ratio_out = img.height * modal_email_header_ratio_out;
                    var modalemail_aspect_ratio_out = (img.width > 600) ? Math.round(modalemail_aspect_ratio_out) : 'Auto';

                    $('#email_header_height_label').text(modalemail_aspect_ratio_out);
                };
                img.src = original.val();
            })
                .on('mouseover', '.thumbnail-img', function() {
                    $(this).parent().find('.hover-image').fadeIn().css('display', 'block');
                })
                .on('mouseout', '.thumbnail-img', function() {
                    $(this).parent().find('.hover-image').fadeOut();
                })
                .on('click', '.each-logo-container', function() {
                    $(':hidden[name=post_logo_id]').val($(this).find(':hidden[name=logo-id]').val());
                    var originalLogo = $(':hidden[name=post_original_logo]');
                    originalLogo.val($(this).find(':hidden[name=original-logo]').val());

                    var img = new Image();
                    img.onload = function() {
                        $(':hidden[name=logo-original-width]').val(img.width);
                        $(':hidden[name=logo-original-height]').val(img.height);

                        $('#' + selectedLogo).trigger('click');

                        $('#resize-logo-modal').modal('show');
                    };
                    img.src = originalLogo.val();
                })
                .on('mouseover', '.thumbnail-logo', function() {
                    $(this).parent().find('.hover-image').fadeIn().css('display', 'block');
                })
                .on('mouseout', '.thumbnail-logo', function() {
                    $(this).parent().find('.hover-image').fadeOut();
                });

            $('#reposition-btn').on('click', function() {
                $('#draggable-img').show();
                $('#drag-banner').show();
                $('#cropped-img').hide();
                $('#reposition-btn').hide();
                $('#cancel-crop').show();
                $('#watermark').show();
            });

            $('#cancel-crop').on('click', function() {
                $('#draggable-img').hide();
                $('#cropped-img').show();
                $('#drag-banner').hide();
                $('#reposition-btn').show();
                $('#cancel-crop').hide();
                $('#watermark').hide();
            });

            $('.img-library-btn.add-img').on('click', function() {
                $(':hidden[name=upload_type]').val('image');
                var title = 'Add an Image to the Image Library';
                var post_url = "{{ action('SuperAdminImageLibraryController@post_promo_image', compact('business')) }}";
                var callback = 'do_after_upload_image';
                has_optimized = true;
                showUploadImageModal(title, null, callback, post_url);
            });

            $('.img-library-btn.add-logo').on('click', function() {
                $(':hidden[name=upload_type]').val('logo');
                var title = 'Add a Logo to the Image Library';
                var post_url = "{{ action('SuperAdminImageLibraryController@post_promo_logo', compact('business')) }}";
                var callback = 'do_after_upload_logo';
                has_optimized = false;
                showUploadImageModal(title, null, callback, post_url);
            });

            $('#delete-img-btn').on('click', function() {
                var id = $(':hidden[name=post_id]').val();
                $.ajax({
                    dataType: 'json',
                    url : '{{ action('SuperAdminImageLibraryController@delete_promo_image', ['business' => $business, 'id' => 'XXX']) }}'.replace('XXX', id),
                    type: 'POST',
                    success: function(response) {
                        if (response.status == 'error') {
                            $('#delete-img-error').text('Cannot delete this image. It is currently in use.').show();
                        } else if (response.status == 'success') {
                            $('#crop-img-modal').modal('hide');

                            var img = $('#image-' + id);
                            var imgDefault = $('#default-' + id);

                            var allCount = $('#all-count');
                            var mainCount = $('#main-count');
                            var networkCount = $('#network-count');
                            var landingCount = $('#landing-count');
                            var squareCount = $('#square-count');
                            var facebookAdCount = $('#facebook-ad-count');
                            var carouselCount = $('#facebook-carousel-count');
                            var email_header_count = $('#email-header-count');
                            var wordpress_count = $('#wordpress-count');

                            allCount.text(parseInt(allCount.text()) - 1);
                            if (img.find(':hidden[name=main-img]').val() != '') mainCount.text(parseInt(mainCount.text()) - 1);
                            if (img.find(':hidden[name=network-img]').val() != '') networkCount.text(parseInt(networkCount.text()) - 1);
                            if (img.find(':hidden[name=landing-img]').val() != '') landingCount.text(parseInt(landingCount.text()) - 1);
                            if (img.find(':hidden[name=square-img]').val() != '') squareCount.text(parseInt(squareCount.text()) - 1);
                            if (img.find(':hidden[name=facebook-ad-img]').val() != '') facebookAdCount.text(parseInt(facebookAdCount.text()) - 1);
                            if (img.find(':hidden[name=facebook-carousel-img]').val() != '') carouselCount.text(parseInt(carouselCount.text()) - 1);
                            if (img.find(':hidden[name=wordpress-img]').val() != '') wordpress_count.text(parseInt(carouselCount.text()) - 1);

                            img.remove();
                            if (imgDefault.length) imgDefault.remove();
                        }
                    }
                });
            });

            $('#delete-logo-btn').on('click', function() {
                var id = $(':hidden[name=post_logo_id]').val();
                $.ajax({
                    dataType: 'json',
                    url : '{{ action('SuperAdminImageLibraryController@delete_promo_logo', ['business' => $business, 'id' => 'XXX']) }}'.replace('XXX', id),
                    type: 'POST',
                    success: function(response) {
                        if (response.status == 'success') {
                            $('#resize-logo-modal').modal('hide');

                            var logosCount = $('#logos-count');
                            var emailHeaderCount = $('#email-header-count');
                            var networkPromoCount = $('#network-promo-count');
                            var sponsorImageCount = $('#sponsor-image-count');

                            logosCount.text(parseInt(logosCount.text()) - 1);
                            emailHeaderCount.text(parseInt(emailHeaderCount.text()) - 1);
                            networkPromoCount.text(parseInt(networkPromoCount.text()) - 1);
                            sponsorImageCount.text(parseInt(sponsorImageCount.text()) - 1);

                            $('#logo-' + id).remove();
                        }
                    }
                });
            });

        });

        function do_after_upload_image(thumbnail_div, response)
        {
            $(':hidden[name=post_id]').val(response.id);
            var original = $(':hidden[name=original]');
            original.val(response.original);

            $('#thumbnail-plus-hover-wrapper').prepend(
                '<div hidden id="image-' + response.id + '" class="each-promo-img-container">' +
                '<img src="' + response.thumbnail + '" class="thumbnail-img">' +
                '<input type="hidden" name="image-id" value="' + response.id + '">' +
                '<input type="hidden" name="original-img" value="' + original.val() + '">' +
                '<input type="hidden" name="main-img" value="">' +
                '<input type="hidden" name="resize-main-img" value="">' +
                '<input type="hidden" name="network-img" value="">' +
                '<input type="hidden" name="resize-network-img" value="">' +
                '<input type="hidden" name="landing-img" value="">' +
                '<input type="hidden" name="resize-landing-img" value="">' +
                '<input type="hidden" name="square-img" value="">' +
                '<input type="hidden" name="resize-square-img" value="">' +
                '<input type="hidden" name="sponsor-img" value="">' +
                '<input type="hidden" name="resize-sponsor-img" value="">' +
                '<input type="hidden" name="facebook-ad-img" value="">' +
                '<input type="hidden" name="resize-facebook-ad-img" value="">' +
                '<input type="hidden" name="facebook-carousel-img" value="">' +
                '<input type="hidden" name="resize-facebook-carousel-img" value="">' +
                '<input type="hidden" name="email-header-img" value="">' +
                '<input type="hidden" name="resize-email-header-img" value="">' +
                '<input type="hidden" name="wordpress-img" value="">' +
                '<input type="hidden" name="resize-wordpress-img" value="">' +
                '<img hidden src="' + original.val() + '" class="hover-image">' +
                '</div>'
            );

            if ($('.promo-img-type.chosen').attr('id') == 'all-list') $('#image-' + response.id).show();

            var allImagesCount = $('#all-count');
            allImagesCount.text(parseInt(allImagesCount.text()) + 1);

            var img = new Image();
            img.onload = function() {
                $(':hidden[name=original-width]').val(img.width);
                $(':hidden[name=original-height]').val(img.height);

                if (img.width >= 598 && img.height >= 416 ) $('#main').trigger('click');
                else if (img.width >= 507 && img.height >= 189) $('#network').trigger('click');
                else if (img.width >= 500 && img.height >= 250) $('#landing').trigger('click');
                else $('#square').trigger('click');
            };
            img.src = original.val();

            do_on_close = 'show_crop_modal';
        }

        function show_crop_modal()
        {
            $('#crop-img-modal').modal('show');
        }

        function do_after_upload_logo(thumbnail_div, response)
        {
            $(':hidden[name=post_logo_id]').val(response.id);

            var postLogoOriginal = $(':hidden[name=post_original_logo]');
            postLogoOriginal.val(response.original);

            var logoWindow = $('#logo-window');
            logoWindow.find('img').remove();
            logoWindow.append('<img src="' + postLogoOriginal.val() + '">');

            var img = new Image();
            img.onload = function() { $('#logo-dimensions').text('Dimensions: ' + img.width + ' X ' + img.height) };
            img.src = postLogoOriginal.val();

            $('.logo-type-selection').removeClass('selected');
            $('#promo_logo').addClass('selected');

            do_on_close = 'show_resize_modal';

            $('#thumbnail-plus-hover-wrapper').append(
                '<div hidden id="logo-' + response.id + '" class="each-logo-container">' +
                '<img src="' + response.thumbnail + '" class="thumbnail-logo">' +
                '<input type="hidden" name="logo-id" value="' + response.id + '">' +
                '<input type="hidden" name="original-logo" value="' + postLogoOriginal.val() + '">' +
                '<input type="hidden" name="email-header" value="' + response.email_header + '">' +
                '<input type="hidden" name="network-promo" value="' + response.network_promo + '">' +
                '<input type="hidden" name="sponsor-logo" value="' + response.sponsor_image + '">' +
                '<img hidden src="' + postLogoOriginal.val() + '" class="hover-image">' +
                '</div>'
            );

            if ($('.logo-type').hasClass('chosen')) $('#logo-' + response.id).show();

            var allLogosCount = $('#logos-count');
            var emailHeaderCount = $('#email-header-count');
            var networkPromoCount = $('#network-promo-count');
            var sponsorImageCount = $('#sponsor-image-count');

            allLogosCount.text(parseInt(allLogosCount.text()) + 1);
            emailHeaderCount.text(parseInt(emailHeaderCount.text()) + 1);
            networkPromoCount.text(parseInt(networkPromoCount.text()) + 1);
            sponsorImageCount.text(parseInt(sponsorImageCount.text()) + 1);
        }

        function show_resize_modal()
        {
            $('#resize-logo-modal').modal('show');
        }

    </script>
@endsection