CB Vue large

/**
 * Script jquery onScreen
 */
$(function()
{

    /**
     * Afficher le bouton toggle
     * true : afficher
     * false : cacher
     */
    var show_button_toggle = true;

    var tmp_to = null;
    var can_save = typeof window.openDatabase != 'undefined';
    var can_localstorage = typeof window.localStorage != 'undefined';
    var $filtres = $('.headerboucle .filtre');
    var use_the_script = true;

    /**
     * Créer la base de données pour le cache
     */
    if(can_save)
    {
        var mydb = openDatabase("choualbox_previews", "0.1", "JESUISVUELARGE", 1024 * 1024);
        mydb.transaction(function (t) {
            t.executeSql("CREATE TABLE IF NOT EXISTS preview (id VARCHAR, html TEXT, date INT)");

            // Supprimer les previews de plus de deux jours
            var d = new Date();
            d.setDate(d.getDate() - 2);
            t.executeSql("DELETE FROM preview WHERE date < " + d.getTime());
        });
    }

    /**
     * Récupérer l'option du toggle
     */
    if(show_button_toggle && can_localstorage)
    {
        var use_the_script_lv = localStorage.getItem('vuelarge_enable');
        if(use_the_script_lv !== null)
        {
            use_the_script = use_the_script_lv == 1;
        }
    }

    /**
     * Afficher les filtres
     */
    if(show_button_toggle && can_localstorage)
    {
        var $new_filtres_container = $('<div style="float:right;"></div>');

        var button_toggle = $('<a style="cursor:pointer">' + (use_the_script ? 'Large' : 'Small') + '</a>');
        button_toggle.click(function()
        {
            localStorage.setItem('vuelarge_enable',use_the_script ? 0 : 1);
            location.reload(true);
            return false;
        });

        $new_filtres_container.append(button_toggle);

        $filtres.prepend($new_filtres_container);
    }

    /**
     * Lancer une première fois le script sans besoin de scroller
     */
    show_previews();


    /**
     * Rechercher les box visibles sur l'écran et afficher l'aperçu sur la première
     */
    function show_previews()
    {
        if(!use_the_script) return;

        var boxes = $('.box_boucle:not(.preview_visible)');

        boxes.each(function() {
            preview($( this ));
        });
    }


    /**
     * Récupérer et afficher l'aperçu
     */
    function preview(box)
    {
        // Ajouter une class pour ne pas répéter l'action
        box.addClass('preview_visible');

        var preview_link = box.find('.medias .openurl');
        var url_preview = preview_link.data('target');
        var id = preview_link.attr('id');
        var frame = box.find('.openurl-frame');

        // Afficher la frame avec le message du chargement
        frame.show();

        set_preview_box(box,frame);
    }


    /**
     * Nettoyer la box pour en retirer les éléments superflus
     */
    function clean_box(box)
    {
        box.find('.medias .openurl, .infos img.play-overlay, > a > img').remove();
    }


    /**
     * Modifier le code HTML et l'afficher dans la frame
     */
    function set_preview_box(box,frame)
    {
        var images = box.find($('img'));
        var url = (box.find($('.medias a'))[0]).getAttribute('href');

        if(images.length > 0)
        {
            var img_preview_url = (images[0]).getAttribute('src');
            var img_url = img_preview_url.replace("Img_resize", "Img");

            var prev = '';

            if(img_url.split('.').pop() == 'gif')
            {
                img_url = img_url.replace("gif", "webm");
                prev = '<div style="max-width:100%;font-size: 13px;font-family: Arial;line-height: 1.4;color: #333;word-wrap: break-word;"><div class="texte"></div></div><video class="videoplayer" loop controls muted="muted" style="width:100%;"><source src="' + img_url + '" type="video/webm"></video>';
            }
            else
               prev = '<div style="max-width:100%;font-size: 13px;font-family: Arial;line-height: 1.4;color: #333;word-wrap: break-word;"><div class="texte"></div></div><a href="' + url + '"><img src="' + img_url +'" style="width:100%;"></a>';

            frame.html(prev);
        }

         // Nettoyer
        clean_box(box);
    }
});