$(document).ready(function(){
    $("#unit_5x5").hover(
        function () {
            showUnitDiagram("5x5");
        }, 
        function () {
            hideUnitDiagram("5x5");
        }
    );
    
    $("#unit_5x10").hover(
        function () {
            showUnitDiagram("5x10");
        }, 
        function () {
            hideUnitDiagram("5x10");
        }
    );
    
    $("#unit_75x10").hover(
        function () {
            showUnitDiagram("75x10");
        }, 
        function () {
            hideUnitDiagram("75x10");
        }
    );
    
    $("#unit_10x10").hover(
        function () {
            showUnitDiagram("10x10");
        }, 
        function () {
            hideUnitDiagram("10x10");
        }
    );
    
    $("#unit_10x15").hover(
        function () {
            showUnitDiagram("10x15");
        }, 
        function () {
            hideUnitDiagram("10x15");
        }
    );
    
    $("#unit_15x15").hover(
        function () {
            showUnitDiagram("15x15");
        }, 
        function () {
            hideUnitDiagram("15x15");
        }
    );
    
    $("#unit_10x20").hover(
        function () {
            showUnitDiagram("10x20");
        }, 
        function () {
            hideUnitDiagram("10x20");
        }
    );
    
    $("#unit_10x25").hover(
        function () {
            showUnitDiagram("10x25");
        }, 
        function () {
            hideUnitDiagram("10x25");
        }
    );
    
    $("#unit_10x30").hover(
        function () {
            showUnitDiagram("10x30");
        }, 
        function () {
            hideUnitDiagram("10x30");
        }
    );
    
    function showUnitDiagram(size) {
        $("#ddlUnits").selectOptions(size);
        $("#desc_" + size).show();
        $("#diagram_" + size).show();
        $("#selectUnitSize").hide();
        $("#unit_" + size).css({ "background-color":"#D9DEE4" });

    }
    
    function hideUnitDiagram(size) {
        hideAll();
        $("#selectUnitSize").show();
        $("#unit_" + size).css({ "background-color":"transparent" });
        $("#ddlUnits").selectOptions("");
    }
    
    function hideAll() {
        $("#diagram_5x5, #diagram_5x10, #diagram_75x10, #diagram_10x10, #diagram_10x15, #diagram_10x20, #diagram_15x15, #diagram_10x25, #diagram_10x30").hide();
        $("#desc_5x5, #desc_5x10, #desc_75x10, #desc_10x10, #desc_10x15, #desc_10x20, #desc_15x15, #desc_10x25, #desc_10x30").hide();
        $("#unit_5x5, #unit_5x10, #unit_75x10, #unit_10x10, #unit_10x15, #unit_10x20, #unit_15x15, #unit_10x25, #desc_10x30").css({ "background-color":"transparent" });
    }
    
    $("#ddlUnits").change(function()
        {
            if ($(this).val() != ""){
                hideAll();
                showUnitDiagram($(this).val());
            }
            else {
                hideAll();
                $("#selectUnitSize").show();
                $("#unit_" + $(this).val()).css({ "background-color":"transparent" });
            }
        }
    )
});