fossils/static/fossil/js/script3.js

var glob_width;
var glob_height;
var glob_elem;
var glob_id;

var stopFlag = false;

$('.nav-data').click( function(e) {
    var current_nav = $(this).text();
    $("#header_title").text(current_nav);
    name = current_nav.trim();
    id = name.replace ( /[^\d.]/g, '' );
    index = id;
    // Stop large processes
    stopFlag = true;

    // Update Preview Image
    $("#img-preview").attr("src", "img?id="+id+"&name="+name+"&type=preview&counter=0");
    
    // Hide other nav bars
    $('.nav-data').each(function(index) {
        id = "#nav"+$(this).text().replace ( /[^\d.]/g, '' );
        if ($(this).text() != current_nav) {
            $(id).collapse("hide");
        } else {
            console.log(current_nav, $(this).text());
            //$('[data-toggle=collapse]').prop('disabled',true);
            //$(id).collapse("show");
        } 
    });   

    $.ajax({
        url: 'update?index=' + index + '&name=' + name,
        type: 'GET',
        success: function (response) {
            console.log("Success.");
            console.log(response);
            $("td#size"+response.index).text(response.data_size + " GB");

            var html = "";
            for (i = 0; i < response["desc"].length; i++) { 
                if (response["desc"][i]["type"] == "i") {
                    tmp = "<i>" + response["desc"][i]["text"] + "</i>";
                } else if (response["desc"][i]["type"] == "p") {
                    tmp = response["desc"][i]["text"];
                }
                html += tmp;
            }
            $("td#desc"+response.index).empty().append(html);


            $("#front-count-text").text(" (max: " + response.front_count + ")");
            $("#left-count-text").text(" (max: " + response.left_count + ")");
            $("#top-count-text").text(" (max: " + response.top_count + ")");
            $("#front-count").text(response.front_count);
            $("#left-count").text(response.left_count);
            $("#top-count").text(response.top_count);
            $("#slider-right").slider("option", "max" , response.front_count );
            $("#slider-left").slider("option", "max" , response.top_count );
            $("#slider-center").slider("option", "max" , response.left_count );
        
            var left_index = $( "#slider-left" ).slider( "option", "value" );
            var top_index = $( "#slider-center" ).slider( "option", "value" );
            var front_index = $( "#slider-right" ).slider( "option", "value" );
            // update images
            $("#placeholder-left").attr("src", "img?id="+index+"&name="+name+"&type=left-resized&counter="+(left_index-1));
            $("#img-top").attr("src", "img?id="+index+"&name="+name+"&type=top-resized&counter="+(top_index-1));
            $("#img-front").attr("src", "img?id="+index+"&name="+name+"&type=front-resized&counter="+(front_index-1));
       
            var imageUrlLeft = "img?id="+index+"&name="+name+"&type=left&counter="+(left_index-1);
            var imageUrlTop ="img?id="+index+"&name="+name+"&type=top&counter="+(top_index-1); 
            var imageUrlFront = "img?id="+index+"&name="+name+"&type=front&counter="+(front_index-1);
            $("#placeholder-left-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlLeft + '")');
            $("#img-top-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlTop + '")');
            $("#img-front-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlFront + '")');

            $("#front-quality-text").text("Magnification: " + ($("#img-front").width()  / parseInt($("#front-count").text())).toFixed(2).toString());
            $("#top-quality-text").text("Magnification: " + ($("#img-top").height()  / parseInt($("#top-count").text())).toFixed(2).toString());
            $("#left-quality-text").text("Magnification: " + ($("#placeholder-left").height()  / parseInt($("#left-count").text())).toFixed(2).toString()); 
   
            if (index in imgTopArray) {
                cur_value = parseInt( (imgTopArray[index].length/parseFloat(response.left_count))*100.0); 
                //console.log(imgTopArray[index].length, response.top_count, response.left_count, response.front_count); 
                $('#progress-top').css('width', cur_value+'%').attr('aria-valuenow', cur_value);
            } else {
                $('#progress-top').css('width', '0%').attr('aria-valuenow', 0);
            }

            if (index in imgLeftArray) {
                cur_value = parseInt( (imgLeftArray[index].length/parseFloat(response.top_count))*100.0); 
                $('#progress-left').css('width', cur_value+'%').attr('aria-valuenow', cur_value);
            } else {
                $('#progress-left').css('width', '0%').attr('aria-valuenow', 0);
            }

            if (index in imgFrontArray) {
                cur_value = parseInt( (imgFrontArray[index].length/parseFloat(response.front_count))*100.0); 
                $('#progress-front').css('width', cur_value+'%').attr('aria-valuenow', cur_value);
            } else {
                $('#progress-front').css('width', '0%').attr('aria-valuenow', 0);
            }
        },
        error: function () {
            console.log("Error.")
        }
    });

});


if (document.addEventListener)
{
    document.addEventListener('webkitfullscreenchange', exitHandler, false);
    document.addEventListener('mozfullscreenchange', exitHandler, false);
    document.addEventListener('fullscreenchange', exitHandler, false);
    document.addEventListener('MSFullscreenChange', exitHandler, false);
}

function exitHandler() {
    if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) {
        if (!document.fullscreenElement && !document.mozFullScreenElement &&
            !document.webkitFullscreenElement && !document.msFullscreenElement) { 
            $(glob_elem).css("width", "100%");
            $(glob_elem).css("height", "100%");
            $(glob_elem).css("background-color", "white");
            $(glob_elem).css("color", "#000");
            $("#front-quality-text").text("Size: 25%");
            $("#top-quality-text").text("Size: 25%");
            $("#left-quality-text").text("Size: 25%");
            $("#"+glob_id).width('100%');
            $("#"+glob_id).height("100%");
        } else {
            $("#front-quality-text").text("Size: 100%");
            $("#top-quality-text").text("Size: 100%");
            $("#left-quality-text").text("Size: 100%");
        }
    }
}


function toggleFullscreen(elem, _id) {
    elem = elem || document.documentElement;

    console.log("ID: "+_id);
    var ori_width = glob_width
    var ori_height = glob_height;
      
    var fs_scale;
    var myRatio;
    if (window.devicePixelRatio < 1) {
        myRatio = 1.0;
    } else {
        myRatio = 2.0;
    }
        
    $("#"+_id).css('width', 'auto')
    $("#"+_id).css('height', 'auto')

    if (!document.fullscreenElement && !document.mozFullScreenElement &&
      !document.webkitFullscreenElement && !document.msFullscreenElement) { 
      if ((ori_height*1.2) > ori_width) {
        //newWidth = screen.width * (1/Math.ceil(window.devicePixelRatio));
        //newHeight = screen.width * (ori_height/ori_width) * (1/Math.ceil(window.devicePixelRatio));
        newWidth = screen.width * (1/ myRatio);
        newHeight = screen.width * (ori_height/ori_width) * (1/ myRatio);
  
        $("#"+_id).removeAttr('width');
        $("#"+_id).height("80%");
      } else {
        newHeight = screen.height * (1/myRatio);
        newWidth = screen.height * (ori_width/ori_height) * (1/myRatio);
        $("#"+_id).removeAttr('height');
        $("#"+_id).width("100%");
        //newHeight = screen.height * (1/Math.ceil(window.devicePixelRatio));
        //newWidth = screen.height * (ori_width/ori_height) * (1/Math.ceil(window.devicePixelRatio));
      }

      $(elem).css("height", (newHeight)+"px");
      $(elem).css("width", (newWidth)+"px");

      //$("#"+_id).removeAttr('width');
      //$("#"+_id).height("80%");
      //$(elem).css("width", "200px");
      
      $(elem).css("background-color", "black");
      $(elem).css("color", "#ccc");

      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
      } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
      }
    } else {
      $("#"+_id).width('100%');
      $("#"+_id).height("100%");
      //$(elem).css("width", "100%");
      $(elem).css("background-color", "white");
      $(elem).css("color", "#000");

      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    }
}

function IsImageOk(img) {
    // During the onload event, IE correctly identifies any images that
    // weren’t downloaded as not complete. Others should too. Gecko-based
    // browsers act like NS4 in that they report this incorrectly.
    if (!img.complete) {
        return false;
    }

    // However, they do have two very useful properties: naturalWidth and
    // naturalHeight. These give the true size of the image. If it failed
    // to load, either of these should be zero.

    if (typeof img.naturalWidth !== "undefined" && img.naturalWidth === 0) {
        return false;
    }

    // No other way of checking: assume it’s ok.
    return true;
}

var imgTopArray = {};
var imgFrontArray = {};
var imgLeftArray = {};

$(function() {
    $(window).resize(function() {
        $("#front-quality-text").text("Magnification: " + ($("#img-front").width()  / parseInt($("#front-count").text())).toFixed(2).toString() + "%");
        $("#top-quality-text").text("Magnification: " + ($("#img-top").height()  / parseInt($("#top-count").text())).toFixed(2).toString() + "%");
        $("#left-quality-text").text("Magnification: " + ($("#placeholder-left").height()  / parseInt($("#left-count").text())).toFixed(2).toString() + "%"); 
    });
    
    $( "#slider-left" ).slider({
        range: "max",
        min: 1,
        max: parseInt($("#left-count").text()),
        //max: 1500,
        value: 1,
        start: function(event, ui) {
            //if (leftFlag == false) {
            //    leftFlag = true;
                //processLargeLeftArray( parseInt( $("#left-count").text()) );
            //}
        },
        stop: function(event, ui) {
            $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left&counter="+(ui.value-1));
            imageUrl = "img?id="+id+"&name="+name+"&type=left&counter="+(ui.value-1);
            var zoomConfig = {
                zoomWindowPosition: "abcd",
                zoomWindowHeight: "100%",
                zoomWindowWidth: "33.3%",
                borderSize: 0,
                easing:true,
                onShow: function () {
                    $("#sidebar" ).css("opacity", "0");
                },
                onHide: function () {
                    $("#sidebar" ).css("opacity", "1");
                }
            };
                        
            var zoomImage = $('#placeholder-left');
            $('.zoomContainer').remove();
            zoomImage.attr('src', imageUrl);
            zoomImage.data('zoom-image', imageUrl);
            // Reinitialize EZ
            zoomImage.ezPlus(zoomConfig);
        },
        slide: function( event, ui ) {
            name = $( "#header_title" ).text().trim();
            id = name.replace ( /[^\d.]/g, '' );
            if (id in imgLeftArray) {
                if (IsImageOk(imgLeftArray[id][ui.value-1]) ) {
                    console.log("Hellow");
                    $("#img-left-container").empty().append(imgLeftArray[id][ui.value-1]);
                } else {
                    console.log("RIP2");
                    $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+(ui.value-1));
                }
            } else {
                console.log("RIP");
                $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+(ui.value-1));
            }
            $("#left-text").text(ui.value);
        }
    });
    
    $( "#slider-right" ).slider({
        range: "max",
        min: 1,
        max: parseInt($("#front-count").text()),
        value: 1,
        start: function(event, ui) {
            //processLargeFrontArray( parseInt( $("#front-count").text()) );
        },
        stop: function(event, ui) {
            $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front&counter="+(ui.value-1));
            imageUrl = "img?id="+id+"&name="+name+"&type=front&counter="+(ui.value-1);
            var zoomConfig = {
                zoomWindowPosition: "abcd",
                zoomWindowHeight: "100%",
                zoomWindowWidth: "33.3%",
                borderSize: 0,
                easing:true,
                onShow: function () {
                    $("#sidebar" ).css("opacity", "0");
                },
                onHide: function () {
                    $("#sidebar" ).css("opacity", "1");
                }   
            };
                        
            var zoomImage = $('#img-front');
            $('.zoomContainer').remove();
            zoomImage.attr('src', imageUrl);
            zoomImage.data('zoom-image', imageUrl);
            // Reinitialize EZ
            zoomImage.ezPlus(zoomConfig);
        },
        slide: function( event, ui ) {
            name = $( "#header_title" ).text().trim();
            id = name.replace ( /[^\d.]/g, '' );
            if (id in imgFrontArray) {
                if (IsImageOk(imgFrontArray[id][ui.value-1]) ) {
                    console.log("Hellow");
                    $("#img-front-container").empty().append(imgFrontArray[id][ui.value-1]);
                } else {
                    console.log("RIP2");
                    $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front-resized&counter="+(ui.value-1));
                }
            } else {
                console.log("RIP");
                $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front-resized&counter="+(ui.value-1));
            }
            $("#front-text").text(ui.value);
        }
    });
    
    $( "#slider-center" ).slider({
        range: "max",
        min: 1,
        max: parseInt($("#top-count").text()),
        //max: 1500,
        value: 1,
        start: function(event, ui) {
            //processLargeTopArray( parseInt( $("#top-count").text()) );
        },
        stop: function(event, ui) {
            $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top&counter="+(ui.value-1));
            imageUrl = "img?id="+id+"&name="+name+"&type=top&counter="+(ui.value-1);
            var zoomConfig = {
                zoomWindowPosition: "abcd",
                zoomWindowHeight: "100%",
                zoomWindowWidth: "33.3%",
                borderSize: 0,
                easing:true,
                onShow: function () {
                    $("#sidebar" ).css("opacity", "0");
                },
                onHide: function () {
                    $("#sidebar" ).css("opacity", "1");
                }   
            };
                        
            var zoomImage = $('#img-top');
            $('.zoomContainer').remove();
            zoomImage.attr('src', imageUrl);
            zoomImage.data('zoom-image', imageUrl);
            // Reinitialize EZ
            zoomImage.ezPlus(zoomConfig);
        },
        slide: function( event, ui ) {
            name = $( "#header_title" ).text().trim();
            id = name.replace ( /[^\d.]/g, '' );
            if (id in imgTopArray) {
                if (IsImageOk(imgTopArray[id][ui.value-1]) ) {
                    console.log("Hellow");
                    $("#img-top-container").empty().append(imgTopArray[id][ui.value-1]);
                } else {
                    console.log("RIP2");
                    $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top-resized&counter="+(ui.value-1));
                }
            } else {
                console.log("RIP");
                $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top-resized&counter="+(ui.value-1));
            }
            /* 
                if (imgTopArray[name].length > (parseInt( $("#top-count").text())*0.7) ) {
                    console.log("HELLO");
                    if (IsImageOk(imgTopArray[name][ui.value-1])) {
                        $("#img-top-container").empty().append(imgTopArray[name][ui.value-1]);
                    }
                }
            } else {
                console.log("WUT", name, );
                $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top-resized&counter="+(ui.value-1));
            }
            */
            $("#top-text").text(ui.value);
        }
    });
    
    $( "#download" ).click(function(e) {
        name = $( "#header_title" ).text().trim();
        id = name.replace ( /[^\d.]/g, '' );
        //var did = $( "select option:selected" ).text();
        e.preventDefault();  //stop the browser from following
        window.location.href = 'download?did=' + name;
    });
    
    $( "#bufferTop" ).click(function() {
        name = $( "#header_title" ).text().trim();
        total = parseInt( $("#top-count").text());
        id = name.replace ( /[^\d.]/g, '' );
        console.log(id, total, name);
        if ( !(id in imgTopArray) || (imgTopArray[id].length != total) ) {
                processLargeTopArray(name, total );
        }
    });
    $( "#bufferLeft" ).click(function() {
        name = $( "#header_title" ).text().trim();
        total = parseInt( $("#left-count").text());
        id = name.replace ( /[^\d.]/g, '' );
        if ( !(id in imgLeftArray) || (imgLeftArray[id].length != total) ) {
                processLargeLeftArray(name, total );
        }
    });
    $( "#bufferFront" ).click(function() {
        name = $( "#header_title" ).text().trim();
        total = parseInt( $("#front-count").text());
        id = name.replace ( /[^\d.]/g, '' );
        if ( !(id in imgFrontArray) || (imgFrontArray[id].length != total) ) {
                processLargeFrontArray(name, total );
        }
    });

    /*
    $('.target').change(function() {
        var name = $(this).find("option:selected").text();
        var index = $(this).find("option:selected").val();
        $.ajax({
            url: 'update?index=' + index + '&name=' + name,
            type: 'GET',
            success: function (response) {
                console.log("Success.");
                console.log(response);
                $("#size").text("("+response.data_size+" GB)");

                var html = "<span>Description</span>";
                for (i = 0; i < response["desc"].length; i++) { 
                    if (response["desc"][i]["type"] == "i") {
                        tmp = "<i>" + response["desc"][i]["text"] + "</i>";
                    } else if (response["desc"][i]["type"] == "p") {
                        tmp = response["desc"][i]["text"];
                    }
                    html += tmp;
                }
                $("#description").empty().append(html);

                $("#front-count-text").text(" (max: " + response.front_count + ")");
                $("#left-count-text").text(" (max: " + response.left_count + ")");
                $("#top-count-text").text(" (max: " + response.top_count + ")");
                $("#front-count").text(response.front_count);
                $("#left-count").text(response.left_count);
                $("#top-count").text(response.top_count);
                $("#slider-right").slider("option", "max" , response.front_count );
                $("#slider-left").slider("option", "max" , response.left_count );
                $("#slider-center").slider("option", "max" , response.top_count );
            
                var left_index = $( "#slider-left" ).slider( "option", "value" );
                var top_index = $( "#slider-center" ).slider( "option", "value" );
                var front_index = $( "#slider-right" ).slider( "option", "value" );
                // update images
                $("#placeholder-left").attr("src", "img?id="+index+"&name="+name+"&type=left-resized&counter="+(left_index-1));
                $("#img-top").attr("src", "img?id="+index+"&name="+name+"&type=top-resized&counter="+(top_index-1));
                $("#img-front").attr("src", "img?id="+index+"&name="+name+"&type=front-resized&counter="+(front_index-1));
           
                var imageUrlLeft = "img?id="+index+"&name="+name+"&type=left&counter="+(left_index-1);
                var imageUrlTop ="img?id="+index+"&name="+name+"&type=top&counter="+(top_index-1); 
                var imageUrlFront = "img?id="+index+"&name="+name+"&type=front&counter="+(front_index-1);
                $("#placeholder-left-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlLeft + '")');
                $("#img-top-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlTop + '")');
                $("#img-front-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlFront + '")');
    
                $("#front-quality-text").text("Magnification: " + ($("#img-front").width()  / parseInt($("#front-count").text())).toFixed(2).toString());
                $("#top-quality-text").text("Magnification: " + ($("#img-top").height()  / parseInt($("#top-count").text())).toFixed(2).toString());
                $("#left-quality-text").text("Magnification: " + ($("#placeholder-left").height()  / parseInt($("#left-count").text())).toFixed(2).toString()); 
            },
            error: function () {
                console.log("Error.")
            }
        });
        $("#img-preview").attr("src", "img?id="+index+"&name="+name+"&type=preview&counter=0");
    });
    */

    $("#front-left").click( function() {
        var index = parseInt($("#front-text").text());
        name = $( "#header_title" ).text().trim();
        id = name.replace ( /[^\d.]/g, '' );
        index -= 1;
        if (index < 1) {
            index = 1;
        }
        $("#front-text").text(index);
        $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front&counter="+index.toString());

        /*
        if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) {
            if (!document.fullscreenElement && !document.mozFullScreenElement &&
                !document.webkitFullscreenElement && !document.msFullscreenElement) { 
                $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front-resized&counter="+index.toString());
            } else {
                $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front&counter="+index.toString());
            }
        } else {
            $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front-resized&counter="+index.toString());
        }
        */
    });
    
    $("#front-right").click( function() {
        var index = parseInt($("#front-text").text());
        var max_count = parseInt($("#front-count").text());
        name = $( "#header_title" ).text().trim();
        id = name.replace ( /[^\d.]/g, '' );

        //console.log(index, max_count);
        index += 1;
        if (index > max_count) {
            index = max_count;
        }
        $("#front-text").text(index);
        $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front&counter="+index.toString());
        
        /*
        // update image src
        if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) {
            if (!document.fullscreenElement && !document.mozFullScreenElement &&
                !document.webkitFullscreenElement && !document.msFullscreenElement) { 
                $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front-resized&counter="+index.toString());
            } else {
                $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front&counter="+index.toString());
            }
        } else {
            $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front-resized&counter="+index.toString());
        }
        */
    });
    
    $("#top-left").click( function() {
        var index = parseInt($("#top-text").text());
        name = $( "#header_title" ).text().trim();
        id = name.replace ( /[^\d.]/g, '' );
        index -= 1;
        if (index < 1) {
            index = 1;
        }
        $("#top-text").text(index);
        $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top&counter="+index.toString());
        /*
        if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) {
            if (!document.fullscreenElement && !document.mozFullScreenElement &&
                !document.webkitFullscreenElement && !document.msFullscreenElement) { 
                $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top&counter="+index.toString());
            } else {
                $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top&counter="+index.toString());
            }
        } else {
            $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top-resized&counter="+index.toString());
        }
        */
    });
    
    $("#top-right").click( function() {
        var index = parseInt($("#top-text").text());
        var max_count = parseInt($("#top-count").text());
        name = $( "#header_title" ).text().trim();
        id = name.replace ( /[^\d.]/g, '' );

        //console.log(index, max_count);
        index += 1;
        if (index > max_count) {
            index = max_count;
        }
        $("#top-text").text(index);
        $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top&counter="+index.toString());
        /*
        // update image src
        if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) {
            if (!document.fullscreenElement && !document.mozFullScreenElement &&
                !document.webkitFullscreenElement && !document.msFullscreenElement) { 
                $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top-resized&counter="+index.toString());
            } else {
                $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top&counter="+index.toString());
            }
        } else {
            $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top-resized&counter="+index.toString());
        }
        */
    });
    
    $("#left-left").click( function() {
        var index = parseInt($("#left-text").text());
        name = $( "#header_title" ).text().trim();
        id = name.replace ( /[^\d.]/g, '' );
        index -= 1;
        if (index < 1) {
            index = 1;
        }
        $("#left-text").text(index);
        $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left&counter="+index.toString());

        /*
        if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) {
            $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left&counter="+index.toString());
        } else {
            $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+index.toString());
        }
        if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) {
            if (!document.fullscreenElement && !document.mozFullScreenElement &&
                !document.webkitFullscreenElement && !document.msFullscreenElement) { 
                $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+index.toString());
            } else {
                $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left&counter="+index.toString());
            }
        } else {
            $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+index.toString());
        }
        */
    });
    
    $("#left-right").click( function() {
        var index = parseInt($("#left-text").text());
        var max_count = parseInt($("#left-count").text());
        name = $( "#header_title" ).text().trim();
        id = name.replace ( /[^\d.]/g, '' );

        //console.log(index, max_count);
        index += 1;
        if (index > max_count) {
            index = max_count;
        }
        $("#left-text").text(index);
        $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left&counter="+index.toString());
        
        /*
        // update image src
        if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) {
            if (!document.fullscreenElement && !document.mozFullScreenElement &&
                !document.webkitFullscreenElement && !document.msFullscreenElement) { 
                $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+index.toString());
            } else {
                $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left&counter="+index.toString());
            }
        } else {
            $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+index.toString());
        }
        */
    });


    /*
    // FULLSCREEN
    document.getElementById("img-front").addEventListener("click", function() {
        var container = $("#photowrapper-front");
        if (!document.fullscreenElement && !document.mozFullScreenElement &&
            !document.webkitFullscreenElement && !document.msFullscreenElement) { 
            glob_id = this.id;
            glob_width = $("#photowrapper-front > img").width();
            glob_height = $("#photowrapper-front > img").height();
            glob_elem = $("#photowrapper-front")[0];
        }
        toggleFullscreen(container[0], this.id);
    });

    document.getElementById('img-top').addEventListener('click', function() {
        var container = $("#photowrapper-top");
        if (!document.fullscreenElement && !document.mozFullScreenElement &&
            !document.webkitFullscreenElement && !document.msFullscreenElement) { 
            glob_id = this.id;
            glob_width = $("#photowrapper-top > img").width();
            glob_height = $("#photowrapper-top > img").height();
            glob_elem = $("#photowrapper-top")[0];
        }
        toggleFullscreen(container[0], this.id);
    });

    document.getElementById('placeholder-left').addEventListener('click', function() {
        var container = $("#photowrapper-left");
        if (!document.fullscreenElement && !document.mozFullScreenElement &&
            !document.webkitFullscreenElement && !document.msFullscreenElement) { 
            glob_id = this.id;
            glob_width = $("#photowrapper-left > img").width();
            glob_height = $("#photowrapper-left > img").height();
            glob_elem = $("#photowrapper-left")[0];
        }
        toggleFullscreen(container[0], this.id);
    });
    */

    /*
    $("#img-top").ezPlus({
        zoomWindowPosition: 1,
        scrollZoom: true,
        zoomLevel: 0.1,
        minZoomLevel: 0.1,
        zoomWindowWidth: 300,
        zoomWindowHeight: 300
    });
    */

    $("#img-top").ezPlus({
        ////zoomWindowPosition: 1,
        zoomWindowPosition: "abcd",
        //scrollZoom: true,
        zoomWindowHeight: "100%",
        zoomWindowWidth: "33.3%",
        borderSize: 0,
        easing:true,
        onShow: function () {
            $("#sidebar" ).css("opacity", "0");
        },
        onHide: function () {
            $("#sidebar" ).css("opacity", "1");
        }   
    });

    $("#placeholder-left").ezPlus({
        zoomWindowPosition: "abcd",
        //zoomWindowPosition: 9,
        //scrollZoom: true,
        //zoomLevel: 0.1,
        //minZoomLevel: 0.1,
        zoomWindowHeight: "100%",
        zoomWindowWidth: "33.3%",
        borderSize: 0,
        easing:true,
        onShow: function () {
            $("#sidebar" ).css("opacity", "0");
        },
        onHide: function () {
            $("#sidebar" ).css("opacity", "1");
        }   
    });

    $("#img-front").ezPlus({
        zoomWindowPosition: "abcd",
        zoomWindowHeight: "100%",
        zoomWindowWidth: "33.3%",
        borderSize: 0,
        easing:true,
        onShow: function () {
            $("#sidebar" ).css("opacity", "0");
        },
        onHide: function () {
            $("#sidebar" ).css("opacity", "1");
        }   
    });

    /*
     * print folder, imLeft.size, imTop.size, imFront.size
     * NRM-PZ Ar65771 (1174, 2929) (1173, 2929) (1173, 1174)
     * NRM-PZ Ar65772 (1122, 3200) (1173, 3200) (1173, 1122)
     * NRM-PZ Ar65794 (1118, 3113) (1133, 3113) (1133, 1118)
     * NRM-PZ Ar65793 (1294, 3431) (1240, 3431) (1240, 1294)
     * NRM-PZ Ar65720 (1223, 3311) (1267, 3311) (1267, 1223)
     * NRM-PZ Ar65767 (1302, 2936) (1284, 2936) (1284, 1302)
     */
    $("#front-quality-text").text("Magnification: 0.34");
    $("#top-quality-text").text("Magnification: 0.13");
    $("#left-quality-text").text("Magnification: 0.13"); 

    /*
    console.log("FRONT QUALITY: " + $("#img-front").width() + " / " + $("#front-count").text() );    
    console.log("TOP QUALITY: " + $("#img-top").height() + " / " + $("#top-count").text() );    
    console.log("LEFT QUALITY: " + $("#placeholder-left").height() + " / " + $("#left-count").text() );    
    */

    /*
    // PRELOAD Front Images
    for (i = 0; i < parseInt( $("#front-count").text() ); i++) {
        name = $( "#header_title" ).text();
        id = name.replace ( /[^\d.]/g, '' );

        var img = new Image();
            img.src = "img?id="+id+"&name="+name+"&type=front-resized&counter="+i;
            img.id = "img-front";
            img.style.width = 100 + '%';
        imgFrontArray[i] = img;   
    }
    */
    
    function processLargeFrontArray(name, max_iter) {
        // set this to whatever number of items you can process at once
        // Can use FPS to find the balance between chunk size and timeout value
        var chunk = 10;
        var index = 0;
        var tmpArray = []
        name = $( "#header_title" ).text().trim();
        id = name.replace ( /[^\d.]/g, '' );
        function doChunk() {
            var cnt = chunk;
            while (cnt-- && index < max_iter) {
                var img = new Image();
                    img.src = "img?id="+id+"&name="+name+"&type=front-resized&counter="+index;
                    img.id = "img-front";
                    img.style.width = 100 + '%';
                tmpArray[index] = img;   
                if (stopFlag == true) {
                    index = 999999;
                    stopFlag = false;
                    break;
                }
                // process array[index] here
                ++index;
            }
            if (index < max_iter) {
                // set Timeout for async iteration
                setTimeout(doChunk, 100);
                cur_value = parseInt( (tmpArray.length/parseFloat(max_iter))*100.0); 
                //console.log(tmpArray.length, max_iter)
                $('#progress-front').css('width', cur_value+'%').attr('aria-valuenow', cur_value);
            } else {
                console.log(index);
                if (tmpArray.length > 100) {
                    imgFrontArray[id] = tmpArray;
                    $('#progress-front').css('width', '100%').attr('aria-valuenow', 100);
                }
                stopFlag = false;
                index = 0;    
                tmpArray = [];
            } 
            /*else {
                processLargeFrontArray( parseInt( $("#front-count").text()) );
            }*/
        }    
        doChunk();    
    }

    function processLargeLeftArray(name, max_iter) {
        // set this to whatever number of items you can process at once
        // Can use FPS to find the balance between chunk size and timeout value
        var chunk = 10;
        var index = 0;
        var tmpArray = []
        name = $( "#header_title" ).text().trim();
        id = name.replace ( /[^\d.]/g, '' );
        function doChunk() {
            var cnt = chunk;
            while (cnt-- && index < max_iter) {
                var img = new Image();
                    img.src = "img?id="+id+"&name="+name+"&type=left-resized&counter="+index;
                    img.id = "placeholder-left";
                    img.style.width = 100 + '%';
                tmpArray[index] = img;   
                if (stopFlag == true) {
                    index = 999999;
                    stopFlag = false;
                    break;
                }
                // process array[index] here
                ++index;
            }
            if (index < max_iter) {
                // set Timeout for async iteration
                setTimeout(doChunk, 100);
                cur_value = parseInt( (tmpArray.length/parseFloat(max_iter))*100.0); 
                //console.log(tmpArray.length, max_iter)
                $('#progress-left').css('width', cur_value+'%').attr('aria-valuenow', cur_value);
            } else {
                console.log(index);
                if (tmpArray.length > 100) {
                    imgLeftArray[id] = tmpArray;
                    $('#progress-left').css('width', '100%').attr('aria-valuenow', 100);
                }
                stopFlag = false;
                index = 0;    
                tmpArray = [];
            } 
            /*else {
                processLargeFrontArray( parseInt( $("#front-count").text()) );
            }*/
        }    
        doChunk();    
    }
    
    function processLargeTopArray(name, max_iter) {
        // set this to whatever number of items you can process at once
        // Can use FPS to find the balance between chunk size and timeout value
        var chunk = 10;
        var index = 0;
        var myVar;
        var tmpArray = []
        name = $( "#header_title" ).text().trim();
        id = name.replace ( /[^\d.]/g, '' );
        function doChunk() {
            var cnt = chunk;
            while (cnt-- && index < max_iter) {
                var img = new Image();
                    img.src = "img?id="+id+"&name="+name+"&type=top-resized&counter="+index;
                    img.id = "img-top";
                    img.style.width = 100 + '%';
                tmpArray[index] = img;   
                if (stopFlag == true) {
                    //index = 999999;
                    break;
                }
                // process array[index] here
                ++index;
            }
            if ( (index < max_iter) && (stopFlag == false)) {
                // set Timeout for async iteration
                myVar = setTimeout(doChunk, 100);
                cur_value = parseInt( (tmpArray.length/parseFloat(max_iter))*100.0); 
                //console.log(tmpArray.length, max_iter)
                $('#progress-top').css('width', cur_value+'%').attr('aria-valuenow', cur_value);
            } else {
                console.log(index);
                clearTimeout(myVar);
                if (tmpArray.length > 100) {
                    imgTopArray[id] = tmpArray;
                    $('#progress-top').css('width', '100%').attr('aria-valuenow', 100);
                }
                stopFlag = false;
                index = 0;    
                tmpArray = [];
            } 
            /*else {
                processLargeFrontArray( parseInt( $("#front-count").text()) );
            }*/
        }    
        doChunk();    
    }

    /*
    // PRELOAD Top Images
    for (i = 0; i < parseInt( $("#top-count").text() ); i++) {
        name = $( "#header_title" ).text();
        id = name.replace ( /[^\d.]/g, '' );

        var img = new Image();
            img.src = "img?id="+id+"&name="+name+"&type=top-resized&counter="+i;
            img.id = "img-top";
            img.style.width = 100 + '%';
        imgTopArray[i] = img;   
    }
    
    // PRELOAD Left Images
    for (i = 0; i < parseInt( $("#left-count").text() ); i++) {
        name = $( "#header_title" ).text();
        id = name.replace ( /[^\d.]/g, '' );

        var img = new Image();
            img.src = "img?id="+id+"&name="+name+"&type=left-resized&counter="+i;
            img.id = "placeholder-left";
            img.style.width = 100 + '%';
        imgLeftArray[i] = img;   
    }
    */

    /*
    // WEB WORKER APPROACH
    var worker = new Worker('http://katrin.kit.edu/static/js/doWork.js');
    name = $( "#header_title" ).text();
    id = name.replace ( /[^\d.]/g, '' );
    //worker.postMessage(999999999);
    //
    //
    myArray = []
    for (i = 0; i < parseInt( $("#front-count").text() ); i++) {
        var img = new Image();
        myArray[i] = img;   
    }
    
    worker.postMessage({'name': name, 'id': id, 'front_count': $("#front-count").text(), 'imgContainer': myArray });

    // array of images
    // var images = [];

    //worker.addEventListener('message', function(e) {
    //    console.log(e.data);
    //}, false);
    
    worker.onmessage = function(e) {
        console.log(e.data);
    }
    */
});