$(document).ready(function(){

    // Auto-populate menus
    $('.toComplete').each(function(){
        min = $(this).attr('min') ? parseFloat($(this).attr('min')) : 0;
        max = $(this).attr('max') ? parseFloat($(this).attr('max')) : 100;
        incr = $(this).attr('incr') ? parseFloat($(this).attr('incr')) : 1;
        
        for (i=min; i<max+incr; i+=incr){
            $(this).append('<option baselength="' + i + '" baseunits="in" value="' + convertLength(i,4) + '">' + convertLength(i,4) + '</option>');   
        }
    });

    // Populate diameters list by material
    $('#dlMaterial').change(function(){
        resetView();
        var m = $('#dlMaterial option:selected').attr('value');
        if (m != ""){
            $(this).parents('tr').removeClass('outlined');
            $('#dlDiameter').parents('tr').addClass('outlined');
            $('#dlDiameter').removeAttr('disabled').html('<option value="">Select diameter</option>');
            for (i=0; i<bendsOptions.length; i++){
                if (bendsOptions[i][5].indexOf(m) != -1 && (getUnits() != 'in' || bendsOptions[i][1] == true)){
                    $('#dlDiameter').append('<option value="' + i + '">' + convertLength(bendsOptions[i][0], 16) + '</option>');
                }
            }
        }
        else{
            $(this).parents('tr').addClass('outlined');
        }
    });

    // Create CLR rows depending on the selected diameter
    $('#dlDiameter').change(function(){
        var d = $('#dlDiameter').val();
        if (d != ""){
            $('.outlined').removeClass('outlined');
            $('#boxDimensions').addClass('outlined');
            
            // Create header for CLR box
            $('#boxDimensions .header').html($('#dlMaterial option:selected').text() + ' bends with ' + $('#dlDiameter option:selected').text() + getUnits() + ' diameter.');
            
            // Populate CLR table
            $('#tblDimensions tbody').empty();
            for (iCLR=0; iCLR<bendsOptions[d][3].length; iCLR++){
                $('#tblDimensions tbody').append('<tr><td>' + convertLength(bendsOptions[d][3][iCLR]) + '</td><td>' + drawAngleMenu(bendsOptions[d][4][iCLR]) + '</td><td>' + drawThicknessMenu(d) + '</td><td>' + convertLength(bendsOptions[d][2],10) + '</td><td><input type="text" class="user length" max="254"></td><td><input type="text" class="qty" value="0" /></td><td><input type="button" class="add" value="Add" /></td></tr>');
            }
            $('#boxDimensions').slideDown(300, function(){ initLengthBoxes(); });
        }
        // Reset the view
        else{
            $(this).parents('tr').addClass('outlined');
            $('#boxDimensions').slideUp(200);
        }
    });

    // Populate wall thickness options for a given diameter
    function drawThicknessMenu(d){
        var tMenu = '<select class="user">';
        for (tI=0; tI<bendsOptions[d][6].length; tI++){
            tMenu += '<option value="' + tI + '">' + bendsOptions[d][6][tI] + '</option>';
        }
        tMenu += '</select>';
        return tMenu;
    }
    
    // Angles incremenets
    function drawAngleMenu(max){
        var angles = [15,20,25,30,45,60,90,100,110,115,120,135,140,150,155,160,170,180];
        var aMenu = '<select class="user">';  
            
        for (aI=0; aI<angles.length; aI++){
            if (angles[aI] <= parseInt(max)){
                aMenu += '<option value="' + aI +'">' + angles[aI]  +'</option>';
            }
        }
        aMenu += '</select>';
        
        return aMenu;
    }
    
    // Attach behaviours to length boxes
    function initLengthBoxes(){
        $('input[type=text].length')
            .focus(function(){
                $(this).addClass('focus');
                if ($(this).val()){ $(this).attr('oldVal',$(this).val()); }
                $(this).val('');
            })
            .blur(function(){
                if (this.value == '' && $(this).attr('oldVal')){
                    $(this).val($(this).attr('oldVal'));
                }
                else if (!IsNumeric(this.value)){
                    alertUser('Only numbers are allowed in this field. Please try again.',false);
                    this.value = $(this).attr('oldVal');
                }
                /*else if ($(this).attr('min') && this.value < $(this).attr('min')){
                    alertUser('The minimum clamp length for this diameter is ' + $(this).attr('min') + getUnits() + '. Please try again',false);
                    this.value = $(this).attr('oldVal');
                }*/
                else if ($(this).attr('max') && parseFloat(this.value) > convertLength($(this).attr('max'))){
                    alertUser('The maximum tail length for bends of this diameter is ' + convertLength($(this).attr('max')) + getUnits() + '. Please try again.',false);
                    this.value = $(this).attr('oldVal') ? $(this).attr('oldVal') : '';
                }
            });
    }
    
    // Convert a mm length according to the currently selected units
    function convertLength(l,round){
        r = round ? round : 1000;
        if ($('#prefUnits').val() == 'in'){
            return roundNumber(l/25.4,r);
        }
        return l;
    } 

});

// Get units tag
function getUnits(){
    return $('#prefUnits').val();
}

// Rounding to 2 decimals
function roundNumber(num, dec) {
    return Math.round(num*100)/100;
}

// Reset CLR table
function resetView(){
    $('.outlined').removeClass('outlined');
    $('#dlMaterial').parent().addClass('outlined');
    
    $('#dlDiameter').empty().attr('disabled','disabled');
    $('#boxDimensions:visible').slideUp(200, function(){ $(this).find('tbody').empty(); });
}