function createThumbnail(type, sourceURL)
    {
        // Create base thumbnail div
        var result = $(document.createElement('div')).addClass(CLASS_THUMBNAIL)
            .append($(document.createElement('div')).addClass('border'));
        var container = $(document.createElement('div')).addClass(CLASS_THUMBNAIL_CONTENT)
            .appendTo(result);

        // Add special elements based on content type
        switch (type)
        {
            case THUMBNAIL_TARGET_IMAGE:
                container.css({ 'background-image': 'url(' + sourceURL + ')' })
                    .append($(document.createElement(THUMBNAIL_TARGET_IMAGE))
                        .attr('title', 'screenshot - ' + formatDate(new Date()) + '.png')
                        .addClass(CLASS_DOWNLOAD_TARGET)
                        .addClass('screenshot')
                        .attr('src', sourceURL)
                    );
                break;

            case THUMBNAIL_TARGET_VIDEO:
                container.append($(document.createElement(THUMBNAIL_TARGET_VIDEO))
                    .attr('title', 'screencapture - ' + formatDate(new Date()) + '.webm')
                    .addClass(CLASS_DOWNLOAD_TARGET)
                    .attr('autoplay', true)
                ).append($(document.createElement('button'))    // Add record button
                    .addClass(CLASS_BUTTON_RECORD)
                    .click(function (event) 
                    {
                        if (!recordingVideo) {    // Not yet recording, start recording
                            startVideoRecording($(this));
                        } else {   // Already recording, stop recording
                            stopVideoRecording($(this));
                        }
                    })
                );
                break;

            case THUMBNAIL_TARGET_GIF:
                container.append($(document.createElement(THUMBNAIL_TARGET_IMAGE))
                    .attr('title', 'screencapture - ' + formatDate(new Date()) + '.gif')
                    .addClass(CLASS_DOWNLOAD_TARGET)
                    .addClass(THUMBNAIL_TARGET_GIF)
                ).append($(document.createElement('button'))    // Add record button
                    .addClass(CLASS_BUTTON_RECORD)
                    .click(function (event) 
                    {
                        if (!recordingVideo) {    // Not yet recording, start recording
                            startVideoRecording($(this));
                        } else {   // Already recording, stop recording
                            stopVideoRecording($(this));
                        }
                    })
                );
                break;

            default: break;
        }

        // Add a download button
        result.append($(document.createElement('button'))
            .attr('title', 'Download this item')
            .addClass(CLASS_BUTTON_DOWNLOAD)
            .hide()     // Hide it first, show it after recording is done
            .click(function (event) 
            {
                var $target = $(this).parent().find('.' + CLASS_DOWNLOAD_TARGET);

                // Sanity Check
                if (!$target.length) 
                {
                    console.log('ERROR: no target download found!');
                    alert("Couldn't find target download!");
                    return;
                }

                // Send message with target src and title
                chrome.runtime.sendMessage({
                    request: 'downloadContent',
                    filename: $target.attr('title'),
                    contentURL: $target.attr('src'),
                });
            })
        );

        // Add a close button
        result.append($(document.createElement('button'))
            .attr('title', 'Delete this item')
            .addClass(CLASS_BUTTON_CLOSE)
            .text('X')
            .click(function (event) 
            {
                // Confirm delete
                if (!confirm('Are you sure you want to delete this?')) {
                    return;
                }

                var $this = $(this);

                // Stop video recording if needed
                if (recordingVideo)
                {
                    if ($this.sibling('.recordButton').hasClass(CLASS_CURRENTLY_RECORDING))
                    {
                        debugLog('stopping recording!');
                        stopVideoRecording();
                    }
                }

                // Get URL of target object to clean up later
                var url = $this.find('.' + CLASS_DOWNLOAD_TARGET).attr('src');
                
                // Remove element
                $this.parent().slideUp('fast', function() 
                {
                    // Delete entire thumbnail
                    $(this).remove();

                    // If there are no more thumbnails, hide container
                    if (!$('div.' + CLASS_THUMBNAIL).length) {
                        thumbnailContainer.removeClass(CLASS_SHOW_CONTAINER).detach();
                    }
                });

                // Clean up object url memory
                if (url) {
                    window.URL.revokeObjectURL(url);
                }
            })
        );

        // Return the result
        return result;
    }
// Creates a thumbnail div for different types of content (image / video), and returns it
Creates a thumbnail div for different types of content (image / video), and returns it
Creates a thumbnail div for different types of content ( image / video ) and returns it
function createThumbnail(type, sourceURL)
    {
        var result = $(document.createElement('div')).addClass(CLASS_THUMBNAIL)
            .append($(document.createElement('div')).addClass('border'));
        var container = $(document.createElement('div')).addClass(CLASS_THUMBNAIL_CONTENT)
            .appendTo(result);
        switch (type)
        {
            case THUMBNAIL_TARGET_IMAGE:
                container.css({ 'background-image': 'url(' + sourceURL + ')' })
                    .append($(document.createElement(THUMBNAIL_TARGET_IMAGE))
                        .attr('title', 'screenshot - ' + formatDate(new Date()) + '.png')
                        .addClass(CLASS_DOWNLOAD_TARGET)
                        .addClass('screenshot')
                        .attr('src', sourceURL)
                    );
                break;
            case THUMBNAIL_TARGET_VIDEO:
                container.append($(document.createElement(THUMBNAIL_TARGET_VIDEO))
                    .attr('title', 'screencapture - ' + formatDate(new Date()) + '.webm')
                    .addClass(CLASS_DOWNLOAD_TARGET)
                    .attr('autoplay', true)
                ).append($(document.createElement('button'))    
                    .addClass(CLASS_BUTTON_RECORD)
                    .click(function (event) 
                    {
                        if (!recordingVideo) {    
                            startVideoRecording($(this));
                        } else {   
                            stopVideoRecording($(this));
                        }
                    })
                );
                break;
            case THUMBNAIL_TARGET_GIF:
                container.append($(document.createElement(THUMBNAIL_TARGET_IMAGE))
                    .attr('title', 'screencapture - ' + formatDate(new Date()) + '.gif')
                    .addClass(CLASS_DOWNLOAD_TARGET)
                    .addClass(THUMBNAIL_TARGET_GIF)
                ).append($(document.createElement('button'))    
                    .addClass(CLASS_BUTTON_RECORD)
                    .click(function (event) 
                    {
                        if (!recordingVideo) {    
                            startVideoRecording($(this));
                        } else {   
                            stopVideoRecording($(this));
                        }
                    })
                );
                break;
            default: break;
        }
        result.append($(document.createElement('button'))
            .attr('title', 'Download this item')
            .addClass(CLASS_BUTTON_DOWNLOAD)
            .hide()     
            .click(function (event) 
            {
                var $target = $(this).parent().find('.' + CLASS_DOWNLOAD_TARGET);
                if (!$target.length) 
                {
                    console.log('ERROR: no target download found!');
                    alert("Couldn't find target download!");
                    return;
                }
                chrome.runtime.sendMessage({
                    request: 'downloadContent',
                    filename: $target.attr('title'),
                    contentURL: $target.attr('src'),
                });
            })
        );
        result.append($(document.createElement('button'))
            .attr('title', 'Delete this item')
            .addClass(CLASS_BUTTON_CLOSE)
            .text('X')
            .click(function (event) 
            {
                if (!confirm('Are you sure you want to delete this?')) {
                    return;
                }
                var $this = $(this);
                if (recordingVideo)
                {
                    if ($this.sibling('.recordButton').hasClass(CLASS_CURRENTLY_RECORDING))
                    {
                        debugLog('stopping recording!');
                        stopVideoRecording();
                    }
                }
                var url = $this.find('.' + CLASS_DOWNLOAD_TARGET).attr('src');
                $this.parent().slideUp('fast', function() 
                {
                    $(this).remove();
                    if (!$('div.' + CLASS_THUMBNAIL).length) {
                        thumbnailContainer.removeClass(CLASS_SHOW_CONTAINER).detach();
                    }
                });
                if (url) {
                    window.URL.revokeObjectURL(url);
                }
            })
        );
        return result;
    }
function createThumbnail ( type , sourceURL ) { var result = $ ( document . createElement ( 'div' ) ) . addClass ( CLASS_THUMBNAIL ) . append ( $ ( document . createElement ( 'div' ) ) . addClass ( 'border' ) ) ; var container = $ ( document . createElement ( 'div' ) ) . addClass ( CLASS_THUMBNAIL_CONTENT ) . appendTo ( result ) ; switch ( type ) { case THUMBNAIL_TARGET_IMAGE : container . css ( { 'background-image' : 'url(' + sourceURL + ')' } ) . append ( $ ( document . createElement ( THUMBNAIL_TARGET_IMAGE ) ) . attr ( 'title' , 'screenshot - ' + formatDate ( new Date ( ) ) + '.png' ) . addClass ( CLASS_DOWNLOAD_TARGET ) . addClass ( 'screenshot' ) . attr ( 'src' , sourceURL ) ) ; break ; case THUMBNAIL_TARGET_VIDEO : container . append ( $ ( document . createElement ( THUMBNAIL_TARGET_VIDEO ) ) . attr ( 'title' , 'screencapture - ' + formatDate ( new Date ( ) ) + '.webm' ) . addClass ( CLASS_DOWNLOAD_TARGET ) . attr ( 'autoplay' , true ) ) . append ( $ ( document . createElement ( 'button' ) ) . addClass ( CLASS_BUTTON_RECORD ) . click ( function ( event ) { if ( ! recordingVideo ) { startVideoRecording ( $ ( this ) ) ; } else { stopVideoRecording ( $ ( this ) ) ; } } ) ) ; break ; case THUMBNAIL_TARGET_GIF : container . append ( $ ( document . createElement ( THUMBNAIL_TARGET_IMAGE ) ) . attr ( 'title' , 'screencapture - ' + formatDate ( new Date ( ) ) + '.gif' ) . addClass ( CLASS_DOWNLOAD_TARGET ) . addClass ( THUMBNAIL_TARGET_GIF ) ) . append ( $ ( document . createElement ( 'button' ) ) . addClass ( CLASS_BUTTON_RECORD ) . click ( function ( event ) { if ( ! recordingVideo ) { startVideoRecording ( $ ( this ) ) ; } else { stopVideoRecording ( $ ( this ) ) ; } } ) ) ; break ; default : break ; } result . append ( $ ( document . createElement ( 'button' ) ) . attr ( 'title' , 'Download this item' ) . addClass ( CLASS_BUTTON_DOWNLOAD ) . hide ( ) . click ( function ( event ) { var $target = $ ( this ) . parent ( ) . find ( '.' + CLASS_DOWNLOAD_TARGET ) ; if ( ! $target . length ) { console . log ( 'ERROR: no target download found!' ) ; alert ( "Couldn't find target download!" ) ; return ; } chrome . runtime . sendMessage ( { request : 'downloadContent' , filename : $target . attr ( 'title' ) , contentURL : $target . attr ( 'src' ) , } ) ; } ) ) ; result . append ( $ ( document . createElement ( 'button' ) ) . attr ( 'title' , 'Delete this item' ) . addClass ( CLASS_BUTTON_CLOSE ) . text ( 'X' ) . click ( function ( event ) { if ( ! confirm ( 'Are you sure you want to delete this?' ) ) { return ; } var $this = $ ( this ) ; if ( recordingVideo ) { if ( $this . sibling ( '.recordButton' ) . hasClass ( CLASS_CURRENTLY_RECORDING ) ) { debugLog ( 'stopping recording!' ) ; stopVideoRecording ( ) ; } } var url = $this . find ( '.' + CLASS_DOWNLOAD_TARGET ) . attr ( 'src' ) ; $this . parent ( ) . slideUp ( 'fast' , function ( ) { $ ( this ) . remove ( ) ; if ( ! $ ( 'div.' + CLASS_THUMBNAIL ) . length ) { thumbnailContainer . removeClass ( CLASS_SHOW_CONTAINER ) . detach ( ) ; } } ) ; if ( url ) { window . URL . revokeObjectURL ( url ) ; } } ) ) ; return result ; }
Creates a thumbnail div for different types of content (image / video), and returns it
Creates a thumbnail div for different types of content ( image / video ) and returns it
// Create base thumbnail div // Add special elements based on content type // Add record button // Not yet recording, start recording // Already recording, stop recording // Add record button // Not yet recording, start recording // Already recording, stop recording // Add a download button // Hide it first, show it after recording is done // Sanity Check // Send message with target src and title // Add a close button // Confirm delete // Stop video recording if needed // Get URL of target object to clean up later // Remove element // Delete entire thumbnail // If there are no more thumbnails, hide container // Clean up object url memory // Return the result