/*
 * Magazine sample
 */
// import window.$ from 'jquery'
export function setArrows() {

    setTimeout(function () {
        var width = window.$(window).width();
        var bookWidth = window.$(".magazine").width();
        var arrowSize = window.$(".next-button").width();
        var magaLeft = window.$(".magazine").offset().left;
        var nextLeft = (width - bookWidth - magaLeft - 60) / 2;
        //alert("width "+width +"\nbookWidth :"+bookWidth +"\nmagaLeft:"+magaLeft+"\nnextLeft:"+nextLeft);
        window.window.$('.next-button').animate({ "right": nextLeft }, 300);

        window.window.$('.previous-button').animate({ "left": nextLeft }, 300);
    }, 100);
}

export function addPage(page, book) {

    var id, pages = book.turn('pages');
    var element = window.window.$('<div />', {});
    if (book.turn('addPage', element, page)) {
        element.html('<div class="gradient"></div><div class="loader"></div>');
        loadPage(page, element);
    }

}

export function loadPage(page, pageElement) {

    pageElement.find('.loader').remove();
    const imgPath = new URL(`../../assets/book/img_window.window.${page}.jpg`, import.meta.url).href;
    // Create an image element
    var img = window.$('<img />');

    img.mousedown(function (e) {
        e.preventDefault();
    });
    img.load(function () {
        // Set the size
        window.$(this).css({
            width: '100%',
            height: '100%'
        });
        // Add the image to the page after loaded
        window.$(this).appendTo(pageElement);

        // Remove the loader indicator
        pageElement.find('.loader').remove();
    });

    // Load the page
    img.attr('src', imgPath);

}

export function zoomTo(event) { }


export function addRegion(region, pageElement) {

    var reg = window.$('<div />', {
        'class': 'region  ' + region['class']
    }),
        options = window.$('.magazine').turn('options'),
        pageWidth = options.width / 2,
        pageHeight = options.height;

    reg.css({
        top: Math.round(region.y / pageHeight * 100) + '%',
        left: Math.round(region.x / pageWidth * 100) + '%',
        width: Math.round(region.width / pageWidth * 100) + '%',
        height: Math.round(region.height / pageHeight * 100) + '%'
    }).attr('region-data', window.$.param(region.data || ''));

    reg.appendTo(pageElement);
}

// Process click on a region
export function regionClick(event) {

    var region = window.$(event.target);

    if (region.hasClass('region')) {

        window.$('.magazine-viewport').data().regionClicked = true;

        setTimeout(function () {
            window.$('.magazine-viewport').data().regionClicked = false;
        },
            100);

        var regionType = window.$.trim(region.attr('class').replace('region', ''));

        return processRegion(region, regionType);

    }

}



// http://code.google.com/p/chromium/issues/detail?id=128488
export function isChrome() {
    return navigator.userAgent.indexOf('Chrome') != -1;
}

export function disableControls(page) {
    if (page == 1) window.$('.previous-button').hide();
    else window.$('.previous-button').show();
    if (page == window.$('.magazine').turn('pages')) window.$('.next-button').hide();
    else window.$('.next-button').show();
}

// Set the width and height for the viewport
export function resizeViewport() {

    var width = window.$(window).width(),
        height = window.$(window).height(),
        options = window.$('.magazine').turn('options');
    window.$('.magazine').removeClass('animated');
    window.$('.magazine-viewport').css({
        width: width,
        height: height
    }).zoom('resize');
    setArrows();
    if (window.$('.magazine').turn('zoom') == 1) {
        var bound = calculateBound({
            width: options.width,
            height: options.height,
            boundWidth: Math.min(options.width, width),
            boundHeight: Math.min(options.height, height)
        });

        if (bound.width % 2 !== 0) bound.width -= 1;
        if (bound.width != window.$('.magazine').width() || bound.height != window.$('.magazine').height()) {
            window.$('.magazine').turn('size', bound.width, bound.height);
            if (window.$('.magazine').turn('page') == 1) window.$('.magazine').turn('peel', 'br');
        }

        window.$('.magazine').css({
            top: -bound.height / 2,
            left: -bound.width / 2
        });
    }

    var magazineOffset = window.$('.magazine').offset(),
        boundH = height - magazineOffset.top - window.$('.magazine').height(),
        marginTop = (boundH - window.$('.thumbnails > div').height()) / 2;

    if (marginTop < 0) {
        window.$('.thumbnails').css({
            height: 1
        });
    } else {
        window.$('.thumbnails').css({
            height: boundH
        });
        window.$('.thumbnails > div').css({
            marginTop: marginTop
        });
    }

    if (magazineOffset.top < window.$('.made').height()) window.$('.made').hide();
    else window.$('.made').show();

    window.$('.magazine').addClass('animated');

}

// Number of views in a flipbook
export function numberOfViews(book) {
    return book.turn('pages') / 2 + 1;
}

// Current view in a flipbook
export function getViewNumber(book, page) {
    return parseInt((page || book.turn('page')) / 2 + 1, 10);
}

// Width of the flipbook when zoomed in
export function largeMagazineWidth() {
    return 2214;
}


// Calculate the width and height of a square within another square
export function calculateBound(d) {
    var bound = {
        width: d.width,
        height: d.height
    };
    if (bound.width > d.boundWidth || bound.height > d.boundHeight) {
        var rel = bound.width / bound.height;
        if (d.boundWidth / rel > d.boundHeight && d.boundHeight * rel <= d.boundWidth) {
            bound.width = Math.round(d.boundHeight * rel);
            bound.height = d.boundHeight;
        } else {
            bound.width = d.boundWidth;
            bound.height = Math.round(d.boundWidth / rel);
        }
    }
    return bound;
}

