fossils/static/fossil/js/script.js

var glob_width;
var glob_height;
var glob_elem;

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) { 
            console.log("Exit FS");
            //$(glob_elem).css("width", glob_width+"px");
            //$(glob_elem).css("height", glob_height+"px");
            $(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%");
        } else {
            console.log("Enter FS");
            $("#front-quality-text").text("Size: 100%");
            $("#top-quality-text").text("Size: 100%");
            $("#left-quality-text").text("Size: 100%");
        }
    }
}


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

    var ori_width = glob_width
    var ori_height = glob_height;
      
    console.log("DEBUG");
    console.log(screen.width, screen.height, glob_width, glob_height)
    var fs_scale;

    if (!document.fullscreenElement && !document.mozFullScreenElement &&
      !document.webkitFullscreenElement && !document.msFullscreenElement) { 
      if ((ori_height*1.2) > ori_width) {
        newWidth = screen.width * 0.5;
        newHeight = screen.width * (ori_height/ori_width) * 0.5;
      } else {
        newHeight = screen.height * 0.6;
        newWidth = screen.height * (ori_width/ori_height) * 0.6;
      }
      //$(elem, "img").css("height", (screen.height*0.8)+"px");
      //$(elem, "img").css("width", (screen.width*0.8)+"px");
      $(elem, "img").css("height", (newHeight)+"px");
      $(elem, "img").css("width", (newWidth)+"px");

      
      
      //$(elem).css("width", Math.max(screen.width, screen.height)+"px");
      //$(elem).css("width", "90%");
      $(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 {
      console.log("Set width height");
      console.log(ori_width);
      console.log(ori_height);
      $(elem).css("width", "100%");
      //$(elem).css("height", "100%");
      //$(elem).css("width", ori_width+"px");
      //$(elem).css("height", ori_height+"px");
      $(elem).css("background-color", "white");
      $(elem).css("color", "#000");

      //img_fullscreen = $(elem).attr("src").split("&");
      //img_fullscreen = img_fullscreen[0] + "&" + img_fullscreen[1] + "&" + img_fullscreen[2] + "-resized&" + img_fullscreen[3];
      //$(elem).attr("src", img_fullscreen);

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

$(function() {

    //$("#front-quality-text").text( ($("#img-front").width()  / parseInt($("#top-count").text())).toFixed(2).toString() + "%");
    //$("#top-quality-text").text( ($("#img-top").width()  / parseInt($("#front-count").text())).toFixed(2).toString() + "%");
    //$("#left-quality-text").text(  ($("#placeholder-left").width()  / parseInt($("#front-count").text())).toFixed(2).toString() + "%"); 
    
    $("#front-quality-text").text("Size: 25%");
    $("#top-quality-text").text("Size: 25%");
    $("#left-quality-text").text("Size: 25%");

    $( "#slider-left" ).slider({
        range: "max",
        min: 1,
        max: parseInt($("#left-count").text()),
        value: 1,
        slide: function( event, ui ) {
            //console.log(ui.value);
            var name = $( "select option:selected" ).text();
            var id = $( "select option:selected" ).val();
            $("#left-text").text(ui.value);
            // update image src
            // data-zoom-image
            //$("#placeholder-left").attr("data-zoom-image", "img?id="+id+"&name="+name+"&type=left-resized&counter="+(ui.value-1));
            var imageUrl = "img?id="+id+"&name="+name+"&type=left&counter="+(ui.value-1);
            $("#placeholder-left-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrl + '")');
            //$("#placeholder-left-zoomContainer > .zoomLens").css('background-image', 'url("' + imageUrl + '")');
            $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+(ui.value-1));
        }
    });
    
    $( "#slider-right" ).slider({
        range: "max",
        min: 1,
        max: parseInt($("#front-count").text()),
        value: 1,
        slide: function( event, ui ) {
            //console.log(ui.value);
            var name = $( "select option:selected" ).text();
            var id = $( "select option:selected" ).val();
            $("#front-text").text(ui.value);
            // update image src
            var imageUrl = "img?id="+id+"&name="+name+"&type=front&counter="+(ui.value-1);
            $("#img-front-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrl + '")');
            //$("#img-front-zoomContainer > .zoomLens").css('background-image', 'url("' + imageUrl + '")');
            //$("#img-front").attr("data-zoom-image", "img?id="+id+"&name="+name+"&type=left-resized&counter="+(ui.value-1));
            $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front-resized&counter="+(ui.value-1));
        }
    });
    
    $( "#slider-center" ).slider({
        range: "max",
        min: 1,
        max: parseInt($("#top-count").text()),
        value: 1,
        slide: function( event, ui ) {
            //console.log(ui.value);
            var name = $( "select option:selected" ).text();
            var id = $( "select option:selected" ).val();
            $("#top-text").text(ui.value);
            // update image src
            var imageUrl = "img?id="+id+"&name="+name+"&type=top&counter="+(ui.value-1);
            $("#img-top-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrl + '")');
            //$("#img-top-zoomContainer > .zoomLens").css('background-image', 'url("' + imageUrl + '")');
            $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top-resized&counter="+(ui.value-1));
        }
    });
    
    $( "#download" ).click(function(e) {
        var did = $( "select option:selected" ).text();
        e.preventDefault();  //stop the browser from following
        window.location.href = 'download?did=' + did;
    });

    $('.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" );
                $("#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));
            
                //$("#front-quality-text").text( " " + ($("#img-front").width() / response.front_count).toFixed(2).toString() + "%");
                //$("#top-quality-text").text(" " + ($("#img-top").width()  / response.top_count).toFixed(2).toString() + "%");
                //$("#left-quality-text").text(" " + ($("#placeholder-left").width()  / response.left_count).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());
        var name = $( "select option:selected" ).text();
        var id = $( "select option:selected" ).val();
        index -= 1;
        if (index < 1) {
            index = 1;
        }
        $("#front-text").text(index);
        $("#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());
        var name = $( "select option:selected" ).text();
        var id = $( "select option:selected" ).val();

        //console.log(index, max_count);
        index += 1;
        if (index > max_count) {
            index = max_count;
        }
        $("#front-text").text(index);
        // update image src
        $("#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());
        var name = $( "select option:selected" ).text();
        var id = $( "select option:selected" ).val();
        index -= 1;
        if (index < 1) {
            index = 1;
        }
        $("#top-text").text(index);
        $("#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());
        var name = $( "select option:selected" ).text();
        var id = $( "select option:selected" ).val();

        //console.log(index, max_count);
        index += 1;
        if (index > max_count) {
            index = max_count;
        }
        $("#top-text").text(index);
        // update image src
        $("#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());
        var name = $( "select option:selected" ).text();
        var id = $( "select option:selected" ).val();
        index -= 1;
        if (index < 1) {
            index = 1;
        }
        $("#left-text").text(index);
        $("#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());
        var name = $( "select option:selected" ).text();
        var id = $( "select option:selected" ).val();

        //console.log(index, max_count);
        index += 1;
        if (index > max_count) {
            index = max_count;
        }
        $("#left-text").text(index);
        // update image src
        $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+index.toString());
    });


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

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

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

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

    $("#img-front").ezPlus({
        zoomWindowPosition: 11,
        scrollZoom: true,
        zoomLevel: 0.1,
        minZoomLevel: 0.1,
        zoomWindowWidth: 300,
        zoomWindowHeight: 300
    });


});