Source: js/index.js

// <!--Javascript for sidemenu-->


/**
 * Opens a navigation.
 */
function openNav() {
    document.getElementById("sideMenu").style.width = "80%";
}

/**
 * Closes a navigation.
 */
function closeNav() {
    document.getElementById("sideMenu").style.width = "0";
}

/**
 * Opens a navigation 2.
 */
function openNav2() {
  document.getElementById("sideMenu2").style.width = "25%";
}

/**
 * Closes a navigation 2.
 */
function closeNav2() {
    console.log("closeNav2");
  document.getElementById("sideMenu2").style.width = "0";
 // $('.panel-collapse').collapse();
}

/**
 * Shows the navigation 2.
 */
function showNav2() {
  document.getElementById("menubutton2").style.display = "inline-block";
  document.getElementById("sideMenu2").style.width = "25%";

   /*document.getElementById("legend").style.right = "28%" ;*/
}


/**
 * Hides the navigation 2.
 */
function hideNav2() {
  document.getElementById("menubutton2").style.display = "none";
  document.getElementById("sideMenu2").style.width = "0%";
}


/**
 * Shows the map key.
 */
function showMapKey() {
  document.getElementById("sideMenu2").style.width = "0%";
  $('.panel-collapse').collapse("show");
  //$('.panel').collapse();
}


/**
 * Shows the meta data.
 */
function showMetaData(){
    document.getElementById("metaData").style.display = "inline-block";
}


/**
 * Hides the meta data.
 */
function hideMetaData(){
    document.getElementById("metaData").style.display = "none";
}


/**
 * Downloads a map.
 */
function downloadMap() {
    console.log("inside download");
    document.getElementById("sideMenu2").style.width = "0";
    $('.panel-collapse').collapse("show");
    document.getElementById("metaData").style.opacity = 1;
    convertToImage();
}


/**
 * Convert map to image
 */
function convertToImage() {
    html2canvas(document.getElementById("mapArea"), {
    onrendered: function(canvas) {
        return Canvas2Image.saveAsPNG(canvas);
        Canvas2Image.saveAsPNG(canvas);
        var image = Canvas2Image.convertToPNG(canvas);
        var image_data = $(image).attr('src');

        $.ajax({
            url: '../images',
            data: { image: image_data },
            success: function() {

            }
        });
    }
});
}


/**
 * Sets the number classes.
 */
function setNumClasses() {
    sessionStorage.setItem('numClasses', document.getElementById('numClasses').value);
}

/**
 * Sets the standard method.
 */
function setStdMethod() {
    sessionStorage.setItem('stdMethod', document.getElementById('standardization').value);
}


/**
 * Sets the map title.
 */
function setMapTitle() {
    sessionStorage.setItem('mapTitle', document.getElementById('mapTitle').value);
}




/**
 *	If discrete data then a few things have to be hidden on the appropriate pages 
 */
function checkDiscrete() {
    if (document.getElementById('discrete').checked) {
        $('#selectAttributeValues').css("display", "block");
        sessionStorage.setItem('isDiscrete', 'true');

    } else {
        $('#selectAttributeValues').css("display", "none");
        sessionStorage.setItem('isDiscrete', 'false');
    }
}


/**
 * If discrete data then a few things have to be hidden on p3
 */
function checkDiscrete_p3() {

    if (sessionStorage.getItem('isDiscrete') == 'true') {

        $('#standardization_select').css("display", "none");
        $('#numClasses_select').css("display", "none");

    } else if (sessionStorage.getItem('isDiscrete') == 'false') {

        $('#standardization_select').css("display", "block");
        $('#numClasses_select').css("display", "block");
    }

}


/**
 * If heat or choropleth map then a few things have to be hidden on the appropriate pages
 */
function checkHeatOrPropSym() {
    if (sessionStorage.getItem('mapTypeSelected') == '2') {
        //hide std, numClasses, classif
        $('#standardization_select').css("display", "none");
        $('#numClasses_select').css("display", "none");

    } else if (sessionStorage.getItem('mapTypeSelected') == '4') {
        //hide numClasses, classif
        $('#numClasses_select').css("display", "none");
    }
    else if ((sessionStorage.getItem('mapTypeSelected') != '2') && (sessionStorage.getItem('mapTypeSelected') != '4') && (sessionStorage.getItem('isDiscrete') == 'false')) {
        //unhide
        $('#standardization_select').css("display", "block");
        $('#numClasses_select').css("display", "block");
    }
}


/**
 * If discrete data then a few things have to be hidden on p4
 */
function checkDiscrete_p4() {
    document.getElementById("dynamicClassSelected").innerHTML = " " + sessionStorage.getItem('numClasses') + " Classes";
    if (sessionStorage.getItem('isDiscrete') == 'true') {
        $('#hiddenIfDiscrete1').css("display", "none");
        $('#hiddenIfDiscrete2').css("display", "none");
        $('#hiddenIfDiscrete3').css("display", "none");
        $('#hiddenIfDiscrete4').css("display", "none");

    } else if (sessionStorage.getItem('isDiscrete') == 'false') { //thus classification and numclasses should be shown/used
        
        if (sessionStorage.getItem('mapTypeSelected') == '2') {
            //hide classif
            $('#hiddenIfDiscrete1').css("display", "none");
            $('#hiddenIfDiscrete2').css("display", "none");
            $('#hiddenIfDiscrete3').css("display", "none");
            $('#hiddenIfDiscrete4').css("display", "none");

        } else if (sessionStorage.getItem('mapTypeSelected') == '4') {
            //hide classif
            $('#hiddenIfDiscrete1').css("display", "none");
            $('#hiddenIfDiscrete2').css("display", "none");
            $('#hiddenIfDiscrete3').css("display", "none");
            $('#hiddenIfDiscrete4').css("display", "none");
        }
        else if ((sessionStorage.getItem('mapTypeSelected') != '2') && (sessionStorage.getItem('mapTypeSelected') != '4') && (sessionStorage.getItem('isDiscrete') == 'false')) {
            //unhide
            $('#hiddenIfDiscrete1').css("display", "block");
            $('#hiddenIfDiscrete2').css("display", "block");
            $('#hiddenIfDiscrete3').css("display", "block");
            $('#hiddenIfDiscrete4').css("display", "block");
        }   
    }
}


/**
 * unhides meta data
 */
function unHideMeta() {
    document.getElementById("metaData").style.display = "block";
    document.getElementById("restartButton").style.display = "block";
}

//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

/**
 * go next when click on next button
 */
$(".next").click(function() {
    if (animating) return false;
    animating = true;

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

    //show the next fieldset
    next_fs.show();
    //hide the current fieldset with style
    current_fs.animate({ opacity: 0 }, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.2;
            //2. bring next_fs from the right(50%)
            left = (now * 50) + "%";
            //3. increase opacity of next_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({
                'transform': 'scale(' + scale + ')',
                'position': 'absolute'
            });
            next_fs.css({ 'left': left, 'opacity': opacity });
        },
        duration: 800,
        complete: function() {
            current_fs.hide();
            animating = false;
        },
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});


// $(".previous").click(function() {
//     if (animating) return false;
//     animating = true;

//     current_fs = $(this).parent();
//     previous_fs = $(this).parent().prev();

//     //de-activate current step on progressbar
//     $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

//     //show the previous fieldset
//     previous_fs.show();
//     //hide the current fieldset with style
//     current_fs.animate({ opacity: 0 }, {
//         step: function(now, mx) {
//             //as the opacity of current_fs reduces to 0 - stored in "now"
//             //1. scale previous_fs from 80% to 100%
//             scale = 0.8 + (1 - now) * 0.2;
//             //2. take current_fs to the right(50%) - from 0%
//             left = ((1 - now) * 50) + "%";
//             //3. increase opacity of previous_fs to 1 as it moves in
//             opacity = 1 - now;
//             current_fs.css({ 'left': left });
//             previous_fs.css({ 'transform': 'scale(' + scale + ')', 'opacity': opacity });
//         },
//         duration: 800,
//         complete: function() {
//             current_fs.hide();
//             animating = false;
//         },
//         //this comes from the custom easing plugin
//         easing: 'easeInOutBack'
//     });
// });

/**
 * submit button
 */
$(".submit").click(function() {
    return false;
})

/*
*   Used if a map is selected on the page 2 of the side menu.
*/
$('.images_list li').click(function() {
    $('.images_list .selected').removeClass('selected');
    $(this).toggleClass('selected');
    var currentID = $(this).attr('title');
    if ((currentID != 'HeatMap') && (currentID != 'ProportionalSymbol')) {
        document.getElementById("hiddenIfHeatOrProp1").style.visibility = "visible";
        document.getElementById("hiddenIfHeatOrProp1").style.display = "block";
        document.getElementById("hiddenIfHeatOrProp2").style.visibility = "visible";
        document.getElementById("hiddenIfHeatOrProp2").style.display = "block";
    }
    
    if (currentID == 'DotDensity') {
        sessionStorage.setItem('mapTypeSelected', "1");
    }
    if (currentID == 'HeatMap') {
        sessionStorage.setItem('mapTypeSelected', "2");
        document.getElementById("hiddenIfHeatOrProp1").style.visibility = "hidden";
        document.getElementById("hiddenIfHeatOrProp1").style.display = "none";
        document.getElementById("hiddenIfHeatOrProp2").style.visibility = "hidden";
        document.getElementById("hiddenIfHeatOrProp2").style.display = "none";
    }
    if (currentID == 'Choropleth') {
        sessionStorage.setItem('mapTypeSelected', "3");
    }
    if (currentID == 'ProportionalSymbol') {
        sessionStorage.setItem('mapTypeSelected', "4");
        document.getElementById("hiddenIfHeatOrProp1").style.visibility = "hidden";
        document.getElementById("hiddenIfHeatOrProp1").style.display = "none";
        document.getElementById("hiddenIfHeatOrProp2").style.visibility = "hidden";
        document.getElementById("hiddenIfHeatOrProp2").style.display = "none";
    }
    var clicked = $(this).attr('title');
    $("#" + clicked).removeClass("hidden").siblings().addClass("hidden");
});

/*
*   Used if a map is selected on the page 3 of the side menu.
*/
$('.images_list2 li').click(function() {
    $('.images_list2 .selected').removeClass('selected');
    $(this).toggleClass('selected');
    var currentID = $(this).attr('id');
    if (currentID == 'cs1') {
        sessionStorage.setItem("colorMap", "cs1");
        sessionStorage.setItem('colorSchemeSelected', "0");
    }
    if (currentID == 'cs2') {
        sessionStorage.setItem("colorMap", "cs2");
        sessionStorage.setItem('colorSchemeSelected', "1");
    }
    if (currentID == 'cs3') {
        sessionStorage.setItem("colorMap", "cs3");
        sessionStorage.setItem('colorSchemeSelected', "2");
    }
    if (currentID == 'cs4') {
        sessionStorage.setItem("colorMap", "cs4");
        sessionStorage.setItem('colorSchemeSelected', "3");
    }
    if (currentID == 'cs5') {
        sessionStorage.setItem("colorMap", "cs5");
        sessionStorage.setItem('colorSchemeSelected', "4");
    }
    if (currentID == 'cs6') {
        sessionStorage.setItem("colorMap", "cs6");
        sessionStorage.setItem('colorSchemeSelected', "5");
    }
    var clicked = $(this).attr('id');
    $("#" + clicked).removeClass("hidden").siblings().addClass("hidden");
});

/*
*   Used if a map is selected on the page 4 of the side menu.
*/
$('.images_list3 li').click(function() {
    $('.images_list3 .selected').removeClass('selected');
    $(this).toggleClass('selected');
    var currentID = $(this).attr('id');
    if (currentID == 'cc1') {
        sessionStorage.setItem('classificationAndClassSelected', "0");
    }
    if (currentID == 'cc2') {
        sessionStorage.setItem('classificationAndClassSelected', "1");
    }
    if (currentID == 'cc3') {
        sessionStorage.setItem('classificationAndClassSelected', "2");
    }
    if (currentID == 'cc4') {
        sessionStorage.setItem('classificationAndClassSelected', "3");
    }
    if (currentID == 'cc5') {
        sessionStorage.setItem('classificationAndClassSelected', "4");
    }
    if (currentID == 'cc6') {
        sessionStorage.setItem('classificationAndClassSelected', "5");
    }
    if (currentID == 'cc7') {
        sessionStorage.setItem('classificationAndClassSelected', "6");
    }8
    if (currentID == 'cc8') {
        sessionStorage.setItem('classificationAndClassSelected', "7");
    }
    if (currentID == 'cc9') {
        sessionStorage.setItem('classificationAndClassSelected', "8");
    }
    var clicked = $(this).attr('id');
    $("#" + clicked).removeClass("hidden").siblings().addClass("hidden");
});

/**
 * fieldset1 enable next button when appropriate
 */
$(document).ready(function(){
   $("#fieldset1").change(function(e) {
    
    var selectedAttr = $('#attr').find(":selected").val();
    var selectedAttrValue = $('#attrValue').find(":selected").val();
    var selectedBoundary = $('#boundary').find(":selected").val();

    console.log("selectedAttrValue = " + selectedAttrValue);

    if ((document.getElementById("discrete").checked) && (selectedAttrValue == "1")){
        $("#next1").attr("disabled", true);  
    }
    if ((document.getElementById("discrete").checked == false) && (document.getElementById("continuous").checked ==  false) || (selectedAttr == "1") || (selectedBoundary == "1")) { 
      $("#next1").attr("disabled", true);       
    } else if ((selectedAttr != "1") && (document.getElementById("continuous").checked) && (selectedBoundary != "1")) {
      $("#next1").removeAttr("disabled");
    } else if ((selectedBoundary != "1") && (selectedAttrValue != "1")) {
      $("#next1").removeAttr("disabled");
   }
  });
})


/**
 * check if attribute value has been chosen then enable next button
 */
function checkAttValue() {
    var selectedAttrValue = $('#attrValue').find(":selected").val();
    var selectedBoundary = $('#boundary').find(":selected").val();
    console.log("checkAttValue selectedAttrValue = " + selectedAttrValue);
    if (selectedBoundary != "1") {
        if (selectedAttrValue != "1") {
            $("#next1").removeAttr("disabled");
        }
    }
}


/**
 * fieldset2 enable next button where appropriate
 */
$(document).ready(function(){
   $(".images_list li").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    
    if (this.value == "1" || this.value == "2" || this.value == "3" || this.value == "4"){
      $('#next2').removeAttr('disabled');
    };
  });
})

/**
 * fieldset3 enable next button where appropriate
 */
$(document).ready(function(){
   $(".images_list2 li").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    
    if (this.value == "1" || this.value == "2" || this.value == "3" || this.value == "4" || this.value == "5" || this.value == "6"){
      $('#next3').removeAttr('disabled');
    };
  });
})

/**
 * fieldset4 enable next button where appropriate
 */
$(document).ready(function(){
   $(".images_list3 li").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    
    if (this.value == "1" || this.value == "2" || this.value == "3" || this.value == "4" || this.value == "5" || this.value == "6" || this.value == "7" || this.value == "8" || this.value == "9"){
      $('#generateMap').removeAttr('disabled');
    };
  });
})